<template>
  <div class="app-container pay-query-main">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="项目名称" prop="projectId">
        <el-select v-model="queryParams.projectId" filterable placeholder="请选择项目" @change="doQuerySub">
          <el-option v-for="(item, index) in projectOptions" :key="index" :label="item.projectName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="总包单位" prop="subDeptId">
        <el-select v-model="queryParams.subDeptId" filterable placeholder="请选择总包单位" clearable>
          <el-option v-for="(item, index) in depts" :key="index" :label="item.deptName" :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="workerName">
        <el-input v-model="queryParams.workerName"/>
      </el-form-item>
      <el-form-item label="日期" >
        <el-date-picker v-model="queryParams.attendanceDay1" style="margin:0px 10px;" type="date" placeholder="选择日期"
          @change="handleQuery">
        </el-date-picker>
        -
        <el-date-picker v-model="queryParams.attendanceDay2" style="margin:0px 10px;" type="date" placeholder="选择日期"
          @change="handleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="success" v-if="total>0" @click="doExport">导出</el-button>
      </el-form-item>
      </el-form>

      <div>
      <el-table v-loading="loading" :data="attendanceList" height="60vh" class="my-table">
      <el-table-column label="照片" align="center" prop="id">
        <template slot-scope="{ row }">
          <el-image :src="row.scanPhoto || row.workerPhoto" :preview-src-list="[row.scanPhoto || row.workerPhoto]"
            style="height: 60px" />
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="workerName" />
      <el-table-column label="籍贯" align="center" prop="nativePlace" />
      <el-table-column label="性别" align="center" prop="attendanceType">
        <template slot-scope="{ row }">{{
      row.workerGender == 1 ? "女" : "男"
    }}</template>
      </el-table-column>

      <el-table-column label="分包商名称" align="center" prop="companyName" />
      <el-table-column label="所属班组" align="center" prop="groupName" />
      <el-table-column label="工种" align="center" prop="workTypeName" />
      <el-table-column label="出勤天数" align="center" prop="pay" v-if="type=='month'">
        <template slot-scope="{ row }">{{row.days }}</template>
        </el-table-column>
        <el-table-column label="出勤日期" align="center" prop="pay" v-if="type=='day'">
        <template slot-scope="{ row }">
          <span>{{(row.attendanceTime||row.attendanceOutTime)|formatDate }}</span>
        </template>
        </el-table-column>
      <el-table-column label="工资" align="center" prop="pay">
        <template slot-scope="{ row }">
          <span >{{(row.pay/100.0).toFixed(2)}}</span>
          <span v-if="false" >
          {{(row.unitPay/100.0).toFixed(2)}}*{{row.days}}={{(row.pay/100.0).toFixed(2)}}
        </span>
        </template>
      </el-table-column>
      <div slot="empty">
        <el-empty v-if="total==0" image="./images/empty.svg"></el-empty>
      </div>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    </div>

  </div>
</template>

<script>
import DayPay from './dayPay.vue'
import MonthPay from './monthPay.vue'
import {listByBetweenDay,listGroupBetweenDay} from '@/api/project/unitpay'
export default {
  components:{
    DayPay,MonthPay
  },
  name: "Unitpay",
  data() {
    return {
      // 遮罩层
      loading: true,
      activeName: 'day',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        subDeptId: null,
        workerName:'',
        attendanceDay1:new Date(),
        attendanceDay2:null,
      },
      // 表单校验
      projectOptions: [],
      depts: [],
      total: 0,
      attendanceList:[],
      type:'',
    };
  },
  created() {
    this.init();
  },
  methods: {
    dataChange(total){
      this.total=total;
    },
    getPrjInfo(){
      return {
        projectId:this.queryParams.projectId,
        deptId:this.queryParams.subDeptId,
        attendanceTime:this.activeName=="day"?this.queryParams.attendanceDay:this.queryParams.attendanceMonth
      }
    },
    doQuerySub() {
      let prjId = this.queryParams.projectId;
      let tmps = this.prjDept2 && this.prjDept2[prjId] ? this.prjDept2[prjId] || [] : [];
      if (tmps.length > 0 || !prjId) {
        this.depts = tmps;
        if (tmps.length == 1) {
          this.queryParams.subDeptId = tmps[0].deptId;
        } else {
          this.queryParams.subDeptId = '';
        }
        this.loading=false;
        return;
      }
      this.$api.publics.queryUnitList({
        projectId: prjId,
        unitTypes: "2".split(","),
      }).then((d) => {
        this.loading=false;
        let objs = d.rows || [];
        if (!this.prjDept2) {
          this.prjDept2 = {};
        }
        this.prjDept2[prjId] = objs;
        this.depts = objs;
        if (objs.length == 1) {
          this.queryParams.subDeptId = objs[0].deptId;
        } else {
          this.queryParams.subDeptId = '';
        }
      });
    },
    init() {
      if (this.projectOptions && this.projectOptions.length > 0) {
        return;
      }
      this.$api.publics.getMyProjectList({}).then((response) => {
        this.projectOptions = response.rows || [];
        if (this.projectOptions.length > 0) {
          this.queryParams.projectId = this.projectOptions[0].id;
          this.doQuerySub();
        }
      });
    },
    handleQuery() {
      this.queryParams.pageNum=1;
      this.getList();
    },
    getPostData(){
      let postData={
        projectId:this.queryParams.projectId,
        deptId:this.queryParams.subDeptId,
        pageNum:this.queryParams.pageNum,
        pageSize:this.queryParams.pageSize
      };
      if(this.queryParams.workerName.trim()){
        this.type='day';
        postData.workerName=this.queryParams.workerName.trim();
      }else{
        this.type='month';
      }

      if(this.queryParams.attendanceDay1){
        postData.attendanceTime=this.$dt(this.queryParams.attendanceDay1).format("YYYY-MM-DD");
      }
      if(this.queryParams.attendanceDay2){
        postData.attendanceOutTime=this.$dt(this.queryParams.attendanceDay1).format("YYYY-MM-DD");
      }
      return postData;
    },
    getList(){
      this.loading = true;
      let ajaxFun=listByBetweenDay;
      let postData=this.getPostData();
      if(this.type=='month'){
        ajaxFun=listGroupBetweenDay;
      }
      ajaxFun(postData).then(response=>{
        this.attendanceList = (response.rows || []).map((it) => {
          if (it.vendorsCode != "yanzhu") {
            let dt1 = it.attendanceTime;
            let dt2 = it.attendanceOutTime;
            if (!dt1 || !dt2 || dt1 == dt2) {
              let dt = dt1 || dt2;
              if (it.remark == "E") {
                it.attendanceTime = dt;
                it.attendanceOutTime = "";
              } else {
                it.attendanceTime = "";
                it.attendanceOutTime = dt;
              }
            }
          }
          it.scanPhoto =it.scanPhoto && it.scanPhoto.indexOf("/profile") == 0 ? "/jhapi" + it.scanPhoto : it.scanPhoto;
          return it;
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    doTabClick(){
      setTimeout(this.handleQuery,1000);
    },
    doExport(){
      let postData=this.getPostData();
      let tmps=this.projectOptions.filter(d=>d.id==this.queryParams.projectId);
      let name=tmps.length>0?tmps[0].projectName:"";
      if(this.queryParams.subDeptId){
        tmps=this.depts.filter(d=>d.deptId==this.queryParams.subDeptId);
        if(tmps.length>0){
          name+="_"+tmps[0].deptName;
        }
      }
      name+=`_工资管理_[${new Date().getTime()}].xlsx`
      let url=this.type=="day"?"project/unitpay/exportBetweenDay":"project/unitpay/exportGroupBetweenDay";
      this.download(
        url,
        {
          ...postData,
        },
        name
      );
    }
  }
};
</script>
<style lang="scss">
.pay-query-main{
  font-size: 12px;
  .el-table.my-table{
    height: calc(100vh - 292px) !important;
  }
}
</style>
