<template>
  <a-modal
    centered
    class="edit-network-modal"
    :footer="null"
    :maskClosable="false"
    title="绑定设备"
    v-model="isShow"
    @cancle="isShow=false"
    :width="1000">
    <!-- 搜索设备 -->
    <div class="search-con" @blur="isFocus=false">
      <a-input-search
        id="equipment-search"
        class="search-s"
        allow-clear
        placeholder="请通过设备编号或MAC地址搜索"
        enter-button="查询"
        size="large"
        v-model="searchVal"
        @blur="noData=0"
        @focus="isFocus=true"
        @search="onSearch"
      />
      <a-card class="search-sub" :bordered="false">
        <div class="noData" v-if="noData==1" style="text-align: center;">未查询到结果</div>
        <div class="search-sub-item" v-if="resultData && isFocus">
          <p>{{ resultData.srcDeviceCode }}</p>
          <a-button
            id="equipment-unbind"
            v-if="resultData.bindingFlag == 0"
            type="primary"
            ghost
            size="small"
            @click="onBundling(resultData)">立即绑定</a-button>
          <a-button id="equipment-bind" v-else disabled type="link">已绑定</a-button>
        </div>
      </a-card>
    </div>
    <!-- 已绑设备 -->
    <div class="eq-tit">已绑设备：</div>
    <a-spin tip="Loading..." :spinning="isLoading">
      <a-table
        class="table"
        ref="table"
        bordered
        size="small"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data-source="equipmentData"
        :pagination="false">
        <!-- 设备状态 -->
        <template slot="onlineFlag" slot-scope="record">
          <span v-if="record.deviceType!='STEELYARD'" :style="{'color':(record.onlineFlag==0 ? 'red' : record.onlineFlag==1 ? 'green' : '')}">{{ record.onlineFlag == 0 ? '离线' : record.onlineFlag == 1 ? '在线' :'--' }}</span>
          <span v-else>--</span>
        </template>
        <!-- 箱体类型 -->
        <template slot="type" slot-scope="record">
          <a-select
            id="equipment-type"
            placeholder="请选择箱体类型"
            style="width: 100%;"
            v-model="record.deviceTypeNo"
            v-if="record.deviceType!='STEELYARD'"
            :disabled="record.state == 1"
            @change="typeChange($event, record)">
            <a-select-option v-for="(item,index) in record.deviceTypeList" :key="index" :value="item.deviceTypeNo">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <span v-else>--</span>
        </template>
        <!-- 工作状态 -->
        <template slot="workStatus" slot-scope="record">
          <a-switch
            checkedChildren="启用"
            unCheckedChildren="禁用"
            id="equipment-changeFlagHandle"
            v-if="record.state && record.deviceType!='STEELYARD'"
            v-model="record.state == 1 ? true : false"
            @change="changeFlagHandle(record)"
          />
          <span v-else>--</span>
        </template>
        <!-- 操作 -->
        <template slot="action" slot-scope="record">
          <a-button
            type="primary"
            ghost
            size="small"
            id="equipment-unBind"
            @click="onUnbundling(record)">解绑</a-button>
        </template>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { deviceEnable, deviceListQuery, deviceFindDevice, deviceUpdateDeviceType } from '@/api/device'
import { stationBind, stationUnBind } from '@/api/station'
import { deviceTypeListQuery } from '@/api/boxSetting'

export default {
  name: 'EquipmentModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    networkId: {
      type: [Number, String],
      default: ''
    },
    networkNo: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      resultData: null, //  设备搜索结果
      noData: 0,
      isFocus: false, //  搜索框是否获取焦点
      searchVal: '', //  搜索框值
      columns: [
        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '设备编号', dataIndex: 'srcDeviceCode', width: 100, align: 'center' },
        { title: '设备状态', scopedSlots: { customRender: 'onlineFlag' }, width: 150, align: 'center' },
        { title: '设备类型', dataIndex: 'deviceTypeDictValue', width: 150, align: 'center' },
        { title: '箱体类型', scopedSlots: { customRender: 'type' }, width: 150, align: 'center' },
        { title: '工作状态', scopedSlots: { customRender: 'workStatus' }, width: 150, align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 80, align: 'center' }
      ],
      equipmentData: [],
      typeList: [], //  箱体类型
      isLoading: true //  加载状态
    }
  },
  methods: {
    //  已绑设备
    getDevice () {
      deviceListQuery({ stationNo: this.networkNo }).then(res => {
        if (res.status == 200) {
          this.equipmentData = res.data
          this.equipmentData.map((item, index) => {
            item.no = index + 1
            //  处理每个设备所对应的箱体类型
            item.deviceTypeList = this.typeList.filter(tk => !item.boxNum || tk.boxNum == item.boxNum)
          })
        } else {
          this.equipmentData = []
        }
        this.isLoading = false
      })
    },
    //  箱体类型下拉数据
    getDeviceType () {
      deviceTypeListQuery({}).then(res => {
        if (res.status == 200) {
          this.typeList = res.data
        } else {
          this.typeList = []
        }
        this.getDevice()
      })
    },
    //  搜索设备
    onSearch (value) {
      if (value) {
        deviceFindDevice({ srcDeviceCode: value }).then(res => {
          if (res.status == 200) {
            if (res.data) {
              this.noData = 2
              this.resultData = res.data
            } else {
              this.noData = 1
              this.resultData = null
            }
          }
        })
      } else {
        this.noData = 0
        this.resultData = null
        this.isFocus = false
      }
    },
    //  解绑
    onUnbundling (item) {
      const _this = this
      _this.$confirm({
        title: '提示',
        centered: true,
        content: '确定解绑该设备吗？',
        onOk () {
          stationUnBind({ srcDeviceCode: item.srcDeviceCode, stationNo: _this.networkNo }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.getDevice()
            }
          })
        }
      })
    },
    //  绑定
    onBundling (item) {
      const _this = this
      _this.$confirm({
        title: '提示',
        centered: true,
        content: '确定要绑定该设备吗？',
        onOk () {
          stationBind({ srcDeviceCode: item.srcDeviceCode, stationNo: _this.networkNo }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.resultData = null
              _this.isFocus = false
              _this.getDevice()
            }
          })
        }
      })
    },
    //  箱体类型 change
    typeChange (deviceTypeNo, record) {
      deviceUpdateDeviceType({ id: record.id, deviceTypeNo: deviceTypeNo }).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.$message.success(res.message)
        }
      })
    },
    // 更改启用禁用状态
    changeFlagHandle (record) {
      const _data = {
        id: record.id,
        state: record.state == 1 ? '0' : '1'
      }
      deviceEnable(_data).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
          this.getDevice()
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    },
    networkId (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.searchVal = ''
        this.resultData = null //  设备搜索结果
        this.noData = 0
        this.isFocus = false //  搜索框是否获取焦点
        this.isLoading = true
        this.equipmentData = []
        this.getDeviceType()
      }
    }
  }
}
</script>
<style scoped>
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
}
</style>
<style lang="less">
  .edit-network-modal{
    .search-con{
      position: relative;
      .search-s{
        .ant-input-group-addon{
          padding: 0;
          border: none;
        }
      }
      .search-sub{
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        position: absolute;
        left: 0;
        top: 45px;
        width: 100%;
        z-index: 1;
        border-radius: 6px;
        .ant-card-body{
          padding: 15px 24px;
        }
        .search-sub-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          border-bottom: 1px dashed #f8f8f8;
          p{
            margin: 0;
          }
          &:last-child{
            border-bottom: none;
          }
        }
      }
    }
    .eq-tit{
      line-height: 40px;
      font-size: 16px;
      margin: 85px 0 5px;
    }
    .eq-subTit{
      margin: 0 0 10px;
    }
    .table{
      padding-bottom: 50px;
    }
  }
  .btn-cont{
    text-align: center;
    .cancel{
      margin-left: 40px;
    }
  }
</style>
