<template>
  <div class="Attendance">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <p>办公OA/签到管理</p>
      </el-col>
      <el-col :span="6" class="TextAlR">
        <el-button type="warning" v-if="AttendanceBtn.AttendanceBtn130" plain size="small" @click="planDate" round>签到时间设置</el-button>
      </el-col>
    </el-row>
    <div class="marT20">
      <div class="noneFlex">
        <div>
          <el-input placeholder="输入成员" v-model="FormSearch.username"></el-input>
        </div>
        <div>
          <el-date-picker
            v-model="FormSearch.clockTime"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div>
          <el-button plain size="small" type="infor" @click="Replace" round>重置</el-button>
          <el-button plain size="small" type="primary" round @click="searchList">搜索</el-button>
          <el-button plain size="small" type="primary" round @click="exportSignModail">导出</el-button>
        </div>
      </div>
      <div class="marT20">
        <el-table
          :data="tableData"
          style="width: 100% text-align:center;"
          border
          v-loading="loading"
          :header-cell-style="{'background-color': '#fafafa',
    'font-weight':'800'}"
        >
          <el-table-column prop="username" label="姓名" min-width="60" align="center"></el-table-column>
          <el-table-column prop="typeDesc" label="打卡类型" min-width="60" align="center"></el-table-column>
          <el-table-column prop="requiredTime" label="应打卡时间" min-width="80" align="center"></el-table-column>
          <el-table-column prop="clockTime" label="打卡时间" min-width="80" align="center"></el-table-column>
          <el-table-column prop="clockDate" label="日期" min-width="80" align="center"></el-table-column>
          <el-table-column
            prop="address"
            label="地点"
            min-width="80"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="remarks" label="备注" min-width="80" align="center"></el-table-column>
          <el-table-column prop="statusDesc" label="是否迟到/早退" min-width="80" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="pagenation">
        <el-pagination
          background
          layout="prev, pager, next, sizes, total, jumper"
          :total="total"
          @current-change="click"
          @size-change="handleSizeChange"
          :page-sizes="[5, 15, 25, 50]"
          :page-size="pageConditions.pageSize"
          @prev-click="customerPrev"
          @next-click="customerNext"
        ></el-pagination>
      </div>
    </div>
    <!-- punch -->
    <el-dialog title="打卡时间设置" :visible.sync="DateSet" :before-close="shutDown">
      <div>
        <el-row :gutter="10" class="mb20">
          <el-col :xs="8" :sm="8" :xm="8" :lg="8">
            <div class="t_planDate">
              <div v-if="!setPlan[0]" class="t_one_plan">
                <span @click="getAddDate(0)">添加时间</span>
              </div>
              <div v-if="setPlan[0]">
                <div>上班时间</div>
                <i class="iconfont icontingzhi" @click="getDelDate(0)"></i>
                <el-time-picker
                  placeholder="上班时间"
                  :editable="false"
                  v-model="setDate.topTime"
                  :picker-options="{
                   selectableRange: '00:30:00 - 23:30:00'
                    }"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :xm="8" :lg="8">
            <div class="t_planDate">
              <div v-if="!setPlan[1]" class="t_one_plan">
                <span @click="getAddDate(1)">添加时间</span>
              </div>
              <div v-if="setPlan[1]">
                <div>上班时间</div>
                <i class="iconfont icontingzhi" @click="getDelDate(1)"></i>
                <el-time-picker
                  placeholder="上班时间"
                  :editable="false"
                  v-model="setDate.topTimePm"
                  :picker-options="{
                   selectableRange: '00:30:00 - 23:30:00'
                    }"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :xm="8" :lg="8">
            <div class="t_planDate">
              <div v-if="!setPlan[2]" class="t_one_plan">
                <span @click="getAddDate(2)">添加时间</span>
              </div>
              <div v-if="setPlan[2]">
                <div>上班时间</div>
                <i class="iconfont icontingzhi" @click="getDelDate(2)"></i>
                <el-time-picker
                  placeholder="上班时间"
                  :editable="false"
                  v-model="setDate.topTimeOt"
                  :picker-options="{
                   selectableRange: '00:30:00 - 23:30:00'
                    }"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb20">
          <el-col :xs="8" :sm="8" :xm="8" :lg="8">
            <div class="t_planDate">
              <div v-if="!setPlan[3]" class="t_one_plan">
                <span @click="getAddDate(3)">添加时间</span>
              </div>
              <div v-if="setPlan[3]">
                <div>下班时间</div>
                <i class="iconfont icontingzhi" @click="getDelDate(3)"></i>
                <el-time-picker
                  placeholder="下班时间"
                  :editable="false"
                  v-model="setDate.downTime"
                  :picker-options="{
                   selectableRange: '00:30:00 - 23:30:00'
                    }"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :xm="8" :lg="8">
            <div class="t_planDate">
              <div v-if="!setPlan[4]" class="t_one_plan">
                <span @click="getAddDate(4)">添加时间</span>
              </div>
              <div v-if="setPlan[4]">
                <div>下班时间</div>
                <i class="iconfont icontingzhi" @click="getDelDate(4)"></i>
                <el-time-picker
                  placeholder="下班时间"
                  :editable="false"
                  v-model="setDate.downTimePm"
                  :picker-options="{
                   selectableRange: '00:30:00 - 23:30:00'
                    }"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :xm="8" :lg="8">
            <div class="t_planDate">
              <div v-if="!setPlan[5]" class="t_one_plan">
                <span @click="getAddDate(5)">添加时间</span>
              </div>
              <div v-if="setPlan[5]">
                <div>下班时间</div>
                <i class="iconfont icontingzhi" @click="getDelDate(5)"></i>
                <el-time-picker
                  placeholder="下班时间"
                  :editable="false"
                  v-model="setDate.downTimeOt"
                  :picker-options="{
                   selectableRange: '00:30:00 - 23:30:00'
                    }"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="TextAlR">
          <el-button type="infor" plain size="small" @click="shutDown">取消</el-button>
          <el-button type="primary" plain size="small" @click="setPlanDate">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="导出签到" :visible.sync="exportAttden" :before-close="closeDown" width="580px">
      <div class="exportAttenModia">
        <div>
            <span>选择月份</span>
            <span>
              <el-date-picker v-model="attendanceYearMonth" type="month" placeholder="选择月" format="yyyy 年 MM 月"
      value-format="yyyy-MM"></el-date-picker>
            </span>
        </div>
        <div class="texRight">
            <el-button type="primary" plain size="small" @click="exportSign">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  name: "Attendance",
  data() {
    return {
      FormSearch: {
        username: null,
        clockTime: null
      },
      list: {},
      pageConditions: {
        pageSize: 5,
        pageNum: 1,
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        username: null,
        clockTime: null
        // username:""
      },
      setDate: {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        topTime: "",
        downTime: "",
        topTimePm: "",
        downTimePm: "",
        topTimeOt: "",
        downTimeOt: ""
      },
      setPlan: [false, false, false, false, false, false],
      total: 0,
      tableData: [],
      loading: false,
      DateSet: false,
      exportAttden: false,
      attendanceYearMonth: null,
      AttendanceBtn:{
        AttendanceBtn130:0,
      }
    };
  },
  created() {
    var AttendanceBtn = {}
    this.getButton(129).then(result => {
      if (result.data.statusCode==="1") {
        AttendanceBtn = result.data.data
        AttendanceBtn.map((item)=>{
          if(item.id==130){
            this.AttendanceBtn.AttendanceBtn130 = item.checked?1:0 
          }
        })
      }
    });
  },
  mounted() {
    this.getAttendanceList();
  },
  methods: {
    // 打卡
    Replace() {
      this.FormSearch = { username: null, clockTime: null };
      this.pageConditions = {
        pageSize: 10,
        pageNum: 1,
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        username: null,
        clockTime: null
      };
      this.getAttendanceList();
    },
    click(val) {
      this.pageConditions.pageNum = val;
      this.getAttendanceList();
      console.log(val);
    },
    handleSizeChange(val) {
      this.pageConditions.pageSize = val;
      this.pageConditions.pageNum = 1;
      this.getAttendanceList();
    },
    customerPrev(val) {
      this.pageConditions.pageNum = val;
      this.getAttendanceList();
    },
    customerNext(val) {
      this.pageConditions.pageNum = val;
      this.getAttendanceList();
    },
    exportSign() {
      var url = "enterprise/oa/attendance/export";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        attendanceYearMonth:this.attendanceYearMonth
      };
      this.axios.post(url,param,{ responseType: "arraybuffer" }).then(res => {
        const aLink = document.createElement("a");
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });
        aLink.href = URL.createObjectURL(blob);
        aLink.setAttribute("download", "打卡记录" + ".xlsx");
        aLink.click();
      });
    },
    exportSignModail() {
      this.exportAttden = true;
    },
    closeDown() {
      this.exportAttden = false;
    },
  
    searchList() {
      this.pageConditions = {
        pageSize: 10,
        pageNum: 1,
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        username: this.FormSearch.username,
        clockTime: this.FormSearch.clockTime
      };
      this.getAttendanceList();
    },
    getAttendanceList() {
      var url = "enterprise/oa/attendance/list";
      var param = this.pageConditions;
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.tableData = res.data.page.rows;
          this.total = res.data.page.total;
        }
      });
    },
    planDate() {
      var url = "enterprise/oa/attendance/time";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.setDate = res.data;
          this.setPlan = [
            !this.setDate.topTime ? false : true,
            !this.setDate.topTimePm ? false : true,
            !this.setDate.topTimeOt ? false : true,
            !this.setDate.downTime ? false : true,
            !this.setDate.downTimePm ? false : true,
            !this.setDate.downTimeOt ? false : true
          ];
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
      this.DateSet = true;
    },
    shutDown() {
      this.setDate = {
        topTime: "",
        downTime: "",
        topTimePm: "",
        downTimePm: "",
        topTimeOt: "",
        downTimeOt: ""
      };
      this.setPlan = [false, false, false, false, false, false];
      this.DateSet = false;
    },
    getAddDate(i) {
      this.$set(this.setPlan, i, true);
    },
    getDelDate(i) {
      this.$set(this.setPlan, i, false);
      switch (i) {
        case 0:
          this.setDate.topTime = "";
          break;
        case 1:
          this.setDate.topTimePm = "";
          break;
        case 2:
          this.setDate.topTimeOt = "";
          break;
        case 3:
          this.setDate.downTime = "";
          break;
        case 4:
          this.setDate.downTimePm = "";
          break;
        case 5:
          this.setDate.downTimeOt = "";
          break;
      }
    },
    setPlanDate() {
      var setPlan = this.setPlan;
      if (setPlan[0] !== setPlan[3])
        return this.$message.error("请完整设置一组上下班时间");
      if (setPlan[1] !== setPlan[4])
        return this.$message.error("请完整设置一组上下班时间");
      if (setPlan[2] !== setPlan[5])
        return this.$message.error("请完整设置一组上下班时间");
      var url = "enterprise/oa/attendance/setupTime";
      var param = this.setDate;
      (param.mtCompanyId = JSON.parse(sessionStorage.getItem("companyID")).id),
        this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            this.$alert(res.message, {
              confirmButtonText: "确定",
              callback: action => {
                this.shutDown();
              }
            });
          } else {
            this.$message.error(res.message);
          }
        });
    }
  }
};
</script>
<style lang="stylus">
.exportAttenModia{
  padding:10px;
  >div:first-child{
    display:flex;
    justify-content:flex-start;
    padding:10px;
    >span{
      padding:10px;
      display:inline-block;
      vertical-align:middle;
    }
    >span:first-child{
      height:50px;
      line-height:30px;
    }
  }
}
.texRight{
  text-align:right;
}

</style>