<template>
  <div class="third-step">
    <div class="step_title">
      <img src="@/assets/image/equipment/step_3.png" alt="" />
    </div>
    <div class="result_info step_class">
      <div class="info_title">
        <div class="left_part">
          <div>样品名称：{{ form_value.name }}</div>
        </div>
        <div class="left_part right_part">
          <div class="operator">
            <svg-icon name="operator" />
            <div>{{ userInfo.user_name }}</div>
          </div>
          <div class="operator">
            <svg-icon name="time" />
            <div>{{ form_value.created_time }}</div>
          </div>
        </div>
      </div>
      <div class="table_part">
        <div class="table_item">
          <div>
            质量：{{
              form_value.specimen_quantity ? (form_value.specimen_quantity * 1).toFixed(2) : ''
            }}g
          </div>
          <div>
            初始含水量：{{
              form_value.initial_moisture_content
                ? (form_value.initial_moisture_content * 1).toFixed(2)
                : 0
            }}%
          </div>
          <div>
            体积：{{
              form_value.specimen_volume ? (form_value.specimen_volume / 1000).toFixed(2) : ''
            }}cm³
          </div>
          <div>
            密度：{{
              form_value.specimen_density ? (form_value.specimen_density * 1000).toFixed(2) : ''
            }}g/cm³
          </div>
        </div>
        <div class="table_item">
          <div>样品已知挥发性：{{ form_value.material_substances }}</div>
          <div>样品来源：{{ form_value.material_source }}</div>
          <div class="table_item_col">
            初热表面预设温度：{{
              form_value.pre_set_temp ? (form_value.pre_set_temp * 1).toFixed(2) : ''
            }}℃
          </div>
        </div>
        <div class="table_item">
          <div class="table_item_describe">样品描述：{{ form_value.material_desc }}</div>
        </div>
        <div class="table_item table_item_end">
          <div>
            粉尘层厚度
            <span>
              {{
                form_value.specimen_thickness ? (form_value.specimen_thickness * 1).toFixed(2) : ''
              }}
              <span>mm</span>
            </span>
          </div>
          <div>
            粉尘层温度
            <span>
              {{
                form_value.dust_layer_temp ? (form_value.dust_layer_temp * 1).toFixed(2) : ''
              }}
              <span>℃</span>
            </span>
          </div>
          <div>
            热表面温度
            <span>
              {{ form_value.hot_suff_temp ? (form_value.hot_suff_temp * 1).toFixed(2) : '' }}
              <span>℃</span>
            </span>
          </div>
          <div>
            试验结果
            <span>
              {{
                form_value.test_result == 0 ? '未着火' : form_value.test_result == 1 ? '着火' : ''
              }}
            </span>
          </div>
          <div>
            未着火时温度达到最大值的时间
            <span>
              {{ form_value.wzhswdddzdzdsj ? (form_value.wzhswdddzdzdsj * 1).toFixed(2) : '' }}
              <span></span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="table_container">
      <div class="form_item">
        <div class="form_title">燃烧特性说明（如有）</div>
        <CommonInput
          :inputStyle="inputStyle"
          v-model="form_value.combustion_chara_desc"></CommonInput>
      </div>
      <div class="form_item">
        <div class="form_title">可能影响试验结果有效性的因素（如有）</div>
        <vxe-select
          disabledComponents
          class="select_class"
          v-model="selectknyxjgdys"
          clearable
          multiple>
          <vxe-option
            v-for="item in knyxjgdys"
            :key="item.value"
            :value="item.value"
            :label="item.label">
            {{ item.label }}
          </vxe-option>
        </vxe-select>
      </div>
      <div class="form_item">
        <div class="form_title">其他补充（如有）</div>
        <CommonInput :inputStyle="inputStyle" v-model="form_value.other_desc"></CommonInput>
      </div>
    </div>
    <div class="table_container_chart">
      <div id="observationEnd"></div>
    </div>
    <div class="footer_btn">
      <CommonButton msg="返回" size="default" type="info" @click="router.push('/home')" />
      <CommonButton msg="保存结果" size="default" type="danger" @click="saveFile" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { updateExperimentApi, getExperimentDetailApi } from '@/api/equipment.js';
import { notify } from '@/utils/message.js';
import * as echarts from 'echarts';
import { id } from 'element-plus/es/locales.mjs';

const disabledComponents = computed(() => {
  return ['disableKeyboard'];
});
let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
let inputStyle = {
  width: 1072,
  height: 100
};
let route = useRoute();
let router = useRouter();
let routerInfo = ref(JSON.parse(route.query.route_info));
const form_value = ref({
  dust_layer_temp: '', //粉尘层温度"
  hot_suff_temp: '', //粉尘层温度"
  test_result: '', //试验结果# 0:未着火 1:着火
  wzhswdddzdzdsj: '', //未着火时温度达到最大值的时间
  material_substances: '', //"燃烧特性说明
  knyxjgdys: [], //可能影响试验结果有效性的因素
  other_desc: '', //其他补充
  experiment_id: '' //试验编号
});
const knyxjgdys = ref([
  { label: '粉尘层制备中的困难', value: 1 },
  { label: '加热期间粉尘层变形', value: 2 },
  { label: '加热期间粉尘层爆裂', value: 3 },
  { label: '加热期间粉尘层融熔', value: 4 },
  { label: '受热时产生微量的可燃气体', value: 5 },
  { label: '其他补充', value: 6 }
]);
const selectknyxjgdys = ref([]);
// 保存
const saveFile = async () => {
  form_value.value.knyxjgdys = selectknyxjgdys.value.join(',');
  let param = {
    id: routerInfo.value.id,
    items: form_value.value
  };
  let res = await updateExperimentApi(param);
  if (res.data.code == 200) {
    notify('保存成功', 'success');
  } else {
    notify(res.data.desc);
  }
  router.push({
    path: '/home'
  });
};

// 试验观察过程
let charts = null;
let optionList = {
  opt1: [],
  opt2: [],
  opt3: [],
  datax: []
};
let option = ref({
  title: {
    itemStyle: {
      borderWidth: 0
    }
  },
  grid: {
    left: '8%',
    top: '10%',
    bottom: '10%',
    right: '5%',
    containLabel: true,
    show: true
  },
  xAxis: {
    show: true, //是否显示 x 轴
    type: 'category', //坐标轴类型        (可选value   category   time   log)
    name: '时间/s', //坐标轴名称
    nameLocation: 'center', //坐标轴名称显示位置
    nameGap: 30,
    nameTextStyle: {
      fontSize: 20
    },
    axisLabel: {
      show: true, //是否显示
      inside: false, //坐标轴刻度文字指向        (true表示向上   false表示向下)
      margin: 10, //坐标轴刻度文字与轴线之间的距离
      fontSize: 17, //坐标轴刻度文字的大小         (用数字表示)
      padding: [5, 0, 2, -5] //坐标轴刻度文字的边距        (上右下左)
    },
    splitLine: {
      show: true, //是否显示
      lineStyle: {
        color: '#B8B8B8', //网格线颜色
        width: 1, //网格线的加粗程度
        type: 'soild' //网格线类型
      }
    },
    data: [] //坐标轴刻度文字数据
  },
  yAxis: [
    {
      name: '温度/℃',
      type: 'value',
      show: true,
      position: 'left',
      nameLocation: 'middle',
      nameGap: 30,
      nameTextStyle: {
        fontSize: 20
      },
      gridIndex: 0,
      min: 0,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  series: [
    {
      type: 'line',
      name: '粉尘层温度',
      smooth: true,
      data: [],
      lineStyle: {
        color: '#1D8EFF', // 折线颜色
        width: 2
      },
      symbol: 'none'
    },
    {
      type: 'line',
      name: '热表面温度',
      smooth: true,
      data: [],
      lineStyle: {
        color: '#3A3A3A ', // 折线颜色
        width: 2,
        // type: 'dashed' // 设置为虚线
      },
      symbol: 'none'
    },
    {
      type: 'line',
      name: '高于热表面250℃',
      smooth: true,
      data: [],
      lineStyle: {
        color: '#CF4A4A', // 折线颜色
        width: 2,
        // type: 'dashed' // 设置为虚线
      },
      symbol: 'none'
    }
  ],
  legend: {
    data: ['粉尘层温度', '热表面温度', '高于热表面250℃'],
    textStyle: {
      color: '#333',
      fontSize: 15
    },
    itemStyle: {
      opacity: 0
    }
  }
});
onMounted(() => {
  charts = echarts.init(document.getElementById('observationEnd'));
  charts.setOption(option.value);
});
// 获取详情
const getDetail = async () => {
  let res = await getExperimentDetailApi(routerInfo.value.id);
  form_value.value = res?.data?.data?.experiment_obj;
  if (res?.data?.data?.base_data.length > 0) {
    res.data.data.base_data.forEach((item) => {
      if (item[0] == 4) {
        optionList.opt1.push((item[4] * 1).toFixed(2));
        optionList.opt2.push((item[2] * 1).toFixed(2));
        optionList.opt3.push((item[2] * 1 + 250).toFixed(2));
        optionList.datax.push((item[6] * 1).toFixed(0));
      }
    });
    option.value.series[0].data = optionList.opt1;
    option.value.series[1].data = optionList.opt2;
    option.value.series[2].data = optionList.opt3;
    option.value.xAxis.data = optionList.datax;
    charts.setOption(option.value);
  }
  // charts.setOption(option.value);
};
getDetail();
</script>
<style lang="less" scoped>
@COOMSIZE: 40px;
.third-step {
  width: 100%;
  position: relative;
  // height: 100%;
  // margin-bottom: 160px;
  overflow: auto;
  .step_title {
    font-size: 48px;
    font-weight: bold;
    color: #3a3a3a;
    margin-left: 22px;
    margin-bottom: 12px;
    img {
      width: 1005px;
      position: absolute;
      left: -48px;
    }
  }
  .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;
        }
        .table_item_col {
          width: 919px !important;
        }
        :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;
        }
      }
      .table_item_end {
        div {
          height: 142px;
          span {
            display: block;
            margin-top: 12px;
            font-size: 40px;
            span {
              display: inline-block;
              width: 100px !important;
              font-size: 30px;
              color: #b8b8b8;
            }
          }
        }
        :nth-child(1) {
          width: 300px;
        }
        :nth-child(2) {
          width: 300px;
        }
        :nth-child(3) {
          width: 300px;
        }
        :nth-child(4) {
          width: 300px;
        }
        :nth-child(5) {
          width: 633px;
        }
        
      }
    }
  }
  .step_class {
    margin-top: 120px;
  }
  .table_container,
  .table_container_chart {
    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: 200px;
    padding-top: 40px;

    .form_item {
      display: flex;
      justify-content: flex-end;
      height: 130px;
      margin-right: 40px;
      .form_title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 36px;
        color: #666666;
        line-height: 90px;
      }
      .select_class {
        width: 1072px;
        height: 100px;
        :deep(.vxe-input) {
          height: 100%;
          font-size: 40px;
        }
        :deep(.vxe-select-option) {
          height: 80px;
          font-size: 40px;
          line-height: 80px;
        }
      }
    }
  }
  .table_container_chart {
    height: 600px;
    #observationEnd {
      width: 1840px;
      height: 600px;
    }
  }
  .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;
}
</style>
