<template>
  <div class="third-step">
    <div class="step_title">数据详情</div>
    <div class="result_info step_class">
      <div class="info_title">
        <div class="left_part">
          <div>试验材料名称：{{ base_info.name || '/' }}</div>
        </div>
      </div>
      <div class="table_part">
        <div class="table_item">
          <div>样品编号：{{ base_info.specimen_code || '/' }}</div>
          <div>实验次数：{{ base_info.experiment_times || '/' }}</div>
          <div>厚度：{{ base_info.specimen_thickness || '/' }}mm</div>
          <div>
            最低着火温度：{{
              base_info.min_ignition_temp ? (base_info.min_ignition_temp * 1).toFixed(2) : '/'
            }}℃
          </div>
        </div>
        <div class="table_item">
          <div class="table_item_describe">样品来源:{{ base_info.material_source || '/' }}</div>
        </div>
        <div class="table_item">
          <div class="table_item_describe">样品描述：{{ base_info.material_desc || '/' }}</div>
        </div>
        <div class="table_item table_item_end">
          <div class="table_item_describe">
            样品已知的挥发性：{{ base_info.material_substances || '/' }}
          </div>
        </div>
      </div>
    </div>
    <div class="table_container">
      <vxe-table :data="tableData" :columns="columns" stripe height="380px">
        <vxe-column
          v-for="col of columns"
          :field="col.field"
          :title="col.title"
          :min-width="col.width"></vxe-column>
        <!-- <vxe-column title="操作" width="260">
            <template #default="{ row }">
              <div class="operate-container">
                <span @click="goDetail(row)">查看详情</span>
              </div>
            </template>
          </vxe-column> -->
      </vxe-table>
    </div>
    <div class="table_container_chart">
      <div id="observationEnd"></div>
    </div>
    <div class="footer-part">
      <CommonButton size="default" type="info" msg="返回" @click="router.go(-1)" />
      <CommonButton size="large" type="danger" msg="导出报表" @click="exportExcel" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getReportDeatail, getExperimentBySpecimenApi } from '@/api/equipment';
import { notify } from '@/utils/message.js';
import { exportDataApi } from '@/api/report';
import { exportExcel as exportExcelFn } from '@/utils/index.js';
let route = useRoute();
let router = useRouter();
let experiment_id = route.query.experiment_id;
let base_info = ref({
  created_time: '',
  experiment_times: '',
  is_enabled: '',
  material_desc: '',
  material_source: '',
  material_substances: '',
  min_ignition_temp: null,
  name: '',
  specimen_code: '',
  specimen_thickness: '',
  user_name: ''
});
let columns = [
  { field: 'experiment_times', title: '试验轮次', width: 150 },
  { field: 'test_result', title: '是否着火', width: 100 },
  { field: 'hot_suff_temp', title: '热表面温度', width: 150 },
  { field: 'dust_layer_temp', title: '粉尘层温度', width: 150 },
  { field: 'wzhswdddzdzdsj', title: '着火时间或未着火时 温度达到最大值时间', width: 220 },
  { field: 'combustion_chara_desc', title: '燃烧特性', width: 150 },
  { field: 'knyxjgdys', title: '可能影响试验结果有 效性的因素', width: 190 },
  { field: 'other_desc', title: '其他补充', width: 190 },
  { field: 'specimen_quantity', title: '粉尘质量', width: 100 },
  { field: 'specimen_volume', title: '粉尘体积', width: 150 },
  { field: 'specimen_density', title: '粉尘密度', width: 150 },
  { field: 'created_time', title: '试验时间', width: 230 },
  { field: 'user_name', title: '实验人', width: 150 }
];
const tableData = ref([]);
const knyxjgdys = {
  1: '粉尘层制备中的困难',
  2: '加热期间粉尘层变形',
  3: '加热期间粉尘层爆裂',
  4: '加热期间粉尘层融熔',
  5: '受热时产生微量的可燃气体',
  6: '其他补充'
};

// 获取一个试验的所有记录
const queryData = async () => {
  let res = await getExperimentBySpecimenApi({
    name: '',
    specimen_id: experiment_id
  });

  let { code, message, data } = res;

  if (data.data.length > 0) {
    tableData.value = data.data.map((item) => {
      // 第几次
      item.experiment_times = `第${item.experiment_times}次`;
      //粉尘质量
      item.specimen_quantity = (item.specimen_quantity * 1).toFixed(2) + 'g';
      //粉尘体积
      item.specimen_volume = (item.specimen_volume /1000).toFixed(2) + 'cm³';
      //粉尘密度
      item.specimen_density = (item.specimen_density * 1000).toFixed(2) + 'g/cm³';
      //热表面温度
      item.hot_suff_temp = (item.hot_suff_temp * 1).toFixed(2) + '℃';
      // 粉尘层温度
      item.dust_layer_temp = (item.dust_layer_temp * 1).toFixed(2) + '℃';
      // 是否着火
      if (item.test_result == 1) {
        item.test_result = '是';
      }
      if (item.test_result === 0) {
        item.test_result = '否';
      }
      // 可能影响试验结果有 效性的因素
      if (item.knyxjgdys) {
        let arr = item.knyxjgdys.split(',');
        item.knyxjgdys = '';
        arr.forEach((e, index) => {
          item.knyxjgdys += `${index + 1}、${knyxjgdys[e]}`;
        });
      }

      return item;
    });
  }
};
queryData();
// 获取试验详情
const getExperimentDetail = async () => {
  let param = {
    name: '',
    specimen_id: experiment_id
  };
  let res = await getReportDeatail(param);
  base_info.value = res.data.data[0];
};
getExperimentDetail();
// 导出报表
const exportExcel = async () => {
  let data = {
    download_type: 'usb',
    specimen_id: experiment_id
  };
  let res = await exportDataApi(data);
  if (res?.data?.type == 'application/json') {
    // U盘
    notify('导出成功', 'success');
    return
  }
  // 浏览器
  exportExcelFn(res, new Date().toLocaleString().replaceAll('/', '').replaceAll(':', '').replaceAll(' ', '')+'--报表')
  // let { code, desc } = res.data;
  // if (code) {
  //   notify(message, 'success', 2500);
  // } else {
  //   notify(desc);
  // }
};
</script>
<style lang="less" scoped>
@COOMSIZE: 40px;
.third-step {
  width: 100%;
  position: relative;
  // height: 100%;
  // margin-bottom: 160px;
  overflow: auto;
  // &::-webkit-scrollbar {/*滚动条整体样式*/
  //   width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
  //   height: 1px;
  // }
  // &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  //   border-radius: 10px;
  //     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  //   background: #535353;
  // }
  // &::-webkit-scrollbar-track {/*滚动条里面轨道*/
  //   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  //   border-radius: 10px;
  //   background: #EDEDED;
  // }
  .step_title {
    font-size: 48px;
    font-weight: bold;
    color: #3a3a3a;
    margin-left: 22px;
    margin-bottom: 12px;
  }
  .result_info {
    // padding: (@COOMSIZE*0.8) @COOMSIZE;
    // padding-bottom: 18px;
    background: #f6f6f6;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #dcdcdc;
    position: relative;

    .info_title {
      font-size: @COOMSIZE;
      display: flex;
      height: 94px;
      line-height: 94px;
      padding-left: 40px;
      justify-content: space-between;
      .left_part {
        display: flex;
        .operator {
          margin-right: 27px;
          color: #808080;
          display: flex;
          align-items: center;
        }
        :last-child {
          margin-right: 0;
        }
      }
      .right_part {
        position: relative;
        right: 30px;
      }
    }
    .table_part {
      .table_item {
        display: flex;
        div {
          padding: 25px 0px 21px 39px;
          width: 461px;
          height: 82px;
          border: 1px solid #b8b8b8;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 32px;
          color: #3a3a3a;
          text-align: left;
          font-style: normal;
          text-transform: none;
          border-left: 0px;
          border-bottom: 0px;
        }
        :nth-child(1) {
          width: 461px;
        }
        :nth-child(2) {
          width: 460px;
        }
        :nth-child(3) {
          width: 392px;
        }
        :nth-child(4) {
          width: 527px;
        }
        .table_item_describe {
          width: 1840px;
        }
      }
    }
  }
  .step_class {
    margin-top: 120px;
  }
  .table_container {
    width: 1840px;
    height: 460px;
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
    margin-top: 40px;
    margin-bottom: 290px;
    padding-top: 40px;
    :deep(.vxe-table--main-wrapper) {
      overflow: auto;
    }
  }
  .footer_btn {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #ffffff;
    justify-content: space-between;
    padding: @COOMSIZE;
    padding-top: (@COOMSIZE / 2);
    z-index: 100;
    .right_btns {
      display: flex;
    }
  }
}
:deep(.vxe-header--column) {
  text-align: center !important;
}
.footer-part {
  margin-top: 40px;
  width: 100vw;
  display: flex;
  height: 168px;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  box-shadow: 0px -3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #dcdcdc;
  position: fixed;
  padding: 0 40px;
  bottom: 0;
  z-index: 101;
  .right-btns {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
