<!--
 * @Author: your name
 * @Date: 2022-01-08 10:32:10
 * @LastEditTime: 2022-01-08 10:32:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \goldenPig\src\views\eartag-admin\device-status\DeviceStatus.vue
-->
<template>
  <div class="device">
      <el-card>
        <el-form :inline="true" label-width="100px" 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-input v-model="form.registeCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <br>
      <div>
        <new-table
          v-loading="loading"
          :height="600"
          :title="devTitle"
          :listData="list"
          :tableItems="tableItems">
          <template #stage="scope">
            <span>{{ getStage(scope.row.stage) }}</span>
          </template>
          <template #dong="scope">
            <span>{{ scope.row.penName }}{{ scope.row.unitName }}</span>
          </template>
          <template #canStatus="scope">
            <span v-if="scope.row.canStatus === 0" style="color: #52c41a">正常</span>
            <span v-else style="color: red">异常</span>
          </template>
        </new-table>
        <table-footer
          :totals="total"
          :size="pageSize"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></table-footer>
      </div>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { getDeviceList } from "@/utils/apis/device-admin/deviceAdmin";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
export default {
  components: {
    NewTable,
    TableFooter
  },
  computed: {
    ...mapState(["stageList", "farmList"]),
  },
  data() {
    return {
      form: {
        farm: '',
        registeCode: '',
      },
      devTitle: '设备列表',
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: true,
      list: [],
      tableItems: [
        {
          prop: "id",
          label: "注册id",
          minWidth: "50",
          slotName: "id",
        },
        {
          prop: "registerTime",
          label: "芯片编码",
          minWidth: "100",
          slotName: "registerTime",
        },
        {
          prop: 'deviceCode',
          label: '设备编码',
          minWidth: "100",
          slotName: "deviceCode",
        },
        {
          prop: "registeCode",
          label: "注册编码",
          minWidth: "100",
          slotName: "registeCode",
        },
        {
          prop: "farmName",
          label: "牧场名",
          minWidth: "100",
          slotName: "farmName",
        },
        {
          prop: "farmCode",
          label: "牧场编码",
          minWidth: "100",
          slotName: "farmCode",
        },
        {
          label: "牧场编码",
          minWidth: "50",
          slotName: "stage",
        },
        {
          label: "栋舍",
          minWidth: "100",
          slotName: "dong",
        },
        {
          prop: 'lastTime',
          label: "最后上传时间",
          minWidth: "100",
          slotName: "lastTime",
        },
        {
          label: "设备状态",
          minWidth: "50",
          slotName: "canStatus",
        },
      ],
    }
  },
  methods: {
    ...mapActions(["GetFarm"]),
    // 修改size
    sizeChange(val) {
      this.size = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageSize = val;
      this.init();
    },
    init() {
      let params = {
        farmId: this.form.farm,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      }
      if(this.form.registeCode !== '') {
        params.registeCode = this.form.registeCode
      }
      getDeviceList(params).then(res => {
        this.loading = false
        console.log(res)
        if(res.code === 10000) {
          this.list = res.data.records;
          this.total = res.data.total;
        }
      })
    },
    getStage(id) {
      let data = this.stageList.find((item) => {
        return item.value == id;
      });
      return data.label;
    },
  },
  created() {
    this.userItem = JSON.parse(localStorage.getItem("gold_UserItem"));
    this.GetFarm()
    console.log(this.userItem)
  },
  mounted() {
    if(this.userItem.type === 0) {
      this.form.farm = this.farmList[0].id;
    } else {
      this.form.farm = parseInt(this.userItem.farmId);
    }
    this.init();
  },
};
</script>
<style scoped>
.device{
  box-sizing: border-box;
  padding: 20px;
}
.x-from {
  box-sizing: border-box;
}
</style>
