<template>
  <div class="intelligence-table">
    <el-table :data="data" :height="height" v-bind="$attrs" v-on="$listeners">
      <!-- 复选框 -->
      <el-table-column v-if="isSelection" type="selection" width="50" header-align="center" align="center" />
      <!-- 序号 -->
      <el-table-column v-if="isOrder" label="序号" type="index" fixed="left" width="50" />
      <!-- 其他通过类型配置 -->
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :fixed="item.fixed ? item.fixed : null"
        :prop="item.prop"
        :label="item.label"
        v-bind="item"
        v-on="item.method"
      >
        <template v-if="item.show ? item.show(scope.row, item, scope.$index) : true" slot-scope="scope">
          <template v-if="!item.component">
            <template v-if="!item.slotName">
              <template v-if="!item.type">
                <format-box :config="item" :data="scope.row" :index="scope.$index" />
              </template>
              <!-- 根据类型显示 -->
              <template v-else>
                <!-- type 文字显示颜色  -->
                <span v-if="item.type == 'color'" :style="{color: getColor(item, scope.row)}">
                  <format-box :config="item" :data="scope.row" :index="scope.$index" />
                </span>
              </template>

            </template>
            <!-- 插槽， 将数据向外抛 -->
            <template v-else>
              <slot :name="item.slotName" :data="scope.row" :index="scope.$index" :config="item" />
            </template>
          </template>
          <!-- 通过组件名称引入组件 -->
          <template v-else>
            <component :is="item.component" :data="scope.row" :index="scope.$index" :config="item" />
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
/**
 * @displayName lls-table
 */
import FormatBox from './format-box.vue'
export default {
  name: 'LlsTable',
  components: {
    FormatBox
  },
  props: {
    /**
     * 是否能单条展开显示详情
     */
    isExpand: {
      type: Boolean,
      default: false
    },
    /**
     * 显示复选框
     */
    isSelection: {
      type: Boolean,
      default: false
    },
    /**
     * 显示排序
     */
    isOrder: {
      type: Boolean,
      default: false
    },
    /**
     * 表格高度
     */
    height: {
      type: [Number, String],
      default: '100%'
    },
    /**
     * 表格数据
     */
    data: {
      type: Array,
      default: () => []
    },
    /**
     * <p> 列数组 </p>
     * <p> 单条数据</p>
     *      {
     *        label: '列名'
     *        prop: '变量名'
     *        type: '类型：值 color'
     *        width: '列宽'
     *        method: '展示字段需要经过处理, 类型为 function , 返回字符串或字符串模板 , 使用该属性， format 将失效'
     *                ---> 方法带有参数 (row 单条数据, index 位于第一行, prop 绑定的字段名, item 单条配置)
     *        format: '展示的字段需要经过方法转义'
     *              可选值: money (金额格式， 处理成小数点后四位)
     *                      date (日期格式， 处理成月日时分秒)
     *                      string 枚举名称
     *        component: '要插入其他组件, 页面上import 导入'
     *        slotName：'插槽, 配置项不能 满足要求时， 交给本身页面处理'
     *        colorList: '颜色列表，type为 color时生效
     *              默认值: {"#409eff": 1, 'red': 0},
     *              可书写：{"#acdaa": [1, 2], 'red': 0, 'green, [3,4]} 多状态显示一个颜色'
     *      }
     */
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
    getColor() { // 获取字体颜色
      return (item, row) => {
        const propVal = row[item.prop] // 单元格值
        const list = item.colorList ? item.colorList : { '#409eff': 1, 'red': 0 } // 颜色对象
        let color = ''
        Object.keys(list).forEach(key => { // 根据值找出对应的颜色
          const type = typeof (list[key])
          if (type == 'string' || type == 'number') {
            if (propVal == list[key]) {
              color = key
              return false
            }
          } else {
            if (list[key].includes(propVal)) {
              color = key
              return false
            }
          }
        })
        return color
      }
    }
  }
}
</script>
<style lang="scss">
.intelligence-table {
  .el-table,
  .el-table tr,
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
  .el-table td.el-table__cell,
  .el-table th.el-table__cell,
  .el-table th.el-table__cell.is-leaf,
  .el-table th, .el-table tr,
  .el-table::before {
    background-color: transparent;
    color: #ffffff;
    font-size: 0.14rem;
    border: 0px;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td, .el-table__body tr.hover-row>td.el-table__cel {
    background-color: transparent;
  }
  .el-table .cell {
    color: #ffffff;
  }
  .el-table .el-table__cell {
    padding: 0.06rem 0;
  }
  .el-table th.el-table__cell > .cell {
    font-size: 0.16rem;
    color: rgba(255, 255, 255, 0.7);
  }
}
</style>
