<template>
  <div class="xd-stat-table-group">
    <el-card>
      <div slot="header" class="stat_header">
        <div class="header_top">
          <span class="flex flex-center">
            {{title}}
            <el-tooltip v-if="title_tip" effect="light" placement="right">
              <div slot="content" v-html="title_tip"></div>
              <i class="xdicon_question-circle xd_admin_iconfont"></i>
            </el-tooltip>
          </span>
          <div class="stat_search">
            <slot name="search"></slot>
          </div>
        </div>
        <div class="stat_time">{{time_title}}{{ last_updated_date_time }}</div>
      </div>
      <el-table :data="list" v-loading="loading" :cell-style="handleCellStyle" max-height="725">
        <el-table-column
          v-for="item in col_pre_list"
          :key="item.key"
          :label="item.label"
          :prop="item.key"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="(group, ii) in col_list"
          :key="ii"
          :label="group.label"
          align="center"
        >
          <el-table-column
            v-for="item in group.children"
            :key="item.key"
            :prop="item.key"
            :label="item.label"
            align="center"
          >
            <template slot="header" slot-scope="{row}">
              <span v-if="item.is_bold" style="font-weight: bold;color: #3D3D3D;">{{ item.label }}</span>
              <span v-else>{{ item.label }}</span>
            </template>
            <template slot-scope="{row}">
              <span v-if="item.is_bold" style="font-weight: bold;color: #3D3D3D;">{{ row[item.key] }}</span>
              <span v-else>{{ row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-for="item in col_last_list"
          :key="item.key"
          :label="item.label"
          :prop="item.key"
          align="center"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
  export default {
    name: "XdStatTableGroup",
    props: {
      //不需要分组的字段 头部
      col_pre_list_key: {
        type: String,
        default: "col_pre_list"
      },
      //分组的table字段
      col_list_key: {
        type: String,
        default: "col_list"
      },
      //不需要分组的字段 尾部
      col_last_list_key: {
        type: String,
        default: "col_last_list"
      },
      title: {
        type: String,
      },
      title_tip: {
        type: String
      },
      //搜索参数
      params: {
        type: Object,
        default: () => ({})
      },
      getList: {
        type: Function
      },
      //更新时间title
      time_title:{
        type:String,
        default:'实时统计时间：'
      },
    },
    watch: {
      params: {
        handler(n, o){
          if(!this.$xdHelper.isEmpty(n)){
            this.p_getList();
          }
        },
        deep: true
      }
    },
    data(){
      return {
        col_pre_list: [],
        col_last_list:[],
        col_list: [],
        list: [],
        last_updated_date_time: "",
        loading: false,
      }
    },
    created(){
      this.p_getList();
    },
    methods: {
      p_getList(){
        this.loading = true;
        this.getList(this.params).then(res => {
          this.loading = false;
          this.col_list = res.data[this.col_list_key];
          this.col_pre_list = res.data[this.col_pre_list_key];
          this.col_last_list = res.data[this.col_last_list_key];
          this.list = res.data.data;
          this.last_updated_date_time = res.data.last_updated_date_time;
        }).catch(err => {
          this.list = [];
          this.loading = false;
        })
      },
      handleCellStyle({row, column, rowIndex, columnIndex}){
        if(row.is_bold){
          return {
            color: '#3D3D3D',
            fontWeight: 'bold'
          }
        }
      }
    },
    destroyed(){

    }
  }
</script>
<style scoped lang="less">
  .xd-stat-table-group{
    .flex{
      display: flex;
    }
    .flex-center{
      align-items: center;
    }
    .stat_header{
      .header_top{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .stat_time{
        color: #A1A7B3;
        font-size: 12px;
        margin-top: 4px;
      }
    }
  }
</style>