<template>
  <el-main class="bg_white">
    <div class="search_box">
      <el-row class="width_993">
        <el-col :span="18" class="search_left">
          <div class="search_left_title">请输入产品SN码回车查询</div>
          <div class="search_input">
            <el-input v-model="info.inputVal" @keyup="info.inputVal=info.inputVal.replace(/[\u4e00-\u9fff]/g,'')" maxlength="100" placeholder="请输入产品SN码，例如：1037N2YBR6B" @keyup.enter.native="enterClick">
              <template #prefix>
                <el-icon class="el-input__icon" :size="24" color="#BCBFC8"><search/></el-icon>
              </template>
              <template #suffix>
                <el-icon class="el-input__icon" :size="24" color="#B8BABF" @click="clearClick"  v-if="info.inputVal.length > 0"><CircleCloseFilled /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" round @click="queryResults">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="6" class="search_right">
          <img style="width: 218px; height: 120px" src="../../assets/diagram.png" />
        </el-col>
      </el-row>
    </div>
    <div class="result_box" v-if="info.results != null">
      <el-row class="width_993">
        <el-col :span="24" class="result_title">查询结果</el-col>
        <el-col :span="24">
          <div class="no_result" v-if="info.results.length == 0">
            <img style="width: 96px; height: 96px" src="../../assets/empty.png" />
            <p>暂无数据</p>
          </div>
          <div class="result_list" v-else>
            <el-form label-width="205px" label-position="left">
              <el-form-item label="SN码">
                <span>{{info.results.sn}}</span>
              </el-form-item>
              <el-form-item label="物料编码">
                <span>{{info.results.fnumber}}</span>
              </el-form-item>
              <el-form-item label="产品名称">
                <span>{{info.results.name}}</span>
              </el-form-item>
              <el-form-item label="规格型号（SKU）">
                <span>{{info.results.sku}}</span>
              </el-form-item>
              <el-form-item label="生产/采购订单号">
                <span v-if="info.results.porder_sn == '' || info.results.porder_sn == null">--</span>
                <span v-else>{{info.results.porder_sn}}</span>
              </el-form-item>
              <el-form-item label="生产时间">
                <span v-if="info.results.product_time == '' || info.results.product_time == null">--</span>
                <span v-else>{{info.results.product_time}}</span>
              </el-form-item>
              <el-form-item label="入库时间">
                <span v-if="info.results.warehouse_time == '' || info.results.warehouse_time == null">--</span>
                <span v-else>{{info.results.warehouse_time}}</span>
              </el-form-item>
              <el-form-item label="销售订单号">
                <span v-if="info.results.sale_order_sn == '' || info.results.sale_order_sn == null">--</span>
                <span v-else>{{info.results.sale_order_sn}}</span>
              </el-form-item>
              <el-form-item label="销售出库时间">
                <span v-if="info.results.sale_time == '' || info.results.sale_time == null">--</span>
                <span v-else>{{info.results.sale_time}}</span>
              </el-form-item>
              <el-form-item label="客户">
                <span>{{info.results.custom}}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>
<script setup>
import { ElMessage, ElLoading } from 'element-plus'
import { reactive } from 'vue'
import axios from 'axios'
import Request from '@/utils/request.js'

const info = reactive({
  inputVal: '',
  results: null
})
//实例化请求
const request = new Request()
//搜索
const queryResults = () => {
  if (info.inputVal == '') {
    ElMessage({
      type: 'error',
      message: '请输入产品SN码!'
    })
    return false
  }
  let serial_sn = info.inputVal
  request.get('serialno/query', {sn: serial_sn})
    .then(res => {
      if (res.errno == 200) {
        info.results = res.data
      } else {
        ElMessage({
          type: 'error',
          message: res.errmsg
        })
        info.results =[]
      }
    })
}
//回车查询
const enterClick = () => {
  queryResults()
}
//清空搜索框
const clearClick = () => {
  info.inputVal = ''
  info.results = []
}
</script>
<style scoped>
.width_993{
  width: 993px;
  margin: 0 auto;
}
.search_box{
  margin: 65px 64px 0;
  padding-bottom: 32px;
  border-bottom: 1px solid #EDEDED;
}
.search_left_title{
  font-size: 26px;
  font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
}
.search_input{
  display: flex;
  flex-direction: row;
}
.search_right{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
::v-deep(.el-input) {
  width: 540px;
}
::v-deep(.el-button.is-round) {
  width: 151px;
  height: 56px;
  font-size: 16px;
  background: #4178D5;
  border-radius: 28px 28px 28px 28px;
  margin-left: 20px;
}
::v-deep(.el-input--prefix .el-input__inner) {
  padding-left: 50px;
}
::v-deep(.el-input--suffix .el-input__inner) {
  padding-right: 50px;
}
::v-deep(.el-input__inner) {
  font-size: 16px;
  width: 540px;
  height: 56px !important;
  margin-right: 20px;
  background: #FAFAFA !important;
  border-radius: 28px 28px 28px 28px !important;
  border: 1px solid #F5F5F7 !important;
}
::v-deep(.el-icon) {
  /* height: 56px;
  line-height: 56px !important; */
  padding: 16px !important;
}
.result_title{
  padding: 38px 0 24px;
  font-size: 20px;
  font-weight: 400;
  color: #303133;
}
.result_list{
  padding: 56px 100px;
  background: #FAFAFA;
  border-radius: 14px 14px 14px 14px;
  border: 1px solid #EDEDED;
}
::v-deep(.el-form-item__label) {
  font-size: 16px;
  line-height: 20px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #606266;
}
::v-deep(.el-form-item__content) {
  font-size: 16px;
  line-height: 20px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #242527;
}
.no_result{
  width: 993px;
  height: 532px;
  border-radius: 14px 14px 14px 14px;
  border: 1px solid #EDEDED;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.no_result p{
  font-size: 16px;
  font-weight: 400;
  color: #C0C4CC;
}
</style>