<template>
  <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
    <el-form-item label="项目名称" prop="name">
      <el-input v-model.trim="formData.name" placeholder="输入项目名称" />
    </el-form-item>
    <el-form-item label="地区" prop="addressCode">
      <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" placeholder="请选择" clearable class="w100" v-model="formData.addressCode">
      </el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" prop="addressDetail">
      <el-input v-model.trim="formData.addressDetail" placeholder="输入详细地址" />
    </el-form-item>
    <el-form-item label="渠道商" prop="channelMerchants">
      <el-input v-model.trim="formData.channelMerchants" placeholder="输入渠道商" />
    </el-form-item>
    <el-form-item label="关键客户" prop="customName">
      <el-input v-model.trim="formData.customName" placeholder="输入客户名称" />
    </el-form-item>
    <el-form-item label="维修公司" prop="repairCompany">
      <el-input v-model.trim="formData.repairCompany" placeholder="输入维修公司" />
    </el-form-item>
    <el-form-item label="维修电话" prop="repairMobile">
      <el-input v-model.trim="formData.repairMobile" placeholder="输入维修电话" />
    </el-form-item>
    <el-form-item label="" prop="">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import api from '/@/api/projects';
import { ruleRequired } from '/@/utils/validator';
import { ElMessage } from 'element-plus';
import data from 'province-city-china/dist/level.json'

const emit = defineEmits(['getList', 'cancel']);

const showDialog = ref(false);
const formRef = ref();

// 从省市区的的树形结构中获取省市区名称
function getNames(code: string) {
  const provinceItem = data.find((item: any) => item.province === code.substring(0, 2))
  const provinceName = provinceItem.name
  const cityItem = provinceItem.children.find((item: any) => item.city === code.substring(2, 4))
  const cityName = cityItem.name

  if (!cityItem.children) {
    const areaItem = provinceItem.children.find((item: any) => item.area === code.substring(4, 6))
    const areaName = areaItem.name
    return `${provinceName}/${areaName}`

  } else {
    const areaItem = cityItem.children.find((item: any) => item.area === code.substring(4, 6))
    const areaName = areaItem.name
    return `${provinceName}/${cityName}/${areaName}`
  }
}

const baseForm = {
  id: undefined,
  address: '',
  addressCode: [],
  name: '',
  addressDetail: '',
  channelMerchants: '',
  customName: '',
  repairCompany: '',
  repairMobile: '',
};

const formData = reactive({
  ...baseForm,
});

const ruleForm = {
  name: [ruleRequired('不能为空')],
  addressCode: [ruleRequired('不能为空')],
  addressDetail: [ruleRequired('不能为空')],
  channelMerchants: [ruleRequired('不能为空')],
  customName: [ruleRequired('不能为空')],
  repairCompany: [ruleRequired('不能为空')],
  repairMobile: [ruleRequired('不能为空')],
};

const onSubmit = async () => {
  await formRef.value.validate();

  const { addressCode } = formData;
  formData.address = JSON.stringify({
    name: getNames(addressCode[2] || addressCode[1]),
    code: addressCode
  })

  const theApi = formData.id ? api.edit : api.add;

  await theApi(formData);

  ElMessage.success('操作成功');
  // resetForm();
  showDialog.value = false;
  emit('getList');
};

const resetForm = async () => {
  Object.assign(formData, { ...baseForm });
  formRef.value && formRef.value.resetFields();
};

const cancel = () => {
  emit('cancel');
};

const open = async (row?: any) => {
  resetForm();
  showDialog.value = true;
  nextTick(() => {
    Object.assign(formData, { ...row, addressCode: JSON.parse(row.address)?.code });
  });
};

defineExpose({ open });
</script>
