<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-04 15:00:01
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-04-18 19:24:00
 * @FilePath: \yuan-huoling-browser\src\components\table\table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yaTableList">
    <div class="ya-title">{{ title }}</div>
    <div
      class="ya-tab"
      v-if="tabList"
      :style="{ width: tabList.length * 80 + 'px' }"
    >
      <div
        v-for="(item, i) in tabList"
        :key="i"
        class="ya-item"
        @click="handleChangeTab(i, item)"
        :class="{ 'ya-active': tabIndex == i }"
      >
        {{ item }}
      </div>
    </div>
    <div class="ya-detailContent">
      <el-row class="ya-row" v-if="type == 'list'">
        <template v-for="(item, i) in column" :key="i">
          <el-col class="ya-col" :span="item.col || 8"
            ><div class="ya-col-left">{{ item.title }}</div>
            <div class="ya-col-right">
              <template v-if="item.slotName">
                <slot :name="item.slotName" :item="item"></slot>
              </template>
              <template v-else>
                <yaTooltip
                  placement="top"
                  trigger="hover"
                  :enterable="false"
                  :hide-after="0"
                  :content="item.content"
                  v-if="item.content"
                >
                  <div class="ya-col-content">
                    {{ item.content }}
                  </div></yaTooltip
                >
                <template v-else>-</template>
              </template>
            </div></el-col
          >
        </template>
      </el-row>
      <div class="ya-table" v-if="type == 'table'">
        <ya-table :data="data" :column="column">
          <template
            v-for="(tableSlot, index1) in getTableSlots"
            :key="index1"
            #[tableSlot]="{ item, index }"
          >
            <slot :name="tableSlot" :item="item" :index="index"></slot>
          </template>
        </ya-table>
        <div class="ya-pagination" v-if="total && total.length > 0">
          <ya-pagination
            :page-sizes="[10, 20, 50, 100]"
            :currentPage="page"
            :pageSize="pageSize"
            @sizeChange="handlePageSizeChange"
            @currentChange="handlePageChange"
            :total="total"
            small
          >
          </ya-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs, defineProps, computed } from "vue";
const props = defineProps([
  "title",
  "type",
  "data",
  "column",
  "page",
  "pageSize",
  "handlePageSizeChange",
  "handlePageChange",
  "total",
  "tabList",
  "handleChangeTab",
  "tabIndex",
]);
const {
  title,
  type,
  data,
  column,
  page,
  pageSize,
  handlePageSizeChange,
  handlePageChange,
  total,
  tabList,
  handleChangeTab,
  tabIndex,
} = toRefs(props);
const getTableSlots = computed(() => {
  const tableSlots = [];
  props.column &&
    props.column.forEach((item) => {
      const { slotName } = item;
      if (slotName) {
        tableSlots.push(slotName);
      }
    });
  return tableSlots;
});
</script>
<style lang="scss" scoped>
.yaTableList {
  font-family: PingFangSC-Medium, PingFang SC;
  .ya-title {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
    margin-bottom: 22px;
  }
  .ya-tab {
    padding: 3px;
    border-radius: 2px;
    border: 1px solid #d1dae2;
    display: flex;
    margin-bottom: 16px;
    .ya-item {
      width: 80px;
      height: 22px;
      border-radius: 1px;
      font-size: 14px;
      color: #647382;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
    }
    .ya-active {
      color: #ffffff;
      background: #0095ff;
    }
  }
  .ya-detailContent {
    padding-left: 0px;
    .ya-pagination {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      text-align: end;
    }
    .ya-row {
      width: 100%;
      border-left: 1px solid #d1dae2;
      border-top: 1px solid #d1dae2;
    }
    .ya-col {
      display: flex;
      border-bottom: 1px solid #d1dae2;
      border-right: 1px solid #d1dae2;
      font-size: 14px;
      line-height: 22px;
      .ya-col-left {
        width: 140px;
        min-width: 140px;
        background: #fafbfc;
        border-right: 1px solid #d1dae2;
        padding: 9px 21px;
        color: #677b8e;
        display: flex;
        align-items: center;
      }
      .ya-col-right {
        color: #333333;
        padding: 9px 21px;
        display: flex;
        align-items: center;
        .ya-col-content {
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
