<template>
  <div class="first_step">
    <div class="step_title">{{ title }} - 准备</div>
    <div class="form_part">
      <div class="form_item">
        <div class="form_title">样品名称</div>
        <CommonInput width="315" v-model="form_value.name" />
      </div>
      <div class="form_item">
        <div class="form_title">单次试验时长</div>
        <CommonInput width="315" v-model="form_value.simple_time">
          <template #suffix>
            <span class="suffix">s</span>
          </template>
        </CommonInput>
      </div>
      <div class="form_item">
        <div class="form_title">样品编号</div>
        <CommonInput width="315" v-model="form_value.experiment_code"></CommonInput>
      </div>
      <div class="form_item">
        <div class="form_title">样品类型</div>
        <vxe-select
          v-disableKeybord="disabledComponents"
          v-model="form_value.material_type"
          class="select_class">
          <vxe-option
            v-for="op of mat_options"
            :key="op.label"
            :label="op.label"
            :value="op.value"></vxe-option>
        </vxe-select>
      </div>
      <div class="form_item">
        <div class="form_title">试验类型</div>
        <vxe-select
          v-disableKeybord="disabledComponents"
          v-model="form_value.experiment_type"
          class="select_class"
          @change="selectType">
          <vxe-option
            v-for="op of exp_options"
            :key="op.label"
            :label="op.label"
            :value="op.value"></vxe-option>
        </vxe-select>
      </div>

      <div class="form_item">
        <div class="form_title">点火方式</div>
        <vxe-select
          v-disableKeybord="disabledComponents"
          v-model="form_value.fire_type"
          class="select_class">
          <vxe-option
            v-for="op of firet_options"
            :key="op.label"
            :label="op.label"
            :value="op.value"></vxe-option>
        </vxe-select>
      </div>
      <div class="form_item">
        <div class="form_title">备注信息</div>
        <CommonInput width="825" v-model="form_value.bzxx"></CommonInput>
      </div>
    </div>
    <div style="visibility: hidden">占位符</div>
    <div class="footer_btn">
      <CommonButton
        msg="返回"
        size="default"
        paddingLeft="45"
        paddingRight="45"
        type="info"
        @click="router.go(-1)"></CommonButton>
      <CommonButton
        msg="下一步"
        size="default"
        paddingLeft="33"
        paddingRight="33"
        type="danger"
        @click="goNext"></CommonButton>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { isEmpty } from '@/utils/index';
import { notify } from '@/utils/message';
import { insertExperimentApi } from '@/api/experiment';
const router = useRouter();
const route = useRoute();
let { path, query } = route;
let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
let { userId, userName } = userInfo || {};
//自定义试验为true
let title = ref('试验O.1菜单');
if (query.data == 1) {
  console.log('1');
  title.value = '试验O.1菜单';
} else if (query.data == 3) {
  console.log('3');
  title.value = '试验O.3菜单';
}
const disabledComponents = computed(() => {
  return ['disableKeyboard'];
});

const exp_options = [
  {
    value: '1',
    label: '正式试验'
  },
  {
    value: '2',
    label: '参考试验'
  }
];
const mat_options = ref([
  {
    value: '1-1',
    label: '样品与纤维素重量1:1'
  },
  {
    value: '4-1',
    label: '样品与纤维素重量4:1'
  }
]);
const firet_options = ref([
  {
    value: '自动点火',
    label: '自动点火'
  },
  {
    value: '遥控点火',
    label: '遥控点火'
  },
  {
    value: '延时点火',
    label: '延时点火'
  }
]);
const selectType = (val) => {
  console.log(val.value);
  if (val.value == '1') {
    // firet_options.value = [
    //   {
    //     value: '2',
    //     label: '自动点火'
    //   },
    //   {
    //     value: '3',
    //     label: '遥控点火'
    //   },
    //   {
    //     value: '6',
    //     label: '延时点火'
    //   }
    // ];
    // form_value.value.fire_type = '2';
    mat_options.value = [
      {
        value: '1-1',
        label: '样品与纤维素重量1:1'
      },
      {
        value: '4-1',
        label: '样品与纤维素重量4:1'
      }
    ];
    form_value.value.material_type = '1-1';
  } else if (val.value == '2') {
    // firet_options.value = [
    //   {
    //     value: '4',
    //     label: '自动点火'
    //   },
    //   {
    //     value: '5',
    //     label: '遥控点火'
    //   },
    //   {
    //     value: '7',
    //     label: '延时点火'
    //   }
    // ];
    // form_value.value.fire_type = '4';
    // O.1试验
    if (query.data == 1) {
      mat_options.value = [
        {
          value: '3-2',
          label: '溴酸钾与纤维素重量3:2'
        },
        {
          value: '2-3',
          label: '溴酸钾与纤维素重量2:3'
        },
        {
          value: '3-7',
          label: '溴酸钾与纤维素重量3:7'
        }
      ];
      form_value.value.material_type = '3-2';
    } else if (query.data == 3) {
      //
      mat_options.value = [
        {
          value: '3-1',
          label: '过氧化钙与纤维素重量3:1'
        },
        {
          value: '5-5',
          label: '过氧化钙与纤维素重量1:1'
        },
        {
          value: '1-2',
          label: '过氧化钙与纤维素重量1:2'
        }
      ];
      form_value.value.material_type = '3-1';
    }
  }
};
const form_value = ref({
  experiment_code: '', //试验样品编号
  experiment_type: '1', //试验类型
  user_id: userId || '', //用户id(可传空)
  user_name: userName || '', //用户名(可传空)
  name: '', //试验物质名称
  material_type: '1-1', //样品类型
  fire_type: '自动点火', //点火方式
  simple_time: '180', //单次试验时长
  bzxx: '' // 备注信息
});
const goNext = async () => {
  let is_empty = isEmpty(form_value.value, ['user_id', 'user_name', 'bzxx']);
  if (is_empty) return notify('请将信息填写完整后，再进行下一步！');
  console.log(is_empty, '////');

  console.log(form_value.value, '----------');
  if (form_value.value.experiment_type == '1') {
    if (form_value.value.fire_type == '自动点火') {
      form_value.value.fire_type = '2';
    } else if (form_value.value.fire_type == '遥控点火') {
      form_value.value.fire_type = '3';
    } else if (form_value.value.fire_type == '延时点火') {
      form_value.value.fire_type = '6';
    }
  } else if (form_value.value.experiment_type == '2') {
    if (form_value.value.fire_type == '自动点火') {
      form_value.value.fire_type = '4';
    } else if (form_value.value.fire_type == '遥控点火') {
      form_value.value.fire_type = '5';
    } else if (form_value.value.fire_type == '延时点火') {
      form_value.value.fire_type = '7';
    }
  }
  if (query.data == 3) {
    form_value.value.experiment_type = form_value.value.experiment_type == '1' ? '3' : '4';
  }

  let response = await insertExperimentApi({ items: form_value.value });

  console.log(response);
  let { code, data, desc } = response.data;
  if (code == 200) {
    let experiment_id = data.experiment_id;

    router.push({
      path: '/equipment/secondStep',
      query: {
        experiment_id: experiment_id,
        material_type: form_value.value.material_type,
        simple_time: form_value.value.simple_time,
        fire_type: form_value.value.fire_type,
        data: query.data
      }
    });
  } else {
    notify(desc);
  }
  form_value.value.experiment_type = '1';
  form_value.value.fire_type = '自动点火';
};
</script>
<style lang="less" scoped>
@COOMSIZE: 16px;
.first_step {
  padding: 12px;
  border-radius: 2px 2px 2px 2px;
  width: 100%;
  box-sizing: border-box;
  .step_title {
    font-size: @COOMSIZE;
    font-weight: bold;
    color: #3a3a3a;
  }
  .suffix {
    position: absolute;
    right: 6px;
    color: #b8b8b8;
  }
  .form_part {
    margin: 20px 0 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .form_item {
      font-size: @COOMSIZE;
      display: flex;
      align-items: center;
      color: #666666;
      margin-bottom: 20px;
      .select_class {
        width: 200px;
      }
      .form_title {
        margin-right: 8px;
      }
    }
  }
  .footer_btn {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #ffffff;
    justify-content: space-between;
    padding: 4px 4px 12px;
    z-index: 100;
  }
  ::v-deep .vxe-input {
    width: 200px;
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 4px 4px 4px 4px;
    background: #ffffff;
    display: flex;
    align-items: center;
    font-size: 16px;

    .vxe-input--inner {
      border: 0 !important;
      width: 100%;
      box-sizing: border-box;
      padding: 0;
    }
  }
}
</style>
