<!-- 贵细页面 -->
<template>
  <div class="examination">
    <div>
      <el-row style="margin-top: 50px;">
        <el-col :span="4">
          <h3 class="title">主称</h3>
        </el-col>
        <el-col :span="8">
          <div>
            <span class="weight common">
              <input class="winput" v-model="value" />
            </span>
            <span class="common unit">g</span>
          </div>
          <div class="tpNum">
            <span>天平编号：</span>
            <span>45678334</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <div class="wbox succbox">稳定</div>
            <el-button icon="el-icon-check" style="margin-top: 17px;" type="goon" size="mini">确认</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <hr>
    <div>
      <el-row style="margin-top: 50px;">
        <el-col :span="4">
          <h3 class="title">复秤</h3>
        </el-col>
        <el-col :span="8">
          <div>
            <span class="weight common">
              <input class="winput" v-model="value" />
            </span>
            <span class="common unit">g</span>
          </div>
          <div class="tpNum">
            <span>天平编号：</span>
            <span>45678334</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <div class="wbox warnbox">不稳</div>
            <el-button icon="el-icon-check" style="margin-top: 17px;" type="goon" size="mini">确认</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <hr>
    <el-form  :inline="true" ref="searchForm" :model="searchForm" class="demo-form-inline sui-search-form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="产品名称">
           <el-select v-model="searchForm.type" size="small" placeholder="请选择活动区域">  <el-option label="区域一" value="shanghai"></el-option>  <el-option label="区域二" value="beijing"></el-option></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品牌号">
           <el-select v-model="searchForm.type" size="small" placeholder="请选择活动区域">  <el-option label="区域一" value="shanghai"></el-option>  <el-option label="区域二" value="beijing"></el-option></el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="序号信息">
            <el-input v-model="searchForm.matName" size="small" placeholder="请输入查询内容" style="width: 200px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="批次信息">
            <el-input v-model="searchForm.matName" size="small" placeholder="请输入查询内容" style="width: 200px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchForm: {
        type: '',
        matName: '',
        times:''
      },
      value:'',
      theight1: 0,
      theight2: 0,
      theight3: 0,
      tableLoading1:false,
      tableLoading2:false,
      tableLoading3:false,
      tableData1:[],
      tableData2:[],
      tableData3:[],
      pageIndex: 1,
      pageSize:100,
      total_main:0,
      icoreFilterFlag: true,
      
    }
  },
  created() {
    this.theight1 = window.innerHeight - 155;
    this.theight2 = window.innerHeight / 2 - 110;
    this.theight3 = window.innerHeight / 2 - 110;
  },
 mounted () {
  },
  methods: {
    getYNM(date) {
      let year = date.getFullYear().toString();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      return `${year}-${month}-${day}`;
    },
    getSummaries2(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
        }
        if (index === 1) {
          sums[index] = data.length;
        } else if (column.property === "quantity") {
          let val = 0;
          for (let i in data) {
            val = this.floatComputed(
              data[i].quantity ? data[i].quantity : 0,
              val,
              "+"
            );
          }
          sums[index] = val;
        } else if (column.property === "factweight") {
          let val = 0;
          for (let i in data) {
            val = this.floatComputed(
              data[i].factweight ? data[i].factweight : 0,
              val,
              "+"
            );
          }
          sums[index] = val;
        }
      });
      return sums;
    },
    searchData () {
      console.log(this.searchForm.times,'times');
    },
    // 异常跳转
    abnormal(){
      // this.$router.push({name: 'abnormalAudit',params:{ id:'6'}});
    },
    handleSizeChangeMain(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.searchTableData();
    },
    handleCurrentChangeMain(pageIndex) {
      this.pageIndex = pageIndex;
      this.searchTableData();
    },
    tableHeaderCellStyle () {
      return 'color: rgb(255,255,255);border-bottom: 1px solid #DCDFE7;'
    }
  }
}
</script>
<style  scoped>
.wbox{
  width: 65px;
  height: 65px;
  font-size: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 65px;
}
.common{
  display: inline-block;
  line-height: 70px;
  background-color: #00D8F8;
  height: 70px;
}
.weight{
  width: 80%x;
  text-align: right;
  /* padding-right: 10px; */
}
.weight .winput{
  height: 100%;
  width: 100%;
  background-color: #00D8F8;
  border: 0;
  padding:0;
  text-align: center;
  font-size:20px;
  color: #0004FD;
}
.winput:focus{
  outline: none;
}
.unit{
  width: 60px;
  font-size:20px;
  color: #00AAF1;
  text-align: center;
}
.title{
  font-weight: bold;
  font-size: 30px;
  line-height: 70px;
  text-align: center;
}
.tpNum{
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.succbox{
  background-color: #00D04B;
}
.warnbox{
  background-color: red;
}
</style>
