<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="right" v-loading="loading">
      <div class="title">
        <div>驾驶标兵评级模型</div>
        <div>
          <el-select v-model="year" filterable style="width: 250px;margin-right: 10px;" @change="getData">
            <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-if="isAdmin"><el-button type="primary" @click="submit()">保存</el-button></div>
      </div>
      <el-form>
        <div class="bottom" style="color: #000;">
          <div>
            <table border="1" cellpadding="15" cellSpacing="0"
              style="border-color: var(--el-color-primary);width: 100%;">
              <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: 14%;text-align: center; font-weight: bold;color: #000;" align="center">评价分值</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in list" :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 :min="minNumber" v-model="item.p1"
                            @blur="inputNumber(item, 'p1', $event)" /></div>
                        <div v-if="item.p2name">{{ item.p2name }}<el-input-number :min="minNumber" v-model="item.p2"
                            @blur="inputNumber(item, 'p2', $event)" /></div>
                        <div v-if="item.p3name">{{ item.p3name }}<el-input-number :min="minNumber" v-model="item.p3"
                            @blur="inputNumber(item, 'p3', $event)" /></div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div
                      v-if="item.configflag != 'Y' && item.modelId != '102006' && item.modelId != '102003' && item.modelId != '102004'">
                      <el-input-number type="text" v-model="item.modelScore"
                        @blur="inputNumber(item, 'modelScore', $event)" />
                    </div>
                    <div v-if="item.configflag == 'Y'" class="content">
                      <div v-if="item.q1name">
                        {{ item.q1name }}
                        <el-input-number :min="minNumber" :max="maxNumber" v-model="item.q1"
                          @blur="inputNumber(item, 'q1', $event)" />
                      </div>
                      <div v-if="item.q2name">
                        {{ item.q2name }}
                        <el-input-number :min="minNumber" :max="maxNumber" v-model="item.q2"
                          @blur="inputNumber(item, 'q2', $event)" />
                      </div>
                      <div v-if="item.q3name">
                        {{ item.q3name }}
                        <el-input-number :min="minNumber" :max="maxNumber" v-model="item.q3"
                          @blur="inputNumber(item, 'q3', $event)" />
                      </div>
                      <div v-if="item.q4name">
                        {{ item.q4name }}
                        <el-input-number :min="minNumber" :max="maxNumber" v-model="item.q4"
                          @blur="inputNumber(item, 'q4', $event)" />
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { filterYear } from "@/utils/auth.js";
import { getItem } from "@/utils/storage";
// 列表数据
const list = ref(null)
const loading = ref(false)
const year = ref(new Date().getFullYear())
const maxNumber = ref(100)
const minNumber = ref(0)
const isAdmin = ref(getItem('USERID') == '000000')
// 初始化
onMounted(() => {
  getData()
})
// 填写分数
const inputNumber = (item, column, e) => {
  item[column] = e.target.value
}
// 获取配置项列表详情
const getData = () => {
  loading.value = true
  getApi({}, "/mosty-jcgl/driverModel/getList?year=" + year.value).then((res) => {
    let parentChildren = {};
    let parentList = [];
    let uList = [];
    for (let index in res) {
      let pid = res[index].pid;
      if (pid === "0") {
        parentList.push(res[index]);
      } else {
        if (parentChildren[pid] == null) {
          parentChildren[pid] = [];
        }
        parentChildren[pid].push(res[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)
    })
    list.value = uList;
    loading.value = false
  });
}
// 保存
const submit = async () => {
  for (const item of list.value) {
    if (isNaN(item.p1) || isNaN(item.p2) || isNaN(item.p3) || isNaN(item.modelScore)
      || isNaN(item.q1) || isNaN(item.q2) || isNaN(item.q3) || isNaN(item.q4)) {
      ElMessage.success("存在非数值类型，提交失败！！");
      return;
    }
  }
  let params = {
    modelList: list.value
  }
  ElMessageBox.confirm("确定保存当前修改？", "提示").then(() => {
    postApi(params, `/mosty-jcgl/driverModel/save`).then(() => {
      ElMessage.success("保存成功");
      getData()
    });
  });
};
</script>

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

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

td {
  text-align: center;
}

.usermanage {
  color: #000;

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

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

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

      width: 100%;
      text-align: center;
      font-size: 18px;
    }
  }
}
</style>
