<template>
  <div class="container-export">
    <el-dialog
      v-dialogDrag
      :visible.sync="exportDataIsShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="导出数据"
      :show-close="false"
      @close="cancelHandle"
      center
      width="450px"
    >
      <div>
        <p style="margin-bottom: 20px">请选择导出内容：</p>
        <el-select style="width: 100%" v-model="exportValue" @change="exportChange" placeholder="请选择导出内容" clearable>
          <el-option v-for="item in options" :key="item.Name" :label="item.Name" :value="item.Name"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; justify-content: center; margin: 40px 0">
        <el-button type="primary" style="width: 80px; marginright: 24px" @click="saveHandle">确定</el-button>
        <el-button type="primary" plain style="width: 80px" @click="cancelHandle">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { customInterence } from "@/api/api.js";

export default {
  name: "",
  components: {},
  props: {
    exportDataIsShow: {
      type: Boolean,
      default: false,
    },
    companyId: {
      type: Number,
    },
  },
  data() {
    return {
      exportValue: "",
      options: [],
      exportUrl: "",
    };
  },
  computed: {},
  watch: {
    exportDataIsShow: {
      handler(newval) {
        if (newval) {
          this.companyExportList();
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    async companyExportList() {
      const res = await customInterence.companyExportList();
      if (res.Ret === 200) {
        this.options = res.Data.List || [];
      }
      console.log(res);
    },
    exportChange() {
      let url = "";
      this.options.forEach((item) => {
        if (item.Name == this.exportValue) {
          url = item.Url;
        }
      });
      this.exportUrl = process.env.API_ROOT + url  + "&CompanyId=" + Number(this.companyId)+'&' + (localStorage.getItem("auth") || "");
    },
    cancelHandle() {
      this.exportUrl = "";
      this.exportValue = "";
      this.$emit("update:exportDataIsShow", false);
    },
    saveHandle() {
      if (!this.exportValue) return this.$message.error("请选择导出内容");
      let link = document.createElement("a");
      link.href = this.exportUrl;
      link.setAttribute("download", "导出数据");
      link.style.display = "none"; //a标签隐藏
      document.body.appendChild(link);
      link.click();
      setTimeout(() => {
        this.cancelHandle();
      });
    },
  },
};
</script>
<style scoped lang="less"></style>
