<template>
  <div class="data-record">
    <!-- <span class="page-title">数据详情</span> -->

    <div class="content">
      <div class="content-title">
        <span class="name">试验详情</span>
        <span class="person-msg">
          <span class="name"
            ><img src="@/assets/image/dataManage/person.png" />{{
              dateInfo.user_name
            }}</span
          >
          <span class="date"
            ><img src="@/assets/image/dataManage/time.png" />{{
              dateInfo.created_time
            }}</span
          >
        </span>
      </div>
      <div class="base-msg">
        <span class="msg">
          样品名称：<span>{{ dateInfo.name }}</span>
        </span>
        <span class="msg">
          样品熔点：<span
            >{{ dateInfo.melting_point||'-' }} <span class="unit">℃</span></span
          ></span
        >

        <span class="msg">
          自燃温度：<span
            >{{ dateInfo.natural_temp == '-50.0' ? '-':dateInfo.natural_temp }}<span class="unit">℃</span></span
          ></span
        >
        <span class="msg">
          试验结果：<span
            >{{ dateInfo.result?'成功':'失败' }}<span class="unit"></span></span
          ></span
        >
      </div>
      <div class="source">
        备注信息：<span>{{ dateInfo.bz }}</span>
      </div>

      <div class="board" style="width: 100%; height: 400px">
        <CommCharts :chartOption="chartOption" />
      </div>
    </div>
    <div class="foot_btn">
      <CommonButton
        msg="返回"
        size="default"
        height="60"
        paddingLeft="45"
        paddingRight="45"
        type="info"
        @click="router.push('/report')"
      >
      </CommonButton>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getExperimentInfoApi } from "@/api/experiment.js";
import { notify } from "@/utils/message.js";

const router = useRouter();
const route = useRoute();
let { path, query } = route;

let experiment_id = ref(query.experiment_id);
const fireOptions = {
  1: "着火",
  0: "未着火",
};
const isTopFireOptions = {
  1: "是",
  0: "否",
};
const columns = [
  {
    title: "试验轮次",
  },
  {
    title: "粉尘质量",
  },
  {
    title: "喷尘压力",
  },
  {
    title: "是否着火",
  },
  {
    title: "着火温度",
  },
  {
    title: "是否达到最高温度未着火",
  },
];
let dataSource = ref([]);
let dateInfo = ref({});
const chartOption = ref({});
let tempEchartData = ref({
  temp: [],
  time: [],
  temp1_data: [],
});
const viewEcharts = (data) => {
  chartOption.value = {
    name: "加热炉温度曲线图",
    xAxis_name: "时间/s",
    yAxis_name: "温度/℃",
    series_name: "温度曲线",
    x_data: parseInt(data.x_data),
    series_data: data.y_data1,
    temp1_data: data.y_data2,
    // series_data: [820, 932, 901, 934, 1290, 1330, 1320],
    // series_data: [820, 932, 901, 934, 1290, 1330, 1320],
  };
  // console.log(chartOption.value, "111");
};
const queryData = async () => {
  let res = await getExperimentInfoApi({ experiment_id: experiment_id.value });
  console.log(res);
  let { code, data, desc } = res.data;
  if (code == 200) {
    dateInfo.value = data.experiment_obj;
    data.info?.forEach((item) => {
      item.fanying_time = item.fanying_time / 1000;
      if (item.burning_rate) {
        item.burning_rate = parseFloat(item.burning_rate).toFixed(2);
      }
    });
    let {base_data} = data;
    console.log(base_data,'000000000');
    let chart_data = {
      x_data:[],
      series_data:[],
      temp1_data:[]
    }
    base_data.forEach((item)=>{
      chart_data.x_data.push(item[6])
      chart_data.series_data.push(item[2])
      chart_data.temp1_data.push(item[4])
    })
    //viewEcharts(chart_data);
    chartOption.value.x_data = chart_data.x_data;
    chartOption.value.series_data = chart_data.series_data;
    chartOption.value.temp1_data = chart_data.temp1_data;
    chartOption.value.name = '加热炉温度曲线图';
    chartOption.value.xAxis_name = '时间/s';
    chartOption.value.yAxis_name = '温度/℃';
    chartOption.value.series_name = '温度曲线';
    console.log(chartOption.value,'>><>><><><>');
    dataSource.value = data.info;
  } else {
    notify(desc);
  }
};
queryData();
// defineExpose({ form_value });
</script>
<style lang="less" scoped>
@COOMSIZE: 12px;

.data-record {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;
  width: 100%;
  gap: 10px;

  .msg {
    color: #9f9f9f;
    font-size: 14px;
    // margin: 10px;
  }

  .content {
    width: 100%;
    background: #f6f6f6;
    border-radius: 5px;
    border: 1px solid #b8b8b873;

    .content-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 10px;
      border-bottom: 1px solid #b8b8b873;

      .name {
        font-size: 15px;
      }

      .person-msg {
        font-size: 13px;
        color: #aaaaaa;
        display: flex;
        // flex-direction: column;
        img {
          width: 18px;
        }
        .name {
          margin-right: 10px;
          font-size: 12px;
          img {
            width: 15px;
          }
        }
        .name,
        .date {
          display: flex;
          // flex-direction: column;
          align-items: center;
        }
      }
    }
  }
}
.base-msg {
  display: flex;
  width: 100%;
  // padding: 10px 20px;
  .msg {
    display: flex;
    color: black;
    gap: 5px;
    padding: 6px;
    span {
      border: none;
    }
  }
  span {
    // text-align: center;
    flex: 1;
    font-size: 12px;
    border: 1px solid #c0c4cc60;
    // padding: 3px 10px;
  }
}
.table-box {
  background: #f6f6f6;
  width: 100%;

  .table {
    overflow-y: scroll;

    .table-head {
      position: sticky;
      left: 0;
      top: 0;
      display: flex;
      padding: 0 12px;
      justify-content: space-between;
      line-height: 30px;
      background: #e6eef6;

      .item {
        flex: 1;
        font-size: 12px;
        color: #808080;
        text-align: center;
      }

      .item:last-child {
        flex: 2.5;
      }
    }

    .table-body {
      .item {
        display: flex;
        padding: 0 20px;
        height: 40px;
        font-size: 14px;
        text-align: center;
        background: #ffffff;
        justify-content: space-between;
        align-items: center;

        .ims {
          flex: 1;
        }

        .ims:last-child {
          flex: 2.5;
        }
      }

      .acv {
        background-color: #f6f6f6;
      }
    }

    .no-box {
      height: 300px;
      width: 100%;
      //line-height: 300px;
      text-align: center;
    }
  }
}

.waring-icon {
  width: 50px;
}

.unit {
  color: #b8b8b8 !important;
}
.page-title {
  font-size: 16px;
  font-weight: bold;
  color: black;
}
.source {
  padding: 5px 10px;
  font-size: 12px;
  border-bottom: 1px solid #b8b8b873;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.foot_btn {
  position: fixed;
  display: flex;
  height: 60px;
  width: 100vw;
  bottom: 0;
  left: 0;
  background: #ffffff;
  align-items: center;
  padding: 12px;
  box-sizing: border-box;
  justify-content: space-between;

  .back_btn {
    margin-right: 180px;
  }
}
</style>
