<template>
  <div>
    <NewTable v-loading="tableLoading" :title="'耳标数据'" :list-data="tableData" :table-items="tableItems" @selectionChange="selectionChange">
      <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>{{ stageList[scope.row.stage - 1].label }}</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>
    </NewTable>
    <table-footer
      :totals="total"
      :size="pageSize"
      @sizeChange="sizeChange"
      @pageChange="pageChange"></table-footer>
  </div>
</template>

<script>
import NewTable from "../../components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";
import { sellEarList } from "../../utils/apis/sell-pig/sellPig";
import { mapState } from "vuex";

export default {
  name: "SellEarTag",
  components: {
    NewTable,
    TableFooter
  },
  computed: {
    ...mapState(['stageList'])
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      tableItems: [
        {
          prop: 'time',
          label: '采集时间',
          slotName: 'time'
        },
        {
          prop: 'eartagNo',
          label: '耳标号',
          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",
        },
        {
          label: "操作",
          minWidth: "50",
          slotName: "hander",
        },
      ],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      pigpenId: '',
      farmId: localStorage.getItem('gold_lastFarmId')
    }
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {
      this.tableLoading = true;
      let params = {
        current: this.pageNum,
        size: this.pageSize,
        farmId: this.farmId
      }
      if(this.pigpenId !== '') {
        params.pigpenId = this.pigpenId
      }
      sellEarList(params).then(res => {
        if(res.code === 10000) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        this.tableLoading = false;
      })
    },
    jump(item) {
      this.$store.commit('SET_KEEPALIVE', ['SellEarTag'])
      this.$router.push({
        path: "/earTagDetail",
        query: {
          id: item.eartagNo,
        },
      });
    },
    selectionChange(data) {
      console.log(data)
    }
  },
  mounted() {
    this.init()
  },
  beforeRouteLeave(to, from, next) {
    if(to.path.indexOf('/earTagDetail') > -1) {
      this.$store.commit('SET_KEEPALIVE', ['SellEarTag'])
    } else {
      this.$store.commit('SET_KEEPALIVE', [''])
    }
    next()
  }
}
</script>

<style scoped>

</style>
