<template>
  <div>
    <el-form :model="filterQuery" class="query-form" size="mini" label-width="100px" v-if="showSearch" @submit.native.prevent>
      <el-row>
        <el-col :span="18">
          <el-form-item prop="code" label="标签查询:">
            <el-input
              id="inputer"
              @focus="getInputFocus($event)"
              @keypress.enter.native="enterKey($event)"
              ref="inputRef"
              style="ime-mode: disabled"
              type="tel"
              placeholder="请点击输入框进扫码查询灯组"
              v-model="filterQuery.scanCode"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row>-->
      <!--  <el-col :span="8">-->
      <!--    <el-form-item class="query-form-item" label="单据类型名称:">-->
      <!--      <el-input v-model="filterQuery.name" placeholder="请输入单据类型名称" clearable style="width: 90%"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="8">-->
      <!--    <el-form-item class="query-form-item" label="出入库类型:">-->
      <!--      <el-select v-model="filterQuery.mainAction" style="width: 90%" placeholder="请选择出入库类型">-->
      <!--        <el-option label="全部" value=""></el-option>-->
      <!--        <el-option label="入库" value="WareHouseIn"></el-option>-->
      <!--        <el-option label="出库" value="WareHouseOut"></el-option>-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="8">-->
      <!--    <el-form-item class="query-form-item" label="是否启用:">-->
      <!--      <el-select v-model="filterQuery.enable" style="width: 90%" placeholder="是否启用">-->
      <!--        <el-option label="全部" value=""></el-option>-->
      <!--        <el-option label="已启用" value="1"></el-option>-->
      <!--        <el-option label="未启用" value="0"></el-option>-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->

      <!--</el-row>-->
    </el-form>


    <div class="top-right-btn">
      <el-button-group>
        <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <!--<el-button type="primary" icon="el-icon-plus" @click="chooseDrug">选入药品信息</el-button>-->
        <!--          <el-button type="primary" icon="el-icon-plus" @click="addDrug">新增药品信息</el-button>-->
      </el-button-group>
    </div>

    <el-table v-loading="loading" :data="ledList" style="width: 100%" :row-style="{height: '25px' }"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="灯组标签" prop="mac" ></el-table-column>
      <el-table-column label="led灯编号" prop="ledNum" ></el-table-column>
      <el-table-column label="红灯状态" prop="red">
        <template slot-scope="scope">
          <span v-if="scope.row.red === 0"><el-tag type="info">关闭</el-tag></span>
          <span v-else><el-tag type="success">开启</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="黄灯状态" prop="orange" >
        <template slot-scope="scope">
          <span v-if="scope.row.orange === 0"><el-tag type="info">关闭</el-tag></span>
          <span v-else><el-tag type="success">开启</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="蓝灯状态" prop="blue" >
        <template slot-scope="scope">
          <span v-if="scope.row.blue === 0"><el-tag type="info">关闭</el-tag></span>
          <span v-else><el-tag type="success">开启</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="绿灯状态" prop="green" >
        <template slot-scope="scope">
          <span v-if="scope.row.green === 0"><el-tag type="info">关闭</el-tag></span>
          <span v-else><el-tag type="success">开启</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作" fixed="right" >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="bindLED(scope.row)"
          >绑定
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :limit.sync="filterQuery.limit"
      :page.sync="filterQuery.page"
      @pagination="getList()"
    >
    </pagination>
  </div>

</template>

<script>
import {  getLeds } from '@/api/collect/collectLedGroup'
import {binding } from '@/api/basic/workPlace/SysWorkplaceQueue'
import { isBlank } from '@/utils/strUtil'

export default {
  props: {
    queueData: {
      type: Object,
      required: true
    },
    closeBindLed: {
      type: Function,
      required: true
    },
  },
  data() {
    return {
      loading: false,
      ledList: [],
      total:0,
      filterQuery:{
        page: 1,
        limit: 10,
        scanCode:"",
        isBind: 1,
      },
      showSearch: true,
      lesStatusMap: {
        true : "开启",
        false: "关闭"
      }
    }
  },
  methods:{
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    onReset() {
      this.$router.push({
        path: ''
      })
      this.filterQuery = {
        page: 1,
        limit: 10,
        scanCode:"",
        isBind: 1,
      }
      this.getList()
    },
    getInputFocus(event) {
      event.currentTarget.select()
    },
    getList(){
      getLeds(this.filterQuery).then(res => {
        if (res.code == 20000){
          this.ledList = res.data.list || []
          this.total = res.data.total || 0
        }else {
          this.ledList = []
          this.total =  0
          this.$message.error(res.message)
        }
      })
    },
    onSubmit() {
      this.filterQuery.page = 1
      this.getList()
    },
    bindLED(row){
      this.queueData.mac = row.mac
      binding(this.queueData).then(res => {
        if (res.code == 20000){
          this.closeBindLed()
          this.$message.success("绑定成功")
        }else {
          this.closeBindLed()
          this.$message.error(res.meaage)
        }
      })
      // this.$emit('bindLed', row);
    },
    enterKey(){
      if (isBlank(this.filterQuery.scanCode)) {
        return this.$message.error('灯组标签不能为空')
      }
      this.filterQuery.mac = this.filterQuery.scanCode
      this.getList()
      this.filterQuery.scanCode = null
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>

</style>
