<!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm">
    <template #gstype="{ model, field }">
      <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
      <a-radio-group v-model:value="model[field]" style="display: flex;">
        <a-radio
          value="1"
          :style="{ height: '30px', lineHeight: '30px', width: '180px' }"
          @change="
            gc = '';
            qt = '';
          "
          >制度管控</a-radio
        >
        <a-radio value="2" :style="{ height: '30px', lineHeight: '30px', width: '260px' }" @change="qt = ''"> 工程管控 </a-radio>
        <a-radio-group v-if="model[field] == 2" v-model:value="gcgklx" name="radioGroup">
          <a-radio value="阻隔">阻隔</a-radio>
          <a-checkbox-group v-model:value="model['zglx']" v-if="gcgklx=='阻隔'">
            <a-checkbox value="土壤">土壤</a-checkbox>
            <a-checkbox value="地下水">地下水</a-checkbox>
          </a-checkbox-group>
          <a-radio value="其他">其他</a-radio>
        </a-radio-group>
        <a-input v-if="model[field] == 2" :disabled="gcgklx == '其他' ? false : true" v-model:value="gc" placeholder="请输入信息" style="width: 20%" />

        <a-radio value="3" :style="{ height: '30px', lineHeight: '30px', width: '230px' }" @change="gc = ''">其它措施</a-radio>
        <a-input v-model:value="qt" placeholder="请输入信息" :disabled="model[field] != 3" style="width: 20%" />
      </a-radio-group>
    </template>
  </BasicForm>
</template>

<script lang="ts" setup>
  //引入依赖
  import { ref, nextTick, watch, toRaw } from 'vue';
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';

  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    data: {
      type: Object,
      default: {},
    },
  });
  const gc = ref('');
  const qt = ref('');
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: 'id',
      field: 'id',
      component: 'Input',
      show: false,
    },
    {
      label: '管控措施其他',
      field: 'gkcsQt',
      component: 'Input',
      show: false,
    },
    {
      label: '阻隔类型',
      field: 'zglx',
      component: 'Input',
      show: false,
    },
    {
      label: '',
      field: 'qygd',
      component: 'Input',
      show: false,
    },
    {
      label: '',
      field: 'qygdFile',
      component: 'Input',
      show: false,
    },
    {
      label: '',
      field: 'qyshp',
      component: 'Input',
      show: false,
    },
    {
      label: '',
      field: 'qyshpgeo',
      component: 'Input',
      show: false,
    },
    {
      label: '管控措施',
      field: 'gkcs',
      colProps: { span: 24 },
      component: 'Input',
      required: true,
      slot: 'gstype',
    },
    {
      label: '开展风险管控土壤面积(m²)',
      field: 'kzfxgktrmj',
      required: true,
      component: 'InputNumber',
    },
    {
      label: '是否需要后期管理',
      field: 'sfxyhqgl',
      required: true,
      component: 'RadioGroup',
      componentProps: {
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
      },
    },
  ];
  const gcgklx = ref('');
  const [registerForm, { getFieldsValue, setFieldsValue, validate }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //不显示查询和重置按钮
    showActionButtonGroup: false,
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '250px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  watch(
    () => props.data,
    async (val: any) => {
      val &&
        nextTick(async () => {
          const obj = toRaw(val);
          if (obj.gkcs == 1) {
            gc.value = obj.gkcsQt;
          } else if (obj.gkcs == 2) {
            gc.value = obj.gkcsQt;
            if (obj.gkcsQt == '阻隔') {
              gcgklx.value = obj.gkcsQt;
              gc.value = '';
            } else {
              gcgklx.value = '其他';
              gc.value = obj.gkcsQt;
            }
          } else if (obj.gkcs == 3) {
            qt.value = obj.gkcsQt;
          }
          await setFieldsValue({
            ...obj,
          });
        });
    },
    { deep: true, immediate: true }
  );
  // 获取子组件 列表
  async function getFormValueGKxx() {
    console.log('子组件执行');
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();

    if (fieldsValue.gkcs == 1) {
      fieldsValue.gkcsQt = '';
    } else if (fieldsValue.gkcs == 2) {
      if (gcgklx.value == '其他') {
        fieldsValue.gkcsQt = gc.value;
      } else fieldsValue.gkcsQt = gcgklx.value;
    } else if (fieldsValue.gkcs == 3) {
      fieldsValue.gkcsQt = qt.value;
    }

    if (fieldsValue.gkcsQt !='阻隔') {
      fieldsValue.zglx = '';
      fieldsValue.qygd = '';
      fieldsValue.qygdFile = '';
      fieldsValue.qyshp = '';
      fieldsValue.qyshpgeo = '';
      // fieldsValue.gdFile = '';
    }
    return fieldsValue;
  }

  // 通过ref必须把在父组件里面的方法导出
  defineExpose({
    getFormValueGKxx,
  });
</script>

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

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

  /* :deep(.ant-radio-wrapper) {
    width: 120px;
    text-align: left;
} */
</style>
