<template>
  <div class="tab-block">
    <el-radio-group v-model="type" @change="changeType">
      <el-radio :label="'lamp'">按路灯</el-radio>
      <el-radio :label="'lampbox'">按灯箱</el-radio>
      <el-radio :label="'circuit'">按回路</el-radio>
    </el-radio-group>
    <!-- 按路灯搜索 -->
    <div class="search-row">
      <el-row v-if="type === 'lamp'" :gutter="10">
        <el-col :span="6">
          <el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
        </el-col>
        <el-col :span="6">
          <el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
            <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="lampQuery.lampStreet" size="small" placeholder="道路" filterable clearable>
            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="lampQuery.lampArea" size="small" placeholder="责任网格" filterable clearable>
            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
          </el-select>
        </el-col>
      </el-row>
      <!-- 按灯箱搜索 -->
      <el-row v-if="type === 'lampbox'" :gutter="10">
        <el-col :span="8">
          <el-input v-model.trim="lampQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
        </el-col>
        <el-col :span="8">
          <el-select v-model="lampQuery.lampboxStreet" size="small" placeholder="道路" filterable clearable>
            <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
          </el-select>
        </el-col>
      </el-row>
      <!-- 按回路搜索 -->
      <el-row v-if="type === 'circuit'" :gutter="10">
        <el-col :span="10" :offset="2">
          <el-input v-model.trim="lampQuery.circuitCode" size="small" placeholder="灯箱编号" clearable />
        </el-col>
        <el-col :span="10">
          <el-select v-model="lampQuery.lampboxArea" size="small" placeholder="责任网格" filterable clearable>
            <el-option v-for="item in areaList" :key="item.id" :label="item.areaName" :value="item.id"/>
          </el-select>
        </el-col>
      </el-row>
      <!-- 搜索 & 开关灯 -->
      <el-row class="button-row">
        <el-button class="search-button" size="small" type="primary" @click="searchLamp">搜索</el-button>
        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','1')">开灯</el-button>
        <el-button class="search-button" size="small" type="primary" @click="controlLamp('','0')">关灯</el-button>
      </el-row>
    </div>
    <!-- 搜索结果列表 -->
    <el-table
      v-loading="listLoading"
      v-show="showList"
      :row-style="{height: '33px'}"
      :cell-style="{padding: '0px'}"
      :data="lampList"
      class="infinite-list"
      border
      infinite-scroll-disabled="disabled"
      max-height="300px"
      style="margin-top: 20px;"
      @row-click="rowClick"
      @selection-change="handleSelectionChange">
      <el-table-column :selectable="selectable" align="center" type="selection" width="55"/>
      <el-table-column align="center" type="index" label="序号" width="50"/>
      <el-table-column align="center" prop="lampCode" label="路灯编号"/>
      <el-table-column align="center" prop="lampName" label="路灯名称"/>
      <el-table-column align="center" prop="statusName" label="路灯状态" width="80"/>
    </el-table>
  </div>
</template>

<script>
import { getAllStreet } from '@/api/street'

export default {
  name: 'LampTabPane',
  props: {
    lampQuery: {
      type: Object,
      default: function() {
        return {
          lampCode: '',
          status: '',
          lampStreet: '',
          lampArea: '',
          lampboxCode: '',
          lampboxStreet: '',
          lampboxArea: '',
          circuitCode: ''
        }
      }
    }, // 查询条件
    lampList: {
      type: Array,
      default: function() {
        return []
      }
    }, // 路灯列表
    listLoading: {
      type: Boolean,
      default: false
    }, // 列表加载
    showList: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: 'lamp',
      statusList: [
        { value: '1', name: '开灯' },
        { value: '2', name: '灭灯' },
        { value: '3', name: '报警' },
        { value: '4', name: '离线' }
      ],
      streetList: [],
      areaList: []
    }
  },
  created() {
    this.initStreetList()
    this.initAreaList()
  },
  methods: {
    searchLamp() {
      console.log('inQuery', this.lampQuery)
      this.$emit('searchLamp')
      // this.showList = true
    },
    controlLamp(lampIds, controlType) {
      this.$emit('controlLamp', { lampIds: lampIds, controlType: controlType })
    },
    initStreetList() {
      getAllStreet().then(res => {
        this.streetList = res.data
      })
    },
    initAreaList() {
      // todo
      getAllStreet().then(res => {
        this.areaList = res.data
      })
    },
    // 多选触发方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 状态为"离线"，不能勾选
    selectable(row, index) {
      return row.status !== '4'
    },
    rowClick(row) {
      this.$emit('rowClick', row)
    },
    changeType() {
      this.$emit('changeType')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-radio-group{
  margin: 10px;
  margin-bottom: 0px;
}
.search-row{
  margin: 10px;
}
.button-row{
  /*margin: 10px;*/
  margin-top: 10px;
  margin-bottom: -15px;
}
.search-button{
  margin: 10px;
}
  .infinite-list{
    margin-top: 10px;
  }
</style>