<template>
  <div style="padding: 10vh 0 0 0; width: 100%; text-align: center" v-loading="loading">
    <div style="width: 700px; display: inline-block; text-align: left">
      <el-row
        type="flex"
        class="row-bg"
        justify="space-around"
        style="padding: 14px 0"
        v-for="(si, sii) in tableData"
        :key="sii"
      >
        <el-col :span="4" style="width: 180px; text-align: right; padding: 0 20px 0 0">{{
          si.label
        }}</el-col>
        <el-col :span="8" style="width: 350px">
          <period-date-picker
            :start="si.start"
            :end="si.end"
            :type="1"
            :width="'145px'"
            :placeholder="si.placeholder"
            :size="'mini'"
            @timeReturned="timeReturned($event, sii)"
          />
        </el-col>
        <el-col :span="6" style="width: 200px">
          <el-button
            type="primary"
            icon="el-icon-download"
            :size="'mini'"
            @click="Export(sii)"
            >导出</el-button
          ></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import setHeight from "@/mixins/index";
import mixinPage from "@/mixins/elPaginationHandle";
import { baseApi } from "@/config";
export default {
  name: "achievementTable",
  mixins: [mixinPage, setHeight],

  data() {
    return {
      searchSize: "small",
      size: "mini",
      loading: false,

      tableData: [
        {
          id: "12",
          url_path: "Admin/jxreport",
          placeholder: "下单",
          start: "",
          end: "",
          label: "确认单绩效报表",
        },
        {
          id: "13",
          url_path: "Admin/jxthreport",
          placeholder: "退款",
          start: "",
          end: "",
          label: "确认单绩效退款报表",
        },
        {
          id: "14",
          url_path: "Admin/fhreport",
          placeholder: "发货",
          start: "",
          end: "",
          label: "采购单发货数据",
        },
      ],
    };
  },
  mounted() {
    // this.searchList();
  },
  methods: {
    async timeReturned(e, index) {
      this.tableData[index].start = e.startTime !== "" ? e.startTime : "";
      this.tableData[index].end = e.endtTime !== "" ? e.endTime : "";
    },

    async timeVerification(index) {
      const { start, end, placeholder } = this.tableData[index];
      return new Promise(async (resolve, reject) => {
        if (start === "" && end === "") {
          resolve({ ok: false, msg: "请选择时间区间！" });
        } else if ((start === "" && end !== "") || (start !== "" && end === "")) {
          resolve({ ok: false, msg: placeholder + "时间区间不完整！" });
        } else {
          resolve({ ok: true, msg: "ok" });
        }
      });
    },

    /**
     * 批量导出开票信息
     */
    async Export(index) {
      if (!this.loading) {
        this.timeVerification(index).then(async (r) => {
          if (!r.ok) {
            this.$message.warning(r.msg);
          } else {
            this.loading = true;
            const { start, end, label, url_path, placeholder } = this.tableData[index];
            const httpType = `aplication/zip`;
            const title = placeholder + `${start}至${end}`;
            const fileTitle = "516平台-" + label + title;

            axios({
              method: "post",
              url: baseApi + url_path,
              responseType: "blob",
              data: {
                start,
                end,
              },
              headers: {
                Accept: httpType,
              },
            })
              .then((res) => {
                if (res && res.status == 200 && res.data) {
                  let blob = new Blob([res.data], {
                    type: httpType,
                  });
                  let url = window.URL.createObjectURL(blob);
                  let aLink = document.createElement("a");
                  aLink.style.display = "none";
                  aLink.href = url;
                  aLink.setAttribute("download", `${fileTitle}.zip`);
                  document.body.appendChild(aLink);
                  aLink.click();
                  document.body.removeChild(aLink); //下载完成移除元素
                  window.URL.revokeObjectURL(url); //释放掉blob对象
                  this.$message.success(fileTitle + `信息导出成功！`);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                } else {
                  this.$message.error(res.data.message);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                }
              })
              .catch((error) => {
                console.log(error);
                this.loading = false;
              });
          }
        });
      }
    },
  },
};
</script>

<style></style>
