<!-- @desc:tabs组件  @auth:周兴  @time:2022/5/9 15:47 -->
<template>
  <Tabs :type="type" :size="size" v-model="model" @on-click="onClick" @dblclick.native="onDblClick"
        :draggable="draggable"
        @on-drag-drop="onDragDrop" class="edit-class">
    <TabPane v-for="(tabPaneItem,tabPaneIndex) in options" :key="tabPaneIndex" :ref="'tab-'+tabPaneIndex"
             :label="label(tabPaneItem)" :name="tabPaneItem.name">
      <slot :name="tabPaneItem.name"></slot>
    </TabPane>
  </Tabs>
</template>

<script>
export default {
  name: 'DkTabs',
  props: {
    // 组件的值
    value: {
      type: [String, Number],
      default: null
    },
    //组件选项
    options: {
      type: Array,
      default: () => []
    },
    // 页签的基本样式，可选值为 line 和 card
    type: {
      type: String,
      default: 'card'
    },
    // 大小 default,small
    size: {
      type: String,
      default: 'default'
    },
    // 是否有编辑状态
    editFlag: {
      type: Boolean,
      default: false,
    },
    // 实现拖拽调整页签顺序
    draggable: {
      type: Boolean,
      default: false,
    },
    // 是否显示关闭
    closable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tabLabel: null,
      model: null,
      social: null,
      label: data => {
        return h => {
          // 需要有垃圾桶
          if (data.clear) {
            // 说明有数据
            if (data.label.indexOf('【') >= 0) {
              return h('div', [
                h('span', data.label),
                h('Icon', {
                  'class': 'ivu-icon ivu-icon-iconfont iconfont icon-clear', on: {
                    'click': (e) => {
                      this.$emit('on-clear')
                      // 组织冒泡事件
                      e.stopPropagation();
                    }
                  }
                }),
              ])
            } else {
              return h('div', [
                h('span', data.label),
              ])
            }
          } else if (this.closable && !data.dblEditFlag && data.name === this.model) {
            // 如果tab数大于1才能出现删除
            if (this.options && this.options.length > 1) {
              // 说明有数据
              return h('div', [
                h('span', data.label),
                h('Icon', {
                  'style': 'font-size: 10px !important;margin-right: 0 !important;padding-left:10px',
                  'class': 'ivu-icon ivu-icon-iconfont iconfont icon-guanbi', on: {
                    'click': (e) => {
                      e.tab = data;
                      this.$emit('on-tab-remove', e)
                      // 组织冒泡事件
                      e.stopPropagation();
                    }
                  }
                }),
              ])
            }else{
              return h('div', [
                h('span', data.label),
              ])
            }
          } else if (data.dblEditFlag) {  // 编辑模式
            return this.$createElement('InputPop', {
              ref:'editInput',
              props: {
                value: data.label,
                clearable: false,
                addTabInputFlag: true, // 用户控制样式
                upperFlag: false,
              },
              on: {
                'on-blur': val => {
                  data.dblEditFlag = false;
                  data.label = val.target.value;
                }
              }
            })
            // return this.$createElement({
            //   ref: 'editInput',
            //   props: {
            //     value: data.label,
            //     clearable: false,
            //     addTabInputFlag: true, // 用户控制样式
            //     upperFlag: false,
            //   },
            //   on: {
            //     'on-blur': val => {
            //       data.dblEditFlag = false;
            //       data.label = val.target.value;
            //     }
            //   }
            // })
          } else {
            return h('div', [
              h('span', data.label),
            ])
          }
        }
      }
    }
  },
  watch: {
    model(n, o) {
      this.$emit('input', n)
    },
    value(n, o) {
      this.model = n;
    },
  },
  methods: {
    /**
     * @desc   : 获取标签名称
     * @author : 周兴
     * @date   : 2022/11/15 9:50
     */
    getLabel(h, tabPaneItem) {
      return h('div', [
        h('span', tabPaneItem.label),
        h('Badge', {
          props: {
            count: 3
          }
        })
      ])
    },
    /**
     * @desc   : 点击事件
     * @author : 周兴
     * @date   : 2022/11/15 9:50
     */
    onClick(val) {
      this.$emit('on-click', val, this.options.filter(it => it.name === val)[0], this.social)
      this.social = val;
    },
    /**
     * @desc   : 双击
     * @author : 周兴
     * @date   : 2023/3/29 21:20
     */
    onDblClick(val) {
      if (!this.editFlag) return;
      if (this.model) {
        let filters = this.options.filter(it => it.name == this.model);
        if (filters && filters.length > 0) {
          this.$set(filters[0], 'dblEditFlag', true);
          this.$nextTick(()=>{
            this.$refs['editInput'].focus();
          })
        }
      }
    },
    /**
     * @desc   : 拖拽顺序后调用
     * @author : 周兴
     * @date   : 2023/3/30 9:10
     */
    onDragDrop(name, newName, a, b, names) {
      // names 为调整后的 name 集合
      this.options.splice(b, 1, ...this.options.splice(a, 1, this.options[b]));
      // 拖拽的tab为当前的tab
      if (name !== this.model) {
        this.model = name;
      }
      this.onClick(name);  // 触发点击事件
      this.$emit('on-drag-drop', {name, newName, a, b, names})
    },
  },
  created() {
    this.model = this.value
  }
}
</script>
<style scoped>
/deep/ .ivu-tabs-bar {
  margin-bottom: 0 !important;
  border-bottom:unset!important;
}

.add-tab-input-class {
  height: 20px !important;
}

.edit-class /deep/ .ivu-tabs-tab-active {
  /*color: black !important;*/
  /*background: #fff !important;*/
}

</style>
