<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="请通过设备编号搜索"
        enter-button="查询"
        size="large"
        @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.name }}</p>
          <a-button
            id="equipment-unbind"
            v-if="!resultData.params"
            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-table
      class="table"
      ref="table"
      bordered
      size="small"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data-source="equipmentData"
      :pagination="false">
      <!-- 箱体类型 -->
      <template slot="type" slot-scope="record">
        <a-select
          id="equipment-type"
          allowClear
          placeholder="请选择箱体类型"
          style="width: 100%;"
          @change="typeChange">
          <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.value">
            {{ item.value }}
          </a-select-option>
        </a-select>
      </template>
      <!-- 工作状态 -->
      <template slot="workStatus" slot-scope="record">
        <a-switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          id="equipment-changeFlagHandle"
          v-model="record.workStatus == 1 ? true : false"
          @change="changeFlagHandle(record)"
        />
      </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-modal>
</template>

<script>
import { deviceEnable } from '@/api/device'
export default {
  name: 'EquipmentModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    networkId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      resultData: null, //  设备搜索结果
      noData: 0,
      isFocus: false, //  搜索框是否获取焦点
      columns: [
        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '设备编号', dataIndex: 'equipmentNo', width: 100, align: 'center' },
        { title: '设备状态', dataIndex: 'equipmentStatus', width: 150, align: 'center' },
        { title: '投放情况', dataIndex: 'putIn', 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: [
        { id: 1, no: 1, equipmentNo: 'x13132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' },
        { id: 2, no: 2, equipmentNo: 'x23132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' },
        { id: 3, no: 3, equipmentNo: 'x33132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '2' },
        { id: 4, no: 4, equipmentNo: 'x43132', equipmentStatus: '1', putIn: '10%-34%-0%-98%', type: '咸阳二代新箱体', workStatus: '1' }
      ],
      typeList: [] //  箱体类型
    }
  },
  methods: {
    //  获取详情
    getDetails () {},
    //  搜索设备
    onSearch (value) {
      if (value) {
        // findVsDevice({ id: 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
      }
    },
    //  门店已绑设备
    getStoreEquipment (id) {
      // findStoreVsDevice({ code: id }).then(res => {
      //   if (res.status == 200) {
      //     res.data.map((item, ind) => {
      //       item.no = ind + 1
      //     })
      //     this.equipmentData = res.data
      //   }
      // })
    },
    //  解绑
    onUnbundling (item) {
      const _this = this
      _this.$confirm({
        title: '提示',
        centered: true,
        content: '确定解绑该设备吗？',
        onOk () {
          // unbindVsDevice({ id: item.id }).then(res => {
          //   if (res.status == 200) {
          //     _this.$message.success(res.message)
          //     _this.getStoreEquipment(_this.storeCode)
          //   }
          // })
        }
      })
    },
    //  绑定
    onBundling (item) {
      const _this = this
      _this.$confirm({
        title: '提示',
        centered: true,
        content: '确定要绑定该设备吗？',
        onOk () {
          // bindVsDevice({ storeCode: _this.storeCode, vsDeviceId: item.id }).then(res => {
          //   if (res.status == 200) {
          //     _this.$message.success(res.message)
          //     _this.expandedRowKeys = []
          //     _this.resultData = null
          //     _this.isFocus = false
          //     _this.getStoreEquipment(_this.storeCode)
          //   }
          // })
        }
      })
    },
    //  箱体类型 change
    typeChange (val) {
      console.log(val)
    },
    // 更改启用禁用状态
    changeFlagHandle (record) {
      const _data = {
        id: record.id,
        flag: record.state == 1 ? '0' : '1'
      }
      deviceEnable(_data).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
          this.$refs.table.refresh()
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    },
    networkId (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetails()
      }
    }
  }
}
</script>

<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>
