<!--  -->
<template>
  <div class="evilbox">
    <div class="evilphoto">
      <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="btnbox2" @click="Addedbtn">
            <i class="el-icon-plus"></i>
            <span>新增</span>
          </div>
          <div class="search_right">
            <el-input
              v-model="wormname"
              size="mini"
              placeholder="请输入病虫害名称"
            ></el-input>
            <div class="btnbox" @click="(page = 1,pagekey = Math.random()*10+1),getwormlist()">
              <span>搜索</span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="baselistbox_pholist"
        v-loading="loading"
        element-loading-text="数据加载种，请稍后..."
        element-loading-spinner="el-icon-loading"
      >
        <div class="pholist_tab">
          <p
            :class="wormordisindex == 2 ? 'selp' : ''"
            @click="tabwormordisindex(2)"
          >
            虫害信息库({{ wormnum }})例
          </p>
          <p
            :class="wormordisindex == 1 ? 'selp' : ''"
            @click="tabwormordisindex(1)"
          >
            病害信息库({{ diseasenum }})例
          </p>
        </div>
        <el-row :gutter="20">
          <div class="none" v-if="!wormlist.length">
            <img src="../../../static/images/quexingye.png" alt="" />
          </div>
          <el-col :span="6" v-for="(item, index) in wormlist" :key="index">
            <div class="wormimgbox">
              <div class="imgbox">
                <img
                  v-lazy="item.img_urls"
                  alt=""
                  @click="getoneworminfo(item.id)"
                />
                <div class="amendbox">
                  <div class="amendbox_item">
                    <p @click="amend(item)">修改</p>
                    <p @click="delworm(item.id)">删除</p>
                  </div>
                </div>
              </div>
              <div class="wormimgbox_xin">
                <p>害虫名称：{{ item.name }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="pagination">
          <el-pagination
            v-if="paginationload"
            background
            layout="prev, pager, next,jumper"
            :total="total"
            :page-size="8"
            @current-change="handleCurrentChange"
            :current-size.sync="page"
            :key="pagekey"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="evillist">
      <div class="evillist_title">
        <p>识别排名</p>
        <div
          class="btnbox"
          @click="
            recognitionVisible = true;
            wormdisdata.url = '';
          "
        >
          <span>{{ wormordisindex == 2 ? "害虫识别" : "病害识别" }}</span>
        </div>
      </div>
      <div class="evillist_line"></div>
      <div class="evillist_itembox">
        <div
          class="evillist_item"
          v-for="(item, index) in rankinglist"
          :key="index"
        >
          <div class="imgbox">
            <p class="imgbox_p">{{ index + 1 }}</p>
            <img v-lazy="item.img_urls" alt="" />
          </div>
          <p>
            {{ item.name }}
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      :title="amendoradd == 'add' ? '增加病虫害信息' : '修改病虫害信息'"
      :visible.sync="adddialogVisible"
      width="950px"
      :close-on-click-modal="false"
      @close="addclose"
    >
      <div class="worminfobox">
        <el-form
          :model="addedfrom"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="worminfobox_item">
            <div class="item_left">
              <el-form-item
                label="类型"
                v-show="amendoradd == 'add' ? true : false"
                prop="code"
              >
                <el-radio-group v-model="addedfrom.code">
                  <el-radio label="2">虫害</el-radio>
                  <el-radio label="1">病害</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="病虫害名称" prop="pest_name">
                <el-input
                  v-model="addedfrom.pest_name"
                  size="mini"
                  maxlength="10"
                ></el-input>
              </el-form-item>
            </div>
            <div class="item_right">
              <el-form-item label="病虫害图片" prop="img_urls">
                <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="addedfrom.img_urls"
                    :src="addedfrom.img_urls"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="病虫害信息" prop="prevention">
            <editor
              :tinymceHtml="addedfrom.prevention"
              @inp="inp($event)"
            ></editor>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="Added" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="病虫害信息"
      :visible.sync="worminfodialogVisible"
      width="950px"
      :close-on-click-modal="false"
    >
      <div class="wormdisinfobox">
        <div class="wormdis_item">
          <p class="title">病虫害名称</p>
          <p>{{ oneworminfo.name }}</p>
        </div>
        <div class="wormdis_item">
          <p class="title">病虫害图片</p>
          <img v-lazy="oneworminfo.img_urls" alt="" />
        </div>
        <div class="wormdis_item">
          <p class="title">病虫害信息</p>
          <div v-html="oneworminfo.prevention" class="htmlbox"></div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="wormordisindex == 1 ? '病害识别' : '虫害识别'"
      :visible.sync="recognitionVisible"
      width="450px"
      :close-on-click-modal="false"
    >
      <div class="recbox">
        <el-form
          :model="wormdisdata"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="识别图片" prop="url">
            <el-upload
              class="avatar-uploader"
              :action="$http + '/api/util/upload/img/'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload2"
              :on-error="handleAvatarError2"
            >
              <img
                v-if="wormdisdata.url"
                :src="wormdisdata.url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="recognitionVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="recognition"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Editor from "@/components/editor/Editor";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Editor,
  },
  data() {
    //这里存放数据
    return {
      wormname: "",
      rankinglist: [],
      diseasenum: "",
      wormnum: "",
      wormordisindex: 2,
      page: 1,
      pagekey:1,
      wormlist: [],
      total: 8,
      adddialogVisible: false,
      addedfrom: {
        pest_name: "",
        img_urls: "",
        code: "1",
        prevention: "",
        img_urls2: "",
      },
      rules: {
        pest_name: {
          required: true,
          message: "请输入病虫害名称",
          trigger: "blur",
        },
        img_urls: {
          required: true,
          message: "请上传病虫害图片",
          trigger: "blur",
        },
        code: {
          required: true,
          message: "请选择类型",
          trigger: "change",
        },
      },
      worminfodialogVisible: false,
      oneworminfo: {},
      loading: false,
      amendoradd: "add",
      recognitionVisible: false,
      wormdisdata: {
        url: "",
        img_file: "",
      },
      paginationload: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getranking() {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=pest.pests.pests_search",
        data: this.qs.stringify({
          code: this.wormordisindex,
          page: 1,
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data) {
          this.rankinglist = res.data.data.data;
        }
      });
    },
    tabwormordisindex(index) {
      this.paginationload = false;
      this.page = 1;
      this.pagekey = Math.random()*10+1;
      this.wormordisindex = index;
      this.getwormlist();
      this.getranking();
    },
    handleCurrentChange(e) {
      console.log(e);
      this.page = e;
      this.getwormlist();
    },
    getwormlist() {
      this.loading = true;
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=pest.pests.pests_info",
        data: this.qs.stringify({
          code: this.wormordisindex,
          page: this.page,
          page_size: 8,
          pest_name: this.wormname,
        }),
      }).then((res) => {
        this.loading = false;
        this.paginationload = true;
        if (res.data.data) {
          this.wormlist = res.data.data.data;
          this.total = res.data.data.nums;
          this.wormnum = res.data.data.pest_nums;
          this.diseasenum = res.data.data.disease_nums;
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "5";
          // });
        }
      });
    },
    delworm(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "api/api_gateway?method=pest.pests.del_pest_info",
            data: this.qs.stringify({
              pest_id: id,
            }),
          }).then((res) => {
            if (res.data.data) {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.success("删除成功");
              }
              this.getwormlist();
              this.getranking();
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error("删除失败");
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleAvatarSuccess(res, file) {
      console.log(this.$http, res);
      this.addedfrom.img_urls2 = this.$http + res.img_url;
      this.addedfrom.img_urls = 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;
    },
    inp(el) {
      this.addedfrom.prevention = el.sunHtml;
      // this.postForm.img_urls = el.imgSrc
    },
    Addedbtn() {
      this.amendoradd = "add";
      this.adddialogVisible = true;
    },
    Added() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.amendoradd == "add") {
            this.$axios({
              method: "post",
              url: "api/api_gateway?method=pest.pests.add_pest_info",
              data: this.qs.stringify({
                pest_name: this.addedfrom.pest_name,
                code: this.addedfrom.code,
                img_urls: this.addedfrom.img_urls2,
                prevention: this.addedfrom.prevention,
              }),
            }).then((res) => {
              if (res.data.data) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message.success("添加成功");
                }
                this.getwormlist();
                this.adddialogVisible = false;
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message.error("添加失败");
                }
              }
            });
          } else {
            this.$axios({
              method: "post",
              url: "api/api_gateway?method=pest.pests.modify_pest_info",
              data: this.qs.stringify({
                pest_name: this.addedfrom.pest_name,
                pest_id: this.addedfrom.pest_id,
                img_url: this.addedfrom.img_urls2,
                prevention: this.addedfrom.prevention,
              }),
            }).then((res) => {
              if (res.data.data) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message.success("修改成功");
                }
                this.getwormlist();
                this.adddialogVisible = false;
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message.error("修改失败");
                }
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addclose() {
      this.addedfrom = {
        pest_name: "",
        img_urls: "",
        code: "1",
        prevention: "",
        img_urls2: "",
      };
    },
    getoneworminfo(id) {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=pest.pests.pests_info",
        data: this.qs.stringify({
          code: this.wormordisindex,
          pest_id: id,
          page: 1,
        }),
      }).then((res) => {
        if (res.data.data) {
          this.worminfodialogVisible = true;
          console.log(res.data.data);
          this.oneworminfo = res.data.data;
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error("获取信息失败");
          }
        }
      });
    },
    amend(item) {
      this.amendoradd = "amend";
      console.log(item);
      this.addedfrom = {
        pest_name: item.name,
        img_urls: item.img_urls,
        code: item.code,
        prevention: item.prevention,
        img_urls2: item.img_urls,
        pest_id: item.id,
      };
      this.adddialogVisible = true;
    },
    handleAvatarSuccess2(res, file) {
      this.wormdisdata.url = this.$http + res.img_url;
      this.wormdisdata.img_file = file;
    },
    handleAvatarError2(res) {
      console.log(res);
    },
    beforeAvatarUpload2(file) {
      //   const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    recognition() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          console.log(this.wormdisdata.img_file);
          let session = localStorage.getItem("keys");
          var fromdata = new FormData();
          fromdata.append("img_file", this.wormdisdata.img_file.raw);
          fromdata.append("token", session);
          if (this.wormordisindex == 1) {
            // pest.pests.plant_discern
            this.$axios({
              method: "post",
              url: "api/api_gateway?method=pest.pests.plant_discern",
              data: fromdata,
            }).then((res) => {
              if (res.data.data) {
                this.getoneworminfo(res.data.data.id);
                this.wormdisdata = {
                  url: "",
                  img_file: "",
                };
                this.recognitionVisible = false;
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message.error(res.data.message);
                }
              }
            });
          } else {
            this.$axios({
              method: "post",
              url: "api/api_gateway?method=pest.pests.insect_discern",
              data: fromdata,
            }).then((res) => {
              if (res.data.data) {
                this.getoneworminfo(res.data.data.id);
                this.wormdisdata = {
                  url: "",
                  img_file: "",
                };
                this.recognitionVisible = false;
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message.error(res.data.message);
                }
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getranking();
    this.getwormlist();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.evilbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .evilphoto {
    width: calc(100% - 310px);
    .baselistbox_top {
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      .baselistbox_top_title {
        width: 100%;
        height: 65px;
        display: flex;
        padding: 20px;
        box-sizing: border-box;
        line-height: 25px;
        p:first-child {
          font-size: 14px;
          margin-right: 20px;
        }
        p:last-child {
          font-size: 18px;
          font-weight: 700;
        }
      }
      .baselistbox_top_line {
        width: 100%;
        height: 1px;
        background-color: #f2f2f2;
      }
      .baselistbox_top_search {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        line-height: 28px;
        display: flex;
        justify-content: space-between;
        .btnbox {
          width: 68px;
          height: 26px;
          // border: 1px solid #4f71ff;
          background-color: #4f71ff;
          text-align: center;
          border-radius: 3px;
          font-size: 14px;
          line-height: 26px;
          color: #fff;
          margin-left: 10px;
          cursor: pointer;
        }
        .btnbox2 {
          width: 68px;
          height: 26px;
          border: 1px solid #4f71ff;
          //   background-color: #4f71ff;
          text-align: center;
          border-radius: 3px;
          font-size: 14px;
          line-height: 26px;
          color: #4f71ff;
          cursor: pointer;
        }
        .search_right {
          display: flex;
        }
      }
    }
    .baselistbox_pholist {
      width: 100%;
      height: calc(100% - 144px);
      background-color: #fff;
      margin-top: 10px;
      padding: 20px;
      box-sizing: border-box;
      position: relative;
      border-radius: 10px;
      position: relative;
      .pholist_tab {
        display: flex;
        p {
          width: 200px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
        .selp {
          color: #4f71ff;
          border-bottom: 3px solid #4f71ff;
        }
      }
      .none {
        width: 100%;
        display: flex;
        justify-content: space-around;
      }
      .wormimgbox {
        width: 100%;
        height: 240px;
        margin-top: 20px;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        .el-icon-delete {
          position: absolute;
          top: 0px;
          right: 0px;
          color: red;
          display: none;
        }
        .imgbox {
          widows: 100%;
          height: 200px;
          overflow: hidden;
          position: relative;
          border-radius: 6px;
          img {
            width: 100%;
            // height: 100%;
          }
          .amendbox {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
          }
          .amendbox_item {
            width: 80%;
            display: flex;
            height: 30px;
            line-height: 15px;
            margin: 0 auto;
            align-items: center;
            p {
              width: 50%;
              text-align: center;
              color: #fff;
              height: 15px;
              cursor: pointer;
            }
            p:first-child {
              border-right: 1px solid rgba(255, 255, 255, 0.8);
            }
          }
        }
        .wormimgbox_xin {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          margin-top: 6px;
        }
      }
      .wormimgbox:hover {
        .amendbox {
          display: block;
        }
      }
      .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;
        }
      }
    }
  }
  .evillist {
    width: 300px;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    .evillist_title {
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      p:first-child {
        font-size: 18px;
        font-weight: 700;
      }
      .btnbox {
        width: 68px;
        height: 26px;
        // border: 1px solid #4f71ff;
        background-color: #4f71ff;
        text-align: center;
        border-radius: 3px;
        font-size: 14px;
        line-height: 26px;
        color: #fff;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
    .evillist_line {
      width: 100%;
      height: 1px;
      background-color: #f2f2f2;
      margin: 15px 0;
    }
    .evillist_itembox {
      width: 100%;
      height: calc(100% - 67px);
      overflow-y: auto;
    }
    .evillist_item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .imgbox {
        display: flex;
        .imgbox_p {
          width: 30px;
        }
      }
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      p {
        line-height: 40px;
      }
    }
  }
}
.worminfobox {
  .worminfobox_item {
    display: flex;
    .item_left {
      width: 50%;
      /deep/.is-checked {
        .el-radio__inner {
          border-color: #4f71ff;
          background: #4f71ff;
        }
        .el-radio__label {
          color: #4f71ff;
        }
      }
    }
  }
  /deep/.el-form-item:nth-child(3) {
    margin-bottom: 12px;
  }
  /deep/.el-form-item:nth-child(4) {
    margin-bottom: 0px;
  }
  /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/.tinymce {
    .mce-container-body > .mce-first > .mce-container-body > .mce-menubar {
      display: none;
    }
    .mce-flow-layout > .mce-btn-group:nth-child(8) {
      display: none;
    }
  }
}
.wormdisinfobox {
  .wormdis_item {
    display: flex;
    margin-bottom: 16px;
    .title {
      width: 100px;
      font-size: 16px;
      font-weight: 700;
    }
    .htmlbox {
      width: calc(100% - 100px);
    }
    img {
      width: 150px;
      height: 150px;
    }
  }
}
.recbox {
  /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;
  }
}
</style>