<template>
  <div class="app-container">
    <el-row>
      <el-col :span="5">
        <h3>巡查日历</h3>
        <el-calendar v-model="calendarDate" ></el-calendar>
      </el-col>
      <el-col :span="19" style="padding: 0 40px;">
        <h3>今日巡查信息</h3>
        <div class="projectName">
          <div>
            <el-select v-model="queryParams.projectId" placeholder="请选择项目" style="width:250px;" @change="projectChange">
              <el-option
                v-for="item in projectList"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId">
              </el-option>
            </el-select>
            <el-select v-model="queryParams.userId" placeholder="请选择人员" style="width:150px;margin: 0 20px">
              <el-option
                v-for="item in projectUserList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId">
              </el-option>
            </el-select>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </div>
          <div class="projectData">
            <span class="shuxian"></span>
            <span class="dataWrap">
              <span>已巡查人数</span>
              <span>3</span>
            </span>
            <span class="shuxian"></span>
            <span class="dataWrap">
              <span>未巡查人数</span>
              <span>3</span>
            </span>
            <span class="shuxian"></span>
            <span class="dataWrap">
              <span>上报异常</span>
              <span>3</span>
            </span>
            <span class="shuxian"></span>

          </div>
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="tabChange">
            <el-tab-pane label="全部" name="0">
            </el-tab-pane>
            <el-tab-pane label="已完成" name="1">
            </el-tab-pane>
            <el-tab-pane label="未完成" name="2">
            </el-tab-pane>
          </el-tabs>
          <el-table :data="patrolInfo"  v-loading="loading" :span-method="objectSpanMethod">
            <el-table-column label="人员信息" align="center" prop="nickName" width="350">
               <template slot-scope="scope">
                <span>{{scope.row.nickName}}</span>
                <span style="margin:0 20px;">{{scope.row.riskPostName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="巡查信息" align="center" prop="">
              <template slot-scope="scope">
                <span class="infoWrap">
                  <span>{{scope.row.patrolType}}</span>
                  <span style="margin:0 60px;">{{scope.row.status}}</span>
                  <span v-if="scope.row.status == '已巡查'">上报异常：{{scope.row.delFlag}}条</span>
                  <span  v-if="scope.row.status == '未巡查'">截止时间：{{scope.row.validityTime}}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="getDetail(scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
import { riskUserPatrolList } from '@/api/risk/riskUserPatrol'
import { listCurrentProject } from '@/api/risk/currentProject'
import { userCurrentRiskPost } from "@/api/system/currentRiskPost";


  let moment = require("moment");
  export default {
    name: '',
    data() {
      return {
        calendarDate: new Date(),
        projectList:[],
        projectUserList:[],
        patrolInfo:[],
        activeName:'0',
        loading: true,
        total:0,
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          startTime:'',
          status:'',
          projectId:'',
          userId:''
        },
        spanArr:[],
        pos:'',
      }
    },
    watch:{
      calendarDate(val, oldVal) {
        if (val && moment(val).format("YYYY-MM-DD") == moment().format("YYYY-MM-DD")) {
          console.log("点击了‘今天’按钮");
        } else if (val && moment(val).toDate() < moment(oldVal).startOf("month").toDate()) {
          console.log("点击了‘上个月’按钮");
        } else if (val && moment(val).toDate() > moment(oldVal).endOf("month").toDate()) {
          console.log("点击了‘下个月’按钮");
        } else {
          console.log("点击了" + moment(val).format("YYYY-MM") + "-" + this.calendarDate.getDate());
          this.queryParams.startTime = `${moment(val).format("YYYY-MM")}-${this.calendarDate.getDate()}`
        }
      },
    },
    created(){
     this.getProjectList()
    },
    mounted() {
     this.getList();
    },
    methods: {
       /** 查询基础数据-项目列表 */
      getList() {
        this.loading = true;
        riskUserPatrolList(this.queryParams).then((response) => {
          this.patrolInfo = response.rows;
          this.patrolInfo.forEach((item) => {
             if (item.status == '0' ) {
              item.status = '未巡查'
             }else if (item.status == '1') {
               item.status = '已巡查'
             }else if (item.status == '2') {
               item.status = '已请假'
             }else if (item.status == '3') {
               item.status = '已过期'
             }
             if (item.patrolType == '0' ) {
              item.patrolType = '日查'
             }else if (item.patrolType == '1') {
               item.patrolType = '周查'
             }else if (item.patrolType == '2') {
               item.patrolType = '月查'
             }else if (item.patrolType == '3') {
               item.patrolType = '季查'
             }else if (item.patrolType == '4') {
               item.patrolType = '年查'
             }

          })
          this.spanArr = [],
          this.pos = ''
          this.patrolInfo = this.groupArr(this.patrolInfo, 'nickName')
          this.getSpanArrData(this.patrolInfo, 'nickName')
          this.total = response.total;
          this.loading = false;
        });
      },
      // 项目列表
      getProjectList() {
        let params = {
          pageNum: 1,
          pageSize: 999,
          userId : this.$store.getters.userId
        }
        listCurrentProject(params).then((response) => {
          this.projectList = response.rows;
        });
      },
      /** 查询人员列表 */
    getUserList() {
      let params = {
          pageNum: 1,
          pageSize: 999,
          projectId : this.queryParams.projectId
        }
      userCurrentRiskPost(params).then(response => {
        this.projectUserList = response.rows;
      });
    },
     /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          startTime:'',
          status:'',
          projectId:'',
          userId:''
        }
        this.activeName = '0'
        this.handleQuery();
      },
     tabChange(e){
      if (e.name == '2') {
        this.queryParams.status = '0'
      }else if (e.name == '1') {
        this.queryParams.status = '1'
      }else{
        this.queryParams.status = ''
      }
      this.getList();
     },
    //  选择项目是查询成员
     projectChange(e){
      this.getUserList()
     },
    //  详情
     getDetail(){

     },
     //把相同项目名称排序到一起
    groupArr(list,field){
      let fieldList = [];
      let groupList=[];
      // 获取数组指定字段值，并去重
      list.map((element)=>{
          if(fieldList.indexOf(element[field])===-1){
              fieldList.push(element[field])
          }
      })
      for(let i=0;i<fieldList.length;i++){
          //过滤出匹配到的数据
          let arr = list.filter((element)=>{
              return element[field]===fieldList[i];
          })
          groupList.push(arr)
      }
      let data = []
      groupList.forEach((item,index )=> {
        data = [...data, ...item]
      });
      return data;
    },
    //获取合并行数据
    getSpanArrData(data, name) {
      for (let i = 0; i < data.length; i++) {
        //如果是第一条记录（索引为０），向数组中加入１，并设置索引位置
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0; //spanArr的索引
        } else {
          //如果不是第一条记录，则判断它与前一条记录是否相等
          //根据相同 扣分类别名称 进行合并,根据需要可进行修改
          if (data[i][name] === data[i - 1][name]) {
            //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
  // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  }
}
</script>

<style scoped lang='scss'>
.app-container{
  padding-top: 0 !important;
}
::v-deep .el-calendar-table .el-calendar-day{
  height: 50px;
}
.projectName{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0px;
}
.projectData{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  .dataWrap{
    height: 100px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 40px;
    color: #7c7c7c;
    :last-child{
      color: #278CFB;
      font-size: 28px;
    }
  }
  .shuxian{
    display: inline-block;
    width: 2px;
    height: 40px;
    background-color: #e7e5e5;
  }
}
.infoWrap{
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 0 50px 0 80px;
}
</style>
