<template>
  <div class="bg-[#fff]">
    <div style="margin: 25px 0">
      <a-button type="primary" @click="router.back()" style="margin-left: 10px">返回</a-button>
      <a-button type="primary" style="margin-left: 10px" @click="submit" v-auth="'dkdc-tbz-zltb'">保存</a-button>
    </div>
    <div style="width: 98%; margin: 0 auto; margin-top: 25px">
      <BasicForm @register="registerForm">
        <template #hcry>
          <roleTable ref="roleTableRef" />
        </template>
        <template #sfywgkgjsjxTable>
          <sfywgkgjsjxTable ref="sfywgkgjsjxTableRef" />
        </template>
        <template #sfywrxxTable>
          <sfywrxxTable ref="sfywrxxTableRef" />
        </template>
      </BasicForm>
    </div>
  </div>
</template>

<script lang="ts" name="xcjd-Supervise-LookData-form" setup>
  // import { dictName } from "/@/utils/domUtils";
  import { useRouter, useRoute } from 'vue-router';
  import roleTable from './roleTable.vue';
  import sfywgkgjsjxTable from './sfywgkgjsjxTable.vue';
  import sfywrxxTable from './sfywrxxTable.vue';
  import { SetAdd } from './api';
  import { ref, nextTick } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  const router = useRouter(); //路由信息
  const route = useRoute(); //路由信息
  defineProps({
    data: Object,
  });
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '地块id',
      field: 'wrdkid',
      component: 'Input',
      ifShow: false,
      defaultValue: route.query.wrdkid, //设置默认值
    },
    {
      label: '监管管理标题',
      field: 'jdglbt',
      component: 'Input',
      required: true,
    },
    {
      label: '监管管理单位',
      field: 'jdgldw',
      component: 'Input',
      required: true,
    },
    {
      label: '监管管理时间',
      field: 'jdglsj',
      component: 'DatePicker',
      required: true,
      componentProps: {
        //日期格式化，页面上显示的值
        format: 'YYYY-MM-DD',
        //返回值格式化（绑定值的格式）
        valueFormat: 'YYYY-MM-DD',
        //是否显示今天按钮
        showToday: true,
      },
    },
    {
      label: '监管管理文件',
      field: 'jdglfj',
      required: true,
      component: 'JUpload',
      componentProps: {
        fileName: '监管管理', //下载时候文件名称
        showUploadList: false,
        // returnUrl:false,
        onchange: ({ values }) => {
          console.log(values);
        },
      },
    },
    {
      label: '现场监督结论',
      field: 'jdgljl',
      component: 'CheckboxGroup',
      required: true,
      componentProps: {
        //RadioGroup 下所有 input[type="radio"] 的 name 属性
        name: '现场监督结论',
        //options支持disabled禁用
        options: [
          //   { label: '运动', value: 0, disabled: true },
          { label: '安全利用', value: '安全利用' },
          { label: '违规开工建设', value: '违规开工建设' },
          { label: '存在污染', value: '存在污染' },
        ],
      },
      //   defaultValue:[2] 设置默认值
    },
    {
      label: '核查人员',
      field: 'hcry',
      component: 'JDictSelectTag',
      colProps: { span: 24 },
      // show: () => { return props?.data?.wrdkjbxxb?.isnyd2yzlg == 1 ? true : false },
      slot: 'hcry',
    },
    {
      label: '是否有违规开工建设迹象',
      field: 'sfywgkgjsjx',
      component: 'JDictSelectTag',
      required: true,
      colProps: { span: 24 },
      componentProps: {
        //字典code配置，比如通过性别字典编码：sex，也可以使用demo,name,id 表名,名称,值的方式
        dictCode: 'yn',
        //支持radio(单选按钮)、radioButton(单选按钮 btn风格)、select(下拉框)
        type: 'select',
      },
      defaultValue: ['0'],
    },
    {
      label: '违规开工建设迹象', //是否有违规开工建设迹象
      field: 'sfywgkgjsjxTable',
      component: 'Input',
      colProps: { span: 24 },
      //ifShow和show属性一致，values代表当前表单的值，js 控制，会删除 dom
      ifShow: ({ values }) => {
        return values.sfywgkgjsjx == '1';
      },
      slot: 'sfywgkgjsjxTable',
    },
    {
      label: '是否有污染现象',
      field: 'sfywrxx',
      component: 'JDictSelectTag',
      colProps: { span: 24 },
      required: true,
      componentProps: {
        //字典code配置，比如通过性别字典编码：sex，也可以使用demo,name,id 表名,名称,值的方式
        dictCode: 'yn',
        //支持radio(单选按钮)、radioButton(单选按钮 btn风格)、select(下拉框)
        type: 'select',
      },
      defaultValue: ['0'],
    },
    {
      label: '污染现象', //是否有污染现象table
      field: 'sfywrxxTable',
      component: 'Input',
      colProps: { span: 24 },
      // show: () => { return props?.data?.wrdkjbxxb?.isnyd2yzlg == 1 ? true : false },
      slot: 'sfywrxxTable',
      ifShow: ({ values }) => {
        return values.sfywrxx == '1';
      },
    },
    {
      label: '描述',
      field: 'bz',
      component: 'InputTextArea',
      colProps: { span: 24 },
    },
  ];
  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: '170px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });

  const roleTableRef = ref();
  const sfywgkgjsjxTableRef = ref();
  const sfywrxxTableRef = ref();
  async function submit() {
    // console.log(roleTableRef.value.dataSource); //获取表格信息
    // console.log(sfywgkgjsjxTableRef.value.dataSource); //获取表格信息
    // console.log(sfywrxxTableRef.value.dataSource); //获取表格信息
    await validate();
    let fieldsValue = await getFieldsValue();
    fieldsValue.xcjdhcName = '';
    fieldsValue.xcjdhcPhone = '';
    fieldsValue.xcjdhcZw = '';
    fieldsValue.wrwgList = [];
    let rulesPhone = false;
    let rulesWg = false;
    // 核查人员信息
    if (roleTableRef.value.dataSource.length != 0) {
      roleTableRef.value.dataSource.forEach((element) => {
        fieldsValue.xcjdhcName += element.name + ',';
        fieldsValue.xcjdhcPhone += element.phone + ',';
        fieldsValue.xcjdhcZw += element.zw + ',';
        if (!/^1[3456789]\d{9}$/g.test(element.phone)) {
          rulesPhone = true;
          return false;
        }
      });
    }
    if (fieldsValue.sfywgkgjsjx == '1') {
      if (sfywgkgjsjxTableRef.value.dataSource.length != 0 && fieldsValue.sfywgkgjsjx == 1) {
        fieldsValue.wrwgList = fieldsValue.wrwgList.concat(sfywgkgjsjxTableRef.value.dataSource);
      }
    }
    if (fieldsValue.sfywrxx == '1') {
      if (sfywrxxTableRef.value.dataSource.length != 0 && fieldsValue.sfywrxx == 1) {
        fieldsValue.wrwgList = fieldsValue.wrwgList.concat(sfywrxxTableRef.value.dataSource);
      }
    }
    fieldsValue.wrwgList.forEach((element) => {
      if (!/^-?(180(\.\d{1,6})|((1[0-7]|[1-9])?\d(\.\d{1,6})))$/.test(element.jd)) {
        rulesWg = true;
        return false;
      }
      if (!/^-?(180(\.\d{1,6})|((1[0-7]|[1-9])?\d(\.\d{1,6})))$/.test(element.wd)) {
        rulesWg = true;
        return false;
      }
    });
    // 增加校验
    if (rulesPhone) {
      createMessage.error('请检查核查人员电话信息');
      return false;
    }
    if (rulesWg) {
      createMessage.error('请填写正确的经度纬度');
      return false;
    }
    await SetAdd(fieldsValue);
    // 请求接口返回页面
    // setTimeout(() => {
    router.back();
    // }, 1000);
  }
</script>

<style scoped lang="less">
  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-input-number) {
    width: 100%;
  }

  :deep(.ant-picker) {
    width: 100%;
  }
</style>
