<template>
  <j-editable-table
    ref="editableTable"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :rowNumber="true"
    :maxHeight="340"
    :actionButton="false"
    :disabledRows="{dbFieldName: 'id'}">

    <template v-slot:fieldValidType="props">
      <a-row class="row-valid-type" type="flex">
        <a-col :class="['left', {full: !isCustomRegexp(props.value)}]">
          <a-select style="width: 100%" @change="props.handleChange"
                    :value="props.value"
                    :options="validTypeOptions"
                    :getPopupContainer="props.target.getParentContainer"
          >
            <template v-slot:dropdownRender="menu" >
              <v-nodes :vnodes="menu" />
              <ul v-show="!isCustomRegexp(props.value)" class="ant-select-dropdown-menu">
                <li class="ant-select-dropdown-menu-item"
                    title="使用自定义正则表达式作为校验规则"
                    style="border-top: 1px solid #dfdfdf;"
                    @click="onAddCustomRegexp(props)">
                  正则表达式
                </li>
              </ul>
            </template>
          </a-select>
        </a-col>
        <a-col v-show="isCustomRegexp(props.value)" class="right" title="修改自定义正则表达式">
          <a-button icon="edit" @click="onChangeCustomRegexp(props)"></a-button>
        </a-col>
      </a-row>
    </template>

  </j-editable-table>
</template>

<script>

import { FormTypes } from '@/utils/JEditableTableUtil'
import {syncAllTable} from '@views/codegen/form/util/TableUtils';

export default {
  name: 'CheckDictTable',
  components: {
    VNodes: {
      functional: true,
      render: function (e, t) {
        return t.props.vnodes
      }
    }
  },
  data () {
    return {
      loading: false,
      dataSource: [],
      columns: [
        {
          title: "字段名称",
          key: "dbFieldName",
          width: "130px",
          type: FormTypes.input,
          defaultValue: "",
          placeholder: "",
          props: {disabled: true}
        },
        {
          title: "字段备注",
          key: "dbFieldTxt",
          width: "130px",
          type: FormTypes.input,
          defaultValue: "",
          placeholder: "",
          props: {disabled: true}
        },
        {
          title: "字段Href",
          key: "fieldHref",
          width: "130px",
          type: FormTypes.input,
          defaultValue: ""
        },
        {
          title: "验证规则",
          key: "fieldValidType",
          width: "170px",
          type: FormTypes.slot,
          slotName: "fieldValidType",
          defaultValue: ""
        },
        {
          title: "校验必填",
          key: "fieldMustInput",
          width: "80px",
          type: FormTypes.checkbox,
          customValue: ["1", "0"],
          defaultChecked: false
        },
        {
          title: "字典Table",
          key: "dictTable",
          width: "130px",
          type: FormTypes.input_pop,
          defaultValue: ""
        },
        {
          title: "字典Code",
          key: "dictField",
          width: "130px",
          type: FormTypes.input,
          defaultValue: ""
        },
        {
          title: "字典Text",
          key: "dictText",
          width: "130px",
          type: FormTypes.input,
          defaultValue: ""
        }
      ],
      validTypeOptions: [
        {title: "无", value: ""},
        {title: "唯一校验", value: "only"},
        {title: "6到16位数字",value: "n6-16"},
        {title: "6到18位字母", value: "s6-18"},
        {title: "6到16位任意字符", value: "*6-16"},
        {title: "网址",value: "url"},
        {title: "电子邮件", value: "e"},
        {title: "手机号码", value: "m"},
        {title: "邮政编码", value: "p"},
        {title: "字母",value: "s"},
        {title: "数字", value: "n"},
        {title: "整数", value: "z"},
        {title: "非空", value: "*"},
        {title: "金额",value: "money"}
      ]
    }
  },
  computed: {
    validTypeValues: function () {
      return this.validTypeOptions.map((e) => e.value)
    }
  },
  methods: {
    syncTable(target) {
      syncAllTable(this,target)
    },
    isCustomRegexp(regexp) {
      return !this.validTypeValues.includes(regexp)
    },
    onAddCustomRegexp(e) {
      this.$JPrompt({
        title: "自定义正则表达式",
        placeholder: "请输入正则表达式",
        rule: [{required: true, message: "正则表达式不能为空！"}, {validator: this.validatorCustomRegexp}],
        onOk: function (t) {
          let n = t.value;
          e.handleChange(n)
        }
      })
    },
    onChangeCustomRegexp(e) {
      let _self = this;
      this.$JPrompt({
        title: "修改自定义正则表达式",
        defaultValue: e.value,
        placeholder: "请输入正则表达式",
        rule: [{required: true, message: "正则表达式不能为空！"}, {
          validator: function (n, a, r) {
            return _self.validatorCustomRegexp(n, a, r, e.value)
          }
        }],
        onOk: function (t) {
          let n = t.value;
          e.handleChange(n)
        }
      })
    },
    validatorCustomRegexp(e, t, n, a) {
      if (this.isCustomRegexp(t)) {
        n()
      } else {
        n("当前校验已存在")
      }
    }
  }

}
</script>

<style scoped>
.row-valid-type .left{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  z-index: 2;
  width: calc(100% - 33px)
}
.ant-select-dropdown-menu-item {
  color: rgba(0, 0, 0, 0.65);
}
</style>