<template>
  <div class="xd-range-group">
    <div class="xd-range-group__tips" v-if="tip">{{tip}}</div>
    <div class="xd-range-group__list">
      <div
        class="xd-range-group__list-item"
        v-for="(item,index) in list"
      >
        <xd-range
          width="auto"
          v-model="item['value']"
          :placeholder="placeholder"
          :size="size"
          :disabled="disabled"
        ></xd-range>
        <div style="width:60px">
          <el-link
          :underline="false"
          type="primary"
          icon="el-icon-circle-plus"
          @click="addItem"
          v-if="index === (list.length -1)"
          :disabled="disabled"
          ></el-link>
          <el-link
            :underline="false"
            type="danger"
            icon="el-icon-remove"
            @click="removeItem(index)"
            v-if="list.length>1"
            :disabled="disabled"
          ></el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @description 输入范围组
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.io/#/zh-CN/component/checkbox
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Array} defaultValue 已经选中数据  默认：[]
   * @property {String} tip 提示文案  默认：'注意:开始和结束卡号段必须填写，并且开始卡号必须小于结束开号.'
   * @property {Array} keys 绑定v-model键值   默认：['start_number','end_number']
   * @property {Array} placeholder 提示文案显示文案 （选填） 默认：['开始卡号', '结束卡号']
   * @property {String} size 文本块显示大小  默认：medium  其值：medium / small / mini
   *
   * @v-model [{"start_number": 20, "end_number": 23},{"start_number": 451202, "end_number": 4512300}]
   */

  import XdRange from "@/components/XdRange";
  import emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: "XdRangeGroup",
    components: {
      XdRange
    },
    mixins:[emitter],
    props:{
      tip: {
        type: String,
        default: '注意:开始和结束卡号段必须填写，并且开始卡号必须小于结束开号.'
      },

      defaultValue: {
        type: Array,
        default(){
          return [

          ]
        }
      },

      keys:{
        type: Array,
        default() {
          return ['start_number','end_number']
        }
      },

      placeholder:{
        type: Array,
        default() {
          return ['开始卡号', '结束卡号']
        }
      },

      size: {type: String, default: 'medium'}, //medium / small / mini

      disabled: {
        type:Boolean,
        default: false,
      },
    },

    watch: {
      list: {
        handler() {
          if(this.timeer) clearTimeout(this.timeer);
          this.timeer = setTimeout(()=>{
            this.update()
          }, 50)
        },
        deep: true
      },
    },

    data(){
      return {
        list: [],
        timeer: null,
      }
    },

    created() {
      this.init()
    },

    methods:{
      init(){
        if(this.defaultValue.length === 0)  this.addItem();
        else this.setContent();
        this.update();
      },

      setContent() {
        let temp = [];
        this.defaultValue.map(item=>{
          temp.push({...item , value: [item[this.keys[0]], item[this.keys[1]]]})
        });
        this.list = temp
      },

      addItem(){
        this.list.push({value: [null, null]});
        this.update()
      },

      removeItem(index){
        this.list.splice(index, 1);
        this.update()
      },

      update(){
        let temp = [];
        this.list.map(item=>{
          let m = {};
          m[this.keys[0]] = item.value[0];
          m[this.keys[1]] = item.value[1];
          if(!item.value[1] && !item.value[0]) return
          temp.push(m)
        });

        this.$emit('input', temp);
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [temp]);
          this.dispatch('ElFormItem', 'el.form.blur', [temp])
        }

      },

    }
  }
</script>

<style scoped lang="scss">
  .xd-range-group {
    width: 100%;
    &__tips {
      color: red;
      font-size: 12px;
      margin-bottom: 10px;
      line-height: 18px;
    }

    &__list {
      &-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        max-width: 500px;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        & > *:first-child {
          flex: 1;
          width: 0;
        }

        & > *:last-child {
          flex-shrink: 0;
          margin-left: 10px;
        }
      };
    }

    & ::v-deep .el-icon-circle-plus,
    & ::v-deep .el-icon-remove {
      font-size: 26px;
    }
  }

  @media screen and (max-width: 768px) and (orientation: portrait) {
    .xd-range-group {
      &__list {
        &-item {
          width: 100%;
        }
      }
    }
  }
</style>
