<!--
 * @Date: 2020-12-14 09:07:03
 * @LastEditors: zwq
 * @LastEditTime: 2021-06-21 12:07:42
 * @FilePath: \basic-admin\src\components\BaseTable\subcomponents\MethodBtn.vue
 * @Description: table右侧方法组件
-->
<template>
  <el-table-column
    v-if="methodList.length > 0"
    slot="handleBtn"
    prop="operation"
    :label="'tableHeader.operation' | i18nFilter"
    :width="trueWidth"
    align="center"
    :fixed="isFixed ? 'right' : false"
  >
    <template slot-scope="scope">
      <span
        v-for="(item, index) in methodList"
        :key="'btn' + index"
      >
        <el-button
          v-show="item.showParam ? (item.showParam.type === 'unequal' ?
            scope.row[item.showParam.name] !== item.showParam.value : item.showParam.type === 'equal' ?
              scope.row[item.showParam.name] === item.showParam.value : item.showParam.type === 'more' ?
                scope.row[item.showParam.name] > item.showParam.value : item.showParam.type === 'less' ?
                  scope.row[item.showParam.name] < item.showParam.value : item.showParam.type === 'indexof' ?
                    item.showParam.value.indexof(scope.row[item.showParam.name]) >= 0 : false
          ) : true"
          type="text"
          :style="{color:(item.type === 'delete' ? '#D40000' : '#1990FF')}"
          style="font-size:14px"
          size="mini"
          @click="clickButton({
            data: scope.row,
            type: item.type
          })"
        >{{ item.btnName | i18nFilter }}</el-button>
        <span v-if="index < methodList.length-1" style="margin:0 3px">|</span>
      </span>
    </template>

  </el-table-column>
</template>

<script>

/**
 * 传入的组件prop格式
 * methodList<MethodItem> = []
 * Interface MethodItem = {
 *  btnName: string,
 *  type: string,
 *  callback: function (选用)
 * }
 *
 */
export default {
  props: {
    methodList: {
      type: Array,
      default: () => {
        return []
      }
    },
    width: {
      type: Number,
      default: () => 0
    },
    isFixed: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    trueWidth() {
      return this.width ? this.width : this.methodList.length * 80
    }
  },
  methods: {
    clickButton(raw) {
      this.$emit('clickBtn', {
        data: raw.data,
        type: raw.type
      })
    }
  }
}
</script>

<style>

</style>
