<template>
  <!-- 月度考核 -->
  <div class="monthjxPage">
    <div class="searchBoxs">
      <n-space>
        <div class="name">厂站：</div>
        <n-select v-model:value="searchVal1" style="width: 200px" :options="clzOptions" clearable> </n-select>
        <div class="name">岗位：</div>
        <n-select v-model:value="searchVal2" style="width: 200px" :options="jueseOptions" clearable> </n-select>
        <div class="name">人员姓名：</div>
        <n-input v-model:value="realName" style="width: 200px" clearable> </n-input>
        <n-button type="success" @click="getPersonList(1, 12, startTime, endTime)">
          <template #icon>
            <n-icon>
              <Search />
            </n-icon>
          </template>
          搜索
        </n-button>
      </n-space>
    </div>
    <!-- 左侧 -->
    <div class="leftcontent">
      <div class="leftcalendar">
        <yearcalendar></yearcalendar>
      </div>
      <div class="leftbottom">
        <div class="title">个人成绩综合得分排名</div>
        <n-data-table
          :bordered="false"
          striped
          :columns="columns"
          :data="tableData"
          :loading="tableLoading"
          :remote="true"
          max-height="380"
        >
        </n-data-table>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="rightcontent">
      <div class="contentPart">
        <div class="person" @click.capture="getpersonInfo(item)" v-for="item in personArr" :key="item.id">
          <div class="personImg"></div>
          <div class="personInfo" @click="getpersonShow()">
            <div class="part">
              <div class="titlelist">姓名：</div>
              <div class="contentlist">{{ item.realName }}</div>
            </div>
            <div class="part">
              <div class="titlelist">岗位：</div>
              <div class="contentlist">{{ item.jobType }}</div>
            </div>
            <div class="part">
              <div class="titlelist">角色：</div>
              <div class="contentlist">{{ item.roleName }}</div>
            </div>
          </div>
          <div class="Line"></div>
          <div class="jixiaoInfo">
            <n-space>
              <div class="titlelist">绩效得分：</div>
              <div class="contentlist" style="width: 60px">{{ item.totalScore }}分</div>
              <div class="titlelist" style="margin-left: 20px" @click="getjixiaoInfo()">
                绩效考评:
                <n-icon :style="{ width: '25px', top: '2px' }">
                  <Book />
                </n-icon>
              </div>
            </n-space>
          </div>
        </div>
      </div>
      <div id="DutyHoursFoot">
        <n-pagination v-model:page="page" :page-count="total" @update:page="paginationChange" style="float: right; padding-right: 50px" />
      </div>
    </div>
    <!--人员详情 -->
    <n-modal
      title="人员详情"
      :mask-closable="false"
      preset="dialog"
      :show-icon="false"
      :style="{ width: '1800px' }"
      v-model:show="InfoShow"
    >
      <peopleDetailInfo
        :totalScore="personInfo.totalScore"
        :roleName="personInfo.roleName"
        :realName="personInfo.realName"
        :jobType="personInfo.jobType"
        :mobile="personInfo.mobile"
        :userId="personInfo.id"
        :userAccount="personInfo.userAccount"
      >
      </peopleDetailInfo>
    </n-modal>
    <!--绩效弹窗  -->
    <n-modal
      title="编辑月度绩效"
      :mask-closable="false"
      preset="dialog"
      :show-icon="false"
      :style="{ width: '1200px' }"
      v-model:show="JXShow"
    >
      <n-data-table
        :bordered="true"
        :single-line="false"
        :max-height="700"
        :striped="true"
        :columns="Listcolumns"
        :data="tableListData"
        :loading="tableLoadingJX"
        :remote="true"
      >
      </n-data-table>
      <div class="JXwords" style="margin-top: 20px; color: red; margin-left: 380px">
        *人员绩效计算公式：岗位任务得分求和*权重+卫生出勤*权重
      </div>
      <template #action>
        <n-space style="margin-right: 500px">
          <n-button type="primary" @click="updataMonthInfo()">保存</n-button>
          <n-button @click="() => (JXShow = false)">取消</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, ref, h } from 'vue';
import yearcalendar from './components/yearcalendar.vue';
import { getnormlogpersonal, getMonthResaultInfo, getMonthResaultUpdata, getAllStationList, getnormlogScore } from '@/services';
import peopleDetailInfo from './components/peopleDetailInfo.vue';
import { Search, Add, Book } from '@vicons/ionicons5';
import { NInputNumber, NInput } from 'naive-ui';
import bus from '@/utils/util';
import { formatDate } from '@/utils/util';
export default {
  name: 'monthjxPage',
  components: {
    Search,
    Add,
    yearcalendar,
    Book,
    peopleDetailInfo,
  },
  setup() {
    const allData = reactive({
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      startTime: '',
      endTime: '',
      searchVal1: null,
      searchVal2: null,
      InfoShow: false,
      JXShow: false,
      realName: null,
      tableLoading: true,
      tableLoadingJX: true, //表格数据加载状态，接入后端后修改为true
      tableData: [],
      tableListData: [],
      columns: [
        {
          title: '排名',
          align: 'center',
          render: (row, index) => {
            return index + 1;
          },
        },
        { title: '姓名', align: 'center', key: 'realName' },
        { title: '绩效', align: 'center', key: 'totalScore' },
      ],
      Listcolumns: [
        { title: '考核指标', align: 'center', key: 'normName' },
        { title: '指标解释', align: 'center', key: 'normRemake', ellipsis: { tooltip: true, lineClamp: 2 } },
        {
          title: '评分标准',
          align: 'center',
          key: 'evaluateStandard',
          ellipsis: { tooltip: true, lineClamp: 2 },
        },
        { title: '权重', align: 'center', key: 'scoreRate', width: '80' },
        { title: '分值', align: 'center', key: 'defScore', width: '80' },
        {
          title: '评分',
          align: 'center',
          key: 'score',
          width: '150',
          render(row, index) {
            return h(NInputNumber, {
              value: row.score,
              min: 0,
              max: row.defScore,
              ['onUpdate:value']: (val) => {
                if (val < 0) {
                  val = 0;
                } else if (val > Number(row.defScore)) {
                  val = Number(row.score);
                }
                row.score = val;
              },
            });
          },
        },
      ],
      personInfo: {
        totalScore: null,
        roleName: null,
        realName: null,
        jobType: null,
        mobile: null,
        userAccount: null,
        job: '',
        id: null,
      },
      clzOptions: [],
      jueseOptions: [],
      personArr: [
        {
          totalScore: null,
          roleName: null,
          userAccount: null,
          realName: null,
          jobType: null,
          mobile: null,
          job: '',
          id: null,
        },
      ],
      total: null,
      page: 1,
    });
    //获取厂站及岗位
    const getStation = async () => {
      let params1 = {
        distType: 'company',
      };
      let params2 = {
        distType: 'job',
      };
      let res1 = await getAllStationList(params1);
      if (res1 && res1.code == 200) {
        res1.data.forEach((element) => {
          let { distKey, distName } = element;
          allData.clzOptions.push({ value: distKey, label: distName });
        });
      }
      let res2 = await getAllStationList(params2);
      if (res2 && res2.code == 200) {
        res2.data.forEach((element) => {
          let { distKey, distName } = element;
          allData.jueseOptions.push({ value: distKey, label: distName });
        });
      }
    };
    //信息查询重置
    function reSiteSearch() {
      allData.searchVal1 = null;
      allData.searchVal2 = null;
      allData.realName = null;
      getPersonList(1, 12, allData.startTime, allData.endTime);
    }
    //获取人员详情信息
    function getpersonInfo(index) {
      allData.personInfo = index;
    }
    //获取人员详情弹窗
    function getpersonShow() {
      allData.InfoShow = true;
    }
    //获取绩效编辑弹窗
    function getjixiaoInfo() {
      allData.JXShow = true;
      getMonthInfo();
    }
    //获取绩效详情
    const getMonthInfo = async () => {
      allData.tableLoadingJX = true;
      let params = {
        startTime: allData.startTime,
        endTime: allData.endTime,
        normType: 0,
        userId: allData.personInfo.id,
        jobId: allData.personInfo.job,
        ymtime: '',
      };
      let res = await getMonthResaultInfo(params);
      if (res && res.code == 200) {
        allData.tableListData = res.data;
      }
      allData.tableLoadingJX = false;
    };
    //绩效详情修改
    const updataMonthInfo = async () => {
      let params = {
        normType: 0,
        userId: allData.personInfo.id,
        normlogBoList: allData.tableListData,
        dateTime: allData.startTime,
      };
      let res = await getMonthResaultUpdata(params);
      if (res && res.code == 200) {
        $message.success('操作成功');
        getMonthInfo();
        getPersonList(1, 12, allData.startTime, allData.endTime);
        getScore(allData.startTime, allData.endTime);
        allData.JXShow = false;
      }
    };
    // 分页
    function paginationChange(value) {
      getPersonList(value, 12, allData.startTime, allData.endTime);
    }
    // 获取人员列表
    const getPersonList = async (pageIndex, pageSize, startTime, endTime) => {
      $loadingBar.start();
      let param = {
        current: pageIndex,
        size: pageSize,
        data: {
          companyId: allData.searchVal1,
          job: allData.searchVal2,
          userName: allData.realName,
          startTime: startTime,
          endTime: endTime,
          normType: 0,
          ymtime: '',
        },
      };
      // 右侧人员列表
      let res = await getnormlogpersonal(param);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.personArr = datas.records;
        allData.total = datas.pages;
      }
      $loadingBar.finish();
    };
    // 获取成绩综合得分
    const getScore = async (startTime, endTime) => {
      allData.tableLoading = true;
      // 左侧成绩综合得分排名
      let params = {
        companyId: allData.searchVal1,
        userName: allData.realName,
        startTime: startTime,
        endTime: endTime,
        normType: 0,
      };
      let res = await getnormlogScore(params);
      if (res && res.code == 200) {
        allData.tableData = res.data;
      }
      allData.tableLoading = false;
    };
    onMounted(() => {
      getStation();
      bus.on('getCurrentData', (e) => {
        allData.year = e.year;
        allData.month = e.month;
        allData.startTime = `${allData.year}-${allData.month}-01 00:00:00`;
        allData.endTime = `${allData.year}-${allData.month}-31 23:59:59`;
        getPersonList(1, 12, allData.startTime, allData.endTime);
        getScore(allData.startTime, allData.endTime);
      });
      allData.startTime = `${allData.year}-${allData.month + 1}-01 00:00:00`;
      allData.endTime = `${allData.year}-${allData.month + 1}-31 23:59:59`;
      getPersonList(1, 12, allData.startTime, allData.endTime);
      getScore(allData.startTime, allData.endTime);
    });
    onBeforeMount(() => {
      bus.off('getCurrentData');
    });
    return {
      ...toRefs(allData),
      getpersonInfo,
      getjixiaoInfo,
      getPersonList,
      paginationChange,
      getpersonShow,
      getMonthInfo,
      updataMonthInfo,
      getStation,
      reSiteSearch,
      getScore,
    };
  },
};
</script>
<style lang="less">
.monthjxPage {
  position: relative;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  .searchBoxs {
    height: 50px;
    margin: 10px;
    .name {
      height: 34px;
      line-height: 34px;
    }
  }
  .title {
    display: flex;
    align-items: center;
    padding-left: 20px;
    width: 490px;
    height: 44px;
    line-height: 22px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #1bd9d7;
    &:before {
      display: block;
      content: '';
      width: 2px;
      height: 17px;
      background: #0199d9;
      margin-right: 10px;
    }
  }
  .leftcontent {
    top: 60px;
    position: absolute;
    .leftcalendar {
      height: 323px;
      width: 380px;
      margin-top: 15px;
      margin-bottom: 20px;
      border: 1px solid #25d8f5;
    }
    .leftbottom {
      width: 380px;
      height: 480px;
      border: 1px solid #25d8f5;
    }
  }
  .rightcontent {
    top: 75px;
    position: absolute;
    height: 820px;
    width: 75%;
    left: 400px;
    #DutyHoursFoot {
      width: 100%;
      height: 30px;
    }
    .contentPart {
      display: flex;
      flex-wrap: wrap;
      max-height: 790px;
      .person {
        display: flex;
        flex-wrap: wrap;
        width: 315px;
        height: 245px;
        padding: 10px 5px;
        margin-right: 7px;
        cursor: pointer;
        background: url('@/assets/newImgs/userJX/personback.png') no-repeat center;
        background-size: 100% 100%;
        .Line {
          height: 1px;
          width: 98%;
          margin: 10px 1%;
          border: 1px solid rgba(57, 139, 198, 1);
        }
      }
      .personImg {
        width: 90px;
        height: 90px;
        margin: 40px 10px 0 10px;
        background: url('@/assets/newImgs/userJX/defaultperson.jpg') no-repeat center;
        background-size: 100% 100%;
        border-radius: 50%;
      }
      .jixiaoInfo {
        margin-left: 20px;
      }
      .personInfo {
        width: 150;
        margin-left: 20px;
        margin-top: 25px;
        .part {
          align-items: center;
          display: flex;
          margin-top: 10px;
          .titlelist {
            font-size: 15px;
          }
          .contentlist {
            font-size: 15px;
            width: 110px;
            max-height: 30px;
            overflow: auto;
          }
        }
      }
    }
  }
}
</style>