<template>
  <div class="option-change-container">
    <span>{{ label }}</span>
    <a-row v-if="type === 'option'" :gutter="8">
      <div class="option-change-box" v-for="(val, index) in value" :key="index">
        <a-col :span="9"><a-input v-model="val.label" placeholder="名称"/></a-col>
        <a-col :span="9"><a-input v-model="val.value" placeholder="值"/></a-col>
        <a-col 
          :span="6"
        ><div @click="handleDelete(index)" class="option-delete-box">
          <a-icon type="delete" /></div
        ></a-col>
      </div>
      <a-col :span="24"><a @click="handleAdd">添加</a></a-col>
    </a-row>
    <a-row v-if="type === 'selectOption'" :gutter="8">
      <a-select placeholder="请选择" allowClear :options="options" :value="selectDefaultObj.value" @change="changeSelectValue" />
      <a-input placeholder="自定义错误提示文案" v-model="selectDefaultObj.message"></a-input>
    </a-row>
    <a-row v-if="type === 'rules'" :gutter="8">
      <span v-for="(val, index) in value" :key="index" >
        <div class="option-change-box" v-if="val.types==='pattern'">
          <a-col :span="18"><a-input v-model="val.message" placeholder="提示信息"/></a-col>
          <a-col :span="18"><a-input v-model="val.pattern" placeholder="正则表达式pattern"/></a-col>
          <a-col 
            :span="6"
          ><div @click="handleDelete(index)" class="option-delete-box">
            <a-icon type="delete" /></div
          ></a-col>
        </div>
      </span>
      <a-col :span="24"><a @click="handleAddRules">增加校验</a></a-col>
    </a-row>
    <a-row v-else-if="type === 'colspan'" :gutter="8">
      <div class="option-change-box" v-for="(val, index) in value" :key="index">
        <a-col :span="18"><a-input-number style="width:100%" :max="24" v-model="val.span" placeholder="名称"/></a-col>
        <a-col :span="6"><div @click="handleDelete(index)" class="option-delete-box">
          <a-icon type="delete" /></div
        ></a-col>
      </div>
      <a-col :span="24"><a @click="handleAddCol">添加</a></a-col>
    </a-row>
  </div>
</template>
<script>
/*
 * author kcz
 * date 2019-11-20
 * description 修改多选、下拉、单选等控件options的组件，添加移除校验规制的组件
 */
export default {
  name: 'KChangeOption',
  props: {
    value: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      default: 'option'
    },
    label: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      options: [
        // {
        //   value: 'string',
        //   label: '字符串',
        //   pattern: '111',
        //   message: '字符串格式错误',
        //   type: 'select'
        // },
        // {
        //   value: 'number',
        //   label: '数字',
        //   pattern: '111',
        //   message: '数字格式错误',
        //   type: 'select'
        // },
        // {
        //   value: 'integer',
        //   label: '整数',
        //   pattern: '111',
        //   message: '整数格式错误',
        //   type: 'select'
        // },
        {
          value: 'url',
          label: 'URL地址 需输入以http(s)://开头的URL链接',
          pattern: '^(http(s?)|):\/\/(.+)$',
          message: 'URL格式错误',
          types: 'select'
        },
        {
          value: 'phone',
          label: '手机号',
          pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
          message: '手机号格式错误',
          types: 'select'
        },
        {
          value: 'email',
          label: '邮箱地址',
          pattern: '^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$',
          message: '邮箱地址格式错误',
          types: 'select'
        }
      ],
      patternArr: [],
      selectDefaultObj: {}
    }
  },
  watch: {
    value: {
      // value 需要深度监听及默认先执行handler函数
      handler(val) {
        const patternArr = val.filter(v => {
          return v.types === 'pattern'
        })
        this.patternArr = patternArr
        const selectDefaultValueArr = val.filter(v => {
          return v.types === 'select'
        })
        if (selectDefaultValueArr.length) {
          this.selectDefaultObj = selectDefaultValueArr[0]
        } else {
          this.selectDefaultObj ={}
        }
      },
      immediate: true,
      deep: true
    },

  },
  methods: {
    handleAdd() {
      // 添加
      const addData = [
        ...this.value,
        {
          value: '',
          label: ''
        }
      ]
      this.$emit('input', addData)
    },
    handleAddCol() {
      // 添加栅格Col
      const addData = [
        ...this.value,
        {
          span: 12,
          list: []
        }
      ]
      this.$emit('input', addData)
    },
    handleAddRules() {
      const addData = [
        ...this.value,
        {
          pattern: '',
          message: '',
          types: 'pattern'
        }
      ]
      this.$emit('input', addData)
    },
    handleDelete(deleteIndex) {
      // 删除
      this.$emit(
        'input',
        this.value.filter((val, index) => index !== deleteIndex)
      )
    },
    changeSelectValue(val) {
      const seletItem = this.options.filter(v => {
        return v.value === val
      })
        const addData = [...this.value.filter((val, index) => val.types !== 'select'), ...seletItem]
        this.$emit('input', addData)
    }
  }
}
</script>
<style lang="less" scoped>
.option-change-container {
  width: calc(100% - 8px);
}
.option-change-box {
  height: 38px;
  padding-bottom: 6px;
  .option-delete-box {
    margin-top: 3px;
    background: #ffe9e9;
    color: #f22;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s;
    &:hover {
      background: #f22;
      color: #fff;
    }
  }
}
</style>
