<script lang="ts" setup>
import { getExcelList, getExcelTemplateDetail } from "@/api/project/template";

const emits = defineEmits(["close", "selected"]);

const dataList = ref<any[]>([]);

const openDrawer = async () => {
  let res = await getExcelList();
  dataList.value = res.data;
};

const onClickChoose = async (row: any) => {
  let res = await getExcelTemplateDetail(row.id);
  emits("selected", res.data);
};

defineExpose({
  openDrawer,
});

// =======================
</script>

<template>
  <div class="global-config">
    <div class="second-header">
      <div class="left-text">选择模板</div>
      <div>
        <svg-icon
          icon-class="close"
          @click="emits('close')"
          style="cursor: pointer"
        />
      </div>
    </div>

    <el-table :data="dataList" style="width: 100%">
      <el-table-column label="序号" type="index" width="80" />

      <el-table-column label="表格名称" prop="formName"> </el-table-column>
      <el-table-column label="产品名称" prop="productName"> </el-table-column>
      <el-table-column label="产品编码" prop="productCode" />

      <el-table-column label="操作" prop="操作" fixed="right">
        <template #default="scope">
          <el-button
            text
            size="small"
            type="primary"
            @click="onClickChoose(scope.row)"
          >
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.global-config {
  width: 100%;
  //height: 100vh;
  .demo-tabs {
    // background-color: red;
    :deep(.el-tabs__nav-scroll) {
      padding: 0 20px;
    }
  }
  .add {
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 12px;
    text-align: center;
    background-color: #fff;
    color: #3b7cff;
    margin-right: 10px;
    vertical-align: middle;
  }
}

.second-header {
  width: 100%;
  height: $main-header-height;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: $hj-white-1;
  padding: 0 20px;
  border-bottom: 1px solid $hj-white-3;

  .left-text {
    height: 18px;

    font-weight: bold;
    font-size: 14px;
    color: $hj-black-1;
    line-height: 16px;
    text-align: left;
  }
}
</style>
