<template>
  <el-dialog v-model="show" :title="title">
    <div>
      <el-form ref="formRef" :model="formData" label-width="110px" :rules="rules">
        <el-form-item label="logo" required prop="imgUrl">
          <ImageUpload2 v-model="formData.imgUrl" :limit="1" class="bili43" :crop-width="400" :crop-height="300" />
        </el-form-item>
        <el-form-item label="参赛队名称" required prop="name">
          <el-input v-model="formData.name" placeholder="请输入参赛队名称" />
        </el-form-item>
        <el-form-item label="参赛队简称" required prop="abreviations">
          <el-input v-model="formData.abreviations" placeholder="请输入参赛队简称" />
        </el-form-item>

        <el-form-item label="参赛队类型" required prop="type">
          <el-select v-model="formData.type" class="m-2" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item v-if="formData.type==3" label="企业性质" prop="ctype">-->
        <!--          <el-select v-model="formData.ctype" placeholder="请选择企业性质" style="width: 100%;">-->
        <!--            <el-option label="国资企业（含央企和本地）" value="0" />-->
        <!--            <el-option label="外商投资企业" value="1" />-->
        <!--            <el-option label="港澳台企业" value="2" />-->
        <!--            <el-option label="民营企业" value="3" />-->
        <!--            <el-option label="商会组织" value="4" />-->
        <!--            <el-option label="其他" value="5" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="联系人" required prop="contactPerson">
          <el-input v-model="formData.contactPerson" placeholder="请输入联系人姓名" />
        </el-form-item>
        <el-form-item label="联系方式" required prop="contactTelno">
          <el-input v-model="formData.contactTelno" placeholder="请输入联系方式" />
        </el-form-item>

        <el-form-item label="所在地区" required prop="regionId">
          <el-cascader
            v-model="formData.regionId"
            style="width: 100%;"
            :options="regionsList"
            :props="{ label:'text' }"
          />
        </el-form-item>
        <el-form-item label="详细地址" required prop="address">
          <el-input v-model="formData.address" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer" style="text-align: center;">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="saveGroup">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, toRefs, watch } from 'vue'
import { getCurrentInstance, nextTick, onMounted } from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import _ from 'lodash'


const emit = defineEmits(['submitForm'])
const { proxy } = getCurrentInstance()

const data = reactive({
  show: false,
  title: '',
  formData: {},
  typeList: [
    { text: '俱乐部', value: '0' },
    { text: '事业单位', value: '1' },
    { text: '道馆', value: '2' },
    { text: '企业', value: '3' },
    { text: '机关', value: '4' },
    { text: '其他', value: '5' }
  ],
  regionsList: [],
  rules: {
    imgUrl: [{ required: true, message: '必填' }],
    name: [{ required: true, message: '必填', trigger: 'blur' }],
    abreviations: [{ required: true, message: '必填', trigger: 'blur' }],
    type: [{ required: true, message: '必填' }],
    ctype: [{ required: true, message: '必填' }],
    contactPerson: [{ required: true, message: '必填', trigger: 'blur' }],
    contactTelno: [{ required: true, message: '必填', trigger: 'blur' }],
    regionId: [{ required: true, message: '必填' }],
    address: [{ required: true, message: '必填', trigger: 'blur' }]
  }
})
const { show, title, formData, typeList, regionsList, rules } = toRefs(data)


onMounted(() => {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
})

watch(show, (value) => {
  if (!value) {
    formData.value = {}
  }
  nextTick(() => {
    proxy.$refs['formRef'].clearValidate()
  })
})

const saveGroup = () => {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      if (typeof (formData.value.regionId) === 'object') {
        formData.value.regionId = _.last(formData.value.regionId)
      }
      match.saveMyGroup(formData.value).then(res => {
        // groupId.value = res.data
        show.value = false
        emit('submitForm')
      })
    }
  })
}

const open = (params) => {
  show.value = true
  title.value = params.title || '编辑参赛队'
  formData.value = _.cloneDeep(params.data || {})
}

defineExpose({
  open
})

</script>

<style scoped lang="scss">
.bili43{
:deep(.fileItem) {
  width: 200px;
  height: 150px;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 200px;
  height: 150px;
}
}
</style>