<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="right" v-loading="loading">
      <div class="title">
        <div></div>
        <div>
          <span class="score"><span class="allScore">{{ headData.checkYear }}</span>年</span>
          <span class="score">总得分：<span class="allScore">{{ headData.totalScore }}</span>分</span>
          <span class="score">总加分:<span class="success">{{ headData.addTotalScore }}</span>分</span>
          <span class="score">总扣分:<span class="danger">{{ headData.subTotalScore }}</span>分</span>
        </div>
        <div><el-button type="primary" @click="black()">关闭</el-button></div>
      </div>
      <div class="bottom">
        <div>
          <div class="table">
            <table border="1" cellpadding="15" cellSpacing="0"
              style="border-color: var(--el-color-primary);width: 100%;color: #000;">
              <thead>
                <tr>
                  <th style="width: 8%;text-align: center; font-weight: bold;color: #000;">评价项目</th>
                  <th style="width: 8%;text-align: center; font-weight: bold;color: #000;" align="center">评价要素</th>
                  <th style="width: 20%;text-align: center; font-weight: bold;color: #000;" align="center">评价内容</th>
                  <th style="width: 20%;text-align: center; font-weight: bold;color: #000;" align="center">评价规则</th>
                  <th style="width:12%;text-align: center; font-weight: bold;color: #000;" align="center">加/减分</th>
                  <th style="width:12%;text-align: center; font-weight: bold;color: #000;" align="center">得分</th>
                  <th style="width:24%;text-align: center; font-weight: bold;color: #000;" align="center">说明</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in data.tableData" :key="index">
                  <td v-if="item.parentname" :rowspan="item.rowspan">{{ item.parentname }}</td>
                  <td v-if="item.nameflag > 1 && item.sortnum == 1" :rowspan="item.nameflag">{{ item.name }}</td>
                  <td v-if="item.nameflag == 1">{{ item.name }}</td>
                  <td v-if="item.threeflag > 1 && item.flag == 'Y'" :rowspan="item.threeflag">{{ item.appraiseContent }}
                  </td>
                  <td v-if="item.threeflag == 1">{{ item.appraiseContent }}</td>
                  <td>
                    <div>
                      {{ item.note }}
                      <div v-if="item.configflag == 'Y'" class="content">
                        <div v-if="item.p1name">{{ item.p1name }}<el-input-number disabled v-model="item.p1" /></div>
                        <div v-if="item.p2name">{{ item.p2name }}<el-input-number disabled v-model="item.p2" /></div>
                        <div v-if="item.p3name">{{ item.p3name }}<el-input-number disabled v-model="item.p3" /></div>
                      </div>
                    </div>
                  </td>
                  <td>{{ item.isAddSub == 'Y' ? '加分' : '减分' }}</td>
                  <td>{{ item.actScore }}</td>
                  <td>{{ item.scoreNotes }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import { onMounted, reactive, ref, watchEffect } from "vue";
const emit = defineEmits("changePage");
import { filterYear } from "@/utils/auth.js";
import { getApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const tableloading = ref(false)
const headData = ref({})
const data = reactive({
  formData: {},
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "评价项目",
      prop: "pjxm",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "评价要素",
      prop: "pjys",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "评价内容",
      prop: "pjnr",
      showOverflowTooltip: false,
      sortable: false,
    },
    {
      label: "加/减分",
      prop: "jzf",
      showOverflowTooltip: false,
      sortable: false,
    },
    {
      label: "得分",
      prop: "df",
      showOverflowTooltip: false,
      sortable: false,
    },
    {
      label: "说明",
      prop: "sm",
      showOverflowTooltip: false,
      sortable: false,
    },
  ],
  tableConfiger: {
    haveControls: false,
    showIndex: false,
    loading: false
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  }
});
// 初始化
onMounted(() => {
  getData();
});
//获取数据
function getData() {
  tableloading.value = true
  let listQuery = {
    driverId: data.formData.id,
    checkYear: data.formData.checkYear
  }
  getApi(listQuery, `/mosty-jcgl/driverModelScore/getDriverInfoList`).then(
    (res) => {
      if (res) {
        headData.value.checkYear = res.checkYear
        headData.value.addTotalScore = res.addTotalScore
        headData.value.subTotalScore = res.subTotalScore
        headData.value.totalScore = res.totalScore
        let parentChildren = {};
        let parentList = [];
        let uList = [];
        for (let index in res.list) {
          let pid = res.list[index].pid;
          if (pid === "0") {
            parentList.push(res.list[index]);
          } else {
            if (parentChildren[pid] == null) {
              parentChildren[pid] = [];
            }
            parentChildren[pid].push(res.list[index]);
          }
        }
        for (let index in parentList) {
          let uItem = parentList[index];
          let pid = uItem.modelId;
          if (parentChildren[pid] != null) {
            let tempArr = parentChildren[pid];
            for (let ind in tempArr) {
              if (ind === "0") {
                tempArr[0].parentname = uItem.name;
                tempArr[0].rowspan = tempArr.length;
              }
            }
            uList = uList.concat(tempArr);
          }
        }
        uList.forEach(item => {
          item.p1 = Number(item.p1)
          item.p2 = Number(item.p2)
          item.p3 = Number(item.p3)
          item.q1 = Number(item.q1)
          item.q2 = Number(item.q2)
          item.q3 = Number(item.q3)
          item.q4 = Number(item.q4)
        })
        data.tableData = uList;
        tableloading.value = false;
      } else {
        data.tableData = [];
        tableloading.value = false;
      }
    }
  );
}
watchEffect(() => {
  if (props.editObj) {
    data.formData = props.editObj;
  }
});
const black = () => {
  emit("changePage", "Main");
};
</script>

<style lang="scss" scoped>
.content {
  >div {
    margin-top: 8px;
  }
}

::v-deep .el-input-number {
  margin-left: 10px;
}

td {
  text-align: center;
}

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

    .bottom {
      max-height: calc(100vh - 200px);
      overflow: auto;
      width: 100%;
    }

    .title {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 50px;

      width: 100%;
      text-align: center;
      font-size: 16px;

      .score {
        margin: 0 5px;
        color: black;

        .allScore {
          color: var(--el-color-primary);
          font-size: 23px;
          font-weight: 600;
          margin: 0 5px;
          display: inline-block;
        }

        .danger {
          color: red;
          font-size: 23px;
          font-weight: 600;
          margin: 0 5px;
          display: inline-block;
        }

        .success {
          color: green;
          font-size: 23px;
          font-weight: 600;
          margin: 0 5px;
          display: inline-block;
        }
      }
    }
  }
}
</style>