<template>
  <div>
    <div class="top" style="font-size: 30px;line-height: 80px;height: 200px;margin: 20px  0 0 15px">
      <!--普通内容-->
      <div v-if="isAdmin != 1">
        <div style="display: flex;">
          <div class="name">今日日报：</div>
          <div class="value">
            <el-tag v-if="nowWorkStatus" type="success" style="font-size: 30px">已完成</el-tag>
            <el-tag v-else type="warning" style="font-size: 30px">未完成</el-tag>
          </div>
        </div>
        <div style="display: flex;">
          <div class="name">昨日日报：</div>
          <div class="value">
            <el-tag v-if="backWorkStatus" type="success" style="font-size: 30px">已完成</el-tag>
            <el-tag v-else type="warning" style="font-size: 30px">未完成</el-tag>
          </div>
        </div>
      </div>
      <!--管理员内容-->
      <div v-else>
        <div class="personList">
          <el-tag
            v-for="item in personList1"
            :key="item.姓名"
            :type="item.是否填报 > 0 ? 'success' : 'warning'"
            style="width: 130px;height: 50px;font-size: 20px;line-height: 50px;margin: 5px 0"
            effect="dark"
            @click="clickTagItem(item)">
            {{ item.姓名 }}
          </el-tag>
        </div>
      </div>
    </div>
    <div class="daily-right">
      <div class="left">
        <el-timeline>
          <el-timeline-item v-for="item in clickItemData1" :key="item.ID" :timestamp="item.计划开始时间" placement="top" >
            <el-card class="el-card-my" @click.native="clickTimeItem(item)">
              <h3 style="text-align: right;line-height: 40px">{{ item.节点名称 }}</h3>
              <h4>{{ item.工作内容 }}</h4>
              <p>
                <el-tag :type="item.状态 == '已完成' ? 'success' : 'warning'">{{ item.状态 }}</el-tag>
                结束于 {{ item.计划完成时间 }}
                <el-tag v-if="item.备注" style="float: right">备注√</el-tag>
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div v-if="timeItem" class="right">
        <table>
          <tr>
            <th colspan="2" style="width:240px">{{ timeItem.节点名称 }}</th>
            <th>{{ timeItem.子项目内容 }}</th>
          </tr>
          <tr>
            <td style="width:100px;text-align: right;font-weight: 700">工作内容：</td>
            <td colspan="2">{{ timeItem.工作内容 }}</td>
          </tr>
          <tr>
            <td style="width:100px;text-align: right;font-weight: 700">工作备注：</td>
            <td colspan="2">{{ timeItem.备注 }}</td>
          </tr>
          <tr style="font-size: 20px;text-align: center">
            <td colspan="2" style="width:240px">开始：{{ timeItem.计划开始时间 }}</td>
            <td>完成：{{ timeItem.计划完成时间 }}</td>
          </tr>
        </table>
      </div>
    </div>
    <Calendar
      :date="new Date()"
      :click-item="clickItem"
      :get-item-class="getItemClass"
      :is-admin="this.isAdmin == 1"
      style="width:700px;height:500px;position: fixed;top:320px;left: 20px;"
      @changeMonth="onMonthChange"
    />
  </div>
</template>

<script>
import Calendar from '@/components/Calendar2/index.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'DayCount',
  components: {
    Calendar
  },
  data() {
    return {
      personList1: [],
      roleList: [],
      nowWorkStatus: '',
      backWorkStatus: '',
      timeItem: '',
      // isAdmin: false,
      ProjectManagement_RecordList: [],
      clickItemData1: [],
      workDayNumber: {} // 月每天填写的人数
    }
  },
  computed: {
    ...mapGetters(['id', 'token', 'name', 'clickItemData', 'personList','isAdmin'])
  },
  created() {
    // 获取昨日数据
    this.getInitData()
    this.searchBackWorkStatus()
    this.searchNowWorkStatus()
    // this.roleList = window.g.roleList
    // this.isAdmin = this.roleList.indexOf(parseInt(this.id)) !== -1
  },
  mounted() {
    const day = {
      day: new Date().getDate(),
      month: new Date().getMonth() + 1,
      fullYear: new Date().getFullYear()
    }
    this.clickItem(day)
  },
  methods: {
    getInitData(targetYear, targetMonth) {
      const year = targetYear || new Date().getFullYear()
      const month = targetMonth || (new Date().getMonth() + 1)
      var param = []
      param[0] = ['人员编号', this.id]
      param[1] = ['月份', year + '-' + (month < 10 ? '0' + month : month) + '-01']
      param[2] = ['checkType', 0]
      var Data = this.CreateData('11', '项目管理_是否日报填写_详情_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.ProjectManagement_RecordList = response.data
        } else {
          this.ProjectManagement_RecordList = []
        }
      })
    },
    onMonthChange(startDay) {
      const year = startDay.getFullYear()
      const month = startDay.getMonth() + 1
      this.getInitData(year, month)
    },
    // 判断日期返回的样式
    getItemClass(day) {
      const month = day.month < 10 ? '0' + day.month : day.month
      const day2 = day.day < 10 ? '0' + day.day : day.day
      for (let i = 0; i < this.ProjectManagement_RecordList.length; i++) {
        if (this.ProjectManagement_RecordList[i].月时间 === day.fullYear + '-' + month + '-' + day2) {
          if (this.ProjectManagement_RecordList[i].数量 !== 0) {
            console.log(123444)
            return 'cal_m_day_cell_reCodeWork'
          }
        }
      }
    },
    // 点击某一项日期
    clickItem(day, event) {
      const month = day.month < 10 ? '0' + day.month : day.month
      const day2 = day.day < 10 ? '0' + day.day : day.day
      // 判断是否 为管理员，是的话则拉取人员列表，不是则拉去今日进度
      if (this.isAdmin == 1) {
        var param = []
        param[0] = ['人员编号', this.id]
        param[1] = ['checkType', 3]
        param[2] = ['指定日', day.fullYear + '-' + month + '-' + day2]
        var Data = this.CreateData('11', '项目管理_是否日报填写_查询', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            this.$store.commit('ADD_PERSON_LIST', response.data)
            this.personList1 = response.data
          } else {
            this.$message.warning('该日期没有填写日报!')
          }
        })
      } else {
        for (let i = 0; i < this.ProjectManagement_RecordList.length; i++) {
          if (this.ProjectManagement_RecordList[i].月时间 === day.fullYear + '-' + month + '-' + day2) {
            if (this.ProjectManagement_RecordList[i].数量 !== 0) {
              const param = []
              param[0] = ['人员编号', this.id]
              param[1] = ['日期', this.ProjectManagement_RecordList[i].月时间]
              const Data = this.CreateData('11', '项目管理_详情内容_天_查询', param)
              this.ExecDatabase(Data).then(response => {
                if (response.data.length > 0) {
                  this.clickItemData1 = response.data
                  this.$store.commit('ADD_CLICK_ITEM_DATA', this.clickItemData)
                } else {
                  this.$message.error('该日期没有填写日报!')
                }
              })
            } else {
              // 提示选择日期没有填写日报
              this.$message.warning('该日期没有填写日报')
            }
          }
        }
      }
    },
    // 查看今日工作情况
    searchNowWorkStatus() {
      var param = []
      param[0] = ['人员编号', this.id]
      param[1] = ['checkType', 1]
      var Data = this.CreateData('11', '项目管理_是否日报填写_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.nowWorkStatus = response.data[0].是否填报 > 0
        } else {
          this.$message.error('获取日报数据失败!')
        }
      })
    },
    // 点击时间某一项
    clickTimeItem(row) {
      this.timeItem = row
    },
    // 管理员点击某一项tag
    clickTagItem(item) {
      var param = []
      param[0] = ['人员编号', item.人员编号]
      param[1] = ['日期', item.日期]
      this.clickItemData1 = []
      var Data = this.CreateData('11', '项目管理_详情内容_天_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.clickItemData1 = response.data
          this.$store.commit('ADD_CLICK_ITEM_DATA', response.data)
        } else {
          this.$message.warning('没有详细信息!')
        }
      })
    },
    // 查看昨日工作情况
    searchBackWorkStatus() {
      var param = []
      param[0] = ['人员编号', this.id]
      param[1] = ['checkType', 0]
      var Data = this.CreateData('11', '项目管理_是否日报填写_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.backWorkStatus = response.data[0].是否填报 > 0
        } else {
          this.$message.error('获取日报数据失败!')
        }
      })
    }
  }
}
</script>
<style scoped>
  .cal_m_day_cell_reCodeWork{
    border-radius: 50%;
    background-color: #95ffa3 !important;
  }
</style>
<style scoped lang="scss">
// 右侧大栏
.daily-right{
  position: fixed;
  left: 750px;
  top: 150px;
  display: flex;
  .left{
    width: 400px;
    height: 750px;
    overflow: auto;
    .el-card-my:hover{
      border: 1px solid rgba(64, 255, 118, 0.8);
    }
  }
  .right{
    width: 600px;
    height: 450px;
    overflow: auto;
    margin-left: 100px;
    background-color: #fff;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 #0000006e;
    table{
      width: 100%;
    }
    table tr{
      height: 70px;
    }
    table td,th{
      border: 1px solid #000000;
    }
    table th{
      font-size: 25px;
      text-align: center;
    }
  }
  .top .personList{
  display: flex;
  }
}
.personList{
  width: 700px;
  line-height: 40px;
  .el-tag{
    margin: 5px 5px !important;
    width: 100px;
    text-align: center;
    color: #000000;
  }
  .el-tag:hover {
    background: -webkit-linear-gradient(top, #81ff93, #5fe072);
    color: #fff;
  }
}
</style>
