<!--  -->
<template>
  <div class="cropbox">
    <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="toadd">
            <i class="el-icon-plus"></i>
            <span>新增</span>
          </div>
        </div>
        <div class="left_search">
          <div class="firstsearch">
            <el-input
              v-model="cropname"
              size="mini"
              placeholder="请输入农作物名称"
            ></el-input>
          </div>
          <div class="btnbox" @click="inquire">查询</div>
        </div>
      </div>
    </div>
    <div class="baselistbox_table">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        height="560px"
      >
        <el-table-column prop="crop_image" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.crop_image" alt="" style="width: 25px" />
          </template>
        </el-table-column>
        <el-table-column prop="crop_name" label="农作物名称">
          <template slot-scope="scope">{{ scope.row.crop_name }}</template>
        </el-table-column>
        <el-table-column prop="crop_variety" label="品种">
          <template slot-scope="scope">{{ scope.row.crop_variety }}</template>
        </el-table-column>
        <el-table-column prop="device_id" label="显示颜色">
          <template slot-scope="scope">
            <div
              :style="{
                width: '25px',
                height: '25px',
                backgroundColor: scope.row.crop_colors,
              }"
            ></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="toamend(scope.row.crop_id)"
              >修改</span
            >
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="deldata(scope.row.crop_id)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="totalNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page_size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-size.sync="page"
          :key="pagekey"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cropname: "",
      totalNum: 10,
      page: 1,
      page_size: 10,
      pagekey:1,
      tableData: [],
      loading: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange(e) {
      this.page = 1;
      this.pagekey = Math.random()*10+1;
      this.page_size = e;
      this.getcroplist();
    },
    handleCurrentChange(e) {
      this.page = e;
      this.getcroplist();
    },
    toadd() {
      this.$router.push("/index/cropadd");
    },
    toamend(id) {
      this.$router.push("/index/cropadd?id=" + id);
    },
    inquire(){
      this.page = 1
      this.pagekey = Math.random()*10+1;
      this.getcroplist()
    },
    getcroplist() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=information.crop.get_crop_list",
        data: this.qs.stringify({
          crop_name: this.cropname, //       非必须     农作物名称
          page: this.page, //            非必须     页码，默认1
          page_size: this.page_size, //       非必须     每页条目数，默认10
        }),
      }).then((res) => {
        if (res.data.data) {
          console.log(res.data.data);
          this.tableData = res.data.data.data;
          this.totalNum = res.data.data.total_num;
        }
      });
    },
    deldata(id) {
      this.$confirm("此操作将会删除此农作物, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=information.crop.del_crop_info",
            data: this.qs.stringify({
              crop_id: id, //       非必须     每页条目数，默认10
            }),
          }).then((res) => {
            if (res.data.data) {
              if (document.getElementsByClassName("el-message").length == 0) {
              this.$message.success("删除成功");
              }
              // this.page = 1
              this.getcroplist()
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
              this.$message.error("删除失败");
              }
            }
          });
        })
        .catch(() => {
          if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          }
        });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getcroplist();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.cropbox {
  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_table {
    width: 100%;
    // height: calc(100% - 140px);
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
    /deep/.el-table__header {
      th {
        background-color: #f1f1f3;
      }
    }
    .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;
      }
    }
  }
}
</style>