<!--
 * @Author: your name
 * @Date: 2022-01-08 10:32:53
 * @LastEditTime: 2022-01-19 09:21:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \goldenPig\src\views\eartag-admin\eartag-data\EartagData.vue
-->
<template>
  <div class="individual-data">
    <div class="xForm">
      <el-form :inline="true" label-width="80px" size="mini" :model="form">
        <el-form-item label="采集牧场" v-if="userItem.type !== 2">
          <el-select v-model="form.farm">
            <el-option
              v-for="item in farmList"
              :key="item.id"
              :value="item.id"
              :label="item.farmName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集时间">
          <el-date-picker
            type="datetimerange"
            v-model="form.date"
            range-separator="至"
            :clearable="false"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%;"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="耳标号：">
          <el-input v-model="form.eartagNo"></el-input>
        </el-form-item>
        <el-form-item label="阶段：">
          <el-select v-model="form.stage">
            <el-option
              v-for="item in stageList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="基站编码">
          <el-input v-model="form.deviceCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <new-table
        v-loading="loading"
        :height="600"
        :title="earTitle"
        :listData="list"
        :tableItems="tableItems"
      >
        <template #earTemp="scope">
          <el-tag style="width: 65px;">{{ scope.row.earTemp }}℃</el-tag>
        </template>
        <template #envTemp="scope">
          <span>{{ scope.row.envTemp }}℃</span>
        </template>
        <template #rssi="scope">
          <span>-{{ scope.row.rssi }}db</span>
        </template>
        <template #stage="scope">
          <span>{{ getStage(scope.row.stage) }}</span>
        </template>
        <template #dong="scope">
          <span>{{ scope.row.penName }}{{ scope.row.unitName }}</span>
        </template>
        <template #hander="scope">
          <el-button size="mini" type="text" @click="jump(scope.row)"
            >查看详情</el-button
          >
        </template>
      </new-table>
      <table-footer
        :totals="total"
        :size="size"
        @sizeChange="sizeChange"
        @pageChange="pageChange"
      ></table-footer>
    </div>
  </div>
</template>
<script>
import { getEarTagList } from "@/utils/apis/eartag-data/eartagData";
import { mapState, mapActions } from "vuex";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";

export default {
  components: {
    NewTable,
    TableFooter,
  },
  computed: {
    ...mapState(["stageList", "farmList"]),
  },
  data() {
    return {
      form: {
        farm: "",
        date: [],
        eartagNo: "",
        stage: "",
        deviceCode: "",
      },
      total: 0,
      pageNum: 1,
      size: 10,
      earTitle: "耳标数据列表",
      list: [],
      loading: false,
      tableItems: [
        {
          prop: "time",
          label: "采集时间",
          minWidth: "100",
          slotName: "time",
        },
        {
          prop: "eartagNo",
          label: "耳标号",
          minWidth: "100",
          slotName: "eartagNo",
        },
        {
          label: "耳根温度",
          minWidth: "50",
          slotName: "earTemp",
        },
        {
          label: "环境温度",
          minWidth: "50",
          slotName: "envTemp",
        },
        {
          prop: "exercise",
          label: "运动量",
          minWidth: "50",
          slotName: "exercise",
        },
        {
          prop: "bat",
          label: "电池电量",
          minWidth: "50",
          slotName: "bat",
        },
        {
          label: "信号强度",
          minWidth: "50",
          slotName: "rssi",
        },
        {
          label: "阶段",
          minWidth: "50",
          slotName: "stage",
        },
        {
          label: "栋舍",
          minWidth: "100",
          slotName: "dong",
        },
        {
          prop: "deviceCode",
          label: "采集器编码",
          minWidth: "100",
          slotName: "deviceCode",
        },
        {
          prop: "registeCode",
          label: "机器编码",
          minWidth: "100",
          slotName: "registeCode",
        },
        {
          prop: "orgName",
          label: "牧场名字",
          minWidth: "100",
          slotName: "orgName",
        },
        {
          label: "操作",
          minWidth: "50",
          slotName: "hander",
        },
      ],
      userItem: null,
    };
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.size = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.init();
    },
    ...mapActions(["GetFarm"]),
    search() {
      this.loading = true;
      this.pageNum = 1;
      let params = {
        page: this.pageNum,
        limit: this.size,
      };
      if (this.form.eartagNo !== "") {
        params.eartagNo = this.form.eartagNo;
      }
      if (this.form.date.length > 0) {
        params.starTime = this.form.date[0];
        params.endTime = this.form.date[1];
      }
      if (this.form.stage !== "") {
        params.state = this.form.state;
      }
      if (this.form.deviceCode !== "") {
        params.deviceCode = this.form.deviceCode;
      }
      getEarTagList(params)
        .then((res) => {
          if (res.code === 0) {
            this.list = res.page.list;
            this.total = res.page.totalCount;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    init() {
      this.loading = true;
      let params = {
        page: this.pageNum,
        limit: this.size,
      };
      getEarTagList(params)
        .then((res) => {
          if (res.code === 0) {
            this.list = res.page.list;
            this.total = res.page.totalCount;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getStage(id) {
      let data = this.stageList.find((item) => {
        return item.value == id;
      });
      return data.label;
    },
    jump(item) {
      this.$router.push({
        path: "/earTagDetail",
        query: {
          id: item.eartagNo,
        },
      });
    },
    reset() {
      this.form = {
        farm: this.farmList[0].id,
        date: [],
        eartagNo: "",
        stage: "",
        deviceCode: "",
      };
    },
  },
  created() {
    this.userItem = JSON.parse(localStorage.getItem("gold_UserItem"));
    this.GetFarm();
  },
  mounted() {
    this.init();
    this.form.farm = this.farmList[0].id;
  },
};
</script>
<style scoped>
.individual-data {
  box-sizing: border-box;
}
.xForm {
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>
