<template>
  <div class="mouthAssessment">
    <n-form
      inline
      :label-width="80"
      label-placement="left"
      :model="queryForm"
      size="medium"
      ref="queryFormRef"
      class="formBox"
    >
      <n-form-item label="泵站名称" path="bengName">
        <n-select
          v-model:value="queryForm.bengName"
          filterable
          :options="options"
          placeholder="请选择泵站名称"
        />
      </n-form-item>
      <n-form-item label="角色名" path="name">
        <n-input
          v-model:value="queryForm.roleName"
          clearable
          placeholder="请输入角色名"
        />
      </n-form-item>
      <n-form-item label="人员姓名" path="name">
        <n-input
          v-model:value="queryForm.name"
          clearable
          placeholder="请输入人员姓名"
        />
      </n-form-item>
      <n-button
        type="primary"
        style="margin-right: 10px"
        @click="handleClick('search')"
        >搜索</n-button
      >
      <n-button>验证</n-button>
    </n-form>
    <div class="content">
      <div class="left">
        <div class="leftTop shadow">
          <div class="title">
            <span class="icon" @click="handleClick('reduceYear')">&lt;</span>
            <span class="num">{{ year }}</span>
            <span class="icon" @click="handleClick('addYear')"> &gt;</span>
          </div>
          <ul class="mouthBox">
            <li
              v-for="(month, i) in monthList"
              :key="i"
              :class="[current === i ? 'active' : '']"
              @click="changeMonth(i)"
            >
              {{ month }}月
            </li>
          </ul>
        </div>
        <div class="leftBot shadow">
          <div class="BoxTitle">处理站人员绩效达标率</div>
          <div class="BoxCentent">
            <div id="PaiMingTitle">
              <span class="PaiMingTitleList1">排名</span>
              <span class="PaiMingTitleList2">姓名</span>
              <span class="PaiMingTitleList3">分数</span>
            </div>
            <div id="PaiMingCentent">
              <div
                class="PaiMingCententList"
                v-for="(item, index) in paiMingData"
                :key="index"
              >
                <span class="PaiMingCententList1" v-if="index == 0">
                  <img :src="PaiMing1Img" alt="" class="PaiMingImg" />
                </span>
                <span class="PaiMingCententList1" v-else-if="index == 1">
                  <img :src="PaiMing2Img" alt="" class="PaiMingImg"
                /></span>
                <span class="PaiMingCententList1" v-else-if="index == 2">
                  <img :src="PaiMing3Img" alt="" class="PaiMingImg"
                /></span>
                <span class="PaiMingCententList1" v-else>{{ index + 1 }}</span>
                <span class="PaiMingCententList2">{{ item.name }}</span>
                <span
                  class="PaiMingCententList3"
                  :class="[
                    item.achievement >= 80 ? 'color80' : '',
                    item.achievement >= 70 && item.achievement < 80
                      ? 'color70'
                      : '',
                    item.achievement >= 60 && item.achievement < 70
                      ? 'color60'
                      : 'color50',
                  ]"
                  >{{ item.achievement }}分</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="listBox">
          <div v-for="v in personInfo" :key="v.id" class="single shadow">
            <div class="infoBox">
              <img src="../../../assets/Imgs/jixiao2.png" alt="" />
              <ul class="info">
                <li>姓名：{{ v.name }}</li>
                <li>岗位：{{ v.station }}</li>
                <li>岗级：{{ v.level }}</li>
                <li>角色：{{ v.role }}</li>
              </ul>
            </div>
            <ul class="scoreBox">
              <li>绩效得分：{{ v.score }} 分</li>
              <li class="modify">
                <span>绩效考评：</span>
                <img
                  src="../../../assets/Imgs/jixiao3.png"
                  alt=""
                  @click="modify(v.id)"
                />
              </li>
            </ul>
          </div>
        </div>

        <div id="DutyHoursFoot">
          <n-pagination
            v-model:page="page"
            :page-count="AllPage"
            @update:page="paginationChange"
            style="float: right; padding-right: 50px"
          />
        </div>
      </div>
    </div>
    <n-modal
      v-model:show="showModal"
      :show-icon="false"
     preset="card"
      :title="modelTitle"
      style="width: 70%"
    >
      <n-data-table
        ref="tableRef"
        :bordered="false"
        :columns="columns"
        :data="modelData"
        :pagination="pagination"
      ></n-data-table>
      <template #action>
        <n-space>
          <n-button @click="() => (showModal = false)">取消</n-button>
          <n-button
            type="primary"
            @click="handleClick('sure')"
            >确定</n-button
          >
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import { ref, reactive, toRefs, h, onMounted } from "vue";
import { DocumentTextOutline } from "@vicons/ionicons5";
import { NInput } from "naive-ui";
import PaiMing1Img from "@/assets/Imgs/renYuanZhiBan1.png";
import PaiMing2Img from "@/assets/Imgs/renYuanZhiBan2.png";
import PaiMing3Img from "@/assets/Imgs/renYuanZhiBan3.png";
export default {
  name: "mouthAssessment",
  components: {
    DocumentTextOutline,
  },
  setup() {
    const queryForm = ref({
      bengName: "西渠闸门",
      roleName: "",
      name: "",
    });
    const options = ref([
      { label: "西渠闸门", value: "0" },
      { label: "解放大道澳门路闸", value: "1" },
      { label: "中山大道前进四路闸", value: "2" },
      { label: "王家墩污水泵站", value: "3" },
      { label: "后湖二期泵站", value: "4" },
      { label: "铁路桥泵站", value: "5" },
      { label: "机场河补水泵站", value: "6" },
      { label: "常青公园地下调蓄池", value: "7" },
      { label: "黄孝河CSO调蓄", value: "8" },
      { label: "机场河CSO调蓄", value: "9" },
    ]);
    const state = reactive({
      year: 2022,
      current: 0,
      monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      //排名数据
      paiMingData: [
        {
          name: "胡鹏飞",
          achievement: "88",
        },
        {
          name: "胡鹏飞",
          achievement: "77",
        },
        {
          name: "胡鹏飞",
          achievement: "66",
        },
        {
          name: "胡鹏飞",
          achievement: "55",
        },
        {
          name: "胡鹏飞",
          achievement: "44",
        },
        {
          name: "胡鹏飞",
          achievement: "33",
        },
        {
          name: "胡鹏飞",
          achievement: "22",
        },
        {
          name: "胡鹏飞",
          achievement: "11",
        },
      ],
      personInfo: [
        {
           id:0,
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
        {
          name: "胡鹏飞",
          station: "操作工",
          level: "中级工",
          role: "班组组长",
          score: 88,
        },
      ],
      // 弹窗相关
      showModal: false,
      columns: [
        {
          title: "序号",
          key: "id",
          align: "center",
          width: "60",
        },
        {
          title: "考核指标",
          key: "type",
          align: "center",
          width: "150",
          ellipsis: true,
        },
        {
          title: "分值",
          key: "score",
          align: "center",
          width: "60",
        },
        {
          title: "指标解释",
          key: "explain",
          align: "center",
          ellipsis: true,
        },
        {
          title: "评分标准",
          key: "standard",
          align: "center",
          ellipsis: true,
        },
        {
          title: "评分",
          key: "remark",
          width: "150",
          align: "center",
          render(row, index) {
            return h(NInput, {
              value: row.name,
              onUpdateValue(v) {
                data.value[index].name = v;
              },
            });
          },
        },
      ],
      modelData: [
        {
          id: 1,
          type: "重点设备的保证率",
          score: 20,
          explain: "根据规定方法对重点设备的保证率进行统计,计算结果考核",
          standard:
            "A: ———。B: 站点工作安排合理，班组保质保量有效完成各项工作任务；月度班组人员排班合理，能有效根据情况变化调整。C: 站点工作安排较为合理，班组拖延或未能完成工作任务的情况少于2次；月度班组人员排班计划较为合理，能基本满足完成工作任务需要。D: 站点工作安排存在一定问题，班组拖延或未能完成工作任务的情况大于2次；月度班组人员排班计划存在一定问题，经常性出现代班、调班和连班情况",
          remark: 20,
        },
        {
          id: 2,
          type: "工作计划完成情况",
          score: 20,
          explain:
            "班组工作安排情况；每月（系统）维护保养工作完成情况；计划外工作完成情况；",
          standard:
            "A: 100%按规定巡检,规范填写巡检记录，规范交接班，及时发现重要问题和隐患，及时报告并积极处理问题；B: 严格按规定巡检和交接班,规范填写巡检记录，能及时发现问题，及时报告并采取处理措施；C: 未按规定巡检或交接班不超过1次；或1-2次记录缺项或错误；或出现不超过1次未能及时发现问题；尚未造成损失；D: 1次以上未按规定巡检或交接班；或3次记录缺项或错误、或记录丢失或做虚假记录；或1次及以上漏报、瞒报,造成一定损失",
          remark: 20,
        },
        {
          id: 3,
          type: "设备维护、保养工作信息系统数据填报情况",
          score: 20,
          explain:
            "对当班期间设备保养、维护数据在信息系统填报的及时性、准确性和完整性进行评分",
          standard:
            "A: 工艺指令完成情况良好；设备操作遵守操作规范,并按要求进行隐患排查，有效发现问题并及时报告和主动处理B: 工艺指令完成情况良好；设备操作遵守操作规范,并按要求进行隐患排查，有效发现问题并及时报告C: 工艺指令未完成情况出现1次；或有不超过2次违规作业或不合理操作；无直接损失，未造成较大原材料浪费，设备无重大隐患D: 工艺指令未完成情况出现超过1次；或有2次以上违规作业或不合理操作；出现一定损失或造成一定的原材料浪费，或导致设备有重大隐患；",
          remark: 20,
        },
        {
          id: 4,
          type: "设备维修成本节约情况",
          score: 20,
          explain:
            "在保证质量完成维护维修工作任务，保证设备设施安全稳定运行的前提下，考核维修成本节约情况",
          standard:
            "A: 在完成维修任务中积极主动，不怕困难，表现突出B: 有效完成设备维护保养任务，积极主动配合完成设备大修工作；C: 设备维护保养工作未完成情况出现不超过2次；或1次配合完成大修工作不到位；D: 设备维护保养工作未完成情况出现超过2次；或2次配合大修工作不到位；",
          remark: 20,
        },
        {
          id: 5,
          type: "安全操作及隐患排查情况",
          score: 20,
          explain: "对安全操作和隐患排查工作情况进行考核",
          standard:
            "A: ———。B: 站点工作安排合理，班组保质保量有效完成各项工作任务；月度班组人员排班合理，能有效根据情况变化调整。C: 站点工作安排较为合理，班组拖延或未能完成工作任务的情况少于2次；月度班组人员排班计划较为合理，能基本满足完成工作任务需要。D: 站点工作安排存在一定问题，班组拖延或未能完成工作任务的情况大于2次；月度班组人员排班计划存在一定问题，经常性出现代班、调班和连班情况",
          remark: 20,
        },
        {
          id: 6,
          type: "生产责任区设备、环境的卫生和整洁状况",
          score: 20,
          explain: "生产责任区设备、环境的卫生和整洁状况",
          standard:
            "绩效目标: 作业现场物规范有序，作业状态标识清楚明了，维修后现场及时清理；公司设备、辅助设备、线路布置等规范整齐、无安全隐患、无松垮无乱贴乱绑现象；维修房、机电房等负责区域物品摆放有序、整洁卫生,考核计分: 作业现场和责任区域不符合规范、整齐、卫生标准的情况出现1次扣3分；以此类推，直至本项的8分扣完为止；",
          remark: 20,
        },
        {
          id: 7,
          type: "出勤情况",
          score: 12,
          explain: "出勤情况",
          standard:
            "绩效目标: 全勤，无迟到早退现象考核计分: 1次迟到或早退扣6分，事假每天扣2分，以此类推，直至本项的12分全部扣完为止",
          remark: 20,
        },
      ],
    });
    // 分页
    let page = ref(1);
    function paginationChange() {
      console.log(`分页发生了改变,当前值为${page.value}`);
    }
    //切换月份
    const changeMonth = (i) => {
      state.current = i;
    };
    const handleClick = (type) => {
      switch (type) {
        case "search":
          console.log(queryForm);
          break;
        case "addYear":
          state.year += 1;
          break;
        case "reduceYear":
          state.year -= 1;
          break;
        case "sure":
          state.showModal = false;
          break;
      }
    };
    const modify = (i) => {
      state.showModal = true;
    };
    return {
      queryForm,
      options,
      ...toRefs(state),
      changeMonth,
      handleClick,
      PaiMing1Img,
      PaiMing2Img,
      PaiMing3Img,
      modify,
      page,
      AllPage: ref(10),
      paginationChange,
    };
  },
};
</script>

<style lang='less' scoped>
.mouthAssessment {
  width: 100%;
  height: 100%;
  .formBox {
    height: 50px;
  }
  .content {
    display: flex;
    height: calc(100% - 50px);
    .shadow {
      width: calc(100% - 20px);
      margin: 10px;
      box-sizing: border-box;
      box-shadow: 0px 1px 7px 0px rgba(28, 83, 217, 0.35);
    }
    .left {
      margin-right: 10px;
      width: 375px;
      .leftTop {
        height: 300px;
        .title {
          display: flex;
          height: 50px;
          line-height: 70px;
          .icon {
            display: block;
            width: 15%;
            text-align: center;
            color: var(--color-title);
            cursor: pointer;
            font-size: 20px;
          }
          .num {
            width: 70%;
            text-align: center;
            font-size: 22px;
            color: #145bf7;
          }
        }
        .mouthBox {
          display: flex;
          flex-wrap: wrap;
          li {
            width: 25%;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid;
            border-left: 1px solid;
            border-color: var(--color-title);
            color: var(--color-title);
            cursor: pointer;
            &.active {
              color: #145bf7;
              font-weight: 600;
            }
          }
          :nth-child(4n + 1) {
            border-left: none;
          }
          :nth-child(9) {
            border-bottom: 1px solid;

            border-color: var(--color-title);
            color: var(--color-title);
          }
          :nth-child(10) {
            border-bottom: 1px solid;

            border-color: var(--color-title);
            color: var(--color-title);
          }
          :nth-child(11) {
            border-bottom: 1px solid;

            border-color: var(--color-title);
            color: var(--color-title);
          }
          :nth-child(12) {
            border-bottom: 1px solid;

            border-color: var(--color-title);
            color: var(--color-title);
          }
        }
      }
      .leftBot {
        .BoxTitle {
          width: 100%;
          height: 50px;
          line-height: 40px;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #145bf7;
          box-sizing: border-box;
          padding-left: 20px;
          padding-top: 10px;
        }
        .BoxCentent {
          width: 100%;
          height: calc(100% - 50px);
          .color50 {
            color: rgb(128, 128, 128);
          }
          .color60 {
            color: #e39924;
          }
          .color70 {
            color: #26c84f;
          }
          .color80 {
            color: #ed2880;
          }
          .ChangeYear {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: calc(100% - 120px);
            box-sizing: border-box;
            padding-top: 30px;

            .ChangeYearList {
              width: 48px;
              height: 48px;
              background: #46b3d3;
              border-radius: 50%;
              font-size: 12px;
              font-family: Arial;
              font-weight: bold;
              color: #f2f7f8;
              text-align: center;
              line-height: 48px;
              cursor: pointer;
              position: relative;
            }
            .ChangeYearListCheck {
              width: 70px;
              height: 70px;
              line-height: 70px;
              font-size: 15px;
              font-family: Arial;
              font-weight: bold;
              color: #f2f7f8;
              margin-top: -11px;
              background: linear-gradient(269deg, #46b3d3 0%, #a58fe8 100%);
            }
            .ChangeYearList::after {
              position: absolute;
              content: "";
              top: 50%;
              color: var(--color-Invert);
              left: -10px;
              width: 8px;
              font-size: 12px;
              border-bottom: 1px dashed;
            }
            .ChangeYearList::before {
              position: absolute;
              content: "";
              top: 50%;
              color: var(--color-Invert);
              right: -10px;
              width: 8px;
              font-size: 12px;
              border-bottom: 1px dashed;
            }
            .ChangeYearList:hover {
              animation: move 0.5s linear infinite;
              animation-iteration-count: 1;
            }
            @keyframes move {
              0% {
                box-shadow: 0px 0px 30px aqua;
              }
              100% {
                box-shadow: 0px 0px 0px aqua;
              }
            }
          }

          #PaiMingTitle {
            width: 100%;
            height: 40px;
            list-style: 40px;
            box-sizing: border-box;
            padding: 10px 20px;

            .PaiMingTitleList1 {
              float: left;
              width: 20%;
              font-size: 18px;
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
              text-align: center;
            }
            .PaiMingTitleList2 {
              float: left;
              width: 60%;
              font-size: 18px;
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
              text-align: left;
              box-sizing: border-box;
              padding-left: 30px;
            }
            .PaiMingTitleList3 {
              float: left;
              width: 20%;
              font-size: 18px;
              font-family: Alibaba PuHuiTi;
              font-weight: 400;
            }
          }
          #PaiMingCentent {
            width: 100%;
            height: calc(100% - 40px);
            box-sizing: border-box;
            padding: 2px 20px;
            overflow: auto;

            .PaiMingCententList {
              width: 100%;
              height: 39px;
              line-height: 39px;

              .PaiMingCententList1 {
                float: left;
                width: 20%;
                font-size: 18px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                text-align: center;
                height: 39px;
                line-height: 39px;

                .PaiMingImg {
                  width: 35px;
                  height: 30px;
                }
              }
              .PaiMingCententList2 {
                float: left;
                width: 60%;
                font-size: 18px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                text-align: left;
                box-sizing: border-box;
                padding-left: 20px;
                height: 39px;
                line-height: 39px;
              }
              .PaiMingCententList3 {
                float: left;
                width: 20%;
                font-size: 18px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                height: 39px;
                line-height: 39px;
              }
            }
          }
        }
      }
    }
    .right {
      width: calc(100% - 400px);
      height: 100%;

      .listBox {
        width: 100%;
        height: calc(100% - 30px);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        .single {
          width: calc(25% - 20px);
          height: 226px;
          border: 1px solid #145bf7;
          .infoBox {
            display: flex;
            padding: 20px 0 10px 10px;
            border-bottom: 1px solid #748ec8;
            img {
              margin-right: 20px;
              width: 73px;
              height: 73px;
            }
            .info {
              li {
                line-height: 40px;
                font-size: 16px;
                font-family: Alibaba PuHuiTi;
              }
            }
          }
          .scoreBox {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 30px;
            .modify {
              display: flex;
              align-items: center;
              img {
                width: 24px;
                height: 24px;
                cursor: pointer;
              }
            }
          }
        }
      }

      #DutyHoursFoot {
        width: 100%;
        height: 30px;
      }
    }
  }
}
</style>