<template>
  <!-- 如果有配置多级表头的数据，则递归该组件 -->
  <el-table-column
    v-if="item?.children?.length"
    :label="item.title"
    :width="getWidth(item)"
    :header-align="item.headerAlign ? item.headerAlign : 'center'"
    :align="getAlign(item)"
  >
    <TableColumn v-for="(itm, indx) in item.children" :item="itm" :key="indx" />
  </el-table-column>
  <!-- 其他正常列/其他通过类型配置 -->
  <el-table-column
    v-else
    :fixed="item.fixed ? item.fixed : null"
    :prop="item.prop"
    :label="item.title"
    :width="getWidth(item)"
    :header-align="item.headerAlign ? item.headerAlign : 'center'"
    :align="getAlign(item)"
    :sortable="item.sortable"
    :show-overflow-tooltip="item.ellipsis != false"
  >
    <!-- 自定义表头插槽 -->
    <template #header="scope" v-if="item.slotHeaderName">
      <slot
        :name="item.slotHeaderName"
        :row="scope.row"
        :index="scope.$index"
        :item="item"
      ></slot>
    </template>
    <template #default="scope">
      <!-- 通过组件名称(引入组件)展示 -->
      <template v-if="item.component">
        <component
          :is="item.component"
          :data="scope.row"
          :index="scope.$index"
          :item="item"
        />
      </template>
      <!-- 通过插槽(将数据向外抛)展示 -->
      <template v-else-if="item.slotName">
        <slot
          :name="item.slotName"
          :row="scope.row"
          :index="scope.$index"
          :item="item"
        ></slot>
      </template>
      <template v-else>
        <!-- 图片类型展示 -->
        <span v-if="item.type == 'image'">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row[item.prop]"
            fit="contain"
            :z-index="999"
            :zoom-rate="1.2"
            :preview-teleported="true"
            :preview-src-list="[scope.row[item.prop]]"
            :initial-index="4"
            @click.stop="() => {}"
          ></el-image>
        </span>
        <!-- 按钮类型展示 -->
        <span v-else-if="item.type == 'button' && item.buttonList.length > 0">
          <div class="m-button-list">
            <template v-for="(ite, inde) in item.buttonList">
              <m-button
                v-if="ite.show ? ite.show(scope.row, ite) : true"
                :key="inde"
                :type="ite.type ? ite.type : 'default'"
                :round="ite.round ? ite.round : null"
                :width="ite.width ? ite.width : null"
                :text="ite.text ? ite.text : false"
                :disabled="false"
                v-bind="ite"
                @click.stop="
                  clickFun(ite.methodName, scope.row, scope.$index, ite)
                "
              >
                <template v-if="ite.title">{{ ite.title }}</template>
              </m-button>
            </template>
          </div>
        </span>
        <!-- 文本类型展示 -->
        <span v-else :style="{ color: getColor(item, scope.row) }">
          <format-text
            :row="scope.row"
            :index="scope.$index"
            :item="item"
            @click="clickFun(item.methodName, scope.row, scope.$index, item)"
          ></format-text>
        </span>
      </template>
    </template>
  </el-table-column>
</template>
<script>
import { defineComponent, computed, getCurrentInstance } from "vue";
import MButton from "../../MButton/index";
import formatText from "./format-text";
export default defineComponent({
  name: "MTableColumn",
  components: {
    "format-text": formatText,
    "m-button": MButton,
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["clickfun"],
  setup() {
    let { proxy } = getCurrentInstance();
    /**
     * 获取该单元格文字颜色
     * 配置item.color类型为{ 颜色: 单元格值 } 单元格值可以为单个或多个；示例：{'#f00': 1, '#f0f': 2, '#00f': [3,4] }
     */
    const getColor = computed(() => (item, row) => {
      if (!item.color || Object.keys(item.color).length == 0) {
        return "";
      }
      const value = row[item.prop]; // 值
      const colorConfig = item.color ? item.color : { "#409eff": 1, red: 0 }; // 颜色配置对象
      let color = ""; // 最终的颜色值
      Object.keys(colorConfig).forEach((key) => {
        const type = typeof colorConfig[key]; // 根据值找出对应的颜色
        if (type == "string" || type == "number") {
          if (value == colorConfig[key]) {
            color = key;
            return false;
          }
        } else {
          if (colorConfig[key].includes(value)) {
            color = key;
            return false;
          }
        }
      });
      return color;
    });
    // TODO 没有写width时，组件内根据prop规范width
    function getWidth(item) {
      if (item.width) return item.width;
      return null;
    }
    // 调用父组件事件
    function clickFun(methodName, row, index, item) {
      proxy.$emit("clickfun", methodName, row, index, item);
    }
    // TODO 没有写align时，组件内根据prop规范align
    function getAlign(item) {
      if (item.align) return item.align;
      return "center";
    }
    return {
      getColor,
      getWidth,
      clickFun,
      getAlign,
    };
  },
});
</script>
<style scoped lang="scss">
@import "../../../styles/MTable/index.scss";
</style>
