<template>
    <div class="shiyan-page BaseApp-page">
      <main class="BaseApp-page-main">
        <div class="shiyan-inner">
          <div class="shiyan-article-title">
            <div class="shiyan-article-title__icon"></div>
            样品信息
          </div>
          <article class="shiyan-article">
          
            <div class="shiyan-article-item">
              <div class="shiyan-article-item__label">样品名称</div>
              <div class="shiyan-article-item__value">
                <CommonInput v-model="formData.name" size="medium"></CommonInput>
              </div>
            </div>
            <div  class="shiyan-article-item">
              <div class="shiyan-article-item__label">电池型号</div>
              <div class="shiyan-article-item__value">
                <CommonInput v-model="formData.model" size="medium"></CommonInput>
              </div>
            </div>
        
  
            <div class="shiyan-article-item">
              <div class="shiyan-article-item__label">样品编号</div>
              <div class="shiyan-article-item__value">
                <CommonInput v-model="formData.code" size="medium"></CommonInput>
              </div>
            </div>
            <div class="shiyan-article-item">
                <div class="shiyan-article-item__label">电池规格</div>
                <div class="shiyan-article-item__value">
                <vxe-select
                    disabledComponents
                    v-model="formData.spec"
                    class="BaseApp-select"
                    @change="changeHistoryHandler">
                    <vxe-option
                    v-for="item in specificationList"
                    :key="item"
                    :value="item"
                    :label="item"></vxe-option>
                </vxe-select>
                </div>
            </div>
            <div class="shiyan-article-item">
              <div class="shiyan-article-item__label">电池厂家</div>
              <div class="shiyan-article-item__value">
                <CommonInput v-model="formData.company" size="medium"></CommonInput>
              </div>
            </div>
          </article>
       
        </div>
      </main>
      <footer class="BaseApp-page-footer">
        <div class="BaseApp-btn" @click="goBack(false)">返回</div>
        <div class="right-btns">
          <div class="BaseApp-btn BaseApp-btn--primary" @click="saveMsg()">保存</div>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup >
  import { reactive, ref, computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { notify } from '../../utils/message.js';
  import { addSampleApi} from '../../api/experiment.js';
  const router = useRouter();
  console.log(router.currentRoute.value.query);
  let formData = reactive({

  });

  onMounted(() => {
    Object.assign(formData, router.currentRoute.value.query);
  })
  let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));

  
  const specificationList = [
    '大型号','中型号','小型号'
  ]
  const goBack = (type) => {
    if(type){
      router.push({
        name: 'jiya_first',
        query: {
          ...formData,
        }
      })
    }else{
      router.go(-1);
    }
  
  };
  const saveMsg = () => {
    let res = addSampleApi(formData);
    console.log(res);
  }

  </script>
  
  <style lang="less" scoped>
  .shiyan-page {
    font-size: 20px;
    color: #666666;
    .BaseApp-page-main {
      overflow: hidden;
    }
    .shiyan-inner-tabs {
      display: flex;
      flex-direction: row;
      margin-right: 15px;
      border-bottom: 1px solid #cccccc;
      .shiyan-inner-tabs-item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 169px;
        height: 57px;
        margin-right: 5px;
        background: #f6f6f6;
        border: 1px solid #cccccc;
        border-bottom: none;
        font-weight: bold;
        font-size: 24px;
        color: #999999;
        &.active {
          color: #3a3a3a;
          &::after {
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 5px;
            content: '';
            background-color: #f6f6f6;
          }
        }
      }
    }
    .shiyan-inner {
      padding: 20px;
      background: #f6f6f6;
      border: 1px solid #cccccc;
      border-top: none;
      border-radius: 0px 12px 12px 12px;
      .shiyan-article-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: bold;
        font-size: 24px;
        color: #3a3a3a;
        .shiyan-article-title__icon {
          width: 6px;
          height: 28px;
          margin-right: 25px;
          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;
        }
      }
      .shiyan-article {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 15px;
        .shiyan-article-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 50%;
          margin-top: 20px;
          &:nth-child(2n) {
            justify-content: flex-end;
          }
          .shiyan-article-item__value {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: 20px;
          }
        }
      }
    }
  }
  .input-unit {
    margin-left: -80px;
    z-index: 999;
    color: darkgray;
  }
  .right-btns {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .BaseApp-btn {
      margin-left: 20px;
    }
  }
  </style>