<template>
    <div class="bill">
      <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="baseCode">
            <el-select
                v-model="queryParams.baseCode"
                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="dispatchName" />
          <el-table-column label="账单年月" prop="billYM" />
          <el-table-column label="累计发放金额" prop="totalMoney" />
          <el-table-column label="累计发放次数" prop="totalTimes" />
          <el-table-column label="手续费总额" prop="totalFee" />
          <el-table-column label="平台分成" prop="totalTimes" />
          <el-table-column label="盈利" prop="profit" />
          <el-table-column label="状态">
            <template #default="{row}">
              <span v-if="row.state == 'none'">未结算</span>
              <span v-if="row.state == 'settle'">已结算</span>
              <span v-if="row.state == 'payment'">已收款</span>
            </template>
          </el-table-column>
          <el-table-column label="平台状态">
            <template #default="{row}">
              <span v-if="row.platState == 'settle'">挂账</span>
              <span v-if="row.platState == 'payment'">已收款</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"  width="240">
              <template #default="{row}">
                  <el-button link type="primary" icon="Memo" @click="handleDetails(row)">结算</el-button>
                  <el-button link type="primary" icon="Edit" @click="handleDetails(row)">明细</el-button>
                  <el-button link type="primary" icon="Download" @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"
      />
  </div>
</template>
<script setup>
import {ref} from "vue";
import { billList,queryAllDispatch } from "@/api/bill"
const { proxy } = getCurrentInstance();
const options = ref([]); // 派遣下拉
const list = ref([{}]);
const loading = ref(false);
const total = ref(0); // 分页
const queryParams = ref({
    billDate: '',
    baseCode: '',
    page: 1,
    limit: 10
}); // 查询参数
/** 查询明细 */
function handleDetails(row){
  proxy.$router.push(`/bill/details?baseCode=${row.baseCode}&billDate=${row.billYM}`)
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page = 1;
  queryParams.value.limit = 10;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
    queryParams.value = {
        billDate: '',
        baseCode: '',
        page: 1,
        limit: 10
    }
    handleQuery();
}
/** 查询预支工资账单列表 */
function getList() {
  loading.value = true;
  billList(queryParams.value).then(response => {
    list.value = response.data;
    total.value = response.count;
    loading.value = false;
  });
}
function getqueryAllDispatch() {
    queryAllDispatch().then(res => {
        res.data = res.data || []
        options.value = res.data.map(item => {
            return {
                value: item.baseCode,
                label: item.name
            }
        });
    })
}
getqueryAllDispatch();
getList();
</script>
<style lang="scss">
.bill{
    padding: 20px;
}
</style>