<script setup>
import { ref, watch } from 'vue'
import { customInterence } from "@/api/api.js";
import { ElMessage } from 'element-plus';


const props = defineProps({
  exportDataIsShow: {
    type: Boolean,
    default: false,
  },
  companyId: {
    type: Number,
  },
})
const emit = defineEmits(['close'])


watch(
  () => props.exportDataIsShow,
  (newval) => {
     if (newval) companyExportList();
  }
)


const exportValue = ref("")
const options = ref([])
const exportUrl = ref("")
async function companyExportList() {
  const res = await customInterence.companyExportList();
  if (res.Ret === 200) {
    options.value = res.Data.List || [];
  }
  console.log(res);
}

function exportChange() {
  let url = "";
  options.value.forEach((item) => {
    if (item.Name == exportValue.value) {
      url = item.Url;
    }
  });
  exportUrl.value = process.env.API_ROOT + url  + "&CompanyId=" + Number(props.companyId)+'&' + (localStorage.getItem("auth") || "");
}

function cancelHandle() {
  exportUrl.value = "";
  exportValue.value = "";
  emit("close");
}

function saveHandle() {
  if (!exportValue.value) return ElMessage.error("请选择导出内容");
  let link = document.createElement("a");
  link.href = exportUrl.value;
  link.setAttribute("download", "导出数据");
  link.style.display = "none"; //a标签隐藏
  document.body.appendChild(link);
  link.click();
  setTimeout(() => {
    cancelHandle();
  });
}

</script>
<template>
  <div class="container-export">
    <el-dialog
      draggable
      :model-value="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>
<style scoped lang="scss">

</style>