<template>
  <div>
    <div v-if="showDetail">
      <el-page-header @back="goBack" content="师傅汇总"></el-page-header>
      <br /><br />
      <!-- 筛选条件 -->
      <div>
        <el-form ref="searchForm" :model="searchForm" label-width="130px" size="mini" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="时间:" prop="month">
                <el-date-picker
                  style="width: 100%"
                  v-model="searchForm.month"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="选择月"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="状态:" prop="status">
                <el-select style="width: 100%" v-model="searchForm.status" placeholder="请选择">
                  <el-option value="1" label="未发放"></el-option>
                  <el-option value="2" label="已发放"></el-option>
                  <el-option value="3" label="银行处理中"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="所属网点:" prop="websiteName">
                <el-input v-model="searchForm.websiteName" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="服务人员:" prop="serviceName">
                <el-input v-model="searchForm.serviceName" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="身份证号码:" prop="idCard">
                <el-input v-model="searchForm.idCard" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="手机号:" prop="mobile">
                <el-input v-model="searchForm.mobile" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
              <el-form-item label="" class="fr">
                <el-button size="mini" @click="emptyFn">清空</el-button>
                <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 按钮 -->
      <div class="btn-group clearfix">
        <div class="fl">
          <!-- <el-button type="text" @click="showDetailFn">查看明细(测试)</el-button> -->
        </div>
        <div class="fr">
          <el-button type="primary" size="mini" @click="exportFn">导出数据</el-button>
        </div>
      </div>
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column align="center" label="操作" fixed width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="showDetailFn(scope.row.id)">查看明细</el-button>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="工资条编号"
              prop="salaryNo"
              min-width="180"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="发放月份"
              prop="month"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="left" label="状态" prop="status" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag size="mini" v-show="scope.row.status == 1" type="">待发放</el-tag>
                <el-tag size="mini" v-show="scope.row.status == 2" type="success">已发放</el-tag>
                <el-tag size="mini" v-show="scope.row.status == 3" type="warning">银行受理中</el-tag>
                <el-tag size="mini" v-show="scope.row.status == 4" type="danger">发放失败</el-tag>
                <el-tag size="mini" v-show="scope.row.status == 5" type="warning">驳回</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="所属网点" prop="belongWebsite" min-width="350" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ '(' + scope.row.websitNumber + ')' + scope.row.websitName }}
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="服务人员"
              prop="serviceName"
              min-width="140"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="身份证"
              prop="idCard"
              min-width="200"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="left"
              label="手机号"
              prop="mobile"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="right"
              label="本次维修结算费用"
              prop="repairTotalAmount"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.repairTotalAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="需扣回费用" prop="" min-width="100" show-overflow-tooltip>
              <el-table-column align="right" label="应扣" prop="shouldReduceCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.shouldReduceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="已扣" prop="reduceCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.reduceCost | numToFixed }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="right" label="增减费用" prop="incrDecrCost" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.incrDecrCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工伤保险" prop="" min-width="100" show-overflow-tooltip>
              <el-table-column
                align="right"
                label="应扣"
                prop="shouldEmpInsuranceCost"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.shouldEmpInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="已扣" prop="empInsuranceCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.empInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="残保金" prop="" min-width="100" show-overflow-tooltip>
              <el-table-column
                align="right"
                label="应扣"
                prop="shouldResidualInsuranceCost"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.shouldResidualInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="已扣"
                prop="residualInsuranceCost"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.residualInsuranceCost | numToFixed }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="暂扣款" prop="" min-width="100" show-overflow-tooltip>
              <el-table-column align="right" label="应扣" prop="withholdCost" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.withholdCost | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="已扣"
                prop="withholdTotalCost"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.withholdTotalCost | numToFixed }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="right" label="应发" prop="issueCost" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.issueCost | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="备注" prop="remark" min-width="200" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <ComponentDetailList
      @exportDetailFn="exportDetailFn"
      @detailFn="detailFn"
      :detailList="detailList"
      :detailTotal="detailTotal"
      v-else
    />
  </div>
</template>

<script>
import { getsummaryListDay, getsummaryDetailList } from '@/api/dailySettlement/financialSummaryDay'
import ComponentDetailList from './componentDetailList'
import { downloadFiles } from '@/utils/util'
export default {
  props: {
    grantNumber: {
      type: String,
      required: true
    },
    summaryNumberDetail: {
      type: String,
      required: true
    }
  },
  components: {
    ComponentDetailList
  },
  data() {
    return {
      searchForm: {
        idCard: '',
        mobile: '',
        month: '',
        serviceName: '',
        status: '',
        summaryBatchNo: '',
        summaryCommpany: '',
        websiteName: ''
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [], // 列表数据
      listLoading: false, // 列表加载loading
      showDetail: true,
      detailList: [],
      detailTotal: null,
      detailId: ''
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    //详情页面的导出
    exportDetailFn(value) {
      let params = {
        issueSalaryId: this.detailId,
        ...value
      }
      downloadFiles('daily/summary/worker/detail/export', params)
    },
    //子传父事件
    async detailFn(value) {
      console.log(value)

      let params = {
        ...value,
        issueSalaryId: this.detailId
      }
      let res = await getsummaryDetailList(params)
      this.detailList = res.data.records
      this.detailTotal = res.data.total
      this.showDetail = false
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val

      this.getDataList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    //导出
    exportFn() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        idCard: this.searchForm.idCard,
        mobile: this.searchForm.mobile,
        month: this.searchForm.month,
        serviceName: this.searchForm.serviceName,
        status: this.searchForm.status,
        summaryBatchNo: this.grantNumber,
        summaryNumber: this.summaryNumberDetail,
        summaryCommpany: this.searchForm.summaryCommpany,
        websiteName: this.searchForm.websiteName
      }
      downloadFiles('daily/summary/worker/summary/export', params)
    },
    //清除
    async emptyFn() {
      await this.$refs.searchForm.resetFields()
    },
    //搜索
    searchFn() {
      this.getDataList()
    },
    //获取列表数据
    async getDataList() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        idCard: this.searchForm.idCard,
        mobile: this.searchForm.mobile,
        month: this.searchForm.month,
        serviceName: this.searchForm.serviceName,
        status: this.searchForm.status,
        summaryBatchNo: this.grantNumber,
        summaryNumber: this.summaryNumberDetail,
        websiteName: this.searchForm.websiteName
      }
      let res = await getsummaryListDay(params)
      this.dataList = res.data.records
      this.listTotal = res.data.total
    },
    //师傅汇总详情
    async showDetailFn(id) {
      // console.log(summaryBatchNo);
      // this.detailId = summaryBatchNo;
      // this.detailNumber = serviceNumber;

      this.detailId = id
      let params = {
        pageSize: 10,
        pageNo: 1,
        issueSalaryId: id
      }
      let res = await getsummaryDetailList(params)
      this.detailList = res.data.records
      this.detailTotal = res.data.total
      this.showDetail = false
    },
    //返回
    goBack() {
      this.$parent.masterDetail = false
      this.$emit('updateList')
    }
  }
}
</script>

<style></style>
