<template>
  <el-dialog title="选择校验规则" :visible.sync="myValidateRulesDialog">
      <el-checkbox-group v-model="validateRule.items">
        <div class="panel-fieldset">
          <h4 class="panel-legend">一般校验规则</h4>
          <el-row>
            <el-col :span="12">
              <el-checkbox label="NotNull">不能为空</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="Number">数字（整数或小数）</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="Int">整数  </el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="Time">时间（HH:mm:ss）</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="Date">日期（yyyy-MM-dd）</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="DateTime">日期时间（yyyy-MM-dd HH:mm:ss）</el-checkbox>
            </el-col>
          </el-row>
        </div>

        <div class="panel-fieldset">
          <h4 class="panel-legend">业务校验规则</h4>
          <el-row>
            <el-col :span="12">
              <el-checkbox label="Email"> Email</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="ZipCode">邮政编码（中国）</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="CnTel"> 固定电话号码（中国）</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="CnMobile">移动电话号码（中国）</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="CnPhone">固定或移动电话（中国）</el-checkbox>
            </el-col>
            <el-col :span="12">
              <el-checkbox label="IDCardNo">身份证号码（中国）</el-checkbox>
            </el-col>
          </el-row>
        </div>

        <div class="panel-fieldset">
          <h4 class="panel-legend">高级校验规则</h4>
          <el-row>
            <el-col :span="6">
              <el-checkbox label="Script">javascript脚本</el-checkbox>
            </el-col>
            <el-col :span="18">
              <el-input v-model="validateRule.script"></el-input>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="Regex">正则表达式</el-checkbox>
            </el-col>
            <el-col :span="18">
              <el-input v-model="validateRule.regex"></el-input>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="Length">长度</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-select v-model="validateRule.lengthSymbol" style="width:100%;" placeholder="请选择">
                <el-option label="等于" value="="></el-option>
                <el-option label="大于" value=">"></el-option>
                <el-option label="小于" value="<"></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-input-number v-model="validateRule.lengthValue" style="width:100%;"></el-input-number>
            </el-col>
          </el-row>
        </div>
      </el-checkbox-group>
      <div slot="footer">
        <el-button @click="myValidateRulesDialog = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="confirmFieldValidateRulesClickHandler">确 定</el-button>
      </div>
    </el-dialog>
</template>

<style scoped>

</style>

<script>
export default {
  props: ['validateRulesDialog', 'validateRule', 'tmpField'],
  data() {
    return {
      confirmLoading: false,
      myValidateRulesDialog: this.validateRulesDialog
    }
  },
  watch: {
    validateRulesDialog(val) {
      this.myValidateRulesDialog = val
    },
    myValidateRulesDialog(val) {
      this.$emit('update:validateRulesDialog', val)
    }
  },
  methods: {
    confirmFieldValidateRulesClickHandler() {
      let scriptIndex = this.validateRule.items.findIndex(val => val.startsWith('Script'))
      if (scriptIndex !== -1) {
        this.validateRule.items[scriptIndex] = 'Script=' + this.validateRule.script.toString()
      }
      let regexIndex = this.validateRule.items.findIndex(val => val.startsWith('Regex'))
      if (regexIndex !== -1) {
        this.validateRule.items[regexIndex] = 'Regex=' + this.validateRule.regex.toString()
      }
      let lengthIndex = this.validateRule.items.findIndex(val => val.startsWith('Length'))
      if (lengthIndex !== -1) {
        this.validateRule.items[lengthIndex] =
          'Length' + this.validateRule.lengthSymbol.toString() + this.validateRule.lengthValue.toString()
      }
      this.tmpField.verifyRule = this.validateRule.items.join('&&')
      this.validateRulesDialog = false
    }
  }
}
</script>
