<script setup name="operatorDialog">
import { ref, watch, getCurrentInstance } from 'vue'
// import { list as regionList } from '@/http/apis/systemManage/regionManage'

const { proxy } = getCurrentInstance(),
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  })
const emits = defineEmits(['close']),
  regionOptions = ref([]),
  formRef = ref(),
  form = ref({
    name: undefined,
    operatorRegionHeads: [
      {
        key: new Date().getTime(),
        regionalHead: undefined,
        regionId: undefined,
        mobile: undefined
      }
    ],
    remark: undefined
  }),
  rules = {
    name: [{ required: true, message: '请输入运营商名称', trigger: 'blur' }]
  },
  addRow = () => {
    form.value.operatorRegionHeads.push({
      key: new Date().getTime(),
      regionalHead: undefined,
      regionId: undefined,
      mobile: undefined
    })
  },
  delRow = index => {
    if (form.value.operatorRegionHeads.length > 1) {
      form.value.operatorRegionHeads.splice(index, 1)
    }
  },
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        // const postData = {
        //   ...form.value
        // }
        if (props.data && props.data.id) {
          // await edit(postData)
          proxy.$message.success('编辑成功！')
        } else {
          // await add(postData)
          proxy.$message.success('新增成功！')
        }
        emits('close', true)
      }
    })
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      // regionOptions.value = (await regionList()).data
      // if (props.data && props.data.id) {
      //   const res = await detail({ id: props.data.id })
      //   form.value = {
      //     ...res.data
      //   }
      // }
    } else {
      formRef.value.resetFields()
      form.value.operatorRegionHeads = [
        {
          key: new Date().getTime(),
          regionalHead: undefined,
          regionId: undefined,
          mobile: undefined
        }
      ]
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    :title="`${data && data.id ? '编辑' : '新增'}运营商`"
    width="840px"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-suffix=":"
    >
      <el-form-item label="运营商名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <div class="region">
        <div
          v-for="(item, index) in form.operatorRegionHeads"
          :key="item.key"
          class="flex"
        >
          <div class="mr-16 flex-1">
            <el-row :gutter="14">
              <el-col :span="8">
                <el-form-item
                  label="区域"
                  :prop="`operatorRegionHeads[${index}].regionId`"
                  :rules="[
                    { required: true, message: '请选择区域', trigger: 'change' }
                  ]"
                >
                  <el-tree-select
                    v-model="item.regionId"
                    :data="regionOptions"
                    filterable
                    :props="{ label: 'name', value: 'id' }"
                    check-strictly
                    :render-after-expand="false"
                    class="w-full"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="区域负责人"
                  :prop="`operatorRegionHeads[${index}].regionalHead`"
                  :rules="[
                    {
                      required: true,
                      message: '请输入区域负责人',
                      trigger: 'change'
                    }
                  ]"
                >
                  <el-input v-model="item.regionalHead" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="联系电话"
                  :prop="`operatorRegionHeads[${index}].mobile`"
                  :rules="[
                    {
                      required: true,
                      pattern: /^1[3456789]\d{9}$/,
                      message: '联系电话格式不正确',
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-input
                    v-model="item.mobile"
                    maxlength="11"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <a class="text-danger" @click="delRow(index)">删除</a>
        </div>
        <el-button
          type="primary"
          class="w-full"
          plain
          icon="Plus"
          @click="addRow"
        >
          增加区域负责人
        </el-button>
      </div>
      <el-form-item label="备注" prop="remark" label-width="97px">
        <el-input
          v-model="form.remark"
          maxlength="200"
          show-word-limit
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)">
        提交
      </el-button>
      <el-button @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
<style lang="less" scoped>
.region {
  background: rgba(27, 113, 227, 0.04);
  padding: 18px 12px;
  overflow: hidden;
  margin-bottom: 18px;
}
</style>
