<!--
 * @作者: 金鑫
 * @时间: 2021-10-29 07:47:21 
 * @描述: 控制表格增加行、删除行、向下复制行、单元格粘贴列
 -->
<template>
  <div class="tell-container">
    <div class="tell-info-gift-row" @click="addGift" v-if="detailBtn.includes('gift')">
      <span :class="{'f-c':isEdit}">添加赠品</span>
    </div>
    <div class="tell-info-add-row span-add-row"  @click="defaultAdd" v-if="!detailBtn.includes('add')">
      <span :class="{'f-c':isEdit}">增加行</span>
      <!-- <el-dropdown v-else :disabled="isEdit" trigger="click" :hide-on-click="false" @visible-change="dropDownEnter" placement="bottom-start">
        <span class="el-dropdown-link" :class="{'f-c':isEdit}">
          增加行
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="insert-row" :disabled="isEdit" style="padding:0;">
            <el-dropdown-item style="font-size:12px;display:flex;justify-content: center;align-items: center;padding:0 12px;">
              <span style="margin-right:4px">插入</span>
              <InputMini @insertNumber="getBottomInputMiniVal" :msg="msg" :isClear="isClear" />
              <span style="margin-left:4px">行</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown> -->
    </div>
    <div class="tell-info-copy-row" @click="copyRow" v-if="!detailBtn.includes('copy')">
      <span :class="{'f-c':isEdit}">复制行</span>
    </div>
    <div class="tell-info-delete-row" @click="deleteRow" v-if="!detailBtn.includes('delet')">
      <span :class="{'f-c':isEdit}">删除行</span>
    </div>
    <div class="tell-info-query" @click="copyCellColumn" v-if="!detailBtn.includes('allIn')">
      <span :class="{'f-c':isEdit}">批量填充</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    deviationSelectArr: Array,
    isEdit: Boolean,
    detailBtn: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      insertObj: {
        insertBottomVal: ''
      },
      msg: '0',
      isClear: false,
      isCheck: false
    }
  },
  // 通过选择行 切换 末尾添加或下拉指定位置添加
  // updated:function(){
  //   this.deviationSelectArr.length > 0 ? this.isCheck = true : this.isCheck = false
  // },
  methods: {
    defaultAdd(){
      // console.log('默认末尾添加行')
      if (this.isEdit) {
        return
      } else {
        this.$emit('insertObj', 1)
      }
    },
    // dropDownEnter(event) {
    //   if (this.isEdit) {
    //     return
    //   } else {
    //     if (event === false) {
    //       if (this.deviationSelectArr.length == 1) {
    //         if (parseInt(this.insertObj.insertBottomVal) !== 0) {
    //           this.$emit('insertObj', this.insertObj)
    //         }
    //       } else {
    //         this.$message.error('请选择一行,在操作!')
    //       }
    //       this.isClear = false
    //     } else {
    //       this.isClear = true
    //       this.insertObj.insertBottomVal = '0'
    //       if (parseInt(this.insertObj.insertBottomVal) !== 0) {
    //         this.$emit('insertObj', this.insertObj)
    //       }
    //     }
    //   }
    // },
    // getBottomInputMiniVal(data) {
    //   this.insertObj.insertBottomVal = data
    // },
    copyRow() {
      if (this.isEdit) {
        return
      } else {
        this.$emit('copyRow', true)
      }
    },
    deleteRow() {
      if (this.isEdit) {
        return
      } else {
        this.$emit('deleteRow', true)
      }
    },
    copyCellColumn() {
      if (this.isEdit) {
        return
      } else {
        this.$emit('copyCellcolumn', true)
      }
    },
    addGift(){
      if (this.isEdit) {
        return
      } else {
        this.$emit('addGift', true)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin current-deviation {
  margin-left: 16px;
}
.tell-container {
  display: flex;
  justify-content: center;
  align-items: center;
  .tell-info-add-row {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tell-info-gift-row:hover{
    color: #66b1ff;
    cursor: pointer;
  }
  .tell-info-copy-row {
    @include current-deviation;
  }
  .tell-info-delete-row {
    @include current-deviation;
  }
  .tell-info-query {
    @include current-deviation;
  }
}
.f-c {
  color: var(--el-disabled-color-base) !important;
  cursor: not-allowed;
}
.span-add-row:hover {
  cursor: pointer;  
  color: #66b1ff;
}
</style>