<template>
  <div class="form-wrap">
    <el-form
      class="searchBox"
      ref="form"
      :model="form"
      :inline="true"
      label-width="140px">
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="名称"
        prop="keyWords1">
        <el-input v-model="form.keyWords1"></el-input>
      </el-form-item>
      <el-form-item
        label="IP地址"
        prop="keyWords2">
        <el-input v-model="form.keyWords2"></el-input>
      </el-form-item>
      <el-form-item
        label="类型"
        prop="keyWords3">
        <el-select v-model="form.keyWords3">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="状态"
        prop="keyWords5">
        <el-select v-model="form.keyWords5">
          <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-form-item
        label="通道组"
        prop="keyWords8">
        <el-select
          :disabled="form.type_id === 2"
          v-model="form.keyWords8"
          @change="getChannelByGroup">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            v-for="item in channelGroupList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="通道"
        prop="keyWords6">
        <el-select
          :disabled="form.type_id === 2"
          v-model="form.keyWords6">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            v-for="item in channelList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="Mac地址"
        prop="keyWords9">
        <el-input v-model="form.keyWords9"></el-input>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getTwo(true)">
          搜索
        </el-button>
      </div>
    </el-form>

    <div class="tableBox">
      <div class="block-title">
        未配置设备
      </div>
      <el-table
        border
        stripe
        :data="tableData">
        <el-table-column
          type="index"
          width="50px"
          label="#">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="类型">
        </el-table-column>
        <el-table-column
          width="120"
          prop="ip"
          label="IP">
        </el-table-column>
        <el-table-column
          prop="mac"
          label="MAC">
        </el-table-column>
        <!-- <el-table-column
        width="100"
        prop="qrcode_check_time_interval"
        label="检票间隔秒数">
      </el-table-column> -->
        <el-table-column
          width="80"
          prop="version_name"
          label="版本名">
        </el-table-column>
        <el-table-column
          width="80"
          label="进出">
          <template slot-scope="props">
            <span>{{ props.row.is_in | filterInOut }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="day_enter"
          label="当日进">
        </el-table-column>
        <el-table-column
          width="80"
          prop="day_exit"
          label="当日出">
        </el-table-column>
        <el-table-column
          width="80"
          label="状态">
          <template slot-scope="props">
            <span>{{ props.row.online | filterOnline }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="最后在线时间">
          <template slot-scope="props">
            <span>{{ props.row.last_online_time | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间">
          <template slot-scope="props">
            <span>{{ props.row.create_time | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-if="scope.row.online ===1"
              @click="openConfigDialog(scope.row)">
              配置
            </el-link>
            <el-link
              type="primary"
              @click="openDialog(scope.row)">
              编辑
            </el-link>

            <el-link
              type="primary"
              @click="deleteChecker(scope.row,0)">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-size="10"
        layout="prev, pager, next, total"
        :current-page.sync="page.pageNum"
        @current-change="getList()"
        :total="total">
      </el-pagination>
    </div>

    <div class="tableBox">
      <div class="block-title">
        已配置设备
      </div>

      <el-table
        border
        :data="tableData1">
        <el-table-column
          type="index"
          width="50px"
          label="#">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="channel_name"
          label="通道">
        </el-table-column>
        <el-table-column
          prop="scenics[0].name"
          label="景点">
        </el-table-column>
        <el-table-column
          prop="ip"
          label="IP">
        </el-table-column>
        <el-table-column
          prop="mac"
          label="MAC">
        </el-table-column>
        <!-- <el-table-column
        prop="qrcode_check_time_interval"
        label="检票间隔秒数">
      </el-table-column> -->
        <el-table-column
          width="80"
          prop="version_name"
          label="版本名">
        </el-table-column>
        <el-table-column
          width="70"
          label="进出">
          <template slot-scope="props">
            <span>{{ props.row.is_in | filterInOut }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="day_enter"
          label="当日进">
        </el-table-column>
        <el-table-column
          width="80"
          prop="day_exit"
          label="当日出">
        </el-table-column>
        <el-table-column
          width="80"
          label="状态">
          <template slot-scope="props">
            <span>{{ props.row.online | filterOnline }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="最后在线时间">
          <template slot-scope="props">
            <span>{{ props.row.last_online_time | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间">
          <template slot-scope="props">
            <span>{{ props.row.create_time | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-if="scope.row.online ===1"
              @click="openConfigDialog(scope.row)">
              配置
            </el-link>
            <el-link
              type="primary"
              @click="openDialog(scope.row)"
            >
              编辑
            </el-link>

            <el-link
              type="primary"
              @click="deleteChecker(scope.row)">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-size="10"
        layout="prev, pager, next, total"
        :current-page.sync="page1.pageNum"
        @current-change="getList1()"
        :total="total1"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <ElDialog
      title="编辑设备"
      width="760px"
      v-model="dialogVisible"
    >
      <DialogEdit
        :group-list="channelGroupList"
        :current-item="currentItem"
        @updateList="getTwo"
      ></DialogEdit>
    </ElDialog>
    <!-- 配置弹框 -->
    <ElDialog
      title="编辑配置"
      width="1000px"
      v-model="configDialogVisible"
    >
      <ConfigSetting
        :ip="currentIP"></ConfigSetting>
    </ElDialog>
  </div>
</template>

<script>
import { apiChannelGroup, getDeviceTypeList, getDeviceList, apiChannel, deleteChecker } from '@/api/checker'
import ElDialog from '@/components/Dialog'
import DialogEdit from './deviceManage/DialogEdit'
import ConfigSetting from './deviceManage/ConfigSetting'
export default {
  data () {
    return {
      form: {
        startDate: '',
        endDate: '',
        keyWords1: '', // 名称
        keyWords2: '', // IP
        keyWords3: '', // 类型id
        keyWords4: '',
        keyWords5: '', // 状态
        keyWords6: '', // 通道id
        keyWords7: '', // 是否已配置
        keyWords8: '',
        keyWords9: '', // Mac地址
        pageSize: 10
      },
      page: {
        pageNum: 1
      },
      page1: {
        pageNum: 1
      },
      currentIP: '', // 配置IP地址
      channelGroupList: [], // 通道组列表
      channelList: [],
      typeList: [], // 设备类型列表
      tableData: [],
      tableData1: [],
      total: 0,
      total1: 0,
      dialogVisible: false,
      configDialogVisible: false,
      currentItem: {}
    }
  },
  created () {
    this.getDeviceTypeList().then(() => {
      this.getTwo()
    })
    this.getChannelGroup()
  },
  components: {
    ElDialog,
    DialogEdit,
    ConfigSetting
  },
  filters: {
    filterOnline (n) {
      return n === 1 ? '在线' : '离线'
    },
    filterInOut (n) {
      switch (n) {
        case 1:
          return '进口'
        case 2:
          return '出口'
        case 3:
          return '双向'
      }
    }
  },
  methods: {
    getChannelByGroup (id) {
      if (id) {
        apiChannel('getCheckerChannelList', {
          keyWords3: id
        }).then(res => {
          this.channelList = [...res.list]
        })
      } else {
        this.channelList = []
      }
      this.form.keyWords6 = ''
    },
    reset () {
      this.$refs.form.resetFields()
    },
    getDeviceTypeList () {
      return getDeviceTypeList().then(res => {
        this.typeList = res.list
      })
    },
    // 获取通道组列表
    getChannelGroup () {
      apiChannelGroup('getCheckerChannelGroupList', { pageNum: 1, pageSize: 10000 }).then(res => {
        this.channelGroupList = res.list
      })
    },
    getTwo (flag) {
      this.getList(flag)
      this.getList1(flag)
    },
    // 获取通道列表
    getList (goFirst) {
      let params = { ...this.form, ...this.page }
      params.keyWords6 = -1
      params.keyWords7 = 0

      goFirst && (params.pageNum = 1)

      getDeviceList(params).then(res => {
        res.list.forEach(item => {
          let type = this.typeList.find(t => t.id === item.type_id)
          item.typeName = type ? type.name : ''
        })
        this.total = res.total
        this.tableData = res.list
      })
    },
    getList1 (goFirst) {
      let params = { ...this.form, ...this.page1 }
      params.keyWords7 = 1

      goFirst && (params.pageNum = 1)

      getDeviceList(params).then(res => {
        res.list.forEach(item => {
          let type = this.typeList.find(t => t.id === item.type_id)
          if (type) {
            item.typeName = type.name
          }
        })
        this.total1 = res.total
        this.tableData1 = res.list
      })
    },
    // 打开弹框
    openDialog (item) {
      this.currentItem = item
      this.dialogVisible = true
    },

    // 打开配置弹框
    openConfigDialog (item) {
      this.configDialogVisible = true
      this.currentIP = item.ip
    },
    deleteChecker (data, index) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteChecker(data).then(res => {
          this.$message.success('操作成功')
          if (index === 0) {
            this.getList()
          } else {
            this.getList1()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
