<template>
  <el-table
    size="mini"
    border
    :data="listFields"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @row-dblclick="dblclick"
    v-bind="options">
  >
    <!-- 多选列 -->
    <el-table-column v-if="selection" type="selection" stripe width="55"></el-table-column>

    <!-- 前插槽 -->
    <slot name="tablesPre"> </slot>

    <!-- 列表 -->
    <el-table-column v-for="(item, index) in fileds" :key="index" :label="item.label">
      <template slot-scope="scope">
        <el-image style="width: 50px; height: 50px" :src="scope.row[item.name]" fit="fit" v-if="item.formater == 'image' && scope.row[item.name] && scope.row[item.name] !== ''"></el-image>
        <span v-if="item.formater == 'image' && (scope.row[item.name] == '' || !scope.row[item.name])">
          <i v-if="item.icon" :class="item.icon"></i>
          <span style="margin-left: 10px">暂无</span>
        </span>
        <span v-if="item.formater !== 'image'">
          <i v-if="item.icon" :class="item.icon"></i>
          <span style="margin-left: 10px">{{ scope.row[item.name] }}</span>
        </span>
      </template>
    </el-table-column>

    <!-- 后插槽 -->
    <slot name="tablesExt"></slot>
    <!-- 操作列自定义插槽 -->
    <el-table-column v-if="!readOnly && !operate" align="right" :width="options.width" label="操作">
      <template slot-scope="scope">
        <slot v-bind="{ scope }" name="tablesOperate"></slot>
      </template>
    </el-table-column>

    <!-- 操作列 -->
    <el-table-column v-if="!readOnly && operate" align="right" :width="options.width || '180'" label="操作">
      <template slot-scope="scope">
        <el-tooltip
          v-for="(item, index) in operation"
          :key="index"
          class="item"
          effect="dark"
          :content="item.label"
          placement="top-start"
        >
          <el-button type="text" v-if="item.icon" :class="item.icon" :size="options.size" @click="handle(scope.row, item)"></el-button>
          <el-button type="text" v-else  :size="options.size" @click="handle(scope.row, item)">{{ item.label }}</el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import _ from 'lodash';
import { getDicts } from "@/api/system/dict/data";
export default {
  props: {
    // 多选属性
    selection: { type: Boolean, default: false },
    // 只读属性
    readOnly: { type: Boolean, default: false },
    // 数据
    tableData: { type: Array, default: () => [] },
    // 使用默认操作 false 通过插槽自定义操作
    operate: { type: Boolean, default: true },
    // 操作按钮选项
    operation: {
      type: Array,
      default: () => [
        { name: 'edit', label: '修改', icon: 'el-icon-edit' },
        { name: 'delete', label: '删除', icon: 'el-icon-delete' }
      ]
    },
    // 列表循环项
    filed: { type: Array, default: () => [] },
    // 操作列属性选项
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      listFields: [],
      dicts: {},
      fileds: []
    };
  },
  watch: {
    tableData(val) {
      this.getDict();
    }
  },
  computed: {
    computedFilterFiled() {
      let fileds = _.cloneDeep(this.filed);
      fileds = fileds.map(e => {
        if (e.formater && e.formater.includes('dict') && !e.dict) {
          e.dict = this.dicts[e.formater.split(':')[1]];
          e.formater = 'dict';
        }
        return e;
      });
      this.tableData.map(i => {
        fileds.find(e => {
          if (e.formater == 'dict' && e.dict) {
            const dict = e.dict.find(k => k.dictValue == i[e.name]);
            if (dict) i[e.name] = dict.dictLabel;
          }
        });
        return i;
      });
      return this.options['treeId'] ? this.handleTree(this.tableData, this.options.treeId) : this.tableData;
    }
  },
  created() {
    this.fileds = this.filed.filter(e => e.isShow !== false);
    this.getDict();
  },
  mounted() {},
  methods: {
    async getDict() {
      await Promise.all( _.cloneDeep(this.filed).map(async e => {
        if (e.formater && e.formater.includes('dict')) {
          const dict = await getDicts(e.formater.split(':')[1]);
          this.dicts[e.formater.split(':')[1]] = dict.data;
        }
        return { ...e }
      }))
      this.listFields = this.computedFilterFiled;
    },
    // 操作函数
    handle(row, item) {
      this.$emit('handle', { row, item });
    },
    // 多选函数
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val);
    },
    // 单元行双击
    dblclick(row, column, event) {
      this.$emit('dblclick', { row, column, event });
    }
  }
};
</script>
