<template>
  <div class="details-container">
    <div class="detail-title">{{ experiment_name || '' }}实验物质</div>
    <div class="base-info">
      <div class="base-header">
        <div class="left-item">
          <div class="tag"></div>
          <div class="title">基本信息</div>
        </div>
        <div class="right-item">
          <div class="word">
            <svg-icon name="operator" size="35" class="icon" />
            <div>{{ usrName }}</div>
          </div>
          <div class="word second">
            <svg-icon name="time" size="35" class="icon" />
            {{ createTime }}
          </div>
        </div>
      </div>
      <div class="base-details">
        <div class="left">
          <div class="left-item" v-for="item of computedList">
            <div>{{ item.title }}</div>
            <div class="unit">
              <span>{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="base-info">
      <div class="base-header">
        <div class="left-item">
          <div class="tag"></div>
          <div class="title">报告信息</div>
        </div>
        <div class="right-item">
          {{ !is_formal ? '数据是否完整' : '是否发生自加速反应' }}：{{
            is_formal ? cal_is_self_acceleration : cal_is_all_finish
          }}
        </div>
      </div>
      <div class="base-report" v-if="!is_formal">
        <div class="left-list border">
          <div class="list-item" v-for="item of rise_list">
            <div>{{ item.text }}</div>
            <div>{{ item.value?.toFixed(4) || 0 }}</div>
          </div>
        </div>
        <div class="left-list">
          <div class="list-item" v-for="item of drop_list">
            <div>{{ item.text }}</div>
            <div>{{ item.value?.toFixed(4) || 0 }}</div>
          </div>
        </div>
      </div>
      <div class="base-report" v-else>
        <div class="formal-part">
          <div class="left-item">
            <div class="item-container">
              <div>待运输包装下热损失率mW/(k.kg)：</div>
              <div>{{ formal_report_obj.loss_rate }}</div>
            </div>
            <div class="item-container">
              <div>物质比热J/(Kg.k):</div>
              <div>{{ formal_report_obj.cp2_value?.toFixed(2) || '无数据' }}</div>
            </div>
          </div>
          <div class="center-item">
            <div class="item-container">
              <div>控制温度/℃：</div>
              <div>{{ formal_report_obj.control_temp?.toFixed(2) || '无数据' }}</div>
            </div>
            <div class="item-container">
              <div>危机温度/℃：</div>
              <div>{{ formal_report_obj.crisis_temp?.toFixed(2) || '无数据' }}</div>
            </div>
          </div>
          <div class="right-item">
            <div class="item-container">
              <div>自加速分解温度/℃：</div>
              <div>{{ formal_report_obj.zjs_temperature?.toFixed(2) || '无数据' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="charts-part" v-if="!is_formal">
      <div class="chart-item" v-for="chart of cal_charts_options" :key="chart.id">
        <CommCharts :chartOption="chart" :id="chart.id" />
      </div>
    </div>
    <div class="charts-part" v-else>
      <div class="chart-item">
        <FormalCharts :chartOption="formal_charts_options1" />
      </div>
      <div class="chart-item">
        <CommCharts :chartOption="formal_charts_options2[0]" />
      </div>
    </div>
  </div>
  <div class="footer-part">
    <CommonButton size="default" type="info" msg="返回" @click="router.go(-1)" />
    <CommonButton size="large" type="danger" msg="导出报表" @click="exportDataUsb" />
  </div>
</template>

<script setup>
import { ref,  computed, } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import CommCharts from '../instrument_cal/components/CommCharts.vue';
import FormalCharts from '../instrument_cal/components/FormalCharts.vue';
import { exportExcel } from '@/utils/index.js';
import {
  getJZExperimentDetailApi,
  exportDataApi,
  getExperimentDetailApi,
  exportDataBrowserApi
} from '@/api/experiment.js';
import { exportExcel as exportExcelFn } from '@/utils/index.js';
import { notify } from "@/utils/message";
const router = useRouter();
const route = useRoute();
const {
  path,
  query: { id }
} = route;
let experiment_id = ref(id);
let experiment_name = ref('');
let usrName = ref('');
let createTime = ref('');
let cal_is_all_finish = ref(null);
let cal_is_self_acceleration = ref(null);
let formal_report_obj = ref({});
const is_formal = ref(path == '/formal_expDataDetail' ? true : false);
const getExperimentDetail = async () => {
  let res = null;
  if (!is_formal.value) {
    res = await getJZExperimentDetailApi({ experimentjz_id: experiment_id.value });
  } else {
    res = await getExperimentDetailApi({ experiment_id: experiment_id.value });
  }
  let data = res.data.data;
  let obj = data.obj;
  console.log(obj);
  let { name, user_name, created_time, is_all_finish, is_self_acceleration } = obj;
  experiment_name.value = name;
  usrName.value = user_name;
  createTime.value = created_time;
  cal_is_all_finish.value = is_all_finish == 1 ? '是' : '否';
  cal_is_self_acceleration.value = is_self_acceleration == 1 ? '是' : '否';

  if (!is_formal.value) {
    let { rise_temp_data, drop_temp_data1 } = data;
    cal_base_info_list.value = updateTableList(cal_base_info_list.value, obj);
    updateList(rise_temp_data, rise_list.value);
    updateList(drop_temp_data1, drop_list.value);
    updateChartsOptions(cal_charts_options.value, data);
  } else {
    formal_report_obj.value = obj;
    formal_charts_options1.value['x_list'] = data['x_list'];
    formal_charts_options1.value['y1_list'] = data['y1_list'];
    formal_charts_options1.value['y2_list'] = data['y2_list'];
    updateChartsOptions(formal_charts_options2.value, data);
    formal_base_info_list.value = updateTableList(formal_base_info_list.value, obj);
  }
};
const formal_charts_options1 = ref({
  name: '温度速率与时间波形图',
  yAxis_name: '样品温度(℃) - 温度速率(℃/h)',
  xAxis_name: '时间/s',
  id: 'Cp2_list',
  x_list: [],
  y1_list: [],
  y2_list: []
});
const formal_charts_options2 = ref([
  {
    name: '发热率与温度关系图',
    yAxis_name: '发热率(W/Kg)',
    xAxis_name: '温度/℃',
    id: 'Qt_list',
    x_data: [],
    y_data: []
  }
]);
const updateTableList = (table, obj) => {
  return table.map((item) => {
    if (item.props && obj.hasOwnProperty(item.props)) {
      return { ...item, value: obj[item.props] };
    }
    return item;
  });
};
const updateChartsOptions = (chartsOptions, responseData) => {
  chartsOptions.forEach((chart) => {
    if (responseData.hasOwnProperty(chart.id)) {
      chart.x_data = responseData[chart.id].map((dataPoint) => dataPoint[0]);
      chart.y_data = responseData[chart.id].map((dataPoint) => dataPoint[1]);
    }
  });
};
const updateList = (source, target) => {
  source.forEach((data, index) => {
    if (index < target.length) {
      target[index].value = data;
    }
  });
};
getExperimentDetail();
const computedList = computed(() => {
  return is_formal.value ? formal_base_info_list.value : cal_base_info_list.value;
});
const rise_list = ref([
  {
    text: '校准物质40℃升温速率(℃/h)：',
    value: null
  },
  {
    text: '校准物质60℃升温速率(℃/h)：',
    value: null
  },
  {
    text: '校准物质80℃升温速率(℃/h)：',
    value: null
  },
  {
    text: '校准物质100℃升温速率(℃/h)：',
    value: null
  }
]);
const drop_list = ref([
  {
    text: '校准物质40℃降温速率(℃/h)：',
    value: null
  },
  {
    text: '校准物质60℃降温速率(℃/h)：',
    value: null
  },
  {
    text: '校准物质80℃降温速率(℃/h)：',
    value: null
  },
  {
    text: '校准物质100℃降温速率(℃/h)：',
    value: null
  }
]);
const cal_base_info_list = ref([
  {
    title: '校准物质加热功率',
    value: '',
    unit: 'W',
    props: 'power'
  },
  {
    title: '校准物质比热',
    value: '',
    unit: 'J/(Kg*℃)',
    props: 'specific_heat'
  },
  {
    title: '校准物质质量',
    value: '',
    unit: 'Kg',
    props: 'weight'
  },
  {
    title: '校准物质温度',
    value: '',
    unit: '℃',
    props: 'set_temperature'
  }
]);
const formal_base_info_list = ref([
  {
    title: '试验物质加热功率',
    value: '',
    unit: 'W',
    props: 'power'
  },
  {
    title: '试验物质质量',
    value: '',
    unit: 'kg',
    props: 'weight'
  },
  {
    title: '循环保温时间',
    value: '',
    unit: 'min',
    props: 'circular_insulation_time'
  },
  {
    title: '起始温度',
    value: '',
    unit: '℃',
    props: 'set_temperature'
  },
  {
    title: '终止温度',
    value: '',
    unit: '℃',
    props: 'end_temperature'
  }
]);
const cal_charts_options = ref([
  {
    name: '升温速率-温度曲线',
    yAxis_name: '升温速率(℃/h)',
    xAxis_name: '温度(℃)',
    id: 'riseTemp',
    x_data: [],
    y_data: []
  },
  {
    name: '降温速率-温度曲线',
    yAxis_name: '降温速率(℃/h)',
    xAxis_name: '温度(℃)',
    id: 'dropTemp',
    x_data: [],
    y_data: []
  },
  {
    name: '热容量-温度曲线',
    yAxis_name: '热容量(J/℃)',
    xAxis_name: '温度(℃)',
    id: 'capacity',
    x_data: [],
    y_data: []
  },
  {
    name: '热损失-温度曲线',
    yAxis_name: '热损失(W)',
    xAxis_name: '温度(℃)',
    id: 'loss',
    x_data: [],
    y_data: []
  }
]);
const formal_charts_options = [
  {
    name: '温度速率与时间波形图',
    yAxis_name: '样品温度(℃) - 温度速率(℃/h)',
    xAxis_name: '时间/s',
    id: 'chart1'
  },
  {
    name: '发热率与温度关系图',
    yAxis_name: '样品温度(℃) - 温度速率(℃/h)',
    xAxis_name: '时间/s',
    id: 'chart2'
  }
];
const exportDataUsb = async () => {
  let data = {
    experiment_type: is_formal.value ? '2' : '1',
    ids: [experiment_id.value],
    download_type: 'usb'
  };
  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 = res.data.code;
  // if (code == 200) {
  //   message(res.data.desc);
  // }

};
const exportData = async () => {
  let data = {
    experiment_type: is_formal.value ? '2' : '1',
    ids: [experiment_id.value],
    download_type: ''
  };
  let res = await exportDataBrowserApi(data);
  exportExcel(res);
};


</script>
<style lang="less" scoped>
.details-container {
  width: 100%;
  height: 100%;
  padding: 0 40px;
  .detail-title {
    font-weight: bold;
    font-size: 48px;
    color: #3a3a3a;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .base-info {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 0px 8px;
    border: 1px solid #dcdcdc;
    margin-bottom: 20px;
    .base-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 35px;
      padding-bottom: 21px;
      padding-right: 40px;
      .left-item {
        display: flex;
        align-items: center;
        .tag {
          width: 8px;
          height: 28px;
          background: #cf4a4a;
          margin-right: 32px;
        }
        .title {
          font-weight: bold;
          font-size: 36px;
          color: #3a3a3a;
          line-height: 0px;
          text-align: center;
        }
      }
      .right-item {
        display: flex;
        align-items: center;
        font-size: 30px;
        color: #aaaaaa;
        .word {
          display: flex;
          align-items: center;
          .icon {
            margin-right: 6px;
          }
        }
        .second {
          margin-left: 52px;
        }
      }
    }
    .base-details {
      width: 100%;
      display: flex;
      align-items: center;
      .left {
        width: 100%;
        font-size: 32px;
        color: #3a3a3a;
      }
      .left {
        display: flex;
        .left-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 32px 40px;
          border-top: 1px solid #b8b8b8;
          border-right: 1px solid #b8b8b8;
          :first-child {
            margin-bottom: 12px;
          }
          .unit {
            font-size: 40px;
            :last-child {
              font-size: 30px;
              color: #b8b8b8;
              margin-left: 12px;
            }
          }
        }
      }
    }
    .base-report {
      display: flex;
      .border {
        border-right: 1px solid #b8b8b8;
      }
      .left-list {
        flex: 1;
        padding: 30px 40px;
        padding-bottom: 0;
        border-top: 1px solid #b8b8b8;
        .list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 32px;
          color: #3a3a3a;
          margin-bottom: 35px;
        }
      }
      .formal-part {
        width: 100%;
        font-size: 32px;
        color: #3a3a3a;
        display: flex;
        //justify-content: space-between;
      }
      .left-item,
      .center-item,
      .right-item {
        padding: 32px 40px;
        padding-bottom: 0;
        border-top: 1px solid #b8b8b8;
        border-right: 1px solid #b8b8b8;
      }
      .left-item {
        width: 769px;
      }
      .center-item {
        width: 515px;
      }
      .right-item {
        flex: 1;
      }
      .item-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 37px;
      }
    }
  }
  .charts-part {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 200px;
    .chart-item {
      margin-top: 20px;
      height: 607px;
      width: 48%;
      background: #ffffff;
      box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
      border-radius: 12px 12px 12px 12px;
      border: 1px solid #cccccc;
      position: relative;
      .big-icon {
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: 100;
      }
    }
  }
}
.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>
