<script setup name='projectArchives'>
import NoData from '@/components/noData/index.vue'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { list, wantRead, download } from '@/http/apis/recordManage/projectArchives'
// 搜索栏表单数据
const { proxy } = getCurrentInstance(),
  searchForm = reactive({
    projectName: '',
    buildOrgName: ''
  }),
  tableData = ref([]),
  pageParams = reactive({
    pageNumber: 1,
    pageSize: 10
  }),
  getTableData = async () => {
    const res = await list({
      ...pageParams,
      ...searchForm
    })
    tableData.value = res.data.records
    total.value = res.data.total
  },
  // 数据总数
  total = ref(0),
  // 提交查询
  onSubmit = () => {
    getTableData()
  },
  formReset = () => {
    searchForm.projectName = undefined
    searchForm.buildOrgName = undefined
    getTableData()
  },
  handleSizeChange = val => {
    pageParams.pageSize = val
    pageParams.pageNumber = 1
    getTableData()
  },
  handleCurrentChange = val => {
    pageParams.pageNumber = val
    getTableData()
  },
  applyRead = (row) => {
    proxy.$messageBox
      .confirm(`申请借阅《${row.projectName}》项目档案`, '确定借阅吗?', {
        type: 'warning'
      })
      .then(async () => {
        await wantRead(row.id)
        proxy.$message.success('申请成功！')
        await getTableData()
      })
  },
  down = async id => {
    visible.value = true
    progressStatus.value = ''
    percentage.value = 0
    timer.value = setInterval(() => {
      if (percentage.value < 99) {
        percentage.value++
      } else {
        clearInterval(timer.value)
      }
    }, 30)
    try {
      const res = await download(id)
      percentage.value = 100
      progressStatus.value = 'success'
      clearInterval(timer.value)
      const url = URL.createObjectURL(res)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
      setTimeout(() => {
        visible.value = false
      }, 500)
    } catch (e) {
      clearTimeout(timer.value)
      progressStatus.value = 'exception'
      setTimeout(() => {
        visible.value = false
      }, 500)
    }
  },
  timer = ref(null),
  visible = ref(false),
  percentage = ref(0),
  progressStatus = ref()

onMounted(() => {
  getTableData()
})
</script>
<template>
  <el-card class="w-full search">
    <el-form :model="searchForm" size="small" label-suffix=":">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input v-model="searchForm.projectName" maxlength="50" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目单位">
            <el-input v-model="searchForm.buildOrgName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="btn">
            <div class="flex">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="formReset">重置</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card class="w-full mt-8">
    <template #header>
      <div class="flex justify-between">
        <span>列表</span>
      </div>
    </template>
    <el-row v-if="tableData.length" :gutter="24" class="card-list">
      <el-col
        v-for="i in tableData"
        :key="i.id"
        :sm="12"
        :lg="8"
        :xl="6"
        class="mb-24"
      >
        <div class="card-list-item">
          <a v-if="i.canRead" class="title" @click="$router.push({name:'projectArchiveDetail',query:{id:i.id}})">{{ i.projectName }}</a>
          <div v-else class="mb-8">{{ i.projectName }}</div>
          <div class="info">
            <div>
              <span class="label">项目编号：</span>
              <span class="value">{{ i.pojectCode }}</span>
            </div>
          </div>
          <el-divider />
          <div class="flex justify-between">
            <template v-if="!i.canRead">
              <el-button
                v-if="i.canApplyBorrow"
                icon="reading"
                plain
                type="primary"
                @click="applyRead(i)"
              >申请借阅</el-button>
              <span v-else>申请借阅审批中</span>
            </template>
            <template v-else>
              <el-button icon="view" type="primary" @click="$router.push({name:'projectArchiveDetail',query:{id:i.id}})">查看</el-button>
              <el-button icon="download" @click="down(i.id)">下载</el-button>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
    <no-data v-else />
    <el-pagination
      v-model:currentPage="pageParams.pageNumber"
      v-model:page-size="pageParams.pageSize"
      background
      :page-sizes="pageParams.pageSizes"
      layout="total, sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <el-dialog v-model="visible" :show-close="false">
    <div class="text-center">
      <p v-if="progressStatus==='success'" class="text-success">下载成功！</p>
      <p v-else-if="progressStatus==='exception'" class="text-danger">下载失败！</p>
      <p v-else>资源处理中，请耐心等待...</p>
      <el-progress
        type="circle"
        :percentage="percentage"
        :status="progressStatus"
        class="mt-8"
      />
    </div>
  </el-dialog>
</template>
<style lang='less' scoped>
.card-list {
  box-shadow: inset 0px -1px 0px 0px #D8DADF;
  padding-bottom: 16px;
  &-item {
    border-radius: 8px;
    border: 1px solid #E9E9E9;
    padding: 16px;
    &:hover {
      background-color: rgba(236,245,255,0.45);
    }

    .title {
      color: rgba(0,0,0,0.85);
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 8px;
      &:hover {
        color: var(--el-color-primary);
        opacity: 0.9;
      }
      &:active {
        opacity: 1;
      }
    }
    .info {
      font-size: 14px;
      .label{
        color: rgba(0,0,0,0.45);
      }
      .value {
        color: rgba(0,0,0,0.65);
      }
    }
    .el-divider--horizontal {
      margin: 16px 0;
    }
  }
}
.el-pagination {
  padding: 16px 16px 0 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
</style>
