<template>
  <div class="rules">
    <Button
      class="rulse-add"
      size="small"
      type="primary"
      @click="addRules"
      v-if="!disabled">
      添加正则
    </Button>
    <div class="rules-item" v-for="(item,index) in value" :key="item.id">
      <div class="rules-input">
        <span>所选规则:</span>
        <Cascader
          transfer
          @on-change="(value)=>changeRules(value,item)"
          v-model="item.rulesType"
          class="cascader"
          :data="cascaderData"
          trigger="hover"
          :disabled="disabled"></Cascader>
      </div>
      <div class="rules-input" v-if="item.type==='lengthrange'">
        <span>{{item.rulesType.includes("min")?"最小":"最大"}}长度:</span>
        <InputNumber
        v-model="item.l"
        :disabled="disabled"
        @on-change="(value)=>changeNumber(value,item)"	/>
      </div>
      <div class="rules-input">
        <span>错误提示:</span>
        <Input placeholder="请输入错误提示" v-model="item.message" :disabled="disabled" />
      </div>
      <div class="rules-input" v-if="item.isShow||item.type==='custom'">
        <span>表达式:</span>
          <Input
            placeholder="请输入正则"
            v-model="item.pattern"
            :readonly="item.type!=='custom'"
            :disabled="disabled" />
      </div>
      <div class="rules-input" v-if="item.isShow">
        <span>触发条件:</span>
        <CheckboxGroup v-model="item.trigger">
          <Checkbox label="change" :disabled="disabled"></Checkbox>
          <Checkbox label="blur" :disabled="disabled"></Checkbox>
        </CheckboxGroup>
      </div>
      <span class="show-rules" @click="item.isShow =!item.isShow">{{item.isShow?'隐藏':'显示'}}规则</span>
      <div class="rules-close" @click="delRules(index)" v-if="!disabled">
        <Icon type="md-close-circle" :size="20" />
      </div>
    </div>
</div>
</template>
<script>
// 预定义正则
const RULES = [
  { type: 'required', name: '必填', pattern: '/[\\S]+/', message: '请输入必填项' },
  { type: 'mobile', name: '手机号', pattern: '/^1[3456789]\\d{9}$/', message: '请输入手机号' },
  { type: 'phone', name: '固定电话', pattern: '/^0\\d{2,3}-\\d{7,8}$/', message: '请输入固定电话' },
  { type: 'contact', name: '联系方式(手机+固定电话)', pattern: '/(^1[3456789]\\d{9}$)|(/^0\\d{2,3}-\\d{7,8}$)/', message: '请输入联系方式' },
  { type: 'email', name: '邮箱', pattern: '/^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/', message: '请输入邮箱' },
  { type: 'idCard', name: '身份证', pattern: '/(^\\d{15}$)|(^\\d{17}([0-9]|X|x)$)/', message: '请输入身份证号' },
  { type: 'number', name: '数字', pattern: '/^\\d+$/', message: '请输入数字' },
  { type: 'chinese', name: '中文', pattern: '/^[\\u4e00-\\u9fa5]+$/', message: '请输入中文' },
  { type: 'chineseenglish', name: '中英文', pattern: '/^[a-zA-z\\u4e00-\\u9fa5]+$/', message: '请输入中英文' },
  { type: 'min', name: '最小字符长度', pattern: '/^[\\s\\S]{6,}$/', message: '最少输入6个字符长度' },
  { type: 'max', name: '最大字符长度', pattern: '/^[\\s\\S]{0,99}$/', message: '最大输入99个字符长度' },
]

export default {
  name: 'Rules',
  props: {
    info: Object,
    value: {
      type: Array,
      default() {
        return []
      },
    },
    isNew: Boolean,
  },
  data() {
    return {
      cascaderData: [
        {
          value: 'required',
          label: '必填项校验',
        },
        {
          value: 'textformat',
          label: '文本格式校验',
          children: [
            {
              value: 'mobile',
              label: '手机号',
            },
            {
              value: 'phone',
              label: '固定电话',
            },
            {
              value: 'contact',
              label: '联系方式(手机+固定电话)',
            }, {
              value: 'number',
              label: '正整数',
            }, {
              value: 'email',
              label: '邮箱',
            }, {
              value: 'idCard',
              label: '身份证',
            },
          ],
        },
        {
          value: 'texttype',
          label: '文本类型校验',
          children: [
            {
              value: 'number',
              label: '数字',
            },
            {
              value: 'chinese',
              label: '中文',
            },
            {
              value: 'chineseenglish',
              label: '中英文',
            },
          ],
        },
        {
          value: 'lengthrange',
          label: '长度范围校验',
          children: [
            {
              value: 'min',
              label: '最小字符长度',
            },
            {
              value: 'max',
              label: '最大字符长度',
            },
          ],
        },
        {
          value: 'custom',
          label: '正则表达式校验',
        },
      ],
      rules: RULES,
      rulesType: [],
    }
  },
  computed: {
    disabled() {
      return !this.isNew
    },
    //包含某些禁用字段
    // curCascaderData() {
    //   const required =  this.value.find(val => val.type === 'required')
    //   const rst = JSON.parse(JSON.stringify(this.cascaderData))
    //   rst[0].disabled = required
    //   return rst
    // },
  },
  watch: {
    value: {
      handler(v) {
        this.info.required = !!v.find(val => val.type === 'required')
      },
      deep: true,
    },
  },
  methods: {
    addRules() {
      this.value.push({
        pattern: '',
        message: '',
        trigger: ['change'], //默认值
        type: '', // 用于判断
        rulesType: [], //用于回显
        id: new Date().getTime(),
        isShow: false, //是否展示 正则与触发规则
      })
    },
    changeRules(value, item) {
      const [type, detail] = value
      const r = this.rules.find(v => v.type === (detail || type))
      const { pattern = '', message = '' } = r || {}
      Object.assign(item, {
        pattern,
        message,
        type,
        ...(type === 'lengthrange' ? {
          l: detail === 'min' ? 6 : 99,
        } : {}),
      })
    },
    delRules(i) {
      this.value.splice(i, 1)
    },
    changeNumber(value, item) {
      const { rulesType: [, detail] } = item
      if (detail === 'min') {
        item.pattern = `'/^[\\s\\S]{${value},}$/'`
        item.message = `最少输入${value}个字符长度`
      } else {
        item.pattern = `/^[\\s\\S]{0,${value}}$/`
        item.message = `最大输入${value}个字符长度`
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.rules{
  .ivu-divider{
    &::before,&::after{
      top:0%
    }
  }
  .rules-item{
    background:#f8f8f8;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    position: relative;
    .rules-input{
      display: flex;
      margin:8px;
      >span{
        width: 80px;
        line-height:32px;
      }
      >div{
        width: calc(100% - 90px);
      }
    }
    .rules-close{
      position: absolute;
      top: -10px;
      right: -10px;
      color: rgba(0,0,0,.2);
      cursor: pointer;
      &:hover{
        color:  rgba(210,23,23,.5);
      }
    }
  }
  .rulse-add{
    margin-bottom: 10px;
  }
  ::v-deep .ivu-checkbox-group{
    line-height: 32px;
  }
  .cascader{
    display:  inline-block;
    width: 195px;
    margin-right: 10px;
  }
}
.show-rules{
  padding-left: 5px;
  font-size: 12px;
  color: #2d8cf0;
  cursor: pointer;
}
</style>