<template>
  <el-table-column
    fixed="right"
    :label="label"
    :width="width"
    :type="type"
    className="el-table-extend-control"
    :labelClassName="labelClassName"
    :minWidth="minWidth"
    :renderHeader="renderHeader"
    :sortable="sortable"
    :sortMethod="sortMethod"
    :sortBy="sortBy"
    :resizable="resizable"
    :context="context"
    :columnKey="columnKey"
    :align="align"
    :headerAlign="headerAlign"
    :showOverflowTooltip="showOverflowTooltip"
    :formatter="formatter"
    :selectable="selectable"
    :reserveSelection="reserveSelection"
    :filterMethod="filterMethod"
    :filteredValue="filteredValue"
    :filters="filters"
    :filterPlacement="filterPlacement"
    :filterMultiple="filterMultiple"
    :index="index"
    >
    <template slot-scope="scope">
      <!-- 显示更多 -->
      <template v-if="filterControl[scope.$index].length > 2">
        <el-button @click="filterControl[scope.$index][0].callback(data[scope.$index], scope.$index, data)" type="text" v-text="filterControl[scope.$index][0].labelFun ? filterControl[scope.$index][0].labelFun(data[scope.$index]) : filterControl[scope.$index][0].label"></el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="text">
            {{t('el.tableextend.more')}}<i class="uk-icon-arrow-down uk-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item  v-for="(item, iindex) in filterControl[scope.$index]" v-show="iindex != 0" :key="iindex" :command="scope.$index +'-' + iindex" v-text="item.label"></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-else>
        <!-- scope.$index 是行数 -->
        <el-button v-for="(item, index) in filterControl[scope.$index]" :key="index" @click="item.callback(data[scope.$index], scope.$index, data)" type="text" v-text="item.label"></el-button>
      </template>
    </template>
  </el-table-column>
</template>
<script>
import ElTableColumn from 'uke-ui/packages/table-column';
import ElDropdown from 'uke-ui/packages/dropdown';
import Locale from 'uke-ui/src/mixins/locale';

const MIN_WIDTH = 115;

export default {
  name: 'ElTableExtendControl',
  componentName: 'ElTableExtendControl',
  mixins: [Locale],
  data() {
    return {}
  },
  computed: {
    filterControl () {
      const res = []
      const _control = this.control;
      this.data.forEach((rowData) => {
        const _arr = [];
        _control.forEach((item) => {
          if (item.rac !== undefined) {
            if (typeof item.rac === 'function') {
              if (item.rac(rowData)) {
                _arr.push(item)
              }
            } else {
              throw new Error('table-extend-control error: prop "rac" must be a function')
            }
          } else {
            _arr.push(item)
          }
        })
        res.push(_arr);
      })
      return res
    }
  },
  props: {
    /* 扩展属性 */
    /**
     * @augments control[{dataItem}] 操作属性
     * {
     *   lebal: String, // 显示文字
     *   lebalFun: Function, // 一个方法返回显示文字（String），回传参数(row)；有lebalFun时忽略label
     *   rac: Function,  // 一个方法返回权限值（Boolean），回传参数(row)
     *   callback: Function, // 回调函数，回传参数(row, $index, data)
     * }
     **/
    control: {
      type: Array,
      default: function() {
        return [];
      }
    },
    /**
     * @augments data[{dataItem}] 表格的数据（默认在table-extend内传入）
     **/
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    /* 原来 ElTableColumn 参数*/
    type: {
      type: String,
      default: 'default'
    },
    label: String,
    className: String,
    labelClassName: String,
    // property: String,
    // prop: String,
    width: {},
    minWidth: {
      default: MIN_WIDTH
    },
    renderHeader: Function,
    sortable: {
      type: [String, Boolean],
      default: false
    },
    sortMethod: Function,
    sortBy: [String, Function, Array],
    resizable: {
      type: Boolean,
      default: true
    },
    context: {},
    columnKey: String,
    align: String,
    headerAlign: String,
    showTooltipWhenOverflow: Boolean,
    showOverflowTooltip: Boolean,
    fixed: {
      type: [String, Boolean],
      default: 'right'
    },
    formatter: Function,
    selectable: Function,
    reserveSelection: Boolean,
    filterMethod: Function,
    filteredValue: Array,
    filters: Array,
    filterPlacement: String,
    filterMultiple: {
      type: Boolean,
      default: true
    },
    index: [Number, Function]
  },
  components: {
    ElTableColumn,
    ElDropdown
  },
  methods: {
    handleCommand(command) {
      try {
        const arr = command.split('-')
        const row = Number(arr[0])
        const index = Number(arr[1])
        this.control[index].callback && this.control[index].callback(this.data[row], row, this.data)
      } catch (e) {
        console.error(e)
      }
    }
  },
  mounted() {

  }
}
</script>
