<!--
  @description: 报表统计-table列表渲染组件-多个颜色-分类采购项目数量
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/03/08
-->
<template>
  <div class="reportColor_tableChart-view">
    <div
      class="reportColor_tableChart_content"
      :style="{height:scrollbar_height}"
    >
      <table class="reportColor_tableChart">
        <!-- 标题 -->
        <tr>
          <th v-for="(item,index) in optionData.thead" :key="index">
            {{ item.lable }}
          </th>
        </tr>
        <tbody>
          <!-- 数量 -->
          <!-- <tr v-if="optionData.type === 'count'">
            <td />
            <td> {{ optionData.data.totalCount00 }}</td>
            <td> {{ optionData.data.totalCount01 }}</td>
            <td> {{ optionData.data.totalCount11 }}</td>
            <td> {{ optionData.data.totalCount12 }}</td>
            <td> {{ optionData.data.totalCount13 }}</td>
            <td> {{ optionData.data.totalCount14 }}</td>
          </tr> -->
          <!-- 金额 -->
          <!-- <tr v-if="optionData.type === 'money'">
            <td />
            <td> {{ optionData.data.totalMoney00 }}</td>
            <td> {{ optionData.data.totalMoney01 }}</td>
            <td> {{ optionData.data.totalMoney11 }}</td>
            <td> {{ optionData.data.totalMoney12 }}</td>
            <td> {{ optionData.data.totalMoney13 }}</td>
            <td> {{ optionData.data.totalMoney14 }}</td>
          </tr> -->
        </tbody>
      </table>
      <table
        class="reportColor_tableChart num_table"
      >
        <tbody>
          <tr
            v-for="(row,rowIndex) in optionData.data.records"
            :key="rowIndex"
          >
            <td
              v-for="(item,index) in optionData.thead"
              :key="index"
            >
              <!-- 状态为空时 -->
              <template>
                <!-- 最多14个字符超过省略显示 -->
                <!-- 如果当前循环字段是productName 且为数量 -->
                <span
                  v-if="String(item.prop) === 'productName' && optionData.type === 'count'"
                >
                  {{ row[item.prop]+' ('+row.sumCount+')' }}
                </span>
                <!-- 如果当前循环字段是productName 且为金额 -->
                <span
                  v-if="String(item.prop) === 'productName' && optionData.type === 'money'"
                >
                  {{ row[item.prop]+' ('+row.sumMoney+')' }}
                </span>
                <span
                  v-if="String(item.prop) !== 'productName'"
                  class="pointer active"
                  @click="item.handle.click({row,item})"
                >
                  {{ row[item.prop] }}
                </span>
                <!-- <template v-else>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="row[item.prop]"
                    popper-class="reportChart_tooltip"
                    placement="top-start"
                  >
                    <span>{{ row|handlePropValue(item.prop) }}</span>
                  </el-tooltip>
                </template> -->
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </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: [],
        // 表头
        countThead: [
          // {
          //   lable: '', // 标题
          //   prop: '', // 索引
          //  操作类 如果存在 handle 则不会读取 prop 内容
          //   handle: [
          //     {
          //       text: '', // 文案
          //       click: ({row,rowIndex,lable}) => {}// 操作函数
          //     }
          //   ],
          //   handle:{
          //       text: '', // 文案
          //       click: ({row,rowIndex,lable}) => {},// 操作函数
          //       data:{}//按钮类型
          //     }
          // }
        ],
        moneyThead: [],
        type: 'count', // 类型 数量 count  金额 money
        data: {} // 数据
      }
    }
  },
  watch: {
    // 监听数值变化
    'option.data'(val) {
      // 更新数据
      this.optionData.data = val
      // 计算每行的合计
      this.sumAll()
    }
  },
  created() {
    this.initData() // 初始化数据
  },
  methods: {
    // 切换type
    initType(val) {
      this.optionData.type = val // 赋值type
      this.initData() // 初始化数据
    },
    // 获取对象类型
    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
          // console.log(this.footer_show)
        } else {
          this.scrollbar_height = this.height
        }
      }
    },
    // 计算每行的合计
    sumAll() {
      // 为了防止首次undefined &&
      this.optionData.data.records && this.optionData.data.records.map(row => {
        // 设置初始值
        let sumCount = 0
        let sumMoney = 0
        // 数量
        sumCount += row.count00 + row.count01 + row.count11 + row.count12 + row.count13 + row.count14
        // 金额
        sumMoney += row.money00 + row.money01 + row.money11 + row.money12 + row.money13 + row.money14
        // 给list增加字段
        this.$set(row, 'sumCount', sumCount)
        this.$set(row, 'sumMoney', sumMoney)
      })
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./../reportChart.public.less";
// 序号名次排列颜色
@serial_one: #6068e6; //第一
@serial_two: #f37b5d; //第二
@serial_three: #09c86f; //第三
@serial_rests: #c8c8d1; //其他
.reportColor_tableChart-view {
  .reportColor_tableChart_content {
    background: @highlight-bg;
    overflow: hidden;
  }
  .num_table{
    margin-top: 1rem;
    border-top: 1px dotted @main-border-color;
    border-left: 1px dotted @main-border-color;
  }
  .reportColor_tableChart {
    width: 100%;
    font-size: 0.875rem;
    .active{
      &:hover{
        color:red;
      }
    }
    tr {
      text-align: center;
      th,
      td {
        height: 1.5rem;
        width: 13.25%;
      }
      th:nth-child(1){
        text-align: right;
        width: 18.25%;
      }
      td:nth-child(1){
        width: 18.25%;
      }
      td:nth-child(2){
        color: #67DFFF;
      }
      td:nth-child(3){
        color: #8080FF;
      }
      td:nth-child(4){
        color: #FFFF80;
      }
      td:nth-child(5){
        color: #FACD91;
      }
      td:nth-child(6){
        color: #C280FF;
      }
      td:nth-child(7){
        color: #BFBF00;
      }
    }
    tbody {
      width: 100%;
      tr {
        td {
          &:nth-child(1){
            text-align: right;
          }
        }
      }
    }
  }
    .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>
