<template>
  <div class="page_container">
    <div class="step_title">
      <img src="@/assets/image/equipment/step_1.png" alt="" />
    </div>
    <div class="first_step">
      <div class="form_part">
        <div class="item_title">
          <span class="tit_logo"></span>
          <span>样品信息</span>
        </div>
        <div class="form_item form_item_line">
          <div class="form_title">是否新增样品</div>
          <div class="radio_group">
            <div class="radio_item" v-for="radio of radio_list" @click="changeRadio(radio.value)">
              <svg-icon :name="radio.check ? 'checked' : 'unchecked'" class="radio_icon" />
              <span class="radio_label">{{ radio.label }}</span>
              <div v-show="radio.label == '历史样品'">
                <vxe-select
                  disabledComponents
                  class="select_class"
                  v-show="form_value.is_new_sample == 1"
                  @change="changeHistory"
                  v-model="form_value.history_sample"
                  :disabled="form_value.is_new_sample == 0">
                  <vxe-option
                    v-for="h of history_list"
                    :label="h.label"
                    :value="h.value"></vxe-option>
                </vxe-select>
              </div>
            </div>
          </div>
        </div>
        <div class="form_item" v-show="historicalSamples">
          <div class="form_title required_item">样品名称</div>

          <CommonInput v-model="form_value.name" :inputStyle="inputStyle"></CommonInput>
          <span class="unit"></span>
        </div>
        <div class="form_item" v-show="historicalSamples">
          <div class="form_title">样品编号</div>
          <CommonInput v-model="form_value.specimen_code" :inputStyle="inputStyle"></CommonInput>
          <span class="unit"></span>
        </div>
        <div class="form_item">
          <div class="form_title required_item">样品质量</div>
          <CommonInput
            v-model="form_value.specimen_quantity"
            :inputStyle="inputStyle"
            :inputT="'number'"></CommonInput>
          <span class="unit">g</span>
        </div>
        <div class="form_item" v-show="historicalSamples">
          <div class="form_title required_item">样品厚度</div>
          <CommonInput
            v-model="form_value.specimen_thickness"
            :inputStyle="inputStyle"
            :inputT="'number'"></CommonInput>
          <span class="unit">mm</span>
        </div>
        <div class="form_item">
          <div class="form_title">初始含水量</div>
          <CommonInput
            v-model="form_value.initial_moisture_content"
            :inputStyle="inputStyle"
            :inputT="'number'"></CommonInput>
          <span class="unit">%</span>
        </div>
        <div class="form_item" v-show="historicalSamples">
          <div class="form_title">样品挥发性</div>
          <CommonInput
            v-model="form_value.material_substances"
            :inputStyle="inputStyle"></CommonInput>
          <span class="unit"></span>
        </div>
        <div class="form_item" v-show="historicalSamples">
          <div class="form_title">样品来源</div>
          <CommonInput v-model="form_value.material_source" :inputStyle="inputStyle"></CommonInput>
          <span class="unit"></span>
        </div>
        <div class="form_item" v-show="historicalSamples">
          <div class="form_title">样品描述</div>
          <CommonInput v-model="form_value.material_desc" :inputStyle="inputStyle"></CommonInput>
          <span class="unit"></span>
        </div>
      </div>
      <div class="form_part">
        <div class="item_title form_item_line">
          <span class="tit_logo"></span>
          <span>试验参数</span>
        </div>
        <div class="form_item">
          <div class="form_title required_item">预设热表面温度</div>
          <CommonInput
            v-model="form_value.pre_set_temp"
            @update:modelValue="handleInput"
            :inputStyle="inputStyle"
            :inputT="'number'"></CommonInput>
          <span class="unit">℃</span>
          <span class="tips">最大支持450℃</span>
        </div>
        <div class="form_item">
          <div class="form_title required_item">最大热表面温度</div>
          <CommonInput
            v-model="form_value.max_surf_temp"
            :inputT="'number'"
            :inputStyle="inputStyle"></CommonInput>
          <span class="unit">℃</span>
          <span class="tips">标准建议400℃</span>
        </div>
        <div class="form_item have_tips">
          <div class="form_title">粉尘制作提醒时间</div>
          <CommonInput
            v-model="form_value.dust_pro_remin_time"
            :inputT="'number'"
            :inputStyle="inputStyle"></CommonInput>
          <span class="unit">min</span>
          <span class="tips">标准建议2min</span>
        </div>
        <div class="form_item have_tips">
          <div class="form_title">最大试验时间</div>
          <CommonInput
            v-model="form_value.max_test_time"
            :inputStyle="inputStyle"
            :inputT="'number'"
            height="100"></CommonInput>
          <span class="unit">min</span>
          <span class="tips">标准建议30min</span>
        </div>
      </div>
      <div class="foot_btn">
        <CommonButton
          msg="返回"
          size="default"
          type="info"
          @click="router.push('/home')"></CommonButton>

        <CommonButton msg="添加试验" size="default" type="danger" @click="goNext"></CommonButton>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed ,nextTick} from 'vue';
import { useRouter } from 'vue-router';
import { notify } from '@/utils/message';
import { addExperiment, getHistoryListApi } from '@/api/equipment';
const router = useRouter();
// 输入框样式
const inputStyle = {
  width: '190px',
  height: 100
};
const disabledComponents = computed(() => {
  return ['disableKeyboard'];
});
const form_value = ref({
  specimen_id: '', //实验样品id
  experiment_id: '', //试验id
  user_id: '', //用户id
  user_name: '', //用户昵称
  is_new_sample: '', // 0:历史样品 1:新样
  name: '', //样品名称
  specimen_code: '', //样品编号
  specimen_quantity: '', //样品质量
  specimen_thickness: '', //样品厚度
  specimen_volume: '', //样品体积
  specimen_density: '', //样品密度
  initial_moisture_content: '0', //初始含水量
  material_substances: '', //样品挥发性
  material_source: '', //样品来源
  material_desc: '', //样品描述
  pre_set_temp: '', //预设热表面温度
  max_surf_temp: '400', //最高热表面温度
  dust_pro_remin_time: '2', //粉尘制作提醒时间
  max_test_time: '30', //最大试验时间
  test_standard: '', //试验标准
  dust_layer_thickness: '', //粉尘层厚度
  hot_suff_temp: '', //热表面温度
  test_result: '', //试验结果0:未着火 1:着火
  wzhswdddzdzdsj: '', //未着火时温度达到最大值的时间
  combustion_chara_desc: '', //燃烧特性说明
  knyxjgdys: '', //可能影响试验结果有效性的因素
  hot_suff_temp: '', //可能影响试验结果有效性的因素1:粉尘层制备中的困难;2:加热期间粉尘层变形;3:加热期间粉尘层爆裂;4:加热期间粉尘层融熔;5:受热时产生微量的可燃气体。6:其他补充
  other_desc: '', //其他说明
  history_sample: '' //历史样品
});
let radio_list = ref([
  {
    check: true,
    label: '是',
    value: '0'
  },
  {
    check: false,
    label: '历史样品',
    value: '1'
  }
]);
// 获取历史样品信息
let history_list = ref([]);
let queryHistory = async () => {
  const params = {
    name: '',
    specimen_id: ''
  };
  let res = await getHistoryListApi(params);
  let { data, desc } = res.data;
  if (res?.data?.code !== 200) {
    notify(desc, 'danger');
  } else {
    history_list.value = data.map((item) => {
      return {
        label: item.name + '—' + item.specimen_thickness + 'mm—' + item.experiment_times + '次',
        value: item
      };
    });
  }
};
queryHistory();

// 历史样品隐藏一些东西
let historicalSamples = ref(true);
const changeRadio = (val) => {
  radio_list.value.forEach((item) => {
    if (item.value == val) {
      item.check = true;
    } else {
      item.check = false;
    }
  });
  form_value.value.is_new_sample = val;
  if (val == 0) {
    form_value.value.experiment_id = '';
    form_value.value.specimen_id = '';
  }
  if (val == '1') {
    historicalSamples = false;
    form_value.value.specimen_id = curHistory.value.specimen_id;
  } else {
    historicalSamples = true;
  }
};
let curHistory = ref({})
// 选择历史样品
const changeHistory = ({ value, $event }) => {
  curHistory.value = {...value}
  form_value.value.history_sample =
    value.name + '—' + value.specimen_thickness + 'mm—' + value.experiment_times + '次';
  form_value.value.specimen_thickness = value.specimen_thickness;
  form_value.value.name = value.name;
  form_value.value.specimen_id = value.specimen_id;
  // 添加历史样品上面其他字段默认填充
  form_value.value.specimen_code = value.specimen_code;
  form_value.value.material_substances = value.material_substances;
  form_value.value.material_source = value.material_source;
  form_value.value.material_desc = value.material_desc;

};
const goNext = async () => {
  // 必填校验
  if (!form_value.value.name) {
    return notify('请填写样品名称！');
  }
  if (!form_value.value.specimen_quantity) {
    return notify('请填写样品质量！');
  }
  if (!form_value.value.specimen_thickness) {
    return notify('请填写样品厚度！');
  }
  if (!form_value.value.pre_set_temp) {
    return notify('请填写预设热表面温度！');
  }
  if (!form_value.value.max_surf_temp) {
    return notify('请填写最大热表面温度！');
  }
  let res = await addExperiment({ items: form_value.value });
  let { data, desc } = res.data;
  if (res?.data?.code !== 200) {
    notify(desc, 'danger');
  } else {
    notify(desc, 'success');
    form_value.value.experiment_id = data.experiment_id;
  }
  router.push({
    path: '/test1/secondStep',
    query: {
      route_info: JSON.stringify({ id: data.experiment_id })
    }
  });
};
const handleInput = async (e) => {
  if (e * 1 > 450) {
   await nextTick()
    form_value.value.pre_set_temp = '450';
  }
};
</script>
<style lang="less" scoped>
@COOMSIZE: 40px;
.page_container {
  position: relative;
  width: 100%;
  overflow: auto;
  .step_title,
  .item_title {
    font-size: 48px;
    font-weight: bold;
    color: #3a3a3a;
    img {
      width: 1005px;
      position: absolute;
      left: -50px;
      // top: 75px;
    }
    .tit_logo {
      display: inline-block;
      width: 10px;
      height: 64px;
      background: linear-gradient(180deg, #ff7b83 0%, #850006 100%);
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.4);
      border-radius: 8px 8px 8px 8px;
      position: relative;
      top: 12px;
      margin-right: 16px;
    }
  }
  .item_title {
    margin-bottom: 10px;
  }
  .first_step {
    margin-top: 130px;
    padding: (@COOMSIZE*1.5);
    padding-top: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
    height: calc(100% - 300px);
    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;
    }
    .suffix {
      position: absolute;
      right: 6px;
      color: #b8b8b8;
    }
    .form_part {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      .form_item {
        font-size: @COOMSIZE*0.9;
        display: flex;
        align-items: center;
        color: #666666;
        // margin-bottom: @COOMSIZE;
        min-width: 48%;
        justify-content: right;
        position: relative;
        .select_class {
          width: 400px;
          height: 100px;
          :deep(.vxe-input) {
            height: 100%;
            font-size: 40px;
          }
          :deep(.vxe-select-option) {
            height: 80px;
            font-size: 40px;
            line-height: 80px;
          }
        }
        .form_title {
          margin-right: 20px;
        }
        .required_item::before {
          content: '*';
          color: red;
          size: 36px;
        }
        .unit {
          width: 60px;
          height: 45px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 40px;
          color: #b8b8b8;
          line-height: 40px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: 20px;
        }
        .tips {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 32px;
          color: #b8b8b8;
          line-height: 0px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          position: absolute;
          top: 120px;
          left: 360px;
        }
      }
      .have_tips {
        margin-top: @COOMSIZE;
      }
      :last-child {
        margin-right: 0;
      }
      .form_item_line {
        width: 100%;
        justify-content: flex-start;
      }
      .radio_group {
        display: flex;
        align-items: center;
        .radio_item {
          display: flex;
          align-items: center;
          margin-right: 26px;
          .radio_icon {
            margin-right: 11px;
          }
          .radio_label {
            margin-right: 20px;
          }
        }
      }
      .des_area {
        width: 100%;
      }
    }
    .foot_btn {
      width: 100%;
      position: fixed;
      display: flex;
      width: 100vw;
      bottom: 0;
      left: 0;
      align-items: center;
      justify-content: space-between;
      padding: @COOMSIZE;
      padding-bottom: (@COOMSIZE / 2);
      .back_btn {
        margin-right: 180px;
      }
    }
  }
}
</style>
