<!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm">
    <template #gstype="{ model, field }">
      <!-- 如果是组件需要进行双向绑定，model当前表单对象，field当前字段名称  -->
      <a-radio-group v-model:value="model[field]" style="display: flex; justify-content: space-between">
        <a-radio :value="1" :style="{ height: '30px', lineHeight: '30px', width: '60px' }" @change="qt = ''">网址</a-radio>
        <a-input v-model:value="model['gswz']" @blur="onBlur(model)" placeholder="请输入网址" :disabled="model[field] != 1"
          style="width: 40%" />
        <a-radio :value="3" :style="{ height: '30px', lineHeight: '30px', width: '60px' }"
          @change="model['gswz'] = ''">其它</a-radio>
        <a-input v-model:value="qt" placeholder="请输入信息" :disabled="model[field] != 3" style="width: 40%" />
      </a-radio-group>
    </template>
    <template #jsxl="{ }">
      <div class="table-page-wrapper">
        <table style="width: 100%" border="1" cellspacing="1">
          <colgroup>
            <col width="150" />
            <col width="150" />
            <col />
            <col />
          </colgroup>
          <tbody>
            <tr>
              <td class="bgColor">介质</td>
              <td class="bgColor">类别</td>
              <td class="bgColor">原位修复技术</td>
              <td class="bgColor">异位修复技术</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td rowspan="3" class="bgColor">土壤修复技术</td>
              <td class="bgColor">物理化学修复技术</td>
              <td>
                <a-checkbox-group v-model:value="jslx[0].yw" style="width: 100%">
                  <a-checkbox value="土壤气相抽提">土壤气相抽提</a-checkbox>
                  <a-checkbox value="固化稳定化">固化稳定化</a-checkbox>
                  <a-checkbox value="土壤淋洗">土壤淋洗</a-checkbox>
                  <a-checkbox value="化学氧化还原">化学氧化还原</a-checkbox>
                </a-checkbox-group>
              </td>
              <td>
                <a-checkbox-group v-model:value="jslx[0].iw" style="width: 100%">
                  <a-checkbox value="土壤气相抽提">土壤气相抽提</a-checkbox>
                  <a-checkbox value="固化稳定化">固化稳定化</a-checkbox>
                  <a-checkbox value="土壤淋洗">土壤淋洗</a-checkbox>
                  <a-checkbox value="机械通风">机械通风</a-checkbox>
                  <a-checkbox value="化学氧化还原">化学氧化还原</a-checkbox>
                  <a-checkbox value="挖掘-填埋">挖掘-填埋</a-checkbox>
                </a-checkbox-group>
              </td>
            </tr>
            <tr>
              <td class="bgColor">生物修复技术</td>
              <td>
                <a-checkbox-group v-model:value="jslx[1].yw" style="width: 100%">
                  <a-checkbox value="生物降解">生物降解</a-checkbox>
                  <a-checkbox value="生物通风">生物通风</a-checkbox>
                  <a-checkbox value="植物修复">植物修复</a-checkbox>
                </a-checkbox-group>
              </td>
              <td>
                <a-checkbox-group v-model:value="jslx[1].iw" style="width: 100%">
                  <a-checkbox value="强化生物修复">强化生物修复</a-checkbox>
                  <a-checkbox value="生物通风">生物通风</a-checkbox>
                  <a-checkbox value="生物堆">生物堆</a-checkbox>
                  <a-checkbox value="泥浆相生物处理">泥浆相生物处理</a-checkbox>
                </a-checkbox-group>
              </td>
            </tr>
            <tr>
              <td class="bgColor">热处理技术</td>
              <td>
                <a-checkbox-group v-model:value="jslx[2].yw" style="width: 100%">
                  <a-checkbox value="热吸收(热脱附)">热吸收(热脱附)</a-checkbox>
                  <a-checkbox value="玻璃化">玻璃化</a-checkbox>
                </a-checkbox-group>
              </td>
              <td>
                <a-checkbox-group v-model:value="jslx[2].iw" style="width: 100%">
                  <a-checkbox value="热吸收(热脱附)">热吸收(热脱附)</a-checkbox>
                  <a-checkbox value="焚烧">焚烧</a-checkbox>
                  <a-checkbox value="水泥窑共处置">水泥窑共处置</a-checkbox>
                </a-checkbox-group>
              </td>
            </tr>
            <tr>
              <td colspan="2" class="bgColor">地下水修复技术</td>
              <td>
                <a-checkbox-group v-model:value="jslx[3].yw" style="width: 100%">
                  <a-checkbox value="强化生物修复">强化生物修复</a-checkbox>
                  <a-checkbox value="渗透性反应墙">渗透性反应墙</a-checkbox>
                  <a-checkbox value="化学氧化还原">化学氧化还原</a-checkbox>
                  <a-checkbox value="气注入-土壤气相抽提">空气注入-土壤气相抽提</a-checkbox>
                  <a-checkbox value="生物曝气">生物曝气</a-checkbox>
                  <a-checkbox value="监控式自然衰减">监控式自然衰减</a-checkbox>
                </a-checkbox-group>
              </td>
              <td>
                <a-checkbox-group v-model:value="jslx[3].iw" style="width: 100%">
                  <a-checkbox value="抽出-处理">抽出-处理</a-checkbox>
                </a-checkbox-group>
              </td>
            </tr>
            <tr>
              <td colspan="2" class="bgColor">
                <a-checkbox v-model:checked="jslx[4].bt">其他</a-checkbox>
              </td>
              <td colspan="2">
                <a-input v-model:value="jslx[4].yw" :disabled="!jslx[4].bt" placeholder="请输入其他技术路线" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
  </BasicForm>
</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 props = defineProps({
  labelFirst: {
    type: String,
    default: '风险管控',
  },
  data: {
    type: Object,
    default: {},
  },
  jslx: {
    type: Object,
    default: {},
  },
});
const qt = ref('');
//自定义表单字段
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: `${props.labelFirst}方案标题`,
    field: 'bt',
    component: 'Input',
    required: true,
  },
  {
    label: `${props.labelFirst}方案编制完成日期`,
    field: 'fbsj',
    component: 'DatePicker',
    required: true,
    componentProps: {
      format: 'YYYY-MM-DD',
      //返回值格式化（绑定值的格式）
      valueFormat: 'YYYY-MM-DD',
      //是否显示今天按钮
      showToday: true,
    },
  },
  {
    label: '公示',
    field: 'gkfs',
    component: 'JDictSelectTag',
    defaultValue: 1,
    slot: 'gstype',
    colProps: { span: 24 },
    required: true,
  },
  {
    label: `${props.labelFirst}工程措施开始日期`,
    field: 'tmStar',
    required: true,
    component: 'DatePicker',
    componentProps: {
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      showToday: true,
    },
  },
  {
    label: `${props.labelFirst}工程措施结束日期`,
    field: 'tmEnd',
    component: 'DatePicker',
    required: true,
    componentProps: {
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      showToday: true,
    },
  },
  {
    label: `技术线路`,
    field: 'jslx',

    component: 'DatePicker',
    colProps: { span: 24 },
    ifShow: () => {
      let flg = false;
      if (props.labelFirst == '修复' || props.labelFirst == '管控及修复') flg = true;
      else flg = false;
      return flg;
    },
    slot: 'jsxl',
  },
];

const jslx = ref<any>([
  {
    bt: '',
    sortindex: '0',
    jz: '土壤修复技术',
    jslx: '物理化学修复技术',
    yw: [],
    iw: [],
  },
  {
    bt: '',
    sortindex: '1',
    jz: '土壤修复技术',
    jslx: '生物修复技术',
    yw: [],
    iw: [],
  },
  {
    bt: '',
    sortindex: '2',
    jz: '土壤修复技术',
    jslx: '热处理技术',
    yw: [],
    iw: [],
  },
  {
    bt: '',
    sortindex: '3',
    jz: '地下水修复技术',
    jslx: '地下水修复技术',
    yw: [],
    iw: [],
  },
  {
    bt: false,
    sortindex: '4',
    jslx: '其他',
    jz: '其他',
    yw: '',
    iw: '',
  },
]);
/**
 * BasicForm绑定注册;
 */
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.gkfs == 3) {
          qt.value = val.gswz;
          obj.gswz = '';
        }
        if (!obj.gkfs) obj.gkfs = 1;
        await setFieldsValue({
          ...obj,
        });
      });
  },
  { deep: true, immediate: true }
);
watch(
  () => props.jslx,
  async () => {
    // 技术路线的回显
    if (props.labelFirst == '修复' || props.labelFirst == '管控及修复') {
      if (!props.jslx || props.jslx.length == 0) return;
      jslx.value = props.jslx;
      jslx.value.forEach((item: any, index) => {
        if (index != 4) {
          if (!(item.yw instanceof Array)) item.yw = item.yw.split(',');
          if (!(item.iw instanceof Array)) item.iw = item.iw.split(',');
        } else {
          if (item.yw) item.bt = true;
        }
      });
      console.log(jslx.value, 'jslx.value');
    }
  },
  { deep: true, immediate: true }
);
// 失去焦点校验网址
function onBlur(model) {
  console.log(model.gswz, 'v');

  const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
  if (!reg.test(model.gswz)) createMessage.info('请输入正确的网址');
}
// 获取子组件 列表
async function getFormValueReport() {
  console.log('子组件执行');
  //获取所有值
  let fieldsValue = await getFieldsValue();
  fieldsValue = await validate();
  if (fieldsValue.gkfs == 3) {
    fieldsValue.gswz = qt.value;
  }
  if (props.labelFirst == '修复' || props.labelFirst == '管控及修复') {
    fieldsValue.jslx = [];
    fieldsValue.jslx = toRaw(jslx.value);
    fieldsValue.jslx.forEach((v, index) => {
      if (index == 4) {
        if (v.bt) {
          v.bt = '其他';
        }
      } else {
        v.yw = v.yw.join(',');
        v.iw = v.iw.join(',');
      }
    });
  }

  return fieldsValue;
}

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

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

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

table {
  border-collapse: collapse;
  border: 1px #dfe6ec solid
}

tbody tr td {
  padding: 6px;
  height: 40px;
}

.bgColor {
  background-color: rgba(244, 247, 249, 0.8);
  text-align: center;
}

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