<template>
  <div>
    <el-input :value="value" readonly>
      <el-button @click="editing = true" type="primary" slot="append"><i class="fa fa-fw fa-cog"></i> 设置</el-button>
    </el-input>
    <el-dialog title="表单验证" :visible.sync="editing" append-to-body @closed="onHide">
      <div v-if="editing">
        <div class="type-head">
          <h5>基本类型</h5>
        </div>
        <div class="type-body">
          <el-col :span="8" v-for="item in verifyTypeBase" :key="item.value">
            <el-checkbox :label="item.name" :checked="val[item.value]" @change="onCheckboxChange($event, item.value)"></el-checkbox>
          </el-col>
        </div>
        <div class="type-head">
          <h5>其他常用</h5>
        </div>
        <div class="type-body">
          <el-col :span="8" v-for="item in verifyTypeOther" :key="item.value">
            <el-checkbox :label="item.name" :checked="val[item.value]" @change="onCheckboxChange($event, item.value)"></el-checkbox>
          </el-col>
        </div>
        <div class="type-head">
          <h5>高级设置</h5>
        </div>
        <div class="type-body">
          <el-form label-width="8em">
            <el-form-item label="正则表达式">
              <el-input v-model="val['Regex']"></el-input>
            </el-form-item>
            <el-form-item label="JS脚本">
              <el-input v-model="val['Script']"></el-input>
            </el-form-item>
            <el-form-item label="长度">
              <el-input-number :min="0" v-model="val['Length']"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSetting">确 定</el-button>
        <el-button @click="editing = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ZFormParamVerify',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  mounted () {
    this.checkValue()
  },
  watch: {
    value: 'checkValue'
  },
  data () {
    return {
      val: '',
      editing: false,
      verifyTypeBase: [
        {name: '不能为空', value: 'NotNull'},
        {name: '必须是数字', value: 'Number'},
        {name: '必须是整数', value: 'Int'},
        {name: '必须是时间', value: 'Time'},
        {name: '必须是日期', value: 'Date'},
        {name: '带日期的时间', value: 'DateTime'}
      ],
      verifyTypeOther: [
        {name: '电子邮件地址', value: 'Email'},
        {name: '必须是邮政编码', value: 'ZipCode'},
        {name: '必须是固定电话', value: 'CnTel'},
        {name: '必须是手机号码', value: 'CnMobile'},
        {name: '必须是电话号码', value: 'CnPhone'},
        {name: '必须是身份证', value: 'IDCardNo'}
      ],
      verifyTypeParam: [
        {name: '正则表达式', value: 'Regex'},
        {name: 'JS脚本', value: 'Script'},
        {name: '文本长度', value: 'Length'}
      ]
    }
  },
  methods: {
    checkValue () {
      this.val = {}
      if (this.value) {
        this.val = this.value.split('&&').reduce(function (prev, v) {
          if (this.verifyTypeParam.find(item => item.value === v.split('=')[0])) {
            const index = v.indexOf('=')
            if (index > -1) {
              const key = v.substring(0, index)
              const value = v.substring(index + 1)
              if (key && value) {
                prev[key] = value
              }
            }
          } else {
            prev[v] = true
          }
          return prev
        }.bind(this), {})
      }
    },
    onSetting () {
      this.editing = false
      const res = []
      for (let key in this.val) {
        let item = this.val[key]
        if (item) {
          if (this.verifyTypeParam.find(i => i.value === key)) {
            res.push(key + '=' + item)
          } else {
            res.push(key)
          }
        }
      }
      this.$emit('input', res.join('&&'))
    },
    onCheckboxChange (state, value) {
      this.val[value] = state
    },
    onHide () {
      this.checkValue()
    }
  }
}
</script>

<style scoped>
  .type-head {
    padding: 10px;
  }

  .type-body {
    padding: 10px;
    margin-bottom: 20px;
  }

  .type-body:after {
    content: '';
    display: table;
    clear: both;
  }
</style>
