<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="right">
      <div class="title">
        <span>
          （ <span class="left10">岗位类型</span>：<dict-tag :options="KHLX" :value="data.fromObj.grade" :tag="false"
            color="red" />
          <span class="left10">考核岗位</span>：<span style="color: red;">{{ data.fromObj.name }}</span>
          <span class="left10">适用范围</span>：<dict-tag :options="GWSYFY" :value="data.fromObj.assignLv" :tag="false"
            color="red" />）
        </span>
        <span>当前已分配 </span>
        <span style="margin-right: 20px;">
          <span class="score" style="color: green;font-size: 25px;font-weight: 900;"> {{ total }} </span>
          分</span>
        <span>未分配分数 </span>
        <span style="margin-right: 50px;"><span class="score" style="color: red;font-size: 25px;font-weight: 900;">
            {{ 100 - total < 0 ? 0 : 100 - total }} </span> 分</span>
          <el-button @click="black">关闭</el-button>
          <el-button type="primary" v-if="data.config.saveBtnShow" @click="submit()">保存</el-button>

      </div>
      <el-form :disabled="!data.config.saveBtnShow">
        <div class="bottom" style="color: #000;">
          <div>
            <table border="1" cellpadding="15" cellSpacing="0" style="border-color: green;width: 100%;">
              <thead>
                <tr>
                  <th style="width: 10%;text-align: center; font-weight: bold;color: #000;">评价项目</th>
                  <th style="width: 5%;text-align: center; font-weight: bold;color: #000;" align="center"></th>
                  <th style="width: 10%;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: 10%;text-align: center; font-weight: bold;color: #000;" align="center">评价分值</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list" :key="item.id">
                  <td v-if="item.parentname" :rowspan="item.rowspan"
                    style="vertical-align: middle;font-weight: bold;color: #000;" align="center">{{
                      item.parentname }}
                  </td>
                  <td class="uucheck" align="center">
                    <div class="checkbox icheck-success">
                      <el-checkbox v-model="item.checked" size="large" />
                    </div>
                  </td>
                  <td :style="{ color: item.checked ? '#333' : '#999' }" align="center">{{ item.name }}</td>
                  <td :style="{ color: item.checked ? '#333' : '#999' }">{{ item.appraiseContent }}</td>
                  <td :style="{ color: item.checked ? '#333' : '#999' }">
                    {{ item.note }}
                    <span v-if="item.configflag == 'Y'">(
                      <span style="font-weight: bold;">配置</span>
                      <span v-if="item.p1name" style="margin-left: 8px;">
                        {{ item.p1name }}
                        <el-input type="number" :min="0" v-model="item.p1" style="width: 120px;"
                          @blur="inputNumber(item, $event.target.value, 'p1')" />
                      </span>
                      <span v-if="item.p2name" style="margin-left: 8px;">
                        {{ item.p2name }}
                        <el-input type="number" :min="0" v-model="item.p2" style="width: 120px;"
                          @blur="inputNumber(item, $event.target.value, 'p2')" />
                      </span>
                      <span v-if="item.p3name" style="margin-left: 8px;">
                        {{ item.p3name }}
                        <el-input type="number" :min="0" v-model="item.p3" style="width: 120px;"
                          @blur="inputNumber(item, $event.target.value, 'p3')" />
                      </span>
                      )</span>
                  </td>
                  <td v-if="item.scoreflag == 'N' && item.parentname != null" :rowspan="item.rowspan"
                    style="text-align: center;vertical-align: middle;">
                    10分
                  </td>
                  <td v-if="item.scoreflag == 'F' && item.parentname != null" :rowspan="item.rowspan"
                    style="text-align: center;vertical-align: middle;">
                    一票否决
                  </td>
                  <td v-if="item.scoreflag == 'K' && item.parentname != null" :rowspan="item.rowspan"
                    style="text-align: center;vertical-align: middle;">
                  </td>
                  <td v-if="item.pscoreflag != 'N' && item.pscoreflag != 'F' && item.pscoreflag != 'K'" align="center"
                    style="text-align: center;">
                    <div class="spinner" :style="{ display: item.checked ? 'block' : 'none' }">
                      <div style="display: flex;align-items: center;justify-content: center;">
                        <el-button plain @click="down(item)">-</el-button>
                        <el-input type="number" :min="0" :max="100" v-model="item.modelScore" style="width: 60px;"
                          @blur="inputNumber(item, $event.target.value, 'modelScore')" />
                        <el-button plain @click="item.modelScore += 1">+</el-button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.usermanage {
  .right {
    height: calc(100%);
    width: calc(100%);
    padding: 0 10px;
    box-sizing: border-box;

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

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

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

      .left10 {
        margin-left: 10px;
      }

      >span {
        .score {
          margin: 0 10px;
        }

        >div {
          display: inline-block;
        }
      }
    }
  }
}
</style>
<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { KHLX, GWSYFY } = proxy.$dict("KHLX", "GWSYFY");
const emit = defineEmits("changePage");
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const data = reactive({
  fromObj: {},
});
// 列表数据
const list = ref([])
// 计算总分
const total = computed(() => {
  let count = 0;
  let pidmp = {};
  for (let index in list.value) {
    if (!list.value[index].checked) continue;
    let pid = list.value[index].pid;
    pidmp[pid] = 'Y';
    let tmpscore = list.value[index].modelScore;
    if (tmpscore != null && tmpscore != '') {
      if (parseInt(tmpscore)) {
        count += parseInt(tmpscore);
      }
    } else {
      list.value[index].modelScore = 0;
    }
  }
  for (let index in list.value) {
    if (list.value[index].parentname != null) {
      if (pidmp[list.value[index].pid] != null) {
        list.value[index].color = { color: '#333' }
      } else {
        list.value[index].color = { color: '#ccc' }
      }
    }
  }
  return count;
});
// 填写分数
const inputNumber = (item, value, column) => {
  if (value != null && value != '' && value != NaN) {
    item[column] = parseInt(value.replace(/[^\d]/g, ''));
    if (item[column] == "") {
      item[column] = 0;
    }
  } else {
    item[column] = 0;
  }
}
// 减分
const down = (item) => {
  item.modelScore -= 1;
  if (item.modelScore < 0) {
    item.modelScore = 0;
  }
}
// 获取配置项列表详情
const getTableData = (id) => {
  getApi({}, "/mosty-jcgl/station/modelInfo?id=" + id).then(
    (res) => {
      let tList = res.list;
      if (res && res.list.length > 0) {
        let parentChirdens = {};
        let parentList = [];
        let ulist = [];
        for (let index in tList) {
          let pid = tList[index].pid;
          if (pid == "0") {
            parentList.push(tList[index]);
          } else {
            if (parentChirdens[pid] == null) {
              parentChirdens[pid] = [];
            }
            parentChirdens[pid].push(tList[index]);
          }
        }
        for (let index in parentList) {
          let uItem = parentList[index];
          // 父级
          let pid = uItem.id.replace(res.citycode, '');
          if (parentChirdens[pid] != null) {
            let temparr = parentChirdens[pid];
            for (let ind in temparr) {
              if (ind == 0) {
                temparr[0].parentname = uItem.name;
                temparr[0].rowspan = temparr.length;
                temparr[0].scoreflag = uItem.scoreflag;
              }
              temparr[ind].pscoreflag = uItem.scoreflag;
            }
            ulist = ulist.concat(temparr);
          }
        }
        list.value = ulist;
      }
    }
  );
}
// 返回
const black = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emit("changePage", "Main");
    })
    .catch(() => {
      // catch error
    })

};
// 保存
const submit = async () => {
  let params = {
    id: data.config.id,
    itemList: list.value
  }
  ElMessageBox.confirm("确定保存当前修改？", "提示").then(() => {
    postApi(params, `/mosty-jcgl/station/saveInfo`).then(() => {
      ElMessage.success("保存成功");
    }
    );
  });
};
//获取详情
function getMain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/station/getStationInfo").then(
      (res) => {
        if (res) {
          data.fromObj = res;
        }
      }
    );
  }
}
watchEffect(() => {
  if (props.editObj) {
    data.config = props.editObj;
  }
  getMain(data.config.id);
  getTableData(data.config.id);
});
</script>
