<template>
  <el-dialog
    :title="allocationDetailForm.isDlgType == '关联合同' ? '打分详情' : '派点详情'"
    width="1200px"
    :visible.sync="allocationDetailVisible"
    v-dialogDrag
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    center
    @close="handleClose"
    :append-to-body="true"
    custom-class="allocation-detail-content_rai"
  >
    <p>总点数：{{ allNum }}</p>
    <div class="content-box-table-detail">
      <div class="table-cont table-cont-top">
        <div style="display: flex" v-for="item in datalist" :key="item.ChartPermissionName">
          <div :class="['head-column', 'head-column-item']" style="font-weight: 800;font-size:16px">
            {{ item.ChartPermissionName }}
          </div>
          <div :class="['head-column', 'head-column-item-Proportion']">
            {{ item.Money }}
          </div>
        </div>
      </div>
      <div class="table-cont">
        <div v-for="(item, index) in datalist" :key="index">
          <div style="display: flex" v-for="rs in item.List" :key="rs.RealName" class="content-ul">
            <div style="background-color: #fff" :class="['head-column', 'head-column-item']">{{ rs.name }}</div>
            <div style="background-color: #fff" :class="['head-column', 'head-column-item-Proportion']">{{ rs.val }}</div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button v-if="allocationDetailForm.isDlgType != '关联合同' && allocationDetailForm.ContractType != '打分派点'" :disabled="IsGray" type="primary" @click="addAllocationHandler">修 改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { contractInterface } from "@/api/api.js";

export default {
  name: "",
  components: {},
  props: {
    allocationDetailVisible: {
      type: Boolean,
      default: true,
    },
    allocationDetailForm: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      datalist: [],
      IsGray: false,
      allNum: "",
    };
  },
  computed: {},
  watch: {
    allocationDetailVisible: {
      handler(newVal) {
        newVal && this.getList();
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 关闭弹框
    handleClose() {
      this.datalist = [];
   
      this.$emit("update:allocationDetailForm", {});
      this.$emit("update:allocationDetailVisible", false);
    },
    // 点击修改的事件
    addAllocationHandler() {
      if (this.IsGray) return;
      this.handleClose();
      this.$emit("allocationDetailList", this.allocationDetailForm);
    },
    processingData() {
      for (let index = 0; index < this.datalist.length; index++) {}
    },
    // 获取数据
    async getList() {
      const res = await contractInterface.getAllocationDetail({
        CompanyContractId: this.allocationDetailForm.CompanyContractId,
        ShowDetail: true,
      });
      if (res.Ret === 200) {
        this.IsGray = res.Data.IsGray;
        let maxLength = 0;
        res.Data.List &&
          res.Data.List.forEach((item) => {
            if (maxLength < item.List.length) {
              maxLength = item.List.length;
            }
          });
        res.Data.List &&
          res.Data.List.forEach((item) => {
            for (let index = 0; index < maxLength; index++) {
              item.List[index] = {
                name: item.List[index] ? item.List[index].RealName : "",
                val: item.List[index] ? item.List[index].Money : "",
              };
            }
          });
        this.datalist = res.Data.List;
        this.allNum = res.Data.TotalPointsContent;
      }
    },
  },
};
</script>
<style lang="scss">
.allocation-detail-content_rai {
  .content-box-table-detail {
    position: relative;
    margin-top: 20px;
    .table-cont-top {
      position: sticky;
      top: 0;
      left: 0;
    }
    .table-cont {
      display: flex;
    }
    .head-column {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dcdfe6;
      background-color: #ebeef5;
      color: #333333;
      margin-top: -1px;
      margin-left: -0.5px;
    }
    .head-column-item {
      width: 107px;
      height: 48px;
    }
    .head-column-item-Proportion {
      width: 73px;
      height: 48px;
    }
  }
}
</style>
