<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>
        </div>
      </el-row>
    </el-form>
  </div>
  
  <div class="table">
    <div style="position: relative" class="title">
      <el-row>
        <el-col :span="6"><span>单位年度约定数：<span class="number">{{ promiseMemberNum }}</span></span></el-col>
        <el-col :span="6"><span>单位实际数量：<span class="number">{{ memberRealNum }}</span></span></el-col>
        <el-col :span="6"><span>单位完成比： <span class="number">{{ memberPercent }}</span> </span></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><span>个人年度约定数：<span class="number">{{ promisePersonNum }}</span></span></el-col>
        <el-col :span="6"><span>个人实际数量：<span class="number">{{ personRealNum }}</span></span></el-col>
        <el-col :span="6"><span>个人完成比： <span class="number">{{ personPercent }}</span> </span></el-col>
      </el-row>
      <el-button style="position: absolute;right: 25px;top: 0" type="warning" icon="Download" @click="handleData">导出
      </el-button>
    </div>
    <br>
    <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="monthStr" />
      <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.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template #default="scope">
          <!--          <el-button type="primary" @click="handleSure(scope.row)">确认</el-button>-->
          <el-button type="primary" :disabled="handleMonths(scope.row)" @click="handleSure(scope.row)">确认</el-button>
          <el-button
            type="warning" :disabled="!(scope.row.status==2||scope.row.status==3)"
            @click="handleUpload(scope.row)"
          >上传发票
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-dialog
      v-model="uploadData.showUpload" title="上传发票" destroy-on-close align-center append-to-body
      width="500"
    >
      <el-form label-suffix="：" label-width="80">
        <el-form-item label="发票">
          <FileUpload
            v-model="uploadData.fileObj" :file-type="['pdf','png','jpg','jpeg','gif']" :limit="1"
            class="father"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: center;">
          <el-button :loading="uploadData.buttonLoading" type="primary" @click="submitFile">确 定</el-button>
          <el-button @click="uploadData.showUpload=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
import { getLevelTwoMonth, getLevelOneYear2 } from '@/api/report/business'
import useUserStore from '@/store/modules/user'
import { addBusinessData, updateBusinessData } from '@/api/report/businessData'
import _ from 'lodash'

const userStore = useUserStore()
const { proxy } = getCurrentInstance()

const queryParams = reactive({
  year: `${dayjs().year()}`,
  month: undefined,
  isStandard: undefined,
  deptId: undefined
})
const form = ref({
  yearPercent: '0',
  yearRealNum: '0',
  yearPromiseNum: '0'
})
const loading = ref(false)
const tableList = ref([])

const uploadData = reactive({
  showUpload: false,
  buttonLoading: false,
  fileObj: undefined,
  reportId: undefined
})

onMounted(() => {
  queryParams.deptId = userStore.user.deptId
  getTeamInfo()
})

function init() {
  handleQuery()
}

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

const promiseMemberNum = ref('')
const memberRealNum = ref('')
const memberPercent = ref('')
const promisePersonNum = ref('')
const personRealNum = ref('')
const personPercent = ref('')

function getTeamInfo() {
  getLevelOneYear2({
    year: new Date().getFullYear()
  }).then(res => {
    if (res.data && res.data.length > 0) {
      promisePersonNum.value = res.data[0].promisePersonNum
      personRealNum.value = res.data[0].personRealNum
      personPercent.value = res.data[0].personPercent
      promiseMemberNum.value = res.data[0].promiseMemberNum
      memberRealNum.value = res.data[0].memberRealNum
      memberPercent.value = res.data[0].memberPercent
    }
  }).catch((err) => {
    console.log(err)
    promisePersonNum.value = ''
    personRealNum.value = ''
    personPercent.value = ''
  })
}

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

function handleSure(row) {
  proxy.$modal.confirm('是否确认？').then(() => {
    addBusinessData({
      deptId: row.deptId,
      year: row.year,
      month: row.month,
      status: 2,
      content: JSON.stringify(row),
      type: '0'
    }).then(res => {
      row.reportId = res.data
      row.status = 2
      proxy.$modal.msgSuccess('保存成功')
    })
  })
}

function handleUpload(row) {
  uploadData.showUpload = true
  uploadData.reportId = row.reportId
  uploadData.fileObj = JSON.parse(row.file)
  uploadData.buttonLoading = false
}

function submitFile() {
  if (!uploadData.fileObj || uploadData.fileObj.length == 0) {
    proxy.$modal.msgError('请选择发票')
    return
  }
  
  uploadData.buttonLoading = true
  
  const row = _.find(tableList.value, (t) => t.reportId == uploadData.reportId)
  
  updateBusinessData({
    id: uploadData.reportId,
    file: JSON.stringify(uploadData.fileObj),
    status: row.status == 2 ? 3 : undefined
  }).then(() => {
    proxy.$modal.msgSuccess('上传成功')
    
    uploadData.buttonLoading = false
    row.file = JSON.stringify(uploadData.fileObj)
    if (row.status == 2) {
      row.status = 3
    }
    
    setTimeout(() => {
      uploadData.showUpload = false
    }, 500)
  })
}

function handleData() {
  proxy.download('/report/exportLevelTwoMonth', {
    ...queryParams
  }, `省协会${queryParams.year}年度业务${new Date().getTime()}.xlsx`)
}

function handleMonths(row) {
  const year1 = row.year
  const month1 = row.month
  const year2 = dayjs().year()
  const month2 = dayjs().month()
  
  if (row.deptId == '147' && row.monthStr == '十二月') {
    return false
  }
  
  if (year1 && month1) {
    if (year1 < year2) {
      return row.status !== 1
    } else if (year1 == year2) {
      return month1 > month2 || row.status !== 1
    } else {
      return true
    }
  } else {
    return true
  }
}

defineExpose({
  init
})

</script>

<style scoped lang="scss">
.title {
  font-size: 24px;
  
  .number {
    color: orange;
    margin-right: 50px;
  }
}
</style>