<script>
import { defineComponent, ref, getCurrentInstance, reactive } from "@vue/composition-api";
import request, { download } from '~/utils/request';
import { Message } from 'element-ui'

export default defineComponent({
  props: ['id'],
  setup(props) {
    // #region (constant)
    const TABLE_KEY = 'jxj_id'
    const URL_CUT = '/jdbg/xxgzjc_jcrw'
    // #endregion
    const instance = getCurrentInstance().proxy
    const route = instance.$route
    const { jxj_id, jxjx_to_id } = route.query

    // #region (variable)
    const loading = ref(true)
    // #endregion

    const total = ref(0)
    const limit = ref(10)

    const currentPage = ref(1)
    function handleCurrentChange() {
      queryTableData()
    }


    function detailApi() {
      return request({
        url: URL_CUT + '/detail',
        data: {
          [TABLE_KEY]: jxj_id,
        }
      })
    }

    const detail_Data = ref()

    // #region (page init)
    async function init() {
      await Promise.all([
        new Promise(async resolve => {
          const res = await detailApi(jxj_id)
          return resolve(detail_Data.value = (res.data.one_info))
        }),
        queryTableData()
      ])

      loading.value = false
    }
    init()
    // #endregion

    const loading_table = ref(false)
    const tableData = ref([])
    const multipleSelection = ref([])
    const handleSelectionChange = (val) => {
      multipleSelection.value = val
    }
    function handleTableColBtn_detail(scope) {
      download(scope.row.jxjtl_path)
    }



    function queryTableData() {
      return request({
        url: '/jdbg/xxgzjc_jcrw_tjjl/index',
        data: {
          jxj_id,
          jxjx_to_id,
          limit: limit.value,
          page: currentPage.value
        }
      }).then(res => {
        if (res.code === '1') {
          tableData.value = res.data.page_data
          total.value = res.data.total_rows * 1
        }
      })
    }

    function handleTableColBtn_download() {
      if (!multipleSelection.value?.length) return Message.info('请先勾选文件')
      request({
        url: '/upload/main/download_batch',
        data: {
          files: multipleSelection.value.map(({ jxjtl_path }) => jxjtl_path)
        }
      }).then(res => {
        if (res.code === '1') {
          download(res.data.download_url)
        }
      })
    }

    return {
      loading,
      detail_Data,

      loading_table,
      tableData,
      handleSelectionChange,
      handleTableColBtn_detail,

      handleTableColBtn_download,

      currentPage,
      total,
      limit,
      handleCurrentChange,
    }
  }
})




</script>

<template>
  <div :loading="loading" class="text-sm p-6">
    <template v-if="detail_Data">
      <div class="flex">
        <!-- <div>检查任务标题</div> -->
        <div class="text-2xl">{{ detail_Data.jxj_title }}</div>
      </div>

      <!-- <div class="flex">
        <div>发起人</div>
        <div>{{ detail_Data.jxj_fqr }}</div>
      </div> -->
      <div class="flex mt-6">
        <div>任务结束时间</div>
        <div class="text-hex-969696 ml-3">{{ detail_Data.jxj_wcsj }}</div>
      </div>
      <!-- <div class="flex">
        <div>完成情况</div>
        <div>{{ detail_Data.jxj_wcqk }}</div>
      </div> -->
      <div class="flex mt-8">
        <!-- <div>检查任务内容</div> -->
        <div class="text-base text-hex-AEAEAE">{{ detail_Data.jxj_content }}</div>
      </div>
      <!-- <div class="flex">
        <div>下发对象JSON</div>
        <div>{{ detail_Data.jxj_xfdx_json }}</div>
      </div>
      <div class="flex">
        <div>归档状态</div>
        <div>{{ detail_Data.jxj_id }}</div>
      </div> -->


      <el-divider></el-divider>
      <el-table :data="tableData" @selection-change="handleSelectionChange" element-loading-background="#ffffff70">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="jxjtl_name" label="文件" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="org_name" label="上传学校" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jxjtl_scr" label="上传者" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jxjtl_date" label="时间" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right">
          <template #header>
            <el-button link :auto-insert-space="false" @click="handleTableColBtn_download()" type="text">批量下载
            </el-button>
          </template>
          <template #default="scope">
            <el-button link :auto-insert-space="false" @click="handleTableColBtn_detail(scope)" type="text">下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="flex justify-end mt-10 py-4">
        <el-pagination :page-size="limit" :current-page.sync="currentPage" @current-change="handleCurrentChange"
          background layout="total, prev, pager, next" :total="total" />
      </div>
    </template>
  </div>

</template>
