<template>
  <div class="app-container">
    <div v-if="!masterDetail">
      <div v-show="showDetailed">
        <el-radio-group @change="searchFn" v-model="searchForm.status" size="mini">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="1">未发放</el-radio-button>
          <el-radio-button label="2">已发放</el-radio-button>
          <el-radio-button label="5">已驳回</el-radio-button>
        </el-radio-group>
        <br /><br />
        <!-- 筛选条件 -->
        <div>
          <el-form ref="searchForm" :model="searchForm" label-width="100px" size="mini" label-position="left">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="汇总批次号:" prop="summaryBatchNo">
                  <el-input v-model="searchForm.summaryBatchNo" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="汇总时间段:" prop="summary">
                  <el-date-picker
                    v-model="searchForm.summary"
                    type="daterange"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="发放时间段:" prop="issue">
                  <el-date-picker
                    v-model="searchForm.issue"
                    type="daterange"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :lg="6">
                <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="primary" size="mini" @click="detailedFn">查看明细（测试）</el-button>
            <el-button type="primary" size="mini" @click="showDialog">发放(测试)</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 min-width="200">
                <template slot-scope="scope">
                  <el-button type="text" @click="detailedFn(scope.row.summaryBatchNo)">查看明细</el-button>
                  <el-button
                    v-if="scope.row.status == 1 || scope.row.status == 4"
                    type="text"
                    @click="showDialog(scope.row.summaryBatchNo)"
                    >发放</el-button
                  >
                  <el-button v-if="scope.row.status == 1" type="text" @click="rejectFn(scope.row.summaryBatchNo)"
                    >驳回</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="汇总批次号"
                prop="summaryBatchNo"
                min-width="160"
                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="summaryNum"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="结算工单数量(单)"
                prop="summaryOrderNum"
                min-width="140"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="right"
                label="结算金额(元)"
                prop="totalRepairCostC"
                min-width="140"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.totalRepairCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="发放金额(元)"
                prop="issueCostC"
                min-width="140"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.issueCostC | numToFixed }}
                </template>
              </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="info">银行受理中</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="summaryBy"
                min-width="300"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="汇总时间"
                prop="summaryTime"
                min-width="180"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="发放操作人"
                prop="issueBy"
                min-width="280"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="发放时间"
                prop="issueTime"
                min-width="180"
                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>

      <!-- 结算网点汇总列表 -->
      <div v-show="!showDetailed">
        <el-page-header @back="goBack" content="结算网点汇总"></el-page-header>
        <br /><br />
        <!-- 按钮 -->
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button type="primary" size="mini" :disabled="selectList.length < 1" @click="showDialog2('')"
              >批量发放</el-button
            >
            <el-button type="danger" size="mini" :disabled="selectList.length < 1" @click="networkRejectFn('')"
              >批量驳回</el-button
            >
            <!--<el-button type="primary" size="mini" @click="showDialog">发放(测试)</el-button> -->
            <el-button type="primary" size="mini" @click="searchResFn">查询转账结果</el-button>
          </div>
        </div>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table
              @selection-change="selectionChangeFn"
              v-loading="listLoading"
              :data="summaryList"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column align="center" type="selection" width="55" />
              <el-table-column align="center" label="操作" fixed min-width="200">
                <template slot-scope="scope">
                  <el-button type="text" @click="masterDetailedFn(scope.row.summaryBatchNo, scope.row.summaryNumber)"
                    >查看明细</el-button
                  >
                  <el-button
                    v-if="scope.row.status == 1 || scope.row.status == 4"
                    type="text"
                    @click="showDialog2(scope.row.summaryNumber)"
                    >发放</el-button
                  >
                  <!-- <el-button type="text" @click="networkRejectFn(scope.row.summaryNumber)">驳回</el-button> -->
                </template>
              </el-table-column>
              <el-table-column align="left" label="结算单位" prop="belongWebsite" min-width="300" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.summaryName + '(' + scope.row.summaryNumber + ')' }}
                </template>
              </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="info">银行受理中</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="month"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="结算人数"
                prop="summaryNum"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="结算工单数量(单)"
                prop="summaryOrderNum"
                min-width="140"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="right"
                label="维修结算费用"
                prop="totalRepairCostC"
                min-width="120"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.totalRepairCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="需扣回费用"
                prop="reduceCostC"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.reduceCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="right"
                label="增减费用"
                prop="incrDecrCostC"
                min-width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.incrDecrCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="工伤保险" prop="injuryCostC" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.injuryCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="残保金" prop="residualCostC" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.residualCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="暂扣款" prop="withholdCostC" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.withholdCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column align="right" label="应发工资" prop="issueCostC" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.issueCostC | numToFixed }}
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="发放人"
                prop="issueBy"
                min-width="360"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="left"
                label="发放时间"
                prop="issueTime"
                min-width="160"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <!-- 弹窗 -->
      <el-dialog title="发放" :visible.sync="dialogForm" width="30%" :show-close="false" :close-on-click-modal="false">
        <el-form ref="stateForm" :rules="rules" :model="stateForm" label-width="100px">
          <el-form-item label="手机号码" prop="mobile">
            <!-- <el-input v-model="stateForm.mobile" placeholder="请输入"></el-input> -->
            <el-select style="width: 100%" v-model="stateForm.mobile" placeholder="请选择" filterable>
              <el-option v-for="(v, i) in phoneList" :key="i" :label="v.dictValue" :value="v.dictValue"></el-option>
              <!-- <el-option value="13927887984"></el-option>
              <el-option value="13452642451"></el-option> -->
            </el-select>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="16">
              <el-form-item label="手机验证码" prop="code">
                <el-input v-model="stateForm.code" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- <el-button type="primary">验证码</el-button> -->
              <el-button @click="codeFn" :disabled="countDown != 60">{{
                countDown == 60 ? getCodeText : '重新获取(' + countDown + 's)'
              }}</el-button>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定发放</el-button>
        </div>
      </el-dialog>
    </div>

    <FinancialSummaryDayDetail
      @updateList="updateList"
      :grantNumber="grantNumber"
      :summaryNumberDetail="summaryNumberDetail"
      v-if="masterDetail"
    />
  </div>
</template>

<script>
import { getCode, getbyCode } from '@/api/dailySettlement/bankBalanceQuery'
import {
  getList,
  getSalaryIssue,
  getsummaryList,
  getsummarySalaryReject,
  getBankExcute
} from '@/api/dailySettlement/financialSummaryDay'
import FinancialSummaryDayDetail from '../components/financialSummaryDayDetail'
export default {
  components: {
    FinancialSummaryDayDetail
  },
  data() {
    return {
      searchForm: {
        status: '',
        summaryBatchNo: '',
        summary: [],
        issue: []
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [], // 列表数据
      summaryList: [], //结算网点汇总列表
      listLoading: false, // 列表加载loading
      showDetailed: true,
      masterDetail: false, //师傅汇总页面
      dialogForm: false,
      rules: {},
      stateForm: {
        code: '',
        mobile: ''
      },
      getCodeText: '获取验证码',
      countDown: 60,
      grantNumber: '',
      grantNumber2: '', //结算网点
      summaryNumberDetail: '',
      selectList: [],
      isSummary: false, //是否批量发放
      phoneList: []
    }
  },

  created() {
    this.getDataList()
  },
  methods: {
    //=子传父
    updateList() {
      this.getSummaryLists()
    },
    //查询转账结果
    async searchResFn() {
      await getBankExcute()
      this.getSummaryLists()
      this.$message.success('查询成功')
    },
    //获取手机号
    async getPhone() {
      let res = await getbyCode({
        code: 'ISSUE'
      })
      this.phoneList = res.data
    },
    showDialog2(value, bool) {
      this.getPhone()
      this.isSummary = bool
      this.grantNumber2 = value
      this.dialogForm = true
    },
    //结算网点驳回
    async networkRejectFn(i) {
      if (i == '') {
        let res = this.selectList.toString()
        await getsummarySalaryReject({
          summaryBatchNo: this.grantNumber,
          summaryNumberList: res
        })
        this.selectList = []
      } else {
        await getsummarySalaryReject({
          summaryBatchNo: this.grantNumber,
          summaryNumberList: i
        })
      }

      this.getSummaryLists()
      this.$message.success('驳回成功')
    },
    //列表选择框
    selectionChangeFn(value) {
      const res = value.map(v => v.summaryNumber)
      this.selectList = res
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getDataList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    //驳回
    async rejectFn(summaryBatchNo) {
      // console.log(111);
      await getsummarySalaryReject({ summaryBatchNo: summaryBatchNo })
      this.getDataList()
      this.$message.success('驳回成功')
    },
    //结算网点汇总列表
    async getSummaryLists() {
      let params = {
        summaryBatchNo: this.grantNumber
      }
      let res = await getsummaryList(params)
      this.summaryList = res.data
    },
    //验证码
    async codeFn() {
      let params = {
        mobile: this.stateForm.mobile,
        type: 'issue'
      }
      await getCode(params)
      this.$message.success('短信已发送')

      this.countDown--
      let timer = setInterval(() => {
        this.countDown--
        if (this.countDown == 0) {
          this.countDown = 60
          this.getCodeText = '重新获取'
          clearInterval(timer)
        }
      }, 1000)
    },
    //清除
    async emptyFn() {
      await this.$refs.searchForm.resetFields()
    },
    //搜索
    searchFn() {
      this.getDataList()
    },
    //获取列表数据
    async getDataList() {
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        issueEndTime: this.searchForm.issue[1],
        issueStartTime: this.searchForm.issue[0],
        summaryBatchNo: this.searchForm.summaryBatchNo,
        summaryEndTime: this.searchForm.summary[1],
        summaryStartTime: this.searchForm.summary[0],
        status: this.searchForm.status
      }
      let res = await getList(params)
      this.dataList = res.data.records
      this.listTotal = res.data.total
    },
    //师傅汇总明细
    masterDetailedFn(summaryBatchNo, summaryNumber) {
      this.grantNumber = summaryBatchNo
      this.summaryNumberDetail = summaryNumber
      this.masterDetail = true
    },
    //返回
    goBack() {
      this.showDetailed = true
      this.getDataList()
    },
    //取消
    cancelFn() {
      if (this.countDown !== 60) {
        this.countDown = 1
      }
      this.$refs.stateForm.resetFields()
      this.dialogForm = false
    },
    //确定
    async confirmFn() {
      if (this.showDetailed) {
        let params = {
          summaryBatchNo: this.grantNumber,
          ...this.stateForm
        }
        await getSalaryIssue(params)

        this.getDataList()
      } else if (this.grantNumber2 == '') {
        let res = this.selectList.toString()
        let params = {
          summaryBatchNo: this.grantNumber,
          summaryNumberList: res,
          ...this.stateForm
        }
        await getSalaryIssue(params)
        this.getSummaryLists()
      } else {
        let params = {
          summaryBatchNo: this.grantNumber,
          summaryNumberList: this.grantNumber2,
          ...this.stateForm
        }
        await getSalaryIssue(params)
        this.getSummaryLists()
      }
      this.$message.success('发放成功，请稍后刷新查看结果')
      this.$refs.stateForm.resetFields()
      this.dialogForm = false
    },
    //新增
    showDialog(summaryBatchNo) {
      this.getPhone()
      this.grantNumber = summaryBatchNo
      this.dialogForm = true
    },
    //明细页面
    detailedFn(summaryBatchNo) {
      this.grantNumber = summaryBatchNo
      this.getSummaryLists()
      this.showDetailed = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  overflow-y: auto;
}
</style>
