<!--
  @description: 报表统计-table列表渲染组件
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/29   04/22 import路径修改
-->
<template>
  <div class="reportChart_tableChart-view">
    <div
      class="reportChart_tableChart_content"
      :style="{height:scrollbar_height}"
    >
      <table
        class="reportChart_tableChart"
        :class="{'reportChart_tableChart_stripe':optionData.stripe}"
      >
        <thead>
          <tr>
            <!-- 序号 -->
            <th
              v-if="optionData.showIndex"
              class="serial"
            >
              序号
            </th>
            <!-- 表头数据 -->
            <th
              v-for="(item,index) in optionData.thead"
              :key="index"
              @click="item.handleHead.click(item)"
            >
              {{ item.lable }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(row,rowIndex) in optionData.data"
            :key="rowIndex"
          >
            <!-- 序号 -->
            <td
              v-if="optionData.showIndex"
              class="serial"
            >
              <!--  true TOP排序 -->
              <template v-if="optionData.showIndexTOP">
                <span>{{ rowIndex+1 }}</span>
              </template>
              <!--  true 非TOP排序 -->
              <template v-else>
                {{ rowIndex+1 }}
              </template>
            </td>
            <!-- 列表数据 -->
            <td
              v-for="(item,index) in optionData.thead"
              :key="index"
            >
              <!-- 当状态为按钮时 -->
              <template v-if="item.handle&&index===optionData.thead.length-1">
                <!-- 为对象时 -->
                <template v-if="getDataType(item.handle) === 'Object'">
                  <div :style="{width: (item.width?item.width+'px':'100%')}" class="btnCenter">
                    <el-button
                      round
                      size="mini"
                      type="primary"
                      @click="item.handle.click({row,rowIndex,lable:btn})"
                    >
                      {{ item.handle.text }}
                    </el-button>
                  </div>
                </template>
                <!-- 为数组时 -->
                <template v-else-if="getDataType(item.handle) === 'Array'">
                  <div :style="{width: (item.width?item.width+'px':'100%')}" class="btnCenter">
                    <el-button
                      v-for="(btn,btnIndex) in item.handle"
                      :key="btnIndex"
                      size="mini"
                      round
                      type="primary"
                      @click="btn.click({row,rowIndex,lable:btn})"
                    >
                      {{ btn.text }}
                    </el-button>
                  </div>
                </template>
              </template>
              <!-- 状态为空时 -->
              <template v-else>
                <!-- 最多14个字符超过省略显示 -->
                <template v-if="String(row[item.prop]).length<=16">
                  <span
                    v-if="item.handle"
                    class="pointer vertical td_text"
                    :style="{textAlign: (item.align?item.align:'center'),width: (item.width?item.width+'px':'100%')}"
                    @click="item.handle.click({row,rowIndex,lable:btn})"
                  >{{ row[item.prop] }}</span>
                  <span
                    v-else
                    class="vertical"
                    :style="{textAlign: (item.align?item.align:'center'),width: (item.width?item.width+'px':'100%')}"
                  >{{ row[item.prop] }}</span>
                </template>
                <template v-else>
                  <!-- 省略号 -->
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="row[item.prop]"
                    popper-class="reportChart_tooltip"
                    placement="top-start"
                  >
                    <span
                      v-if="item.handle"
                      class="pointer td_text"
                      :style="{textAlign: (item.align?item.align:'center'),width: (item.width?item.width+'px':'100%')}"
                      @click="item.handle.click({row,rowIndex,lable:btn})"
                    >{{ row|handlePropValue(item.prop) }}</span>
                    <span
                      v-else
                      :style="{textAlign: (item.align?item.align:'center'),width: (item.width?item.width+'px':'100%')}"
                    >{{ row|handlePropValue(item.prop) }}</span>
                  </el-tooltip>
                </template>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
      <!--正在加载中-->
      <div
        v-if="optionData.data.length===0"
        id="loadingBar"
      >
        <div class="progress">
          <div class="glimmer" />
          拼命加载中...
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div
      v-if="footer_show"
      class="reportChart_tableChart_footer"
    >
      <!-- 为对象时 -->
      <template v-if="getDataType(optionData.footer) === 'Object'">
        <el-button
          round
          size="mini"
          @click="optionData.footer.click({lable:optionData.footer,rowIndex:0})"
        >
          {{ optionData.footer.text }}
        </el-button>
      </template>
      <!-- 为数组时 -->
      <template v-else-if="getDataType(optionData.footer) === 'Array'">
        <el-button
          v-for="(btn,btnIndex) in optionData.footer"
          :key="btnIndex"
          size="mini"
          round
          @click="btn.click({rowIndex:btnIndex,lable:btn})"
        >
          {{ btn.text }}
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableChart',
  filters: {
    // 过滤文字 进行生省略封装
    handlePropValue: function(value, prop) {
      const str = String(value[prop])
      return str.substr(0, 6) + '...' + str.substr(str.length - 5, str.length)
    }
  },
  props: {
    height: {
      type: String,
      default: ''
    },
    // 参数值
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      scrollbar_height: '', // 滚动条高度
      footer_show: false, // 是否展示底部 true：展示 false：不展示
      optionData: {
        // 底部 操作类
        footer: [
          // {
          //   text: '', // 文案
          //   click: ({ row, rowIndex}) => {}// 操作函数
          // }
        ], // 底部按钮
        stripe: false, // 是否为斑马纹（隔行变色）
        showIndexTOP: true, // 是否TOP排序 默认是TOP排序
        showIndex: true, // 是否展示序号 默认 展示
        // 表头
        thead: [
          // {
          //   lable: '', // 标题
          //   prop: '', // 索引
          //  操作类 如果存在 handle 则不会读取 prop 内容
          //   handle: [
          //     {
          //       text: '', // 文案
          //       click: ({row,rowIndex,lable}) => {}// 操作函数
          //     }
          //   ],
          //   handle:{
          //       text: '', // 文案
          //       click: ({row,rowIndex,lable}) => {},// 操作函数
          //       data:{}//按钮类型
          //     }
          // }
        ],
        data: [] // 数据
      }
    }
  },
  watch: {
    // 监听数值变化
    'option.data'(val) {
      // 更新数据
      this.optionData.data = val
    }
  },
  created() {
    this.initData() // 初始化数据
  },
  methods: {
    // 获取对象类型
    getDataType(o) {
      if (typeof o === 'object') {
        if (typeof o.length === 'number') {
          return 'Array'
        } else {
          return 'Object'
        }
      } else {
        return 'param is no object type'
      }
    },
    // 初始化数据
    initData() {
      this.optionData = {
        ...this.optionData,
        ...this.option
      }
      // 滚动条高度
      if (this.height) {
        // 判断类型是否正确
        if (
          this.getDataType(this.optionData.footer) === 'Object' ||
          (this.getDataType(this.optionData.footer) === 'Array' &&
            this.optionData.footer.length > 0)
        ) {
          this.scrollbar_height = 'calc(' + this.height + ' - 40px)'
          this.footer_show = true
        } else {
          this.scrollbar_height = this.height
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./reportChart.public.less";
// 序号名次排列颜色
@serial_one: #6068e6; //第一
@serial_two: #f37b5d; //第二
@serial_three: #09c86f; //第三
@serial_rests: #c8c8d1; //其他
.reportChart_tableChart-view {
  .reportChart_tableChart_content {
    overflow: hidden;
    position: relative;
  }
  .reportChart_tableChart {
    width: 100%;
    font-size: 0.875rem;
    .btnCenter{
      text-align: center;
      display: inline-block;
    }
    tr {
      text-align: center;
      // 序号样式
      .serial {
        width: 2.5rem;
      }
      th,
      td {
        height: 2.5rem;
      }
    }
    thead {
      tr {
        th {
          font-weight: 500;
          font-size: 0.75rem;
          color: @main_color;
        }
      }
    }
    tbody {
      width: 100%;
      tr {
        border-top: 1px dotted @main-border-color;
        td {
          color: @main_color_rgba;
          &>span{
            display: inline-block;
            width: 100%;
          }
          //按钮样式
          // & > .el-button {
            // transform: scale(0.9);
          // }
          & > .td_text {
            &:hover {
              color: @text-ighlight;
            }
          }
        }
        // 序号样式
        td.serial {
          width: 2.5rem;
          & > span {
            // 默认样式
            transform: scale(0.8);
            color: @main_color;
            background: @serial_rests;
            display: inline-block;
            width: 1.25rem;
          }
        }
        // 序列排名为第一
        &:first-of-type > td.serial > span {
          background: @serial_one;
        }
        // 序列排名为第二
        &:nth-of-type(2) > td.serial > span {
          background: @serial_two;
        }
        // 序列排名为第三
        &:nth-of-type(3) > td.serial > span {
          background: @serial_three;
        }
      }
    }
  }
  // 斑马纹（隔行变色）
  .reportChart_tableChart_stripe {
    thead {
      tr {
        background: @main-bg;
      }
    }
    tbody {
      tr {
        border: none;
        &:nth-of-type(even) {
          background: @table-stripe;
        }
      }
    }
  }
  .reportChart_tableChart_footer {
    padding: 9px;
    text-align: center;
    // tale列表表格下面的按钮样式
    .el-button {
      color: @main_color;
      border: 1px solid @main-border-color;
      background-color: @highlight-bg;
    }
  }
}
</style>
