<template>
  <div>
    <el-button type="primary" @click="setcost" :icon="Tools"
      >系统配置</el-button
    >
    <el-button type="info" @click="exportExcel" :icon="Download"
      >导出造价单</el-button
    >
  </div>
  <div class="flex">
    <div class="flex_left">
      <el-table :data="tableData">
        <el-table-column prop="itemName" label="类型" />
        <el-table-column prop="price" width="100" label="单价(元)" />
      </el-table>
    </div>
    <div class="flex_right">
      <vue-office-excel
        style="height: 850px"
        :src="excleValue"
        @rendered="rendered"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/excel/lib/index.css";
import { costlist } from "@map/api/layer.js";
const props = defineProps({
  layerId: String,
});
const layerId = props.layerId;
const emit = defineEmits();
const { proxy } = getCurrentInstance();
const excleValue = ref("");
const tableData = ref();
onMounted(() => {
  init();
});
//初始化
function init() {
  costlist(layerId).then((res) => {
    console.log(res.data);
    tableData.value = res.data;
  });
  proxy
    .download("pipe/cost/export/" + layerId, {}, "造价单.xlsx")
    .then((res) => {
      excleValue.value = res;
    });
}
defineExpose({ init });
//导出
function exportExcel() {
  var a = document.createElement("a");
  a.download = "造价单.xlsx";
  a.href = excleValue.value;
  a.click();
}
//打开系统配置
function setcost() {
  emit("update:conSet", true);
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  margin-top: 10px;
  width: 100%;

  .flex_left {
    width: 300px;
  }
  .flex_right {
    flex: 1;
  }
}
</style>
