<template>
  <div class="app-container">
    <!-- <div class="container"> -->
    <el-form ref="form" :model="form" label-width="120px">
      <div class="bascInfo">
        <div class="title">仓房基本信息</div>
        <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="设计仓容(Kg)" prop="designCapacity">
              <el-input v-model="form.designCapacity"></el-input>
            </el-form-item>
            <el-form-item label="仓房类型" prop="houseType">
              <el-input v-model="form.houseType"></el-input>
              <!-- <el-select v-model="form.houseType" placeholder="请选择" style="width:100%;">
                <el-option label="设备异常" value="1"></el-option>
                <el-option label="设备预警" value="2"></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="仓内宽(m)" prop="houseWidth">
              <el-input v-model="form.houseWidth"></el-input>
            </el-form-item>
            <el-form-item label="仓内装粮线高" prop="grainLineHeigth">
              <el-input v-model="form.grainLineHeigth"></el-input>
            </el-form-item>
            <el-form-item label="仓房是否完好" prop="isNo">
              <!-- <el-input v-model="form.isNo"></el-input> -->
              <el-switch v-model="form.isNo" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="仓房状态" prop="houseState">
              <el-input v-model="form.houseState"></el-input>
            </el-form-item>
            <el-form-item label="储粮功效" prop="storeWay">
              <el-input v-model="form.storeWay"></el-input>
            </el-form-item>
            <el-form-item label="是否散装储存" prop="isSzcc">
              <el-select v-model="form.isSzcc" placeholder="请选择" style="width:100%;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
                <el-option label="其他或不确定" :value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有无机械通风设施" prop="isJjtf">
              <el-select v-model="form.isJjtf" placeholder="请选择" style="width:100%;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
                <el-option label="其他或不确定" :value="9"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item label="仓房名称" prop="houseName">
              <el-input v-model="form.houseName"></el-input>
            </el-form-item>
            <el-form-item label="实际仓容(Kg)" prop="actualCapacity">
              <el-input v-model="form.actualCapacity"></el-input>
            </el-form-item>
            <el-form-item label="仓内长(m)" prop="houseLength">
              <el-input v-model="form.houseLength"></el-input>
            </el-form-item>
            <el-form-item label="仓内檐高(m)" prop="houseHeigth">
              <el-input v-model="form.houseHeigth"></el-input>
            </el-form-item>
            <el-form-item label="仓内体积(m³)" prop="binVolume">
              <el-input v-model="form.binVolume"></el-input>
            </el-form-item>
            <el-form-item label="代储仓房" prop="libraryType">
              <el-select v-model="form.libraryType" placeholder="请选择" style="width:100%;">
                <el-option label="主粮库" :value="0"></el-option>
                <el-option label="代储点粮库" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="交付使用日期" prop="useDate">
              <el-date-picker v-model="form.useDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间" style="width:100%;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="是否隔热保温" prop="isGrbw">
              <el-select v-model="form.isGrbw" placeholder="请选择" style="width:100%;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
                <el-option label="其他或不确定" :value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有误防鼠防雀防虫装置及设施" prop="isFsfqfc">
              <el-select v-model="form.isFsfqfc" placeholder="请选择" style="width:100%;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
                <el-option label="其他或不确定" :value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有无防火防爆防盗设施" prop="isFhfd">
              <el-select v-model="form.isFhfd" placeholder="请选择" style="width:100%;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
                <el-option label="其他或不确定" :value="9"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </div>
      <div class="main">
        <el-row :gutter="20">
          <el-col :span="12" :gutter="20">
            <div class="info h80">
              <div class="title">保管员信息</div>
              <el-form-item label="保管员姓名" prop="keeperName">
                <el-input v-model="form.keeperName"></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="keeperAge">
                <el-input v-model="form.keeperAge"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="keeperGender">
                <el-input v-model="form.keeperGender"></el-input>
              </el-form-item>
              <el-form-item label="电话" prop="keeperIphone">
                <el-input v-model="form.keeperIphone"></el-input>
              </el-form-item>
              <el-form-item label="入职日期" prop="keeperDate">
                <el-date-picker v-model="form.keeperDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间" style="width:100%;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="保管员照片" prop="keeperPic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
            <div class="workState">
              <div class="title">作业状态</div>
              <div><span>通风中</span></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info">
              <!-- <div class="title">报警信息</div> -->
              <div class="topHeader">
                <div class="topHeader-title">关联设备 <span v-if="relatedEquipment != 0">( {{relatedEquipment}} )</span> </div>
                <div class="topHeader-btns">
                  <el-button @click="clear">清空已选</el-button>
                  <el-button type="primary" @click="related">关联设备</el-button>
                </div>
              </div>
              <div class="equipments" v-if="cities.length !==0 ">
                <div class="relatedEquipment" v-for="city in list" :label="city" :key="city.index">
                  <el-row>
                    <el-col :span="24">
                      <el-card class="box-card" shadow="hover">
                        <!-- <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div> -->
                        <div class="card-title">
                          <span class="card-title-text">通风窗设备</span>
                          <span class="card-title-number">001</span>
                        </div>
                        <div class="card-content">
                          <span>标签管理：{{ city.label }}</span>
                          <span>所属仓房：{{ city.barn}}</span>
                          <span>所属建筑位置{{ city.position }}</span>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </div>

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

    <!-- </div> -->

    <el-drawer title="关联设备" :visible.sync="drawer" direction="rtl">
      <!-- <span>我来啦!</span> -->
      <div class="drawer-header">
        <el-input v-model="equipmentClassificationName" placeholder="请输入设备分类名称搜索"></el-input>
        <el-button type="primary" @click="related">搜索</el-button>
      </div>
      <div class="drawer-list">

        <el-checkbox-group v-model="checkedCities">
          <el-checkbox v-for="city in cities" :label="city" :key="city.index">
            <!-- {{city}} -->
            <el-row>
              <el-col :span="24">
                <el-card class="box-card">
                  <!-- <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                  </div> -->
                  <div class="card-title">
                    <span class="card-title-text">通风窗设备</span>
                    <span class="card-title-number">001</span>
                  </div>
                  <div class="card-content">
                    <span>标签管理：{{ city.label }}</span>
                    <span>所属仓房：{{ city.barn}}</span>
                    <span>所属建筑位置{{ city.position }}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-checkbox>

        </el-checkbox-group>
      </div>
      <div class="drawer-footer">
        <div>共 <span>{{ relatedEquipments }}</span> 项</div>
        <el-button type="primary" @click="addCorrelation">添加关联</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { addHouseInfoItem } from '@/api/equipConfig/barnBasicInfo/index'
export default {
  data () {
    return {
      relatedEquipment: '3',// 关联设备数量
      relatedEquipments: "6",// 抽屉数据列表数量-添加关联
      drawer: false,
      equipmentClassificationName: '', //设备分类名称
      form: {
        houseCode: '',
        designCapacity: '60',
        houseType: '30',
        houseWidth: '20122200202',
        grainLineHeigth: '13',
        isNo: '30000',
        storeWay: '',
        isSzcc: '',
        houseName: '',
        actualCapacity: '',
        houseLength: '',
        houseHeigth: '',
        binVolume: '',
        libraryType: '',
        useDate: '',
        isGrbw: '',
        isFsfqfc: '',
        houseState: '',
        keeperName: '',
        keeperAge: '',
        keeperGender: '',
        keeperIphone: '',
        keeperDate: '',
      },

      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      list: [
        {
          name: 'P001', equipName: '1号仓粮情设备', number: '0', layer: '4', row: '5', col: '9'
        },
        {
          name: 'P001', equipName: '1号仓粮情设备', number: '0', layer: '4', row: '5', col: '9'
        },
      ],

      checkAll: false,
      checkedCities: [],
      cities: [
        {
          index: 1, titleNo: 'P001', equipName: '通风窗设备', label: '2022年3月16日', barn: '202102030002', position: '东区',
        },
        {
          index: 1, titleNo: 'P001', equipName: '通风窗设备', label: '2022年3月16日', barn: '202102030002', position: '东区',
        },
        {
          index: 1, titleNo: 'P001', equipName: '通风窗设备', label: '2022年3月16日', barn: '202102030002', position: '东区',
        },
      ],
      isIndeterminate: true,
      imageUrl: '',
    }
  },
  created () {

  },
  mounted () {
    this.form = this.$route.params.data
    console.log(this.$route.params.data,'this.$route.params.data')
  },
  methods: {
    related () {
      this.drawer = true
    },
    clear () {
      this.cities = []
    },
    back() {
      this.$router.push({ name: "BarnBasicInfo" })
    },
    save () {
      let data = JSON.parse(JSON.stringify(this.form))
      addHouseInfoItem(data).then(res => {
        console.log(res,'addHouseInfoItem')
        if(res.code == 200) {
          this.$router.push({ name: "BarnBasicInfo" })
        }
      }).catch(err =>{
        console.log(err)
      })
    },
    addCorrelation () {

    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },

}
</script>
<style lang='scss' scoped>
.app-container {
  height: 100%;

  .main {
    height: 100%;
    position: relative;
    margin-bottom: 10px;
    .el-row {
      height: 100%;
      .el-col {
        height: 100%;
      }
    }
  }

  .el-footer {
    text-align: center;
    background-color: #fff;
    // width: 98%;
    // 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;
    margin-bottom: 20px;
    z-index: 9999;
    .footerBtn {
      width: 300px;
      border-radius: 20px;
    }
  }
}
.info {
  height: 100%;
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  position: relative;
  .title {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .topHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // position: absolute;
  }
  .equipments {
    // height: calc(100% - 80px);
    min-height: 582px;
    overflow-y: auto;
    padding: 5px;
    margin-top: 10px;
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    &::-webkit-scrollbar {
      width: 6px;
      // width: 10px;
      // height: 0;
      // background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: #424242;

      border-radius: 20px;
    }
    .relatedEquipment {
      width: 100%;
      // background-color: #fff;
      // background-color: #ccc;
      // margin-bottom: 10px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;

      .box-card {
        margin-bottom: 15px;
        background-color: #f9f9f9;
        .card-title {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          border-bottom: 1px solid #ccc;
          span {
            padding: 10px;
          }
        }
        .card-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-top: 20px;
          span {
            padding: 10px 0;
          }
        }
      }
    }
  }
  .title1 {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .title-right {
      color: #ccc;
      font-size: 12px;
    }
  }
  .el-form {
    margin-top: 15px;
    padding-top: 10px;
    padding: 0 20px 0 10px;
    .el-switch {
      float: right;
    }
  }
}
.h80 {
  height: 84%;
}
.bascInfo {
  //  height: 100%;
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  margin-bottom: 15px;
  .title {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
    margin-bottom: 20px;
  }
}
.workState {
  height: 15%;
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  margin-bottom: 15px;
  margin-top: 7px;
  .title {
    border-left: 4px solid #4a7de6;
    padding-left: 10px;
    margin-bottom: 20px;
  }
}
::v-deep .el-drawer {
  .drawer-header {
    // width: 92%;
    display: flex;
    justify-content: center;
    .el-input {
      width: 70%;
    }
  }
  .drawer-list {
    height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 5px;
    margin-top: 10px;
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #424242;

      border-radius: 20px;
    }
    // .el-c
    .el-checkbox-group {
      .el-checkbox {
        display: flex;
        align-items: center;
        margin-right: 0;
        .el-checkbox__label {
          width: 100%;
        }
        .el-checkbox__inner {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          // 中间的 “✔” 的位置调整
          &::after {
            height: 14px;
            width: 5px;
            left: 9px;
            top: 2px;
          }
          &:hover {
            border-color: #4a62e7;
          }
        }

        .box-card {
          margin-bottom: 15px;
          background-color: #f9f9f9;
          .card-title {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            border-bottom: 1px solid #ccc;
          }
          .card-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-top: 20px;
          }
        }
      }
    }
  }
  .drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
  }
}
::v-deep .el-input__inner {
  text-align: center;
}
::v-deep .el-drawer__header {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep .el-upload {
  border: 1px solid #ccc;
  float: right;
}
</style>
