<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.isStandard_p" clearable style="width: 100%" @change="handleQuery">
              <el-option label="达标" value="1" />
              <el-option label="未达标" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="单位会员是否达标">
            <el-select v-model="queryParams.isStandard_m" 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" />
      <el-table-column label="个人会员" align="center">
        <el-table-column label="约定数量" align="center" prop="promisePersonNum" />
        <el-table-column label="约定金额" align="center" prop="promisePersonAmount" />
        <el-table-column label="实际服务数量" align="center" prop="personRealNum" />
        <el-table-column label="完成比" align="center" prop="personPercent" />
        <el-table-column label="年度是否达标" align="center" prop="personIsStandard" />
        <el-table-column label="实际应支付金额" align="center" prop="personAmount" />
        <el-table-column label="年度已打款金额" align="center" prop="personAlreadyAmount" />
        <el-table-column label="剩余打款金额" align="center" prop="personRemaindk" />
        <el-table-column label="剩余应支付金额" align="center" prop="personSyyzfje" />
      </el-table-column>
      <el-table-column label="单位会员" align="center">
        <el-table-column label="约定数量" align="center" prop="promiseMemberNum" />
        <el-table-column label="约定金额" align="center" prop="promiseMemberAmount" />
        <el-table-column label="实际服务数量" align="center" prop="memberRealNum" />
        <el-table-column label="完成比" align="center" prop="memberPercent" />
        <el-table-column label="年度是否达标" align="center" prop="memberIsStandard" />
        <el-table-column label="实际应支付金额" align="center" prop="memberAmount" />
        <el-table-column label="打款金额" align="center" prop="memberdkje" />
        <el-table-column label="剩余应支付金额" align="center" prop="memberSyyzfje" />
      </el-table-column>
      <!--      <el-table-column label="剩余应支付金额" align="center" prop="leftAmount" />-->
      <el-table-column :label="`${nextYear}补充金额`" align="center" prop="nextYearAmount" />
      <el-table-column label="状态" align="center" prop="yearStatus">
        <template #default="{row}">
          <span :class="{'text-success':row.yearStatus=='已下发'}">{{ row.yearStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template #default="{row}">
          <el-button :disabled="row.yearStatus=='已下发'" type="primary" size="small" @click="handelXia(row)">下发</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>

import { reactive, ref, watch, onMounted, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
import { getLevelOneYear } from '@/api/report/business'
import { addBusinessData } from '/@/api/report/businessData'


const { proxy } = getCurrentInstance()

const queryParams = reactive({
  year: undefined,
  isStandard_p: undefined,
  isStandard_m: undefined
})

watch(() => queryParams.year, (val) => {
  if (val) {
    nextYear.value = `${Number(queryParams.year) + 1}`
  }
})

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

onMounted(() => {
  queryParams.year = `${dayjs().year()}`
})

function init() {
  handleQuery()
}

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

function resetQuery() {
  queryParams.year = `${dayjs().year()}`
  queryParams.isStandard_p = undefined
  queryParams.isStandard_m = undefined
  handleQuery()
}

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

async function handelXia(row) {
  await proxy.$modal.confirm(`确定下发${row.deptName}的${queryParams.year}年度业务吗？`)
  await addBusinessData({
    deptId: row.deptId,
    year: row.year,
    content: JSON.stringify(row),
    type: '1'
  })
  await proxy.$modal.msgSuccess('操作成功！')
  init()
}

defineExpose({
  init
})

</script>

<style scoped>

</style>