<template>
  <div class="barn">
    <div class="main-top">
      <el-header height="50px">仓房信息</el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <span class="container-head">粮食品种</span>
              <div class="container">
                <div class="center">
                  <div class="cainter-img">
                    <img
                      class="container-img"
                      src="@/assets/images/grain.png"
                      alt=""
                    />
                  </div>
                  <div class="cainter-select">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      width="95px"
                      size="mini"
                      @change="changeoption"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <span class="container-head">存储状态</span>
              <div class="container">
                <div class="center">
                  <div class="cainter-img">
                    <img
                      class="container-img"
                      src="@/assets/images/state.png"
                      alt=""
                    />
                  </div>
                  <div class="cainter-select">
                    <el-select
                      v-model="value1"
                      placeholder="请选择"
                      width="95px"
                      size="mini"
                      @change="changeoption1"
                    >
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <span class="container-head">仓房状态</span>
              <div class="container">
                <div class="center">
                  <div class="cainter-img">
                    <img
                      class="container-img"
                      src="@/assets/images/barnstate.png"
                      alt=""
                    />
                  </div>
                  <div class="cainter-select">
                    <el-select
                      v-model="value2"
                      placeholder="请选择"
                      width="95px"
                      size="mini"
                      style="color:green"
                      @change="changeoption2"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </div>
    <!-- 弹窗确认信息 -->
    <div>
      <el-dialog :visible.sync="dialogVisible" width="30%">
        <span>是否确定更改粮食品种</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-dialog :visible.sync="dialogVisible1" width="30%">
        <span>是否确定更改存储状态</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible1 = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-dialog :visible.sync="dialogVisible2" width="30%">
        <span>是否确定更改仓房状态</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible2 = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <div class="main-top">
      <el-header class="header-border" height="50px">保管员信息</el-header>
      <el-main class="keepinfo">
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div class="keeperinfo">
                <img src="@/assets/images/u91.png" alt="保管员图片" />
                <p class="info_name">
                  <span>王全德</span>
                </p>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <el-form ref="form" label-width="190px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="出生年月：">
                      <span>1990年06月01日</span>
                    </el-form-item>
                    <el-form-item label="性别：">
                      <span>男</span>
                    </el-form-item>
                    <el-form-item label="手机号：">
                      <span>18500327512</span>
                    </el-form-item>
                    <el-form-item label="毕业院校：">
                      <span>山东师范大学</span>
                    </el-form-item>
                    <el-form-item label="从事保管工作年限(年):">
                      <span>12年</span>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="年龄(岁)：">
                      <span>30</span>
                    </el-form-item>
                    <el-form-item label="政治面貌：">
                      <span>党员</span>
                    </el-form-item>
                    <el-form-item label="学历：">
                      <span>本科</span>
                    </el-form-item>
                    <el-form-item label="职业资格：">
                      <span>中级</span>
                    </el-form-item>
                    <el-form-item label="邮箱：">
                      <span>18500327512@163.com</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <el-col :span="11">
              <div class="grid-content bg-purple"></div>
            </el-col>
          </el-col>
        </el-row>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelposition:'right',
      value: "小麦",
      value1: "半仓",
      value2: "通风",
      options: [
        {
          value: "选项1",
          label: "小麦"
        },
        {
          value: "选项2",
          label: "玉米"
        },
        {
          value: "选项3",
          label: "豆油"
        }
      ],
      options1: [
        {
          value: "选项1",
          label: "空仓"
        },
        {
          value: "选项2",
          label: "半仓"
        },
        {
          value: "选项3",
          label: "满仓"
        }
      ],
      options2: [
        {
          value: "选项1",
          label: "出库"
        },
        {
          value: "选项2",
          label: "入库"
        },
        {
          value: "选项3",
          label: "通风"
        },
        {
          value: "选项4",
          label: "熏蒸"
        },
        {
          value: "选项5",
          label: "内环流控温"
        }
      ],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      formInfo: []
    }
  },
  methods: {
    changeoption(val) {
      console.log(val)
      this.dialogVisible = true
    },
    changeoption1(val) {
      console.log(val)
      this.dialogVisible1 = true
    },
    changeoption2(val) {
      console.log(val)
      this.dialogVisible2 = true
    }
  }
}
</script>

<style lang="scss" scoped>
.barn {
  width: 100%;
  height: calc(100vh - 84px);
  overflow-y: scroll;
  overflow-x: hidden;
}
.el-header {
  line-height: 57px;
  border-bottom: 1px solid #ddd;
  padding-left: 65px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-main {
  height: 378px;
  min-height: 377px;
  padding: 25px;
}
.row-bg {
  padding: 10px 0;
}
// 粮食品种块盒子
.container-head {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-family: "PingFangSC-Medium", "PingFang SC MEdium", "PingFang SC";
  padding-left: 80px;
}
.container {
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cainter-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-img {
  width: 90px;
  height: 96px;
}
.cainter-select {
  margin-top: 8px;
  width: 115px;
}
.header-border {
  border-top: 4px solid rgb(240 242 245);
}

//保管员信息
.keepinfo {
  margin-bottom: 50px;
  .keeperinfo {
    width: 138px;
    height: 140px;
    .info_name {
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
}
td {
  line-height: 30px;
  padding: 15px 0;
  display: flex;
  justify-content: flex-end;
}
</style>
