<!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <div class="dk">
    <BasicForm @register="registerForm">
      <template #ismanyLanduser="{ model, field }">
        <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
        <a-radio-group v-model:value="model[field]">
          <a-radio value="0">单一土地使用权人</a-radio>
          <a-radio value="1">多土地使用权人</a-radio>
          <a-button v-if="model[field] == 1" type="primary" @click="LandopenModal(true, '')">多土地使用权人管理</a-button>
        </a-radio-group>
      </template>
      <template #yntdsyr="{ model, field }">
        <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
        <a-radio-group v-model:value="model[field]">
          <a-radio value="0">单一土地使用权人</a-radio>
          <a-radio value="1">多土地使用权人</a-radio>
          <a-button v-if="model[field] == 1" type="primary" @click="openModal(true, '')">多土地使用权人管理</a-button>
        </a-radio-group>
      </template>
      <template #dkghytlx="{ model, field }">
        <a-radio-group
          v-model:value="model[field]"
          @change="
            model['dkghytxm'] = '';
            qt = '';
          "
        >
          <a-radio
            :style="{ marginRight: '300px', height: '30px', lineHeight: '30px' }"
            v-for="(item, index) in showRadioOptions"
            :key="index"
            :value="item.value"
          >
            <template v-if="item.value != '4'">
              {{ item.label }}
            </template>
            <template v-else>
              <div class="flex">
                <span class="mr-3"> {{ item.label }}</span>
                <span v-if="model['dkghytlx'] == '4'">
                  <a-input v-model:value="qt" />
                </span>
                <span v-else> <a-input v-model:value="qt" disabled="true" /> </span
              ></div>
            </template>
          </a-radio>
        </a-radio-group>
      </template>
      <template #dkydgh="{ model, field }">
        <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
        <div>
          <a-radio-group v-model:value="model[field]" :disabled="model['dkghytlx'] != 1">
            <a-radio
              :style="{ display: 'block', marginRight: '93px', height: '30px', lineHeight: '30px' }"
              v-for="(item, index) in plainOptions"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
          <a-radio-group v-model:value="model[field]" :disabled="model['dkghytlx'] != 2">
            <a-radio
              :style="{ display: 'block', marginRight: '93px', height: '30px', lineHeight: '30px' }"
              v-for="(item, index) in options"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
        </div>
      </template>
      <template #dyjddcqk="{ model, field }">
        <!-- 以逗号分隔：只要有一个选是，是否只进行调查第一阶段（只能选否，不可编辑） -->
        <template v-for="(v, index) in dcOption" :key="v.label">
          <div class="my-4" v-if="index != 6">
            <span class="inline-block w-120 bg-[#FBFBFB]">{{ v.label }}</span>
            <a-radio-group v-model:value="v.value" @change="changeDyjddcqk($event, index, model)">
              <a-radio value="1">是</a-radio>
              <a-radio value="0">否</a-radio>
            </a-radio-group>
          </div>
          <div v-else>
            <span class="inline-block w-120 bg-[#FBFBFB]">{{ v.label }}</span>
            <a-input
              v-model:value="model.dyjddcqk[index]"
              @input="changeDyjddcqk($event, index, model)"
              style="width: 50%"
              placeholder="如规模化养殖、现场快筛结果异常、严格管控类耕地等"
            />
          </div>
        </template>
      </template>
      <template #qdyy="{ model, field }">
        <a-checkbox-group v-model:value="model[field]" style="width: 100%">
          <a-checkbox value="1">生态环境部门责令调查</a-checkbox>
          <a-checkbox value="2">用于变更为住宅公共管理与公共服务用地</a-checkbox>
          <a-checkbox value="3">土壤污染重点监管单位用途变更</a-checkbox>
          <a-checkbox value="4">重点监管单位使用权转让收回</a-checkbox>
          <a-checkbox value="5">其他</a-checkbox>
          <a-input v-if="model[field].includes('5')" style="width: 30%" v-model:value="model['qyyyQt']" />
        </a-checkbox-group>
      </template>
    </BasicForm>
  </div>
  <tableModal :data="data?.wrdkjbxxb?.xrList" @register="registerLandModal" ref="childrenLand" />
  <tableModal :data="data?.wrdkjbxxb?.qrList" @register="registerModal" ref="childrenModal" />
</template>

<script lang="ts" setup>
  //引入依赖
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import tableModal from './tableModal.vue';
  import { useModal } from '/@/components/Modal';
  import { ref, watch, toRaw, nextTick } from 'vue';
  // import { dict } from '/@/api/common/api'
  const qt = ref('');
  const [registerModal, { openModal }] = useModal();
  const [registerLandModal, { openModal: LandopenModal }] = useModal();

  const props = defineProps({
    data: Object,
  });

  // Emits声明
  const emit = defineEmits(['getDyjddcqk', 'getMj']);

  const childrenModal = ref<any>(null);
  const childrenLand = ref<any>(null);
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: '土地使用权人类型',
      field: 'tdsyqrlx',
      required: true,
      component: 'Select',
      componentProps: ({ formModel, formActionType }) => {
        return {
          options: [
            {
              label: '土地使用权人（企业）',
              value: '1',
            },
            {
              label: '土地使用权人（自然人）',
              value: '2',
            },
            {
              label: '政府',
              value: '3',
            },
            {
              label: '其他',
              value: '4',
            },
          ],
          onChange: (v) => {
            // 触发-土地使用权人类型
            handleFormChange(v, 'tdsyqrlx');
          },
        };
      },
    },
    {
      label: '统一社会信用代码号',
      field: 'gsyyzzh',
      component: 'Input',
      ifShow: ({ values }) => {
        return values.tdsyqrlx == '4' ? false : true;
      },
    },
    {
      label: '企业名称',
      field: 'syqdwmc',
      component: 'Input',
      required: true,
      show: true,
    },
    {
      label: '取得土地使用权日期',
      field: 'qdHstdsqysj',
      component: 'DatePicker',
      ifShow: ({ values }) => {
        return values.tdsyqrlx == '4' ? false : true;
      },
      componentProps: {
        //日期格式化，页面上显示的值
        format: 'YYYY-MM-DD',
        //返回值格式化（绑定值的格式）
        valueFormat: 'YYYY-MM-DD',
        //是否显示今天按钮
        showToday: true,
      },
    },
    {
      label: '是否是多土地使用权人',
      field: 'ismanyLanduser',
      defaultValue: '0',
      component: 'RadioGroup',
      required: true,
      slot: 'ismanyLanduser',
      colProps: { span: 24 },
      componentProps: {
        options: [
          {
            label: '单一土地使用权人',
            value: '0',
          },
          {
            label: '多土地使用权人',
            value: '1',
          },
        ],
      },
    },
    {
      label: '前任土地使用权人类型',
      field: 'qrTdsyqrlx',
      component: 'Select',
      required: true,
      componentProps: ({ formModel, formActionType }) => {
        return {
          options: [
            {
              label: '土地使用权人（企业）',
              value: '1',
            },
            {
              label: '土地使用权人（自然人）',
              value: '2',
            },
            {
              label: '政府',
              value: '3',
            },
            {
              label: '其他',
              value: '4',
            },
          ],
          onChange: (v) => {
            const { updateSchema } = formActionType;
            if (v == 1) {
              updateSchema({
                label: '统一社会信用代码号',
                field: 'qrGsyyzzh',
              });
              updateSchema({
                label: '企业名称',
                field: 'qrTdsyqr',
                required: true,
                show: true,
              });
            } else if (v == 2) {
              updateSchema({
                label: '身份证号码',
                field: 'qrGsyyzzh',
              });
              updateSchema({
                label: '自热人姓名',
                field: 'qrTdsyqr',
                required: true,
                show: true,
              });
            } else if (v == 3) {
              updateSchema({
                label: '统一社会信用代码号',
                field: 'qrGsyyzzh',
              });
              updateSchema({
                label: '政府名称',
                field: 'qrTdsyqr',
                required: true,
              });
            } else if (v == 4) {
              updateSchema({
                label: '其他信息',
                field: 'qrGsyyzzh',
                show: false,
              });
              updateSchema({
                label: '政府名称',
                field: '其他信息',
                required: true,
                show: true,
              });
            }
          },
        };
      },
    },
    {
      label: '统一社会信用代码',
      field: 'qrGsyyzzh',
      component: 'Input',
      ifShow: ({ values }) => {
        return values.qrTdsyqrlx == '4' ? false : true;
      },
    },
    {
      label: '企业名称',
      field: 'qrTdsyqr',
      required: true,
      component: 'Input',
      show: true,
    },
    {
      label: '是否是多土地使用权人',
      field: 'isQrManyLanduser',
      defaultValue: '0',
      required: true,
      component: 'JDictSelectTag',
      slot: 'yntdsyr',
    },
    {
      label: '行业类别',
      field: 'hylb',
      component: 'Input',
      // colProps: { span: 23 },
      componentProps: {
        readonly: true,
      },
    },
    {
      label: '现状用地类型',
      field: 'xzydlx',
      component: 'RadioGroup',
      colProps: { span: 24 },
      required: true,
      defaultValue: '1',
      componentProps: {
        options: [
          { value: '1', label: '建设用地' },
          { value: '2', label: '农用地' },
          { value: '3', label: '未利用地' },
        ],
      },
    },
    {
      label: '地块位置',
      field: 'wrdkdz',
      required: true,
      component: 'Input',
    },
    {
      label: '地块占地面积(m2)',
      field: 'zdmj',
      component: 'Input',
      required: true,
      rules: [{ required: false, message: '限制占地面积为数字最多两位小数', pattern: /^[0-9]+(.[0-9]{1,2})?$/ }],
      componentProps: ({ formModel, formActionType }) => {
        return {
          onchange: () => {
            emit('getMj', formModel.zdmj);
          },
        };
      },
    },
    {
      label: '坐标系说明',
      field: 'zbsm',
      defaultValue: 'CGCS2000',
      component: 'Input',
      colProps: { span: 7 },
      componentProps: {
        readonly: true,
      },
    },
    {
      label: '中心经度',
      field: 'wrdkzxjd',
      component: 'InputNumber',
      colProps: { span: 8 },
      required: true,
      dynamicRules: () => {
        return [{ pattern: /^-?(180(\.(\d{5}))|((1[0-7]|[1-9])?\d(\.\d{5})))$/, message: '中心经度格式有误', required: true }];
      },
    },
    {
      label: '中心纬度',
      field: 'wrdkzxwd',
      component: 'InputNumber',
      required: true,
      colProps: { span: 8 },
      dynamicRules: () => {
        return [{ pattern: /^-?(180(\.(\d{5}))|((1[0-7]|[1-9])?\d(\.\d{5})))$/, message: '中心经度格式有误', required: true }];
      },
    },
    {
      label: '法定代表人',
      field: 'frdb',
      required: true,
      component: 'Input',
    },
    {
      label: '联系人',
      field: 'syqdwxr',
      component: 'Input',
      required: true,
    },
    {
      label: '电话',
      field: 'syqdwlxdh',
      required: true,
      component: 'Input',
      dynamicRules: () => {
        return [{ pattern: /^(\d{3}-\d{8}|\d{4}-\d{7}|\d{11})$/, message: '电话格式有误', required: true }];
      },
    },
    {
      label: '邮编',
      field: 'yzbm',
      required: true,
      component: 'InputNumber',
      dynamicRules: ({ model, schema }) => {
        return [{ pattern: /^[0-9]\d{5}$/, message: '邮编格式有误' }];
      },
    },
    {
      label: '地块四至范围',
      field: 'dkszfw',
      required: true,
      component: 'Input',
      // colProps: { span: 23.5 },
    },
    {
      label: '启动缘由',
      field: 'qdyy',
      required: true,
      defaultValue: [],
      component: 'Input',
      colProps: { span: 24 },
      slot: 'qdyy',
    },
    {
      label: '其他',
      field: 'qyyyQt',
      show: false,
      component: 'Input',
    },
    {
      label: '地块规划用途',
      field: 'dkghytlx',
      defaultValue: '1',
      required: true,
      component: 'JDictSelectTag',
      colProps: { span: 24 },
      slot: 'dkghytlx',
    },
    {
      label: ' ',
      field: 'dkghytxm',
      component: 'JDictSelectTag',
      colProps: { span: 24 },
      labelWidth: 20,
      slot: 'dkydgh',
    },
    {
      label: '第一调查阶段情况',
      field: 'dyjddcqk',
      component: 'JDictSelectTag',
      defaultValue: [],
      colProps: { span: 24 },
      show: () => {
        return props?.data?.wrdkjbxxb?.isnyd2yzlg == 1 || props?.data?.wrdkjbxxb?.iswlyd2yzlg == 1 ? true : false;
      },
      slot: 'dyjddcqk',
    },
  ];
  // 第一阶段调查
  const dcOption = ref([
    {
      label: '1.历史上是否涉及工矿用途（活动）',
      value: '0',
    },
    {
      label: '2.历史上是否涉及环境污染事故、危废或有污染风险的固废堆放或填埋',
      value: '0',
    },
    {
      label: '3.历史上地块周边是否存在可能的污染源',
      value: '0',
    },
    {
      label: '4.历史上是否涉及工业废水污染或污水灌溉',
      value: '0',
    },
    {
      label: '5.现场是否存在可能造成土壤污染的活动或迹象',
      value: '0',
    },
    {
      label: '6.是否属于严格管控类耕地',
      value: '0',
    },
    {
      label: '7.存在其他污染情形（如规模化养殖、现场快筛结果异常等）',
      value: ' ',
    },
  ]);
  // 一类用地
  let showRadioOptions = [
    { label: '一类用地', value: '1' },
    { label: '二类用地', value: '2' },
  ];
  let plainOptions = [
    { label: '居住用地(R)', value: '居住用地(R)' },
    { label: '公共管理与公共服务用地中的中小学用地(A33)', value: '公共管理与公共服务用地中的中小学用地(A33)' },
    { label: '医疗卫生用地(A5)', value: '医疗卫生用地(A5)' },
    { label: '社会福利设施用地(A6)', value: '社会福利设施用地(A6)' },
  ];
  let options = [{ label: '公共管理与公共服务用地(A)(A33,A5,A6除外)', value: '公共管理与公共服务用地(A)(A33,A5,A6除外)' }];

  function modyyd2y(v) {
    if (v.isnyd2yzlg == 1 || v.iswlyd2yzlg == 1) {
      showRadioOptions = [
        { label: '一类用地', value: '1' },
        { label: '二类用地', value: '2' },
      ];
      plainOptions = [
        { label: '居住用地(R)', value: '居住用地(R)' },
        { label: '公共管理与公共服务用地中的中小学用地(A33)', value: '公共管理与公共服务用地中的中小学用地(A33)' },
        { label: '医疗卫生用地(A5)', value: '医疗卫生用地(A5)' },
        { label: '社会福利设施用地(A6)', value: '社会福利设施用地(A6)' },
      ];
      options = [{ label: '公共管理与公共服务用地(A)(A33,A5,A6除外)', value: '公共管理与公共服务用地(A)(A33,A5,A6除外)' }];
    } else {
      showRadioOptions = [
        { label: '一类用地', value: '1' },
        { label: '二类用地', value: '2' },
        { label: '无规划', value: '3' },
        { label: '其他', value: '4' },
      ];
      plainOptions = [
        { label: '居住用地(R)', value: '居住用地(R)' },
        { label: '公共管理与公共服务用地中的中小学用地(A33)', value: '公共管理与公共服务用地中的中小学用地(A33)' },
        { label: '医疗卫生用地(A5)', value: '医疗卫生用地(A5)' },
        { label: '社会福利设施用地(A6)', value: '社会福利设施用地(A6)' },
        { label: '公园绿地中的社区公园(G1)', value: '公园绿地中的社区公园(G1)' },
        { label: '公园绿地中的儿童公园(G1)', value: '公园绿地中的儿童公园(G1)' },
      ];
      options = [
        { label: '工业用地(M)', value: '工业用地(M)' },
        { label: '物流仓用地(W)', value: '物流仓用地(W)' },
        { label: '商业服务业设施用地(B)', value: '商业服务业设施用地(B)' },
        { label: '道路与交通设施用地(S)', value: '道路与交通设施用地(S)' },
        { label: '公用设施用地(U)', value: '公用设施用地(U)' },
        { label: '公共管理与公共服务用地(A)(A33,A5,A6除外)', value: '公共管理与公共服务用地(A)(A33,A5,A6除外)' },
        { label: '绿地与广场用地(G)(G1中的社区公园和儿童公园除外)', value: '绿地与广场用地(G)(G1中的社区公园和儿童公园除外)' },
      ];
    }
  }

  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, validate }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //不显示查询和重置按钮
    showActionButtonGroup: false,
    //默认row行配置,当 layout 为 horizontal 生效
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '150px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  // 表达赋值

  watch(
    () => props.data,
    async (val: any) => {
      modyyd2y(val.wrdkjbxxb);
      const obj = toRaw(val.wrdkjbxxb);
      if (!obj.xzydlx) obj.xzydlx = '1';
      if (!obj.dkghytlx) obj.dkghytlx = '1';
      if (obj.dkghytlx == 4) {
        qt.value = obj.dkghytxm;
        obj.dkghytxm = '';
      }
      if (!obj.zbsm) obj.zbsm = 'CGCS2000';
      if (!obj.qdyy) obj.qdyy = [];
      // 触发-土地使用权人类型
      handleFormChange(obj.tdsyqrlx, 'tdsyqrlx');

      emit('getDyjddcqk', obj.dyjddcqk);
      if (obj.dyjddcqk) {
        const arr = obj.dyjddcqk.split(',');
        dcOption.value.forEach((v, index) => {
          v.value = arr[index];
        });
        obj.dyjddcqk = arr;
      } else {
        obj.dyjddcqk = [];
      }
      await nextTick();
      await setFieldsValue({
        ...obj,
      });
    },
    { deep: true, immediate: true }
  );
  // 点击第一调查阶段
  function changeDyjddcqk(e, index, model) {
    model.dyjddcqk[index] = e.target.value;
    setFieldsValue(model.dyjddcqk.join(','));
    emit('getDyjddcqk', model.dyjddcqk.join(','));
  }

  // 获取子组件 列表
  async function getFormValue() {
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();

    if (fieldsValue.ismanyLanduser == 1) {
      fieldsValue.xrList = await childrenLand?.value.save();
    }
    if (fieldsValue.isQrManyLanduser == 1) {
      fieldsValue.qrList = await childrenModal?.value.save();
    }

    if (props?.data?.wrdkjbxxb?.isnyd2yzlg == 1) {
      fieldsValue.dyjddcqk = [];
      console.log(dcOption.value, 'dcOption.value');
      dcOption.value.forEach((v) => {
        fieldsValue.dyjddcqk.push(v.value);
      });
      fieldsValue.dyjddcqk = fieldsValue.dyjddcqk.join(',');
    }
    if (fieldsValue.dkghytlx == 4) {
      fieldsValue.dkghytxm = qt.value;
    }

    return fieldsValue;
  }

  function handleFormChange(v, type) {
    console.log(v, type);
    if (type === 'tdsyqrlx') {
      if (v == 1) {
        updateSchema({
          label: '统一社会信用代码号',
          field: 'gsyyzzh',
          show: true,
        });
        updateSchema({
          label: '企业名称',
          field: 'syqdwmc',
          required: true,
          show: true,
        });
        updateSchema({
          field: 'qdHstdsqysj',
          required: true,
          show: true,
        });
      } else if (v == 2) {
        updateSchema({
          label: '身份证号码',
          field: 'gsyyzzh',
          show: true,
        });
        updateSchema({
          label: '自然人姓名',
          field: 'syqdwmc',
          required: true,
          show: true,
        });
        updateSchema({
          field: 'qdHstdsqysj',
          required: true,
          show: true,
        });
      } else if (v == 3) {
        updateSchema({
          label: '统一社会信用代码号',
          field: 'gsyyzzh',
          show: true,
        });
        updateSchema({
          label: '政府名称',
          field: 'syqdwmc',
          required: true,
          show: true,
        });
        updateSchema({
          field: 'qdHstdsqysj',
          required: true,
          show: true,
        });
        updateSchema({
          field: 'qdHstdsqysj',
          required: true,
          show: true,
        });
      } else if (v == 4) {
        updateSchema({
          label: '其他信息',
          field: 'gsyyzzh',
          show: false,
        });
        updateSchema({
          label: '其他信息',
          field: 'syqdwmc',
          required: true,
          show: true,
        });
        updateSchema({
          field: 'qdHstdsqysj',
          show: false,
          required: false,
        });
      }
    }
  }
  // 通过ref必须把在父组件里面的方法导出
  defineExpose({
    getFormValue,
  });
</script>

<style scoped lang="less">
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-picker) {
    width: 100%;
  }

  /* :deep(.ant-radio-wrapper) {
    width: 120px;
    text-align: left;
} */
</style>
<style lang="less">
  .dk {
    .ant-row-middle {
      > div {
        &:nth-last-child(2) {
          .ant-form-item-label {
            background-color: #fff;
            border: 0;
          }

          .ant-form-item-label > label::after {
            content: '' !important;
          }
        }
      }
    }
  }
</style>
