<template>
    <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:80%;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>
</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{5}))|((1[0-7]|[1-9])?\d(\.\d{5})))$/.test(element.jd))) {
            rulesWg = true
            return false
        }
        if (!(/^-?(180(\.(\d{5}))|((1[0-7]|[1-9])?\d(\.\d{5})))$/.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>