<template>
  <!-- 统计分析 -->
  <div class="analysisPage">
    <!-- 左侧 -->
    <div class="leftcontent">
      <div class="leftcalendar">
        <yearcalendar></yearcalendar>
      </div>
      <div class="leftcenter">
        <div class="title" style="padding-left: 5px">厂站人员绩效达标率</div>
        <div class="percentList">
          <div v-for="item in percentArr" :key="item.siteName">
            {{ item.siteName }}
            <n-progress type="line" :percentage="item.rate"> </n-progress>
          </div>
        </div>
      </div>
      <div class="leftbottom">
        <div class="title">厂站内优秀人员</div>
        <n-select
          v-model:value="searchVal1"
          style="width: 200px; margin-left: 20px"
          :options="clzOptions"
          size="tiny"
          placeholder="请选择厂站"
          @update:value="changeRadio"
        >
        </n-select>
        <div class="excellentperson">
          <div class="person" v-for="item in personArr" :key="item.id">
            <div class="personImg"></div>
            <div class="personNa">{{ item.realName }}</div>
          </div>
          <div class="noData" v-if="personArr.length == 0">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="rightcontent">
      <div class="rightop">
        <div class="title">厂站人员绩效分析</div>
        <div class="Line"></div>
        <n-select
          v-model:value="searchVal2"
          style="width: 200px; margin-left: 20px"
          :options="clzOptions"
          size="tiny"
          placeholder="请选择厂站"
          @update:value="changeRadio1"
        >
        </n-select>
        <Bar1 :data="chartData"></Bar1>
      </div>
      <div class="rightbottom">
        <div class="title">厂站人员工单完成率</div>
        <div class="Line"></div>
        <n-space style="margin-left: 20px">
          <n-select
            v-model:value="searchVal3"
            style="width: 200px"
            :options="clzOptions"
            size="tiny"
            placeholder="请选择厂站"
            @update:value="changeRadio2"
          >
          </n-select>
          <n-radio-group v-model:value="stationtypeValue3.Type" style="margin-left: 60px" @update:value="changeRadio3">
            <n-space>
              <n-radio :value="item.id" v-for="item in radioArr1" :key="item.id">
                {{ item.name }}
              </n-radio>
            </n-space>
          </n-radio-group>
        </n-space>
        <Bar2 :data="chart2Data"></Bar2>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { getUserPassRate, getUserPerformance, getExcellentUser, getAllStationList, siteUserWorkOrderCompletionRate } from '@/services';
import yearcalendar from './components/yearcalendar.vue';
import Bar1 from './components/Bar1.vue';
import Bar2 from './components/Bar1.vue';
import bus from '@/utils/util';
export default {
  name: 'analysisPage',
  components: {
    yearcalendar,
    Bar1,
    Bar2,
  },
  setup() {
    const allData = reactive({
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      searchVal1: '2727732898219168779',
      searchVal2: '2727732898219168779',
      searchVal3: '2727732898219168779',
      percentArr: [],
      personArr: [],
      tableLoading: false, //表格数据加载状态，接入后端后修改为true
      tableData: [],
      columns: [
        { title: '序号', align: 'center' },
        { title: '姓名', align: 'center', key: 'name' },
        { title: '绩效', align: 'center', key: 'score' },
      ],
      clzOptions: [],
      radioArr1: [
        { id: 'Inspection', name: '巡检' },
        { id: 'Maintenance', name: '养护' },
        { id: 'Temporary', name: '维修' },
        { id: 'EventJob', name: '事件' },
      ],
      stationtypeValue: {
        Type: '2727732898219168779',
      },
      stationtypeValue1: {
        Type: '2727732898219168779',
      },
      stationtypeValue2: {
        Type: '2727732898219168779',
      },
      stationtypeValue3: {
        Type: 'Inspection',
      },
      chartData: [],
      chart2Data: [],
    });
    //厂站选择
    function changeRadio(e) {
      allData.stationtypeValue.Type = e;
      getExcellentPerson();
    }
    //厂站选择2
    function changeRadio1(e) {
      allData.stationtypeValue1.Type = e;
      getPerformanceBar();
    }
    //厂站选择3
    function changeRadio2(e) {
      allData.stationtypeValue2.Type = e;
      getTaskComplelt();
    }
    //获取厂站及岗位
    const getStation = async () => {
      let params1 = {
        distType: 'company',
      };
      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 });
        });
      }
    };
    //工单类型选择
    function changeRadio3(e) {
      allData.stationtypeValue3.Type = e;
      getTaskComplelt();
    }
    //获取厂站人员绩效达标率
    const getpercentArr = async () => {
      let params = {
        year: allData.year,
        month: allData.month,
      };
      let res = await getUserPassRate(params);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.percentArr = datas;
      }
    };
    //获取厂站优秀人员
    const getExcellentPerson = async () => {
      let params = {
        year: allData.year,
        month: allData.month,
        companyId: allData.stationtypeValue.Type,
      };
      //allData.personArr=[];
      let res = await getExcellentUser(params);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.personArr = datas;
      }
    };
    //获取厂站人员绩效
    const getPerformanceBar = async () => {
      let params = {
        year: allData.year,
        month: allData.month,
        companyId: allData.stationtypeValue1.Type,
      };
      let xdata = [];
      let ydata = [];
      let res = await getUserPerformance(params);
      if (res && res.code == 200) {
        let datas = res.data;
        if (datas.length > 0) {
          datas.forEach((element) => {
            xdata.push(element.userName);
            ydata.push(element.performance);
          });
        }
        allData.chartData = [{ name: '绩效', xdata: xdata, ydata: ydata }];
      }
    };
    //获取厂站人员工单完成率
    const getTaskComplelt = async () => {
      let params = {
        year: allData.year,
        month: allData.month,
        companyId: allData.stationtypeValue2.Type,
        workOrderType: allData.stationtypeValue3.Type,
      };
      let xdata = [];
      let ydata = [];
      let res = await siteUserWorkOrderCompletionRate(params);
      if (res && res.code == 200) {
        console.log(res.data);
        let datas = res.data;
        if (datas.length > 0) {
          datas.forEach((element) => {
            xdata.push(element.userName);
            ydata.push(element.completionRate);
          });
        }
        allData.chart2Data = [{ name: '工单完成率', xdata: xdata, ydata: ydata }];
      }
    };
    onMounted(() => {
      bus.on('getCurrentData', (e) => {
        allData.year = e.year;
        allData.month = e.month;
        console.log(e.month);
        getpercentArr();
        getPerformanceBar();
        getExcellentPerson();
        getTaskComplelt();
      });
      allData.month = allData.month + 1;
      getpercentArr();
      getPerformanceBar();
      getExcellentPerson();
      getStation();
      getTaskComplelt();
    });
    onBeforeMount(() => {
      bus.off('getCurrentData');
    });
    return {
      ...toRefs(allData),
      changeRadio,
      changeRadio1,
      changeRadio2,
      changeRadio3,
      getpercentArr,
      getPerformanceBar,
      getStation,
      getTaskComplelt,
    };
  },
};
</script>
<style lang="less">
.analysisPage {
  position: relative;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  .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 {
    .leftcalendar {
      height: 323px;
      width: 380px;
      margin-bottom: 10px;
      border: 1px solid #25d8f5;
    }
    .leftcenter {
      width: 380px;
      height: 264px;
      margin-bottom: 10px;
      border: 1px solid #25d8f5;
      padding: 0px 15px;
      .percentList {
        height: 210px;
        overflow: auto;
      }
    }
    .leftbottom {
      width: 380px;
      height: 273px;
      border: 1px solid #25d8f5;
      .excellentperson {
        display: flex;
        flex-wrap: wrap;
        max-height: 176px;
        overflow: auto;
        margin: 10px 0px 0 15px;
        .noData {
          text-align: center;
          line-height: 150px;
          width: 100%;
        }
        .person {
          width: 115px;
          height: 50px;
          display: flex;
          flex-wrap: wrap;
          .personNa {
            display: flex;
            align-items: center;
          }
          .personImg {
            width: 40px;
            height: 40px;
            margin: 5px;
            background: url('@/assets/newImgs/userJX/defaultperson.jpg') no-repeat center;
            background-size: 100% 100%;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .rightcontent {
    margin-left: 20px;
    height: 97.8%;
    width: 75%;
    border: 1px solid #25d8f5;
    .rightop {
      height: 440px;
      .Line {
        height: 1px;
        width: 90%;
        margin-left: 20px;
        margin-bottom: 15px;
        border: 1px solid rgba(57, 139, 198, 1);
      }
    }
    .rightbottom {
      height: 440px;
      .Line {
        height: 1px;
        width: 90%;
        margin-left: 20px;
        margin-bottom: 15px;
        border: 0.5px solid rgba(57, 139, 198, 1);
      }
    }
  }
}
</style>