<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="14">
        签到表
        <table>
          <thead>
          <tr>
            <th width="80"></th>
            <th v-for="(item,index) in 31" :class="selectHead===index+1?'selectBox':''" @click="selectMany(index+1)">
              {{ index + 1 }}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in userList">
            <td :class="(item.userId===selectUser.userId || selectAll)?'selectBox':''">{{ item.nickName }}</td>
                        <td v-for="(item2,index2) in 31" @click="selectAttendDay(item,index,index2+1)"
                            :style="{backgroundColor:(item.attendances.length>0 && item.attendances.findIndex(i=>i.attendanceDay === index2+1) >-1) ?item.attendances[item.attendances.findIndex(i=>i.attendanceDay === index2+1)].color:(index2+1===selectIndex&&(item.userId===selectUser.userId || selectAll)?'#f3ff52':'')}"></td>
          </tr>
          </tbody>
        </table>
      </el-col>
      <el-col :span="5">


        <el-card class="box-card">
          <div slot="" class="">
            <span><i class="el-icon-s-order"></i> 项目列表</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div v-for="(item,index) in projectList" style="display: flex;justify-content: space-between">
            <el-button class="text" :style="{backgroundColor:item.color===''?'':item.color}"  @click="signIn(item)">{{ item.projectName }}
            </el-button>
            <el-color-picker class="text" v-model="item.color" @change="changeItemColor(item)"></el-color-picker>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">


        <el-card class="box-card">
          <div slot="" class="">
            <span><i class="el-icon-timer"></i>工作时长</span>
            <div style="margin: 20px 0 ">
              <el-radio-group v-model="timeFlag">
                <el-radio :label="0">天计</el-radio>
                <el-radio :label="1">小时计</el-radio>
              </el-radio-group>
            </div>
            <el-select v-if="timeFlag===0" v-model="form.dayLength" placeholder="请选择工作时长">
              <el-option
                  v-for="dict in dict.type.work_time_length"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>

            <el-select v-if="timeFlag===1" v-model="form.hour" placeholder="请选择工作时长">
              <el-option
                  v-for="dict in dict.type.work_time_length_hour"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </div>
        </el-card>


      </el-col>
    </el-row>

  </div>
</template>

<script>

import {listWorker} from "@/api/system/user";
import {listProject, updateProject} from "@/api/oa/project";
import {listOaAttendance} from "@/api/oa/oaAttendance";
import {addBatchOaAttendance, addOaAttendance} from "../../../api/oa/oaAttendance";

export default {
  name: "Project",
  dicts: ['work_time_length','work_time_length_hour'],
  data() {
    return {
      // 选择索引
      selectIndex: new Date().getDate(),
      // 用户列表
      userList: [],
      // 项目列表
      projectList: [],
      loading: true,
      selectHead: new Date().getDate(),
      // 提交表单
      form: {},
      // 查询参数
      userQueryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      queryParams:{
        pageNum: 1,
        pageSize: 50,
      },
      selectArrayIndex:new Date().getDate(),
      timeFlag: 0,
      // 项目查询参数
      projectQueryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        projectNum: undefined,
        beginTime: undefined,
        finishTime: undefined
      },
      selectUser: {},
      // 日期范围
      dateRange: [],
      selectAll: true,
    }
  },
  mounted() {
    const day = new Date().getDate();
  },
  created() {

    this.getList();
  },

  methods: {
    selectAttendDay(item,index, index2) {
      this.selectIndex = index2;
      this.selectAll = false;
      this.selectUser = item;
      this.selectHead = index2
      this.selectArrayIndex = index
    },

    selectMany(index) {
      this.selectAll = true;
      this.selectIndex = index;
      this.selectHead = index
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listOaAttendance(this.queryParams).then(res=>{
        console.log(res.data)
        this.userList = res.data;
        this.total = res.total;
      });
      listProject(this.projectQueryParams).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },

    changeItemColor(item) {
      updateProject(item);
      this.getList();
    },
    signIn(project){
      // 一个签到
      if (this.form.dayLength === undefined && this.timeFlag === 0) {
        this.$message({ message: '请选择工作时长', type: 'warning' })
        return;
      }
      if (this.form.hour === undefined && this.timeFlag === 1) {
        this.$message({ message: '请选择工作时长', type: 'warning' })
        return;
      }
      let time = this.timeFlag===0?this.form.dayLength:this.form.hour


      if (!this.selectAll){
        this.form = {
          projectId:project.projectId,
          userId:this.selectUser.userId,
          attendanceDay:this.selectIndex,
          dayLength: this.timeFlag===0?this.form.dayLength:undefined,
          hour:this.timeFlag===1?this.form.hour:undefined
        }
        addOaAttendance(this.form).then(res=>{
          this.selectUser = this.selectArrayIndex>=this.userList.length-1?this.selectUser:this.userList[this.selectArrayIndex+1]

          this.getList()

        })
      }else{

        this.form = {
          projectId:project.projectId,
          attendanceDay:this.selectIndex,
          dayLength: this.timeFlag===0?this.form.dayLength:undefined,
          hour:this.timeFlag===1?this.form.hour:undefined
        }
        // 集体赋予状态
        addBatchOaAttendance(this.form).then(res=>{
          this.getList()
        })
      }

    },

  }
};
</script>
<style scoped>
table {
  border: 1px solid #000;
  table-layout: fixed;
  width: 100%;
}

th {
  border: 1px solid;

  height: 15px;
  overflow: hidden;
}

td {
  border: 1px solid;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
}

.selectDay {
  background-color: #00afff;
}

.selectBox {
  background-color: #f3ff52;
}

.text {
  font-size: 16px;
  border-bottom: #cccccc 1px dashed;
  margin: 5px 0;
}
</style>
