<script setup lang="ts">
import { ref } from "vue";
import TemplateList from "../report-template/com/templateList.vue";
import {
  getProductCodeListById,
  getTestedProductList,
  getTestingDataByCode,
  previewExcelTemplateData,
  saveExcelTemplate,
  updateExcelTemplate,
} from "@/api/project/template";

const excelRef = ref(null);
const excelData = ref(null);

// 打开模版
const temsDrawerVisible = ref(false);
const listRef = ref();
const currentTemplate = ref(null);
const onSelectTemplate = (tem) => {
  currentTemplate.value = tem;
  temsDrawerVisible.value = false;

  formData.engineeringId = tem.engineeringId;
  formData.formName = tem.formName;

  getProductCodeListById(formData.engineeringId).then((res) => {
    codeAllList.value = res.data;
    codeList.value = codeAllList.value;
  });
};
const onOpenTemplate = () => {
  temsDrawerVisible.value = true;
  nextTick(() => {
    listRef.value && listRef.value.openDrawer();
  });
};

const onExportTemplate = () => {
  console.log(excelRef.value);
  if (excelRef.value) {
    excelRef.value.downloadExcel();
  }
  console.log("onExportTemplate");
};

// ===== 右侧区域 =======
const formRef = ref(null);
const formData = reactive({
  engineeringId: "",
  formName: "",
  productCode: "",
});

// 产品选择器
const productAllList = ref<any[]>([]); // 产品列表
const productList = ref<any[]>([]); // 产品列表
const proProps = {
  label: "engineeringProductName",
  value: "id",
};
const proLoading = ref(false);
const proRemoteMethod = (query: string) => {
  let queryString = query.trim();
  if (queryString.length === 0) {
    productList.value = productAllList.value;
    return;
  }
  getTestedProductList({
    engineeringProductName: queryString,
    executeStatus: true,
  }).then((res) => {
    productList.value = res.data;
  });
};
const onProductChange = (val) => {
  getProductCodeListById(formData.engineeringId).then((res) => {
    codeAllList.value = res.data;
    codeList.value = codeAllList.value;
  });
};

// 产品编号选择器
const codeAllList = ref<any[]>([]); // 产品编号列表
const codeList = ref<any[]>([]); // 产品编号列表

// 点击搜索按钮查询 产品编码
const onSearchTestingData = async () => {
  let queryString = formData.productCode.trim();
  if (queryString.length === 0) {
    codeList.value = codeAllList.value;
    return;
  }
  getProductCodeListById(formData.engineeringId, queryString).then((res) => {
    codeList.value = res.data;
  });
};

// 预览魔板
const previewExcel = (code) => {
  previewExcelTemplateData({
    excelFormId: currentTemplate.value?.id || null,
    productCode: code,
  }).then((res) => {
    excelData.value = null;
    if (res?.data?.excelData) {
      excelData.value = JSON.parse(res.data.excelData);
    }
  });
};

onMounted(() => {
  getTestedProductList({
    executeStatus: true,
  }).then((res) => {
    productAllList.value = res.data;
    productList.value = productAllList.value;
  });
});
</script>

<template>
  <div class="report-template">
    <div class="left">
      <div class="excel-container">
        <ExcelView ref="excelRef" v-if="excelData" :data="excelData" />
      </div>
    </div>
    <div class="right">
      <div class="title-header">测试项查询</div>
      <el-form ref="formRef" v-model:model="formData" label-position="top">
        <el-form-item label="模版名称" prop="formName">
          <el-input
            v-model="formData.formName"
            :disabled="true"
            style="width: calc(100% - 70px); margin-right: 10px"
          />
          <el-button type="primary" @click="onOpenTemplate">选择</el-button>
        </el-form-item>
        <el-form-item label="产品" prop="engineeringId">
          <el-select-v2
            v-model="formData.engineeringId"
            filterable
            remote
            :remote-method="proRemoteMethod"
            clearable
            :props="proProps"
            :options="productList"
            :loading="proLoading"
            placeholder="请选择产品名称"
            @change="onProductChange"
          />
        </el-form-item>

        <el-form-item label="产品编号" prop="productCode">
          <el-input v-model="formData.productCode"></el-input>
        </el-form-item>
      </el-form>
      <div class="blue-btn" style="width: 100%" @click="onSearchTestingData">
        <svg-icon icon-class="search" />
        搜索
      </div>
      <div class="white-line"></div>
      <div class="result-text">搜索结果</div>
      <el-scrollbar class="scroll-bottm-height">
        <div class="result-box">
          <div class="result-bar" v-for="log in codeList">
            <div>{{ log.productCode }}</div>
            <div>
              <svg-icon
                icon-class="preview"
                size="20"
                style="margin-right: 12px"
                @click.stop="previewExcel(log.productCode)"
              />
              <svg-icon
                icon-class="downloadExcel"
                size="20"
                @click.stop="onExportTemplate"
              />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <el-drawer
      v-model="temsDrawerVisible"
      :with-header="false"
      :append-to-body="true"
      :destroy-on-close="true"
      size="800"
      direction="ltr"
    >
      <TemplateList
        ref="listRef"
        @close="temsDrawerVisible = false"
        @selected="onSelectTemplate"
      ></TemplateList>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.report-template {
  display: flex;
  height: calc(100vh - $main-header-height);

  .left {
    flex: 1;
    height: calc(100vh - $main-header-height);

    .excel-container {
      height: calc(100vh - $main-header-height);
      width: calc(100vw - 296px - 80px);
      position: relative;
      //border: 2px solid red;
    }
  }

  .right {
    width: 296px;
    height: calc(100vh - $main-header-height);
    background-color: $hj-black-2;
    padding: 0 24px;

    .white-line {
      height: 1px;
      width: 100%;
      background-color: $hj-white-4;
      margin-top: 12px;
    }

    .result-text {
      margin-top: 11px;
      height: 18px;
      font-size: 14px;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
    }

    .result-box {
      margin-top: 12px;
      padding: 12px 6px;
      //height: calc(100vh - $main-header-height - 64px - 12px - 330px);

      //overflow-y: auto;

      .result-title-text {
        font-size: 14px;
        color: #ffffff;
        line-height: 16px;
        text-align: left;
      }

      .result-bar {
        height: 36px;
        line-height: 36px;
        background: linear-gradient(180deg, #656565 0%, #555555 100%);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        margin-top: 8px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
      }
    }
  }
}

.scroll-bottm-height {
  height: calc(100vh - $main-header-height - 64px - 12px - 330px);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #696969;
}

.blue-btn {
  width: 130px;
  height: 36px;
  line-height: 36px;
  margin: 0 auto;
  background: var(--fc-color-7);
  color: var(--hj-white-1);
  text-align: center;
  border-radius: 4px 4px 4px 4px;
  cursor: pointer;
}

.title-header {
  height: 65px;
  font-weight: 400;
  font-size: 16px;
  color: $hj-white-1;
  line-height: 65px;
  text-align: left;
  background-color: $hj-black-2;
}

:deep(.el-form-item--label-top .el-form-item__label) {
  height: 18px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  text-align: left;
}
</style>
