<!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm">
    <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
    <template #gkcs="{ model, field }">
      <a-radio-group v-model:value="model[field]" style="display: flex">
        <a-radio value="1" :style="{ height: '30px', lineHeight: '30px', width: '100px' }">制度管控</a-radio>
        <a-radio value="2" :style="{ height: '30px', lineHeight: '30px', width: '100px' }">工程管控</a-radio>
        <div v-if="model[field] == 2" style="width:700px;">
          <a-checkbox-group v-model:value="model['checkboxValue']" name="checkboxgroup">
            <a-checkbox value="阻隔">阻隔</a-checkbox>
            <a-checkbox-group v-model:value="model['zglx']" v-if="model['checkboxValue']?.indexOf('阻隔')>-1">
              <a-checkbox value="土壤">土壤</a-checkbox>
              <a-checkbox value="地下水">地下水</a-checkbox>
            </a-checkbox-group>
            <a-checkbox value="其他">其他</a-checkbox>
          </a-checkbox-group>
          <a-input v-model:value="model['checkboxInputValue']" :disabled="model['checkboxValue']?.indexOf('其他')>-1?false:true" style="width: 50%" />
        </div>
        <a-radio value="3" :style="{ height: '30px', lineHeight: '30px', width: '100px' }">其他措施</a-radio>
        <a-input v-model:value="qt" placeholder="请输入其它措施" :disabled="model[field] != 3" style="width: 30%" />
      </a-radio-group>
    </template>
  </BasicForm>
</template>

<script lang="ts" setup>
  //引入依赖
  import { nextTick, watch, toRaw, ref } from 'vue';
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  const qt = ref("");
  const options = [
    { label: '阻隔', value: '阻隔' },
    { label: '其它', value: '其它' },
  ];
  const props = defineProps({
    labelFirst: {
      type: String,
      default: '风险管控',
    },
    data: {
      type: Object,
      default: {},
    },
    obj: {
      type: Array,
      default: [],
    },
  });
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: 'id',
      field: 'id',
      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',
      component: 'Input',
      slot: 'gkcs',
      colProps: { span: 24 },
      defaultValue: 1,
    }, 
    {
      label: '管控措施',
      field: 'checkboxValue',
      component: 'Input',
      show:false,
    },
    {
      label: '工程管控',
      field: 'checkboxInputValue',
      component: 'Input',
      show:false,
    },
    {
      label: '其它信息',
      field: 'gswz',
      component: 'Input',
      show:false,
    },
    {
      label: '其它信息',
      field: 'gkcsQt',
      component: 'Input',
      show:false,
    },
    {
      label: `${props.obj ? props.obj[0].name : '风险管控范围(m2)'}`,
      field: 'mj',
      component: 'InputNumber',
    },
    {
      label: `${props.obj ? props.obj[1].name : ''}`,
      field: 'fsm',
      component: 'InputNumber',
      ifShow: () => {
        return props.labelFirst == '修复' ? true : false;
      },
    },
  ];
  /**
   * BasicForm绑定注册;
   */
  const [registerForm, { getFieldsValue, setFieldsValue, 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: '252px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  // let fieldsValue = await validate(['checkboxValue']);
  // console.log('fieldsValue:::', fieldsValue);

  watch(
    () => props.data,
    async (val: any) => {
      val &&
        nextTick(async () => {
          const obj = toRaw(val);
          if (props.labelFirst == '修复') {
            obj.mj = obj.kzfxgktrmj;
            obj.fsm = obj.xftrfl;
          }
          if (obj.gkcs == 2) {
            if (obj.gkcsQt?.indexOf(',,') > -1) {
              obj.checkboxValue = obj.gkcsQt.split(',,')[0];
              obj.checkboxInputValue = obj.gkcsQt.split(',,')[1];
            } else {
              obj.checkboxValue = obj.gkcsQt;
            }
          } else if (obj.gkcs == 3) {
            qt.value = obj.gkcsQt
          }
          await setFieldsValue({
            ...obj,
          });
        });
    },
    { deep: true, immediate: true }
  );
  // 获取子组件 列表
  async function getFormValueFxpg() {
    console.log('子组件执行');
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();

    if (props.labelFirst == '修复') {
      fieldsValue.kzfxgktrmj = fieldsValue.mj;
      fieldsValue.xftrfl = fieldsValue.fsm;

      delete fieldsValue.fsm;
      delete fieldsValue.mj;
    }

    if (fieldsValue.checkboxValue.indexOf('阻隔') < 0) {
      fieldsValue.zglx = '';
      fieldsValue.qygd = '';
      fieldsValue.qygdFile = '';
      fieldsValue.qyshp = '';
      fieldsValue.qyshpgeo = '';
      // fieldsValue.gdFile = '';
    }
    if (fieldsValue.checkboxValue.indexOf('其他') < 0) {
      fieldsValue.checkboxInputValue = '';
    }
    if (fieldsValue.gkcs == 3) {
      fieldsValue.gkcsQt = qt.value;
    }

    return fieldsValue;
  }

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

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

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

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