<template>
  <div class="result-page BaseApp-page">
    <header class="BaseApp-page-header">
      <div class="result-header-title">试验结果</div>
    </header>
    <main class="BaseApp-page-main">
      <!-- 试验结果信息 -->
      <div class="result-inner">
        <div class="result-info-wrapper">
          <div class="result-info-header-wrapper">
            <div class="result-info-header-type">
              {{ formData.battery_name }}
            </div>
            <div class="result-info-header-content">
              <div class="result-info-header-content__user">
                <img src="@/assets/image/dataManage/user.png" alt="" />
                {{ formData.user_name }}
              </div>
              <div class="result-info-header-content__time">
                <img src="@/assets/image/dataManage/time.png" alt="" />
                {{ formData.created_time }}
              </div>
            </div>
          </div>
          <div class="result-status-wrapper">
            <div class="result-status-row">
              <div class="result-status-row-item">
                <div class="result-status-row-item__label">样品编号：</div>
                <div class="result-status-row-item__value">{{ formData.battery_code }}</div>
              </div>
              <div class="result-status-row-item">
                <div class="result-status-row-item__label">样品规格：</div>
                <div class="result-status-row-item__value">{{ formData.battery_spec }}</div>
              </div>
              <div class="result-status-row-item">
                <div class="result-status-row-item__label">暴露时间：</div>
                <div class="result-status-row-item__value">{{ formData.expose_time }}h</div>
              </div>
              <div class="result-status-row-item">
                <div class="result-status-row-item__label">温度：</div>
                <div class="result-status-row-item__value">{{ formData.temp_tag }}℃</div>
              </div>
            </div>
            <div class="result-status-row">
            
              <div class="result-status-row-item">
                <div class="result-status-row-item__label">电池电压：</div>
                <div class="result-status-row-item__value">{{ formData.remark?.battery_voltage }}mv</div>
              </div>
              <div class="result-status-row-item">
                <div class="result-status-row-item__label">电池电流：</div>
                <div class="result-status-row-item__value">{{formData.remark?.battery_electricity }}A</div>
              </div>
              <div class="result-status-row-item">
                <div class="result-status-row-item__label">短路时间：</div>
                <div class="result-status-row-item__value">{{ formData.remark?.short_circuit_time }}min</div>
              </div>
              <div class="result-status-row-item">
              </div>
            </div>
          </div>
          <div class="result-tip-wrapper">
            <div class="result-tip__label">电池描述：</div>
            <div class="result-tip__value">
              <span v-if="formData.remark?.test_result == '1'">在试验期间及试验结束后的XX小时内，电池和电池组未出现解体、破裂或起火现象，该电池<span style="color: green;">符合</span>要求。</span>
              <span v-else>
                在试验期间及试验结束后的XX小时内，电池和电池组出现{{experimentDesc}}现象，该电池<span style="color: red;">不符合</span>要求。
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="result-inner">
        <div class="result-table-wrapper">
          <vxe-table
            class="BaseApp-table"
            ref="tableRef"
            :data="tableData"
            show-overflow
            stripe
            :row-config="{ isCurrent: true, isHover: true }"
            @current-change="currentChangeHandler">
            <vxe-column field="num" title="试验次数"></vxe-column>
          
            <vxe-column field="temperature" title="温度">
              <template #default="{ row }">{{ row.test_temp }}℃</template>
            </vxe-column>
         
            <vxe-column field="put_time" title="暴露时间">
              <template #default="{ row }">{{ row.expose_time }}min</template>
            </vxe-column>
            <vxe-column field="time" title="短路时间">
              <template #default="{ row }">{{ row.remark?.short_circuit_time }}℃</template>
            </vxe-column>
            <vxe-column field="试验前电压" title="外壳最高温度" min-width="40">
              <template #default="{ row }">{{ row.remark?.surface_temperature }}mv</template>
            </vxe-column>
            <vxe-column field="voltage" title="电池电压" min-width="40">
              <template #default="{ row }">{{ row.remark?.battery_voltage }}mv</template>
            </vxe-column>
            <vxe-column field="electricity" title="峰值电流" min-width="40">
              <template #default="{ row }">{{ row.remark?.battery_electricity }}mv</template>
            </vxe-column>
            <vxe-column title="操作" width="260">
              <template #default="{ row }">
                <div class="BaseApp-table-btn-group">
                  <div class="BaseApp-table-btn" @click="viewCamera(row)">查看视频</div>
                  <div class="BaseApp-table-btn" @click="exportExcel(row)">导出</div>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </main>
    <footer class="BaseApp-page-footer">
      <div class="BaseApp-btn" @click="goBack">返回</div>
    </footer>
  </div>

  <!-- 实时视频查看 -->
  <CameraMonitorDilaog
    v-if="cameraMonitorDialogConfig.visible"
    :bizId="cameraMonitorDialogConfig.bizId"
    :cameraType="cameraMonitorDialogConfig.cameraType"
    @cancel="cameraMonitorDialogConfig.visible = false"></CameraMonitorDilaog>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { notify } from '@/utils/message.js';
import { getExperimentRecordApi, exportDataApi } from '@/api/experiment';
import CameraMonitorDilaog from '../../components/CameraMonitorDilaog/index.vue';

const route = useRoute();
const router = useRouter();
const formData = reactive({});
const tableRef = ref();
let tableData = reactive([]);

let cameraMonitorDialogConfig = reactive({
  visible: false,
  cameraType: 'CAMERA_RECORD',
  bizId: ''
});
let experimentDesc = ref()
const loadData = async () => {
  const res = await getExperimentRecordApi({ name: route.query.name });
  let { code, desc, pagination } = res?.data || {};
  if (code !== 200) {
    notify(desc);
    return;
  }
  tableData.length = 0;
  tableData.push(...res.data.data);

  if (tableData.length > 0) {
    // 默认选中第一行
    const $table = tableRef.value;
    $table.setCurrentRow(tableData[0]);
    for (let key in tableData[0]) {
      formData[key] = tableData[0][key];
    }
    getResultDesc()
  }
};
const getResultDesc = ()=>{
    let arr = []
    if(formData.remark.is_disintegrate =='1'){
      arr.push('解体')
    }
    if(formData.remark.is_rupture =='1'){
      arr.push('破裂')
    }
    if(formData.remark.is_fire =='1'){
      arr.push('着火')
    }
    experimentDesc.value = arr.join(',')
}
const currentChangeHandler = (e) => {
  for (let key in e.row) {
    formData[key] = e.row[key];
  }
  getResultDesc()

};

/**
 * 查看视频
 */
const viewCamera = async (rowObj) => {
  if(rowObj.remark){
    cameraMonitorDialogConfig.bizId = rowObj.remark.record_id;
    cameraMonitorDialogConfig.visible = true;
  }else{
    notify('该实验暂无视频数据');

  }

};

const exportExcel = async (rowObj) => {
  let res = await exportDataApi({
    ids: [rowObj.experiment_id],
    download_type: 'usb',
    tag: '2'
  });
  let { code, desc, data } = res?.data;
  if (code === 200) {
    notify(desc, 'success');
  } else {
    notify(desc);
  }
};

const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  loadData();
});
</script>

<style lang="less" scoped>
.result-page {
  font-size: 20px;
  color: #666666;
  .BaseApp-page-header {
    margin: 40px 0 0 40px;
    .result-header-title {
      font-weight: bold;
      font-size: 28px;
      color: #3a3a3a;
    }
  }
  .result-inner {
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
    .result-info-wrapper {
      display: flex;
      flex-direction: column;
      padding: 20px;
      border-bottom: 1px solid #e5e5e5ff;
      .result-info-header-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .result-info-header-type {
          font-weight: bold;
          font-size: 24px;
          color: #3a3a3a;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .result-info-header-content {
          display: flex;
          flex-direction: row;
          font-size: 19px;
          color: #aaaaaa;
          text-align: center;
          img {
            width: 22px;
            height: 22px;
            margin-right: 5px;
          }
          .result-info-header-content__user,
          .result-info-header-content__time {
            display: flex;
            flex-direction: row;
            aligin-items: center;
          }
          .result-info-header-content__time {
            margin-left: 40px;
          }
        }
      }
      .result-status-wrapper {
        margin: 17px -20px;
        border: 1px solid #b8b8b8;
        border-left: none;
        border-right: none;
        font-size: 20px;
        color: #3a3a3a;
        .result-status-row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          border-bottom: 1px solid #b8b8b8;
          &:last-child {
            border-bottom: none;
          }
          .result-status-row-item {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            height: 55px;
            padding-left: 20px;
            border-right: 1px solid #b8b8b8;
            &:last-child {
              border-right: none;
            }
          }
        }
      }
      .result-tip-wrapper {
        display: flex;
        flex-direction: row;
        min-height: 50px;
        font-size: 20px;
        color: #3a3a3a;
        .result-tip__value {
          flex: 1;
        }
      }
    }
  }
  .result-inner + .result-inner {
    margin-top: 20px;
  }
  .result-table-wrapper {
    padding: 20px;
  }
}
</style>
