<template>
  <div class="pd20">
    <div class="d-form-border" style="margin-top: 0">
      <el-form class="d-form" size="large" :model="form"  ref="registerRef" :rules="registerRules" label-width="120"
               :label-position="language==0?'left':'top'" style="max-width: 500px;margin: auto">
        <el-form-item :label="language==0?'用户名':'Account'">
          {{userName}}
        </el-form-item>
        <el-form-item :label="language==0?'所属国家/地区':'Country'" required>
          <el-select filterable v-model="form.countryId" :disabled="form.type!='4'">
            <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'详细地址':'Detailed Address'">
          <el-cascader v-if="form.countryId == 240"
                       v-model="form.regionId"
                       style="width: 100%;"
                       :options="regionsList"
                       :props="{ label:'text' }"
          />
          <el-input type="textarea" v-model="form.address" class="mt10" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'机构名称':'Team Name'" required prop="name">
          <el-input type="text" v-model="form.name" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'专业/业余':'Professional/Amateur'" prop="majorFlag">
          <el-select v-model="form.majorFlag">
            <el-option :label="language==0?'专业':'Professional'" value="1" />
            <el-option :label="language==0?'业余':'Amateur'" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'团体类型':'Group type'" prop="type">
          <el-select :disabled="form.type=='4'" v-model="form.type" :placeholder="language==0?'请选择团体类型':''" style="width: 100%;">
            <el-option :label="language==0?'普通院校':'School'" value="0" />
            <el-option :label="language==0?'专业舞蹈学校':'Professional dance school'" value="1" />
            <el-option :label="language==0?'培训机构/俱乐部':'Company/Club'" value="2" />
            <el-option :label="language==0?'地方协会':'Local Association'" value="3" />
            <el-option :label="language==0?'国家协会':'National Association'" value="4" :disabled="form.type!='4'"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'联系人姓名':'Contact Person'" required prop="contactPerson">
          <el-input type="text" v-model="form.contactPerson" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系人电话':'Contact Phone'" required prop="contactTelno">
          <el-input v-model="form.contactTelno" type="phone" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系人邮箱':'Contact Email'" required prop="contactEmail">
          <el-input v-model="form.contactEmail" type="email" :placeholder="language==0?'请输入内容':''"/>
        </el-form-item>
        <el-form-item prop="imgUrl" :label="language==0?'机构Logo':'Group Logo'">
          <ImageUpload2
              v-model="form.imgUrl" :crop-height="200" :crop-width="200" :limit="1"
              :is-show-tip="false"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="text-center">
      <el-button type="primary" class="btn-lineG" round @click="save">{{ language==0?'确定修改':'Save' }}</el-button>
    </div>

  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'

const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/apiPc/match'
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
import _ from "lodash";
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const props = defineProps({
  form:{
    type:Object,
    required:true
  }
})
const countryList = ref([])
const regionsList = ref([])
const regionsArr = ref([])
const userName = ref('')
const registerRules = ref(
    {
      countryId: [{ required: true, trigger: 'blur', message: '请选择所属国家' },],
      // address: [{ required: true, trigger: 'blur', message: '请输入地址' },],
      name: [{ required: true, trigger: 'blur', message: '请输入' },],
      contactPerson: [{ required: true, trigger: 'blur', message: '请输入' },],
      contactTelno: [{ required: true, trigger: 'blur', message: '请输入' },],
      contactEmail: [{ required: true, trigger: 'blur', message: '请输入' },],
      // imgUrl: [{ required: true, trigger: 'blur', message: '请上传' },],
    })
onMounted(() => {
  getRegionsList()
  getCountryList()
  regionsArr.value = props.form.regionId
  userName.value = useUserStore().user.userName
})

function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}
function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}
function save() {
  proxy.$refs['registerRef'].validate((valid) => {
    if (valid) {
      if (typeof (props.form.regionId) === 'object') {
        props.form.regionId = _.last(props.form.regionId)
      }
      match.saveMyGroup(props.form).then(res => {

      })
    }
  })
}
</script>

<style scoped lang="scss">
.app-container {
  background: #F5F7F9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

.paddingRow{
  padding: 20px;
  .padding-10{
    padding: 10px;
      .matchItem{
      border: 1px solid #eee;
      background-color: #f5f7f9;
      overflow: hidden;
      padding: 10px;
      .leftImg {
        width: 100px;
        height: auto;
        border-radius: 4px;
        display: flex;
        justify-content: center;

        img{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
    }
  }
}


.memberList {
  ul {
    margin: 0 20px;
    display: flex;
    li{
      width: 60px;
      height: 20px;
      border-radius: 10px;
      background-color: #eee;
      text-align: center;
      margin-right: 20px;
      line-height: 20px;
      font-size: 14px;
      color: #000;
      cursor:pointer;

    }
     .active{
        color: #fff;
        background-color: #bf3031;
        opacity: 1;
      }
  }
}

.mTop{
  margin-top: 20px;
}
.bg{
  background-color: #FBFCFD ;
  border: 1px solid #eee;
  padding: 10px;
.flex{
  display: flex;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  .leftImg{
    width: 100px;
    display: flex;
    justify-content: center;
    margin-right: 20px;

    img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 0;
      margin: 0;
    }
  }
  .rightWen{
    .pp{
      .labe{
      font-size: 14px;
      color: #7B7F83;
    }
    }
  }
}
}
.bottomFunc{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  div{
    color:#05539E ;
    font-size: 14px;
    width: 100px;
    text-align: center;
  }
  span{
    color: #eee;
    font-size: 14px;
  }
}

// 人员管理
.teamSingle{
  background-color: #fff;
  padding: 20px;

  .flex{
    display: flex;
    margin-top: 20px;
    .leftIMg{
      width: 100px;
      height: 100px;
      margin-right: 20px;
      img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
  .rightContent{
    .rightTop{
      color: #000000;
      font-weight: 500;
      font-size: 18px;
    }
    .el-row{
      .el-col-12{
      font-weight: 400;
      color: #4C5359;
      font-size: 14px;
      padding: 5px 0;
        }
      }
    }

  }
 .name{
  height: 25px;
  line-height: 25px;
  display: flex;
  .tag-view{
    margin-left: 10px;
  }
 }
 .pp{
  font-size: 14px;
  font-weight: 400;
  margin: 5px 0;
  .labe{
    font-size: 14px;
    color: #7B7F83;
  }
 }
}

.m-height{
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

</style>