<template>
  <div class="app-container">
    <div class="info">
      <div class="title">检测信息</div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="仓房名称" prop="houseCode">
              <el-input v-model="form.houseCode"></el-input>
            </el-form-item>
            <el-form-item label="粮食品种" prop="grainTypeCode">
              <el-input v-model="form.grainTypeCode"></el-input>
            </el-form-item>
            <el-form-item label="最高温" prop="maxTemp">
              <el-input v-model="form.maxTemp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" prop="houseCode">
            <el-form-item label="仓房类型">
              <el-input v-model="form.type"></el-input>
            </el-form-item>
            <el-form-item label="粮食性质" prop="grainAttributeCode">
              <el-input v-model="form.grainAttributeCode"></el-input>
            </el-form-item>
            <el-form-item label="最低温" prop="minTemp">
              <el-input v-model="form.minTemp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="table">
        <table cellspacing="0" style="width:100%" class="table">
          <tr>
            <th class="th" v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
            <td v-for="(context, i) in option.column" :key="i">{{ item[context.tableDataprop] }}</td>
          </tr>
        </table>

      </div>
      <el-footer style="height: 41px;">
        <el-button type="primary" class="footerBtn" @click="back">返 回</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
import { getTemperatureItem } from '@/api/grainDetection/grainTemperatureDetection/index'
export default {
  data () {
    return {
      form: {
        name: '1号仓',
        variety: '60',
        grade: '30',
        type: '20122200202',
        property: '13',
        number: '30000'
      },
      tableData: [
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "1",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "2",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "3",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "4",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "5",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "6",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "7",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "8",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "9",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "10",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "11",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "12",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "13",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "14",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "15",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "16",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "17",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "18",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "19",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "20",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "21",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "22",
          totalPrice: 0
        },
      ],
      option: {
        column: [
          {
            label: '杆号',
            tableDataprop: 'roomType',

          },
          {
            label: '1',
            tableDataprop: 'closedAccount'
          },
          {
            label: '2',
            tableDataprop: 'noAccount'
          },
          {
            label: '3',
            tableDataprop: 'givePrice'
          },
          {
            label: '4',
            tableDataprop: 'totalPrice'
          },
          {
            label: '杆号',
            tableDataprop: 'roomType',

          },
          {
            label: '1',
            tableDataprop: 'closedAccount'
          },
          {
            label: '2',
            tableDataprop: 'noAccount'
          },
          {
            label: '3',
            tableDataprop: 'givePrice'
          },
          {
            label: '4',
            tableDataprop: 'totalPrice'
          },
        ]
      },
    }
  },
  created () {
    // console.log(this.$route.query, 'query')
    // this.form = this.$route.params.data
  },
  mounted () {
    console.log(this.$route.params.data, 'this.$route.params.data')
    this.form = this.$route.params.data
    // if (this.$route.params.data.id) {
    //   console.log('cunzaiid')
    //   this.getDetail()
    // }
  },
  methods: {
    getDetail () {
      let id = this.$route.params.data.id
      getTemperatureItem(id).then(res => {
        console.log(res, 'getTemperatureItem')
        if (res.code == 200) {

        }
      }).catch(err => {
        console.log(err)
      })
    },
    back () {
      this.$router.push({ name: "GrainTemperatureDetection" })
    }
  }
}
</script>
<style lang='scss' scoped>
.info {
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  .title {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
  }
  .el-form {
    margin-top: 15px;
  }
}
.table {
  border-radius: 0.185185rem;
}
.th {
  height: 1.074074rem;
  line-height: 1.074074rem;
  background-color: #1d9eef;
  text-align: center;
  // border: 1px solid #000;
}
.list-tr {
  height: 1.074074rem;
  line-height: 1.074074rem;
  border: 1px solid #000;
}
// .list-tr:nth-child(2n) {
//   /*background-color: #33333b;*/
// }
td {
  text-align: center;
}
::v-deep .el-input__inner {
  text-align: center;
}
.el-footer {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  // background-color: #fff;
  width: 100%;
  // height: 41px;
  // line-height: 41px;
  // background: #e5e5e7;
  color: #888;
  font-weight: 500;
  font-family: Source Han Sans CN;
  font-size: 14px;
  text-align: center;
  // position: absolute;
  // bottom: 30px;
  z-index: 9999;
  .footerBtn {
    width: 300px;
    border-radius: 20px;
  }
}
</style>
