<template>
  <div class="device-manage-page">
    <t-card class="page-card">
      <div class="track-container">
        <div class="search-container">
          <div class="search-ctn">
            <div>
              <div style="display: flex;">
                <t-input v-model="deviceName" placeholder="请输入设备名称">
                  <template slot="append">
                    <t-button color="primary" icon="search-outline" @click="selectHandle">查询</t-button>
                  </template>
                </t-input>
                <t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible = !slideVisible"></t-button>
              </div>
            </div>
            <div class="btns">
              <t-button color="primary" @click="showAddDeviceModal">
                <t-icon icon="plus-circle-outline" size="16"></t-icon><span> 新增</span>
              </t-button>
              <t-button @click="multDeleteDeviceData">
                <t-icon icon="trash" size="16"></t-icon>删除
              </t-button>
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                <div slot="popper">
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                      <t-checkbox v-for="(item) in columns" :key="item.label" :value="item.label" :label="item.label">
                        <span>{{ item.label }}</span>
                      </t-checkbox>
                    </t-checkbox-group>
                    <div style="padding-bottom: 10px">
                      <t-checkbox :indeterminate="indeterminate" :checked.sync="checkAll" @click.prevent.native="handleCheckAll">全选
                      </t-checkbox>
                    </div>
                    <t-button color="primary" size="sm" @click="onCloseClick">确认</t-button>
                  </div>
                </div>
              </t-dropdown>
            </div>
          </div>
          <div class="animate-demo-wrapper">
            <transition name="slide-up">
              <div v-show="slideVisible" class="transition-box allCondition">
                <div class="input-rule">
                  <span>设备类型：</span>
                  <t-select v-model="deviceTypeId" style="width:320px">
                    <t-option v-for="item in deviceTypesList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
                  </t-select>
                </div>
                <div class="input-rule">
                  <span>设备编号：</span>
                  <t-input v-model="deviceId" style="width:320px" placeholder="请输入设备编号"></t-input>
                </div>
                <a style="float:right;color:#0089d4;" @click="resetData" href="javascript:;">重置</a>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div class="table-box">
        <t-table :data="deviceDataList" line @selection-change="selectChange">
          <t-table-column type="selection" width="70"></t-table-column>
          <t-table-column v-if="columns[0].show" prop="deviceName" label="设备名称" width="250"></t-table-column>
          <t-table-column v-if="columns[1].show" prop="deviceId" label="设备编号" width="280"></t-table-column>
          <t-table-column v-if="columns[2].show" prop="deviceType" label="设备类型" width="280"></t-table-column>
          <t-table-column label="操作" width="140" fixed="right">
            <template v-slot="{row}">
              <a href="javascript:;" style="color:#0089D4;" @click="getDeviceInfo(row.resourceToolId)">详情</a>
              <a href="javascript:;" style="color:#0089D4;" @click="editDeviceData(row.resourceToolId)">编辑</a>
              <a href="javascript:;" style="color:#0089D4;" @click="deleteDeviceData(row)">删除</a>
            </template>
          </t-table-column>
        </t-table>
      </div>
      <div class="table-pager">
        <t-pager :current.sync="page" :total="total" :page-size="limit" :sizer-range="[10,20,50,100]" show-elevator show-sizer @on-size-change="onSizeChange" @on-change="onChange">>
        </t-pager>
      </div>
    </t-card>
    <template>
      <add-device-modal :types="deviceTypesList" :add-device-modal.sync="addDeviceModal" :current-edit-device="currentEditDevice" @refresh-data="getDeviceData()">
      </add-device-modal>
    </template>
    <!-- 设备详情对话框 -->
    <template>
      <device-info-modal :data="currentDeviceData">
      </device-info-modal>
    </template>
  </div>
</template>

<script>
import sysapi from '@/api/system'
import deviceInfoModal from './components/modal/deviceInfoModal.vue'
import addDeviceModal from './components/modal/addDeviceModal.vue'
// import sendOrderModal from './components/modal/sendordermodal.vue'
export default {
  components: {
    // sendOrderModal
    deviceInfoModal,
    addDeviceModal

  },
  data () {
    return {
      slideVisible: false,
      indeterminate: true,
      checkAll: true,
      social: ['设备名称', '设备编号', '设备类型'],
      columns: [
        {
          label: '设备名称',
          show: true
        }, {
          label: '设备编号',
          show: true
        }, {
          label: '设备类型',
          show: true
        }
      ],
      customVisibled: false,
      // 设备类型id
      deviceTypeId: '',
      // 设备类型
      deviceTypesList: [],
      // 设备数据列表
      deviceDataList: [],
      // 设备名称
      deviceName: '',
      // 设备编号
      deviceId: '',
      // 当前页
      page: 1,
      // 当前页的数据个数
      limit: 10,
      // 数据总数
      total: 100,
      // 批量删除的设备id
      deleteResourceToolId: [],
      // 当前设备数据
      currentDeviceData: {},
      // 显示/隐藏新增设备对话框
      addDeviceModal: false,
      currentEditDevice: {}
    }
  },
  created () {
    this.getDeviceData()
    this.getDeviceTypes()
  },
  methods: {
    checkAllGroupChange () {
      if (this.social.length === 3) {
        this.indeterminate = false
        this.checkAll = true
      } else if (this.social.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    },
    handleCheckAll () {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      if (this.checkAll) {
        this.social = ['设备名称', '设备编号', '设备类型']
      } else {
        this.social = []
      }
    },
    onTriggerClick () {
      this.customVisibled = true
    },
    onCloseClick () {
      this.columns.forEach(e => {
        e.show = this.social.indexOf(e.label) >= 0
      })
      this.customVisibled = false
    },
    // 获取设备列表数据
    async getDeviceData () {
      const res = await sysapi.getDeviceData({ params: { page: this.page, limit: this.limit, deviceTypeId: this.deviceTypeId, deviceName: this.deviceName, deviceId: this.deviceId } }
      )
      if (res.status === 200) {
        this.deviceDataList = res.data.data
        this.total = res.data.total
      } else {
        this.$Message.danger('设备数据列表获取失败！')
      }
    },
    // 向服务器发送请求获取设备类型列表数据
    async getDeviceTypes () {
      const res = await sysapi.getDeviceTypes()
      if (res.status === 200) {
        this.deviceTypesList = res.data.data
      } else {
        this.$Message.danger('设备类型列表数据获取失败！')
      }
    },
    // 查询数据
    selectHandle () {
      this.page = 1
      this.getDeviceData()
    },
    // 重置查询数据
    resetData () {
      this.page = 1
      this.deviceTypeId = ''
      this.deviceId = ''
      this.deviceName = ''
      this.getDeviceData()
    },
    // 当前页改变 触发事件
    onChange (page) {
      this.page = page
      this.getDeviceData()
    },
    // 当前页数据总数改变 触发事件
    onSizeChange (pageSize) {
      this.limit = pageSize
      this.getDeviceData()
    },
    // 删除数据
    deleteDeviceData (row) {
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteDeviceData({ resourceToolId: row.resourceToolId })
          if (res.status === 200) {
            this.getDeviceData()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')
          }
        },
        cancel: () => {
          this.$Message.info('已取消删除！')
        }
      })
    },
    // 当复选框发生改变时 触发事件
    selectChange (data) {
      const arr = []
      data.forEach(item => arr.push(item.resourceToolId))
      this.deleteResourceToolId = arr
    },
    // 批量删除数据
    multDeleteDeviceData () {
      if (this.deleteResourceToolId.length === 0) {
        return this.$Message.warning('请选择要删除的数据！')
      }
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteDeviceData({ resourceToolId: this.deleteResourceToolId })
          if (res.status === 200) {
            this.getDeviceData()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')
          }
        },
        cancel: () => {
          this.$Message.info('已取消删除！')
        }
      })
    },
    // 获取设备详情数据
    async getDeviceInfo (id) {
      const res = await sysapi.getDeviceInfo(id)
      if (res.status === 200) {
        this.currentDeviceData = res.data
      } else {
        this.$Message.danger('设备详情数据获取失败！')
      }
    },
    // 显示新增设备对话框
    showAddDeviceModal () {
      this.addDeviceModal = true
    },
    async editDeviceData (id) {
      const res = await sysapi.getDeviceInfo(id)
      if (res.status === 200) {
        this.currentEditDevice = res.data
      } else {
        this.$Message.danger('设备数据获取失败！')
      }
      this.addDeviceModal = true
    }
  }
}
</script>

<style lang="scss">
.device-manage-page {
  .card-block {
    padding: 0px 24px !important;
  }
  .track-container {
    width: 100%;
    margin: 24px 0;
    // padding: 20px;
    box-sizing: border-box;
    .search-container {
      width: 100%;
      .search-ctn {
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        > div {
          // margin: 0 20px 16px 0;
          line-height: 2;
        }
        .btns {
          margin-left: auto;
          display: block;
          button {
            margin: 0 2px;
          }
        }
      }
    }
    .table-pager {
      margin: 20px auto;
    }
    .allCondition {
      display: flex;
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        flex: 1;
        padding: 10px 0 10px 20px;
      }
    }
  }
  .table-box {
    margin: 20px 0;
  }
  .table-pager {
    display: flex;
    justify-content: flex-end;
  }
}
</style>