<!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm">
    <template #gstype="{ model, field }">
      <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
      <a-radio-group v-model:value="model[field]" style="display: flex">
        <div style="width: 50%"
          ><a-radio value="1" :style="{ height: '30px', lineHeight: '30px', width: '10%' }" @change="model['qt'] = ''">网址</a-radio>
          <a-input v-model:value="model['gswz']" placeholder="请输入网址" :disabled="model[field] != 1" style="width: 70%"
        /></div>
        <div style="width: 50%">
          <a-radio value="3" :style="{ height: '30px', lineHeight: '30px', width: '10%' }" @change="model['gswz'] = ''">其它</a-radio>
          <a-input v-model:value="model['qt']" placeholder="请输入信息" :disabled="model[field] != 3" style="width: 80%"
        /></div>
      </a-radio-group>
    </template>
  </BasicForm>
    <a-modal v-model:visible="No" cancelText="取消" okText="确定" title="信息">
      <template #footer>
        <div>
          <a-button @click="No = false" type="primary">确定</a-button>
        </div>
      </template>
      <div class="py-8 ml-5"> 超标地块请更改填报方式为详细调查或者初步调查+详细调查 </div>
    </a-modal>
</template>

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

  const { createMessage } = useMessage();
  const No = ref(false);
  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    data: {
      type: Object,
      default: {},
    },
    dclx: {
      type: String,
    },
    dyjddcqk: {
      type: String,
    },
  });
  const emit = defineEmits(['getjxsmdc', 'getcbdcfs']);
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: 'id',
      field: 'id',
      component: 'Input',
      show: false,
    },

    {
      label: '网址',
      field: 'gswz',
      component: 'Input',
      show: false,
    },
    {
      label: '其他',
      field: 'qt',
      component: 'Input',
      show: false,
    },
    {
      label: '标题',
      field: 'dcbgbt',
      component: 'Input',
      required: true,
    },
    {
      label: `${props.labelFirst}调查开始日期`,
      field: 'fbsj',
      required: true,
      component: 'DatePicker',
      componentProps: {
        //日期格式化，页面上显示的值
        format: 'YYYY-MM-DD',
        //返回值格式化（绑定值的格式）
        valueFormat: 'YYYY-MM-DD',
        //是否显示今天按钮
        showToday: true,
      },
    },
    {
      label: `${props.labelFirst}调查完成日期`,
      field: 'wcsj',
      required: true,
      component: 'DatePicker',
      componentProps: {
        //日期格式化，页面上显示的值
        format: 'YYYY-MM-DD',
        //返回值格式化（绑定值的格式）
        valueFormat: 'YYYY-MM-DD',
        //是否显示今天按钮
        showToday: true,
      },
    },
    {
      label: '公示',
      field: 'gsfs',
      component: 'JDictSelectTag',
      defaultValue: '1',
      required: true,
      slot: 'gstype',
      colProps: { span: 24 },
    },
    {
      label: '是否为超标地块',
      field: 'sfwrdk',
      required: true,
      defaultValue: '0',
      component: 'RadioGroup',
      componentProps: () =>{
        return {
          options: [
          {
            label: '否',
            value: '0',
          },
          {
            label: '是',
            value: '1',
          },
        ],
        onChange: (v) => {
          if (props.dclx == '1' && v.target.value == 1 ) {
            No.value = true
            setFieldsValue({
              sfwrdk: '0'
            })
          }
        },
        }
        
      },
    },
    {
      label: '调查方式',
      field: 'cbdcfs',
      defaultValue: 0,
      required: true,
      ifShow: false,
      // ifShow: () => {
      //   return props.dclx == '1' || props.dclx == '3' ? true : false;
      // },
      component: 'RadioGroup',
      componentProps: {
        options: [
          {
            label: '自行组织调查',
            value: 0,
          },
          {
            label: '委托第三方调查',
            value: 1,
          },
        ],
        onChange: (v) => {
          emit('getcbdcfs', v.target.value);
        },
      },
    },
    {
      label: '是否进行书面调查',
      field: 'jxsmdc',
      required: true,
      component: 'RadioGroup',
      ifShow: () => {
        return props.dclx == '1'? true : false;
      },
      componentProps: {
        options: [
          { label: '否', value: '0' },
          { label: '是', value: '1' },
        ],
        onChange: (v) => {
          emit('getjxsmdc', v.target.value);
        },
      },
    },
  ];
  /**
   * BasicForm绑定注册;
   */
  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: '180px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });

  watch(
    () => props,
    async (newVal:any, oldVal:any) => {
      ((newVal?.data?.wrdkid != oldVal?.data?.wrdkid) || (newVal?.data?.id != oldVal?.data?.id) || (newVal?.data?.gswz != oldVal?.data?.gswz) ||(newVal?.data?.qt != oldVal?.data?.qt) || (newVal?.data?.dcbgbt != oldVal?.data?.dcbgbt) || (newVal?.data?.fbsj != oldVal?.data?.fbsj) || (newVal?.data?.wcsj != oldVal?.data?.wcsj) || (newVal?.data?.gsfs != oldVal?.data?.gsfs) || (newVal?.data?.sfwrdk != oldVal?.data?.sfwrdk) || (newVal?.data?.cbdcfs != oldVal?.data?.cbdcfs) || (newVal?.data?.jxsmdc != oldVal?.data?.jxsmdc) || (newVal?.data?.sfwrdk != oldVal?.data?.sfwrdk))
      &&
        nextTick(async () => {
          const obj: any = toRaw(newVal.data);
          if (!obj.gsfs) obj.gsfs = '1';
          if (obj.gsfs == 3) {
            obj.qt = obj.gswz;
            obj.gswz = '';
          }
          if (!obj.sfwrdk) obj.sfwrdk = '0';
          props.dyjddcqk && updateJxsmdc();
          await setFieldsValue({
            ...obj,
          });
        });
    },
    { deep: true, immediate: true }
  );
  // 获取子组件 列表
  async function getFormValueReport() {
    console.log('子组件执行');
    //获取所有值
    let fieldsValue = await getFieldsValue();
    fieldsValue = await validate();
    if ((fieldsValue.gsfs == 3 && !fieldsValue.qt) || (fieldsValue.gsfs == 1 && !fieldsValue.gswz)) {
      createMessage.warn('请先填写公示信息');
      return
    }
    if (fieldsValue.gsfs == 3) {
      fieldsValue.gswz = fieldsValue.qt;
    }
    return fieldsValue;
  }
  async function updateJxsmdc() {
    // dyjddcqk, 是个字符串，最后一项有值，前6个只要有一个是1，jxsmdc只能选择否，禁用
    console.log('props.dyjddcqk', props.dyjddcqk);
    if (props.dyjddcqk) {
      let arr = typeof props.dyjddcqk === 'string' ? props.dyjddcqk.split(',') : props.dyjddcqk;
      console.log('arr', arr);
      let fieldsValue = await getFieldsValue();
      console.log(fieldsValue, 'fieldsValue');
      // 前6个任意一个选择是、最后一个输入框有值(输入0或者其他，进入if，输入框输入的数字是字符串)
      let result = arr.slice(0, 6).some((item) => item === '1') || (arr[6] && arr[6] !== '0');
      if (result) {
        console.log('设置禁用');
        setFieldsValue({
          jxsmdc: '0',
        });
        emit('getjxsmdc', '0');
        updateSchema({
          label: '是否进行书面调查',
          field: 'jxsmdc',
          defaultValue: '0',

          componentProps: {
            options: [
              { label: '否', value: '0', disabled: true },
              { label: '是', value: '1', disabled: true },
            ],
          },
        });
      } else {
        console.log('删除禁用');
        setFieldsValue({
          jxsmdc: props.data?.jxsmdc,
        });
        emit('getjxsmdc', props.data?.jxsmdc);
        updateSchema({
          label: '是否进行书面调查',
          field: 'jxsmdc',
          defaultValue: props.data?.jxsmdc,
          componentProps: {
            options: [
              { label: '否', value: '0' },
              { label: '是', value: '1' },
            ],
          },
        });
      }
    }
  }
  // 通过ref必须把在父组件里面的方法导出
  defineExpose({
    getFormValueReport,
  });
</script>

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

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

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