<!--  -->
<template>
  <div class="baselistbox">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p>基地管理</p>
      </div>
      <p class="baselistbox_top_line"></p>
      <div class="baselistbox_top_search">
        <div class="right_search">
          <div class="btnbox2" @click="tomap">
            <i class="el-icon-plus"></i>
            <span>新增</span>
          </div>
        </div>
        <div class="left_search">
          <div class="firstsearch">
            <el-input
              v-model="cityname"
              size="mini"
              placeholder="请输入基地名称"
            ></el-input>
          </div>
          <div class="btnbox" @click="chaxun">查询</div>
        </div>
      </div>
    </div>
    <div class="baselistbox_datalist">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in baselistdata" :key="index">
          <div class="datalist_item">
            <div class="datalist_item_left">
              <img :src="item.img_url" alt="" />
              <div class="caozuo">
                <div class="caozuo_item">
                  <p @click="amend(item)">修改</p>
                  <p @click="delbase(item.base_id)">删除</p>
                </div>
              </div>
            </div>
            <div class="datalist_item_lright">
              <h4>{{ item.base_name }}</h4>
              <p>
                <i class="iconfont icon-fuzeren"></i>
                <span
                  >负责人：{{
                    item.production_name == "" ? "暂无" : item.production_name
                  }}</span
                >
              </p>
              <p>
                <i class="iconfont icon-dianhua"></i>
                <span>电话：{{ item.phone == "" ? "暂无" : item.phone }}</span>
              </p>
              <p>
                <i class="iconfont icon-mianji"></i>
                <span>面积：{{ item.base_area }}亩</span>
              </p>
              <p>
                <i class="iconfont icon-dizhi"></i>
                <span
                  >地址：{{ item.area_addr[0] }}{{ item.area_addr[1]
                  }}{{ item.area_addr[2] }}</span
                >
              </p>
              <div class="btn">
                <div class="btnbox2" @click="toplot(item)">划分地块</div>
                <div class="btnbox2" @click="tofac(item)">设备绑定</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="total"
          :page-size="page_size"
          :page-sizes="[6, 9, 12, 15]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-size.sync="page"
          :key="pagekey"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="基地信息"
      :visible.sync="dialogVisible"
      width="580px"
      :close-on-click-modal="false"
    >
      <div class="baseinfobox">
        <el-form
          :model="baseinfodata"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="基地名称" prop="base_name">
            <el-input
              size="mini"
              maxlength="20"
              v-model="baseinfodata.base_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="production_name">
            <el-input
              size="mini"
              v-model="baseinfodata.production_name"
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input size="mini" v-model="baseinfodata.phone"></el-input>
          </el-form-item>
          <el-form-item label="基地面积" prop="base_area">
            <p>{{ baseinfodata.base_area }} 亩</p>
          </el-form-item>
          <el-form-item label="基地图片" prop="img_url">
            <!-- <el-input v-model="baseinfodata.img_url"></el-input> -->
            <el-upload
              class="avatar-uploader"
              :action="$http + '/api/util/upload/img/'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-error="handleAvatarError"
            >
              <img
                v-if="baseinfodata.img_url"
                :src="baseinfodata.img_url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="基地地址" prop="name">
            <el-input
              size="mini"
              v-model="baseinfodata.base_addr"
              v-if="baseinfodata.base_addr == ''"
            ></el-input>
            <p v-else>{{ baseinfodata.base_addr }}</p>
          </el-form-item>
          <el-form-item label="基地描述" prop="describe">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="baseinfodata.describe"
              :maxlength="256"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addbtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { jsonp } from "vue-jsonp";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确手机号"));
        }
      }
    };
    return {
      cityname: "",
      total: 6,
      baselistdata: [],
      page: 1,
      page_size: 6,
      pagekey: 1,
      center: [],
      dialogVisible: false,
      baseinfodata: {
        base_name: "",
        base_area: "",
        coordinates: "",
        base_addr: "",
        img_url: "",
        img_url2: "",
        describe: "",
        production_name: "",
        phone: "",
        address: "",
      },
      rules: {
        base_name: {
          required: true,
          message: "请输入基地名称",
          trigger: "blur",
        },
        img_url: { required: true, message: "请选择基地图片", trigger: "blur" },
        base_addr: {
          required: true,
          message: "请输入基地地址",
          trigger: "blur",
        },
        phone: {
          validator: validatePass,
          trigger: "blur",
        },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    tomap() {
      console.log(this.baselistdata);
      if (this.baselistdata.length) {
        this.$router.push(
          "/index/maphandle?lng=" + this.center[0] + "&lat=" + this.center[1]
        );
      } else {
        this.$router.push("/index/maphandle");
      }
    },
    tofac(item) {
      var center = JSON.parse(item.coordinates)[0];
      this.$router.push(
        "/index/maofacility?lng=" +
          center[0] +
          "&lat=" +
          this.center[1] +
          "&id=" +
          item.base_id
      );
    },
    toplot(item) {
      console.log(item);
      var center = JSON.parse(item.coordinates)[0];
      this.$router.push(
        "/index/mapplot?lng=" +
          center[0] +
          "&lat=" +
          center[1] +
          "&id=" +
          item.base_id
      );
    },
    handleCurrentChange(e) {
      this.page = e;
      this.getbaslist();
    },
    handleSizeChange(e) {
      this.page = 1;
      this.pagekey = Math.random() * 10 + 1;
      this.page_size = e;
      this.getbaslist();
    },
    chaxun() {
      this.page = 1;
      this.pagekey = Math.random() * 10 + 1;
      this.getbaslist();
    },
    getbaslist() {
      this.loading = true;
      console.log(this.page);
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.baseinfo.list_land_base",
        data: this.qs.stringify({
          base_name: this.cityname,
          page: this.page,
          page_size: this.page_size,
        }),
      }).then((res) => {
        this.loading = false;
        if (res.data.data.data.length) {
          this.baselistdata = res.data.data.data;
          this.total = res.data.data.total_num;
          this.center = JSON.parse(this.baselistdata[0].coordinates)[0];
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "末页";
          // });
        }
      });
    },
    amend(item) {
      console.log(item);
      var data = JSON.parse(JSON.stringify(item));
      this.baseinfodata = data;
      this.baseinfodata.img_url2 = data.img_url;
      console.log(this.baseinfodata);
      this.baseinfodata.base_addr =
        data.area_addr[0] + data.area_addr[1] + data.area_addr[2];
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.baseinfodata.img_url2 = this.$http + res.img_url;
      this.baseinfodata.img_url = URL.createObjectURL(file.raw);
    },
    handleAvatarError(res) {
      console.log(res);
    },
    beforeAvatarUpload(file) {
      //   const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    addbtn() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "api/api_gateway?method=basemanager.baseinfo.modify_land_base",
            data: this.qs.stringify({
              base_id: this.baseinfodata.base_id,
              base_name: this.baseinfodata.base_name,
              img_url: this.baseinfodata.img_url2,
              describe: this.baseinfodata.describe,
              production_name: this.baseinfodata.production_name,
              phone: this.baseinfodata.phone,
            }),
          }).then((res) => {
            if (res.data.data) {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.success("修改成功");
              }
              this.dialogVisible = false;
              this.getbaslist();
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error(res.data.message);
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除基地
    delbase(base_id) {
      this.$confirm("此操作将删除该基地, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "api/api_gateway?method=basemanager.baseinfo.del_land_base",
            data: this.qs.stringify({
              base_id: base_id,
            }),
          }).then((res) => {
            if (res.data.message == "") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getbaslist();
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getbaslist();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.baselistbox {
  width: 100%;
  height: 100%;
  .baselistbox_top {
    width: 100%;
    height: 130px;
    background-color: #fff;
    border-radius: 10px;
    .baselistbox_top_title {
      width: 100%;
      height: 65px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 25px;
      justify-content: space-between;
      p:first-child {
        font-size: 18px;
        font-weight: 700;
      }
    }
    .baselistbox_top_line {
      width: 100%;
      height: 1px;
      background-color: #f2f2f2;
    }
    .baselistbox_top_search {
      width: 100%;
      height: 68px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 28px;
      justify-content: space-between;
      .left_search {
        display: flex;
      }
      .btnbox,
      .btnbox2 {
        width: 68px;
        height: 26px;
        border: 1px solid #4f71ff;
        text-align: center;
        border-radius: 3px;
        font-size: 14px;
        line-height: 26px;
        cursor: pointer;
      }
      .btnbox {
        background-color: #4f71ff;
        color: #fff;
        margin-left: 20px;
      }
      .btnbox2 {
        color: #4f71ff;
      }
    }
  }
  .baselistbox_datalist {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    .el-row {
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      .el-col {
        margin-bottom: 20px;
        float: none;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .datalist_item {
      width: 100%;
      // background-color: #f2f2f2;
      display: flex;
      border-radius: 4px;
      // height: 210px;
      margin-bottom: 20px;
      justify-content: space-between;
      .datalist_item_left {
        width: 40%;
        // padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        justify-content: center;
        img {
          width: 90%;
          // height: 200px;
          border-radius: 10px;
        }
        .caozuo {
          position: absolute;
          bottom: 0;
          left: 5%;
          width: 90%;
          height: 30px;
          background-color: rgba(0, 0, 0, 0.5);
          display: none;
          .caozuo_item {
            width: 80%;
            display: flex;
            height: 30px;
            line-height: 15px;
            margin: 0 auto;
            align-items: center;
            cursor: pointer;
            p {
              width: 50%;
              text-align: center;
              color: #fff;
              height: 15px;
            }
            p:first-child {
              border-right: 1px solid rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
      .datalist_item_left:hover {
        .caozuo {
          display: block;
        }
      }
      .datalist_item_lright {
        width: 57%;
        h4 {
          margin: 15px 0;
        }
        p {
          // overflow: hidden;
          overflow: hidden; //溢出隐藏
          white-space: nowrap; //禁止换行
          text-overflow: ellipsis; //...
          margin-bottom: 10px;
          font-size: 14px;
          color: #262626;
          .iconfont {
            color: #999;
          }
        }
        .btn {
          display: flex;
          .btnbox2 {
            width: 68px;
            height: 26px;
            // border: 1px solid #4f71ff;
            text-align: center;
            border-radius: 3px;
            font-size: 12px;
            line-height: 26px;
            cursor: pointer;
            background-color: #4f71ff;
            color: #fff;
            margin-right: 10px;
          }
        }
      }
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      /deep/.el-pager {
        .active {
          background-color: #4f71ff !important;
        }
      }
      /deep/.el-input__inner:hover {
        border-color: #4f71ff;
      }
    }
  }
}
.baseinfobox {
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.avatar-uploader .el-upload:hover {
    border-color: #4f71ff;
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  /deep/.avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
  /deep/.el-textarea {
    .el-textarea__inner {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
    }
  }
}
</style>