<template>
  <!-- 编辑 -->
  <dialogBox ref="validRule" width="60%" @submitForm="handleSubmit" :closed="true" @closeDialog="handleClose"
    customClass="editValidRule" multiple title="上报校验规则设置">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="数据表名" prop="DATATABLE">
            <el-input v-model="ruleForm.DATATABLE" placeholder="数据表名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中文名称" prop="CHINESETABLE">
            <el-input v-model="ruleForm.CHINESETABLE" placeholder="中文名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="tab表头链接标识" prop="SOLEURL">
            <el-input v-model="ruleForm.SOLEURL" placeholder="tab表头链接标识"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <lb-table :column="tableData.column" :heightNum="600" :pagination="false" :data="tableData.data">
    </lb-table>
    <message-tips :message="message" ref="msg" />
  </dialogBox>
</template>

<script>
import ruleConfig from '@/api/ruleConfig'
export default {
  props: {
    ruleData: Object,
  },
  data () {
    return {
      message: '',
      ruleForm: {
        DATATABLE: '',
        CHINESETABLE: '',
        SOLEURL: ''
      },
      tableData: {
        column: [
          {
            width: '60',
            renderHeader: (h, scope) => {
              return <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF">增加</i>
            },
            render: (h, scope) => {
              return (
                <i class="el-icon-minus" onClick={() => { this.handleMinus(scope.$index, scope.row) }} style="cursor:pointer"></i>
              )
            }
          },
          {
            prop: 'FIELD',
            label: '字段名',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          {
            prop: 'CHINESENAME',
            label: '中文名称',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          // 是否必填
          {
            prop: 'REQUIRED',
            label: '是否必填',
            render: (h, scope) => {
              return (
                <el-checkbox v-model={scope.row[scope.column.property]} true-label={'1'} false-label={'0'}>必填</el-checkbox>
              )
            }
          },
          // 校验表达式
          {
            prop: 'EXPRESSION',
            label: '校验表达式',
            render: (h, scope) => {
              return (
                <el-select value={scope.row[scope.column.property]} clearable
                  onChange={(val) => { scope.row[scope.column.property] = val }}>
                  {
                    this.tagOptions.map(option => {
                      return (
                        <el-option label={option.label} value={option.value}></el-option>
                      )
                    })
                  }
                </el-select>
              )
            }
          },
          {
            prop: 'MESSAGE',
            label: '提示信息',
            render: (h, scope) => {
              return (
                <el-input placeholder="提示信息" value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          }
        ],
        data: []
      },
      tagOptions: [
        {
          label: '手机号',
          value: '^[1][3,4,5,6,7,8,9][0-9]{9}$'
        },
        {
          label: '身份证',
          value: '^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$|^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$'
        },
        {
          label: '军官证',
          value: '^[\\u4E00-\\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$'
        },
        {
          label: '护照',
          value: '^([a-zA-z]|[0-9]){5,17}$'
        },
        {
          label: '港澳身份证',
          value: '^([A-Z]\\d{6,10}(\\(\\w{1}\\))?)$'
        },
        {
          label: '台湾身份证',
          value: '^\\d{8}|^[a-zA-Z0-9]{10}|^\\d{18}$'
        },
        {
          label: '营业执照',
          value: '(^(?:(?![IOZSV])[\\dA-Z]){2}\\d{6}(?:(?![IOZSV])[\\dA-Z]){10}$)|(^\\d{15}$)'
        },
        {
          label: '户口簿',
          value: '^\\d{9}$'
        }
      ],
      rules: {
        DCODE: [
          { required: true, message: '字典类型编码', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    isShow () {
      setTimeout(() => {
        this.ruleForm = this.ruleData
        this.tableData.data = this.ruleData.sysywsjbfieldlist
      }, 0)
      this.$refs.validRule.isShow()
    },
    handleEdit (scope) {
      this.$set(scope.row, '_edit', true)
    },
    handleAdd () {
      this.tableData.data.push({
        field: '',
        chinesename: '',
        required: '1',
        expression: null,
        message: ''
      })
    },
    handleMinus (index, row) {
      this.tableData.data.splice(index, 1);
    },
    async handleSubmit () {
      this.ruleForm.sysYwsjbFieldList = this.tableData.data
      try {
        let res = await ruleConfig.editSysYwsjbWithSysYwsjbField(this.ruleForm)
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.handleClose()
          this.$parent.featchData()
        }
      } catch (error) {
        this.message = error
        this.$refs.msg.messageShow()
      }

    },
    handleClose () {
      this.$refs['ruleForm'].resetFields();
      this.$refs.validRule.isHide()
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped></style>