<template>
  <div>
    <d2-container>
      <template slot="header">
        <div class="title">
          <div class="titleLeft">首页/仓房详情</div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              @click="goBack()"
              >返回</el-button
            >
          </div>
        </div>
      </template>
      <div class="main">
        <div class="head">
          <div class="backImg"></div>
          <div>保管员信息</div>
        </div>

        <el-form :inline="true" :model="form" class="demo-form-inline">
          <div class="middle">
            <el-form-item label="姓名:">
              <el-select v-model="form.name" placeholder="请选择">
                <el-option
                  v-for="item in nameList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="form.lxfs"></el-input>
            </el-form-item>
          </div>
          <div class="head">
            <div class="backImg"></div>
            <div>仓房信息</div>
          </div>
          <div class="middle">
            <el-form-item label="仓房状态">
              <el-radio-group v-model="form.cfState">
                <el-radio :label="0">入库</el-radio>
                <el-radio :label="1">出库</el-radio>
                <el-radio :label="2">库存</el-radio>
                <el-radio :label="3">空仓</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属仓库:">
                  <el-select v-model="form.warehouse" 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="12">
                <el-form-item label="仓房名称:">
                  <el-input v-model="form.cfName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="仓房类型:">
                  <el-select v-model="form.cfType" 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="12">
                <el-form-item label="创建时间:">
                  <el-input v-model="form.creatTime"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="装粮线高度:">
                  <el-input v-model="form.sjcr">
                    <template slot="append">米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设计仓容:">
                  <el-input v-model="form.sjcr">
                    <template slot="append">吨</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="长:">
                  <el-input v-model="form.sjcr">
                    <template slot="append">米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="宽:">
                  <el-input v-model="form.sjcr">
                    <template slot="append">米</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="仓内体积:">
                  <el-input v-model="form.sjcr">
                    <template slot="append">立方米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最近一次修改时间:">
                  <el-input v-model="form.sjcr"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <div class="bottom">
          <div class="bottomHead">
            <div class="backImg"></div>
            <div>粮食信息</div>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
          </div>
        </div>
        <el-table :data="lsxxList" border style="width: 100%; margin-top: 10px">
          <el-table-column prop="varieties" label="品种" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.varieties"
                placeholder="请选择"
              >
                <el-option label="小麦" value="xiaomai"></el-option>
                <el-option label="大豆" value="dadou"></el-option>

                <el-option label="粳稻" value="jingdao"></el-option>
                <el-option label="籼稻" value="xiandao"></el-option>
                <el-option label="玉米" value="yumi"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="cnlsrz"
            label="仓内粮食容重（公斤/立方米)"
            align="center"
          >
          <template slot-scope="scope">
              <el-input v-model="scope.row.cnlsrz" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="grade" label="等级" align="center">
                 <template slot-scope="scope">
              <el-select
                v-model="scope.row.grade"
                placeholder="请选择"
              >
                <el-option label="一等" value="first"></el-option>
                <el-option label="二等" value="second"></el-option>

                <el-option label="三等" value="third"></el-option>
                <el-option label="四等" value="fourth"></el-option>
                <el-option label="五等" value="fifth"></el-option>
                <el-option label="等外" value="other"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="rksj" label="首次入库时间" align="center">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit"
                >编辑</el-button
              >
              <el-button type="text" size="small" icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </d2-container>
  </div>
</template>
<script>
export default {
  name: "warehouseInfo-check",
  data() {
    return {
      //姓名下拉列表
      nameList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      form: {
        name: "",
        lxfs: "",
      },
      //粮食信息表格列表
      lsxxList:[
          {
              varieties:"",
              cnlsrz:"",
              grade:"",
              rksj:""

          }
      ]

    };
  },
  methods: {
      //返回按钮
    goBack() {
      window.history.go(-1);
    },
    //粮食信息添加
    add(){
        this.lsxxList.push(
            {varieties:"",
              cnlsrz:"",
              grade:"",
              rksj:""}
              )
    }
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  .titleLeft {
    line-height: 40px;
  }
}
.main {
  .head,
  .bottomHead {
    height: 25px;

    align-items: center;
    display: flex;

    .backImg {
      width: 10px;
      height: 20px;
      background: blue;
      margin-right: 10px;
    }
  }
  .middle {
    margin: 20px 0 20px 20px;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .el-form--inline .el-form-item__label{
      width:130px;
      }
 
}
</style>
<style >
/* .el-form--inline .el-form-item__label{
       width:130px; 
  } */
</style>
