<!--
 * @Descripttion: (客户收货地址/tb_customer_address 详情弹窗)
 * @version: (1.0)
 * @Author: (admin)
 * @Date: (2023-06-05)
 * @LastEditors: (admin)
 * @LastEditTime: (2023-06-05)
-->
<template>
  <el-dialog v-model="props.modelValue" title="客户收货地址信息详情" width="900px" @closed="closeDialog" @open="openDialog">
    <el-form ref="formRef" :model="formData" :disabled="true">

        <el-row>
          <el-col :lg="12">
            <el-form-item :label-width="labelWidth" label="客户" prop="customerNickname">
              <div>{{ formData.customerName }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :lg="12">
            <el-form-item :label-width="labelWidth" label="所在地区" prop="region">
              <el-cascader class="w100" :options="dataList"
                :props="{ checkStrictly: false, value: 'regionId', label: 'regionName', emitPath: true }"
                clearable v-model="region[2]" @change="handleCascaderChange">
                <template #default="{ node, data }">
                  <span>{{ data.regionName }}</span>
                  <!-- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> -->
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">

          <el-col :lg="12">
            <el-form-item :label-width="labelWidth" label="收货人名称" prop="customerAddressName">
              <el-input v-model="formData.customerAddressName"  />
            </el-form-item>
          </el-col>

          <el-col :lg="12">
            <el-form-item :label-width="labelWidth" label="收货电话" prop="customerAddressPhone">
              <el-input v-model="formData.customerAddressPhone"  />
            </el-form-item>
          </el-col>

          <el-col :lg="24">
            <el-form-item :label-width="labelWidth" label="详细地址" prop="customerAddressDetailed">
              <el-input v-model="formData.customerAddressDetailed" type="textarea" :rows="5"  />
            </el-form-item>
          </el-col>

        </el-row>

    </el-form>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from "vue";
import { regionTreeList } from '@/api/business/Custom/Regions/region.js';


// 打开弹窗时回调
const openDialog = async () => {
  await getTreeList()

  region.value.push(formData.value.customerAddressProvinceId)
  region.value.push(formData.value.customerAddressCityId)
  region.value.push(formData.value.customerAddressAreaId)
}

const formData = ref({
  ...props.data,
});
watch(props, async (v) => {
  formData.value = v.data;
});

// -业务参数
const region = ref([])
const dataList = ref([])

// -业务方法

// 获取省市区数据
async function getTreeList() {
  regionTreeList().then((res) => {
    if (res.code == 200) {
      dataList.value = res.data
    }
  })
}

// 处理所在地区，省市区传值
function handleCascaderChange(selectedValues) {
  formData.value.customerAddressProvinceId = selectedValues[0]
  formData.value.customerAddressCityId = selectedValues[1]
  formData.value.customerAddressAreaId = selectedValues[2]
}


// 基础参数
const formRef = ref();
const labelWidth = 100;
const { proxy } = getCurrentInstance()
const props = defineProps({
  modelValue: Boolean,
  data: Object,
  done: Function,
});
const emits = defineEmits(["update:modelValue"]);


// -基础方法
const closeDialog = () => {
  emits("update:modelValue", false);
};

</script>
