<template>
  <div class="usermanage">
    <div class="right">
      <PageTitle :title="props.editObj.title">
        <el-button @click="black">关闭</el-button>
      </PageTitle>
      <div class="title">
        <div class="card">
          <div class="cardhead" style="background-color: var(--el-color-primary) ">
            <span class="number">{{ headData.factscore }}</span>
          </div>
          <div class="cardbottom"><span class="name">得分</span></div>
        </div>
        <div class="card">
          <div class="cardhead" style="background-color: #fb8734">
            <span class="number">{{ headData.havescore }}</span>
          </div>
          <div class="cardbottom"><span class="name">可得分</span></div>
        </div>
        <div class="card">
          <div class="cardhead" style="background-color: #f54336">
            <span class="number">{{ headData.subscore }}</span>
          </div>
          <div class="cardbottom"><span class="name">扣分</span></div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottomright">
          <div class="table">
            <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" stripe height="68vh" v-loading="tableloading" element-loading-text="数据加载中..." border>
              <el-table-column prop="pname" label="考核大项" show-overflow-tooltip width="250">
              </el-table-column>
              <el-table-column prop="pscore" label="大项总分" width="100"> </el-table-column>
              <el-table-column prop="modelName" label="小项" width="250"> </el-table-column>
              <el-table-column prop="modelScore" label="小项分" width="100"> </el-table-column>
              <el-table-column prop="factscore" label="当前得分" width="100"> </el-table-column>
              <el-table-column prop="subscore" label="扣分" width="100"> </el-table-column>
              <el-table-column prop="msg" label="扣分说明"> </el-table-column>

            </el-table>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { onMounted, reactive, ref } from "vue";
const emit = defineEmits("changePage");
const tableloading = ref(false)
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const tableData = ref([])
let headData = reactive({
  factscore: "100",
  havescore: "20",
  subscore: "30",
});
const data = reactive({
  searchObj: {},
})
onMounted(() => {
  if (props.editObj) {
    let obj = {
      userid: props.editObj.userid,
      year: props.editObj.year,
    }
    // 查询列表数据
    getTableData(obj);
  }
});
const rowpan = ref([])
// 岗位达标统计-(列表主页)--详情列表--查看得分详情
const getTableData = (obj) => {
  tableloading.value = true;
  getApi(obj, '/mosty-jcgl/gwdb/getGwdbScore').then((res) => {
    if (res) {
      tableData.value = res.ulist
      rowpan.value = res.hblist
      headData.factscore = res.user.factscore;
      headData.havescore = res.user.havescore;
      headData.subscore = res.user.subscore;
      tableloading.value = false;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  })
}
//合并行
function objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  let arr = rowpan.value
  if (arr.length > 0) {
    if (column.label == '考核大项' || column.label == '大项总分') {
      let resule = arr.filter((item) => {
        return item.index == rowIndex
      })
      if (resule[0] && rowIndex == resule[0].index) {
        return {
          rowspan: resule[0].rowspan,
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 1
        }
      }

    }
  }
}

// 返回
const black = () => {
  let obj = {
    title: "综合部详情",
    saveBtnShow: false,
    orgcode: props.editObj.depCode,
    year: props.editObj.year
  };
  emit("changePage", "AddOrEdite", obj);
};

</script>

<style lang="scss" scoped>
.usermanage {
  display: flex;

  .right {
    height: calc(100%);
    width: calc(100%);
    padding: 0 10px;
    box-sizing: border-box;

    .title {
      display: flex;
      margin: 10px 0;
      color: black;
      align-items: center;
      justify-content: space-between;

      .card {
        width: 30%;
        height: 80px;

        .cardhead {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 20px;
          font-weight: 700;
          font-size: 30px;
        }

        .cardbottom {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: #666;
          background-color: #eeeeee;
        }
      }
    }
  }
}
.table {
  height: 70vh;
}
</style>
