<template>
  <div class="from-Card">
    <el-form ref="queryRef" size="small" :model="queryParams" inline label-position="top">
      <el-row style="width: 100%;">
        <el-col :span="4">
          <el-form-item label="年度">
            <el-date-picker
              v-model="queryParams.year"
              :clearable="false"
              style="width: 100%"
              type="year"
              value-format="YYYY"
              @change="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="月份">
            <el-select v-model="queryParams.month" style="width: 100%" @change="handleQuery">
              <el-option label="一月" value="1" />
              <el-option label="二月" value="2" />
              <el-option label="三月" value="3" />
              <el-option label="四月" value="4" />
              <el-option label="五月" value="5" />
              <el-option label="六月" value="6" />
              <el-option label="七月" value="7" />
              <el-option label="八月" value="8" />
              <el-option label="九月" value="9" />
              <el-option label="十月" value="10" />
              <el-option label="十一月" value="11" />
              <el-option label="十二月" value="12" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否达标">
            <el-select v-model="queryParams.isStandard" clearable style="width: 100%" @change="handleQuery">
              <el-option label="达标" value="1" />
              <el-option label="未达标" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <div class="po-r-btns">
          <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="success" plain icon="Download" @click="handleExport">导出</el-button>
        </div>
      </el-row>
    </el-form>
  </div>

  <div class="table">
    <el-table v-loading="loading" height="700" :data="tableList" border stripe>
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="单位会员" align="center" prop="deptName" min-width="200" show-overflow-tooltip />
      <el-table-column label="约定数量" align="center" prop="promiseNum" />
      <el-table-column label="约定金额" align="center" prop="promiseAmount" />
      <el-table-column label="服务数量（人/年）" align="center" prop="realNum" />
      <el-table-column label="完成比" align="center" prop="percent" />
      <el-table-column label="月度是否达标" align="center" prop="isStandard" />
      <el-table-column label="月度应支付金额" align="center" prop="amount" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <span>{{ scope.row.attr1==1?'已下载' : ['/','未确认','已确认','已上传','已打款'][scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template #default="scope">
          <el-button type="primary" :disabled="!(scope.row.status>2 && scope.row.file)" @click="handleDownload(scope.row)">下载发票</el-button>
          <el-button type="warning" :disabled="!(scope.row.status==2||scope.row.status==3)" @click="handleSure(scope.row)">确认打款</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>

import { reactive, ref, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
import { getLevelOneMonth } from '@/api/report/business'
import { updateBusinessData, doDown } from '@/api/report/businessData'
import { downloadFile } from '@/utils/ruoyi'


const { proxy } = getCurrentInstance()

const queryParams = reactive({
  year: `${dayjs().year()}`,
  month: `${dayjs().month() + 1}`,
  isStandard: undefined
})

const loading = ref(false)
const tableList = ref([])

function init() {
  handleQuery()
}

function handleQuery() {
  loading.value = true
  getLevelOneMonth(queryParams).then(res => {
    tableList.value = res.data
  }).catch(() => {
    tableList.value = []
  }).finally(() => {
    loading.value = false
  })
}

function resetQuery() {
  queryParams.year = `${dayjs().year()}`
  queryParams.month = `${dayjs().month() + 1}`
  queryParams.isStandard = undefined
  handleQuery()
}

function handleSure(row) {
  proxy.$modal.confirm('是否确认打款？').then(() => {
    updateBusinessData({
      id: row.reportId,
      status: 4
    }).then(() => {
      row.status = 4
      proxy.$modal.msgSuccess('操作成功')
    })
  })
}

async function handleDownload(row) {
  const fileObj = JSON.parse(row.file)
  window.open(downloadFile(fileObj[0].url), '_self')
  await doDown(row.reportId)
  row.attr1 = 1
}

function handleExport() {
  proxy.download('/report/exportLevelOneMonth', {
    ...queryParams
  }, `中跆协${queryParams.year}年${queryParams.month}月业务${new Date().getTime()}.xlsx`)
}

defineExpose({
  init
})

</script>

<style scoped>

</style>