<template>
    <div class="billDetails">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
            <!-- <el-form-item label="账单年月" prop="billDate">
                <el-date-picker
                    v-model="queryParams.billDate"
                    type="month"
                    placeholder="账单年月"
                    value-format="YYYY-MM"
                />
            </el-form-item> -->
            <el-form-item label="项目" prop="proId">
                <el-select
                    v-model="queryParams.proId"
                    placeholder="请选择"
                    style="width: 240px"
                    filterable
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list">
            <el-table-column label="账单年月" prop="billYM" />
            <el-table-column label="项目" prop="project" />
            <el-table-column label="累计发放金额" prop="totalMoney" />
            <el-table-column label="累计发放次数" prop="totalTimes" />
            <el-table-column label="手续费总额" prop="totalFee" />
            <el-table-column label="操作">
                <template #default="{row}">
                    <el-button link type="primary" icon="Edit" @click="handleDetails(row)">明细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.page"
            v-model:limit="queryParams.limit"
            @pagination="getList"
        />
        <el-dialog v-model="dialogFormVisible" title="明细" width="1000">
          <el-form :inline="true">
            <el-form-item label="姓名" prop="name">
              <el-input
                  v-model="detailQueryParams.name"
                  placeholder="请输入姓名"
                  style="width: 220px"
                  @keyup.enter="getDetailList"
              />
            </el-form-item>
            <el-form-item label="证件号码" prop="idNo">
              <el-input
                  v-model="detailQueryParams.idNo"
                  placeholder="请输入证件号码"
                  style="width: 220px"
                  @keyup.enter="getDetailList"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="getDetailList">搜索</el-button>
              <el-button icon="Refresh" @click="resetDetailQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="detailLoading" :data="detailList">
            <el-table-column label="姓名" align="left" prop="name" width="140" />
            <el-table-column label="证件号码" align="center" prop="id_no" />
            <el-table-column label="申请金额" align="center" prop="money" width="140" />
            <el-table-column label="实发金额" align="center" prop="actual_money" width="140" />
            <el-table-column label="手续费" align="center" prop="service_fee" width="140" />
            <el-table-column label="发放时间" align="center" prop="paid_time" />
          </el-table>
          <div style="position: relative;">
            <pagination
                v-show="detailTotal > 0"
                :total="detailTotal"
                v-model:page="detailQueryParams.page"
                v-model:limit="detailQueryParams.limit"
                @pagination="getDetailList"
            />
          </div>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
              </div>
          </template>
        </el-dialog>
    </div>
  </template>
  <script setup>
  import {ref} from "vue";
  const { proxy } = getCurrentInstance();
  import { billProjectList,queryallproject,billDetail } from "@/api/bill"
  const list = ref([]);
  const loading = ref(false);
  const options = ref([]);
  const total = ref(0);
  const queryParams = ref({
    billDate:  proxy.$route.query.billDate,
    proId: '',
    page: 1,
    limit: 10,
    baseCode: proxy.$route.query.baseCode
  });
  
  const detailList = ref([]);
  const detailLoading = ref(false);
  const detailTotal = ref(0);
  
  const detailQueryParams = ref({
    page: 1,
    limit: 10,
    name: '',
    idNo: '',
    proId: '',
    billDate: '',
    baseCode: ''
  }) // 弹窗列表查询条件
  const dialogFormVisible = ref(false); // 弹窗
  /** 打开明细弹窗 */
  function handleDetails(row){
    dialogFormVisible.value = true;
    detailLoading.value = true;
    detailQueryParams.value.proId = row.proId;
    detailQueryParams.value.billDate = row.billYM;
    detailQueryParams.value.baseCode = row.baseCode;
    detailQueryParams.value.name = '';
    detailQueryParams.value.idNo = '';
    detailTotal.value = 0;
    detailList.value = [];
    getDetailList()
  }
  /** 查询明细 */
  function getDetailList() {
    billDetail(detailQueryParams.value).then(res => {
      detailLoading.value = false;
      detailTotal.value = res.count;
      detailList.value = res.data;
    })
  }
  /** 搜索按钮操作 */
  function handleQuery() {
  queryParams.value.page = 1;
  queryParams.value.limit = 10;
  getList();
  }
  /** 重置按钮操作 */
  function resetQuery() {
    queryParams.value = {
        billDate: proxy.$route.query.billDate,
        proId: '',
        page: 1,
        limit: 10
    }
    handleQuery();
  }
    // 重置弹窗明细查询条件
    function resetDetailQuery() {
        detailQueryParams.value.name = '';
        detailQueryParams.value.idNo = '';
        getDetailList()
    }
  /** 查询预支工资账单列表 */
  function getList() {
    loading.value = true;
    billProjectList(queryParams.value).then(response => {
      list.value = response.data;
      total.value = response.count;
      loading.value = false;
    });
  }
  // 查询所有项目、渠道下拉
  function getqueryallproject() {
    queryallproject().then(res => {
      res.data = res.data || []
      options.value = res.data.map(item => {
        return {
          value: item.pro_id,
          label: item.project
        }
      });
    })
  }
  getqueryallproject();
  getList();
  </script>
  <style lang="scss">
  .billDetails{
    padding: 20px;
  }
  </style>