<template>
  <div class="container-company-detail">
    <el-dialog v-dialogDrag title="公司点击详情" width="800px" :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="isCompanyDetailShow" :before-close="handleClose">
      <p v-if="companyCount" style="margin">公司总点击次数{{ companyCount }}次</p>
      <div class="table-body">
        <table>
          <thead>
            <tr class="thead-content">
              <th class="thead-rs" v-for="item in dataList" colspan="2" :key="item.ChartPermissionName">{{ item.ChartPermissionName }}</th>
            </tr>
          </thead>
          <tr v-for="(item, index) in childrenList" :key="index">
            <td v-for="(i, unm) in item" :key="unm" class="new-box">
              <span class="thbody-rs">{{ i.name }}</span>
              <template v-if="i.IsNew == 1">
                <img v-if="unm % 2 == 0" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_subject.png" alt="" class="new-img" />
              </template>
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  props: {
    isCompanyDetailShow: {
      type: "boolean",
      default: false,
      required: true,
    },
    companyDetailId: {
      type: Number,
      required: true,
      default: 0,
    },
  },
  data() {
    return {
      dataList: [],
      childrenList: [],
      companyCount: 0,
    };
  },
  watch: {
    isCompanyDetailShow: {
      handler(newValue) {
        newValue && this.getCompanyDetailList();
      },
    },
  },
  methods: {
    // 获取点击详情的数据
    async getCompanyDetailList() {
      const res = await raiInterface.reportSelectionHistory({
        ArticleId: this.companyDetailId,
      });
      if (res.Ret === 200) {
        this.companyCount = res.Data.Count;
        let childrenIndex = 0;
        res.Data.List &&
          res.Data.List.forEach((item) => {
            if (childrenIndex < item.List.length) {
              childrenIndex = item.List.length;
            }
          });
        this.dataList = res.Data.List;
        for (let i = 0; i < childrenIndex; i++) {
          let childrenArr = [];
          this.dataList.forEach((item) => {
            childrenArr.push({
              name: item.List[i] ? item.List[i].SubjectName : "",
              ...item.List[i],
            });
            childrenArr.push({
              name: item.List[i] ? item.List[i].Count : "",
              ...item.List[i],
            });
          });
          this.childrenList.push(childrenArr);
        }
      }
    },
    // 关闭弹框
    handleClose() {
      this.dataList = [];
      this.childrenList = [];
      this.companyCount = 0;
      this.$emit("update:companyDetailId", 0);
      this.$emit("update:isCompanyDetailShow", false);
    },
  },
};
</script>
<style scoped lang="scss">
.container-company-detail {
  .table-body {
    width: 100%;
    height: 350px;
    overflow: hidden;
    margin: 20px 0;
    overflow-y: auto;
    border-top: 1px solid #dcdfe6;
    table {
      width: 100%;
      font-size: 14px;
      color: #666;
      thead {
        position: sticky;
        z-index: 999;
        top: 0;
        left: 0;
        border-left: 1px solid #dcdfe6;
        border-right: 1px solid #dcdfe6;
        th {
          border: none;
          outline-color: #dcdfe6;
          outline-style: solid;
          outline-width: 0.5px;
        }
      }
      td,
      th {
        border: 1px solid #dcdfe6;
        height: 45px;
        text-align: center;
        background-color: #fff;
      }
    }
    .thbody-rs {
      display: inline-block;
      width: 90px;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  div::-webkit-scrollbar {
    width: 3px !important;
  }
  .new-box {
    position: relative;
    .new-img {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      left: 0;
    }
  }
}
</style>
