<template>
  <div class="pre-export">
    <el-row style="padding: 0 0 14px 0">
      <el-col :span="12" style="width: 355px">
        <el-alert
          :closable="false"
          title="新建的需求业务报表，会在隔天01:00开始生成文件！"
          type="warning"
        >
        </el-alert>
      </el-col>

      <el-col
        :span="3"
        style="width: 66px; float: right"
      >
        <el-button
          :size="searchSize"
          type="primary"
          style="float: right; margin-left: 5px"
          @click="searchList"
        >
          刷新
        </el-button>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      border
      v-loading="loading"
      :size="size"
      style="width: 100%"
    >
      <el-table-column  prop="name" label="业务表名称" min-width="140"/>
      <el-table-column prop="start" label="数据开始时间" min-width="140"/>
      <el-table-column prop="end" label="数据结束时间" min-width="140"/>
      <el-table-column prop="apply_name" label="申请人" min-width="70"/>
      <el-table-column prop="status" label="状态" min-width="70">
          <template slot-scope="scope">
               <el-tag
          :size="tablebtnSize"
          :type="scope.row.status == '2' ? 'success' : scope.row.status == '1'?'warning':'info'"
          v-text="
            (statusOptions.find((item) => item.id == scope.row.status) || {})
              .label || '--'
          "
        ></el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="expiretime" label="文件过期时间" min-width="140"/>
      <el-table-column prop="updatetime" label="创建时间" min-width="140"/>
      <el-table-column fixed="right" label="操作" width="82">
        <template slot-scope="scope">
          <el-tooltip
            effect="dark"
            content="编辑"
            placement="top"
          >
            <i class="el-icon-edit tb-icon" @click="openModal(scope.row)"></i>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="下载"
            placement="top"
            v-if="
              scope.row.status == '2'
            "
          >
            <i
              class="el-icon-download tb-icon"
              @click="batchExport(scope.row.down_url)"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <add-edit
      :sitem="sitem"
      :show-model="showModel"
      @refresh="searchList"
      :type="'1'"
      @cancel="showModel = false"
    />
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/reportQuery/financeReport/index.js";
import addEdit from "./addEdit";
import { mapGetters } from "vuex";
import urlConfig from "@/apis/url-config";
import resToken from "@/mixins/resToken";
export default {
  name: "Account",
  components: {
    addEdit,
  },
  mixins: [ resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "financeReport"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      fileUrl: urlConfig.baseURL,
      // 状态
      statusOptions: [
        { id: "0", label: "待创建" },
        { id: "1", label: "待执行" },
        { id: "2", label: "已完成" },
      ],
      loading: true,
      showModel: false,
      sitem: null,
      parmValue: {
        page: 1, // 页码
        size: 15, // 每页显示条数
      },
      // 表格 - 数据
      tableData: [],
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    restSearch() {
      this.parmValue = {
        page: 1, // 页码
        size: 15, // 每页显示条数
      };
      this.searchList();
    },
    openModal(sitem) {
      this.showModel = true;
      this.sitem = sitem;
    },

    batchExport(content) {
      if (!this.loading) {
        this.loading = true;
        let aEle = document.createElement("a"); // 创建a标签
        aEle.href = this.fileUrl + content; // content为后台返回的下载地址
        aEle.click(); // 设置点击事件
        this.$message.success(`下载成功！`);
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }
    },
    async searchList() {
      this.loading = true;
      const res = await asyncRequest.exportList(this.parmValue);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },
  },
};
</script>
   <style lang="scss" scoped>
.account {
}
</style>
