<template>
<div>
  <el-tabs type="border-card">
    <el-tab-pane label="系统配置">
      <el-card style="height: calc(100vh - 227.75px)">  
        <el-form :model="sysForm" :inline="true">
          <el-form-item label="仓库编号" :rules="[{ required: true, message: '仓库编号不能为空', trigger: 'blur' }]">
            <el-input v-model="sysForm.storeCode" />
          </el-form-item>
          <el-form-item label="服务器" :rules="[{ required: true, message: '服务器IP不能为空', trigger: 'blur' }]">
            <el-input v-model="sysForm.serverIp" />
          </el-form-item>
          <el-form-item label="端口" :rules="[{ required: true, message: '端口不能为空', trigger: 'blur' }]">
            <el-input v-model="sysForm.serverPort" />
          </el-form-item>
          <el-tooltip effect="dark" content="选中显示所有数据，不选中仅显示单据数据" placement="top-start">
            <el-form-item label="是否切换">
              <el-checkbox v-model="sysForm.isHide" />
            </el-form-item>
          </el-tooltip>
          <el-form-item>
            <el-button round type="success" @click="getConfig">刷新</el-button>
            <el-button round type="primary" @click="saveConfig">保存</el-button>
            <el-button round type="primary" @click="syncGoods">同步物资</el-button>
            <el-dropdown @command="handleCommand">
              <span style="cursor: pointer; background: #409eff;margin-left: 12px;">
                <img src="../assets/icons/主题.png" style="width: 32px;">
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="#223170">藏蓝风格</el-dropdown-item>
                  <el-dropdown-item command="#025799">蓝色风格</el-dropdown-item>
                  <el-dropdown-item command="#1f8a36">军绿风格</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="通道配置">
      <el-card style="height: calc(100vh - 227.75px)">
        <div class="head-container">
          <el-button class="filter-item" type="primary" style="float: right" @click="add">新增</el-button>
        </div>
        <el-table :data="channelList" border style="width: 100%;">
          <el-table-column prop="stationId" label="通道号" align="center" width="100"/>
          <el-table-column prop="readerIp" label="读写器" align="center">
            <template #default="scope">
              {{scope.row.readerIp + ':' + scope.row.readerPort }}
            </template>
          </el-table-column>
          <el-table-column prop="gpioIp" label="GPIO" align="center">
            <template #default="scope">
              {{scope.row.gpioIp + ':' + scope.row.gpioPort }}
            </template>
          </el-table-column>
          <el-table-column prop="ledIp" label="显示器" align="center">
            <template #default="scope">
              {{scope.row.ledIp + ':' + scope.row.ledPort }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-popconfirm title="你确定删除吗?" @confirm="removeDevice(scope.row)">
                <template #reference>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-tab-pane>
  </el-tabs>
  <el-dialog v-model="innerVisible" width="30%" :title="title">
      <el-form label-position="right" size="large" label-width="90px" :model="formData">
        <el-form-item label="通道号">
          <el-input v-model="formData.stationId" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="读写器IP">
              <el-input v-model="formData.readerIp"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="读写器端口">
              <el-input v-model="formData.readerPort"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="读写器类型">
          <el-select v-model="formData.readerType" style="width: 100%;">
            <el-option :value="4" label="四通道"></el-option>
            <el-option :value="8" label="八通道"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="天线功率">
          <el-input v-model="formData.readerPower" placeholder="四通道格式为10,10,10,10,范围为0-30之间。8通道同理"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="GPIO的IP">
              <el-input v-model="formData.gpioIp"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="GPIO端口">
              <el-input v-model="formData.gpioPort"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="显示屏IP">
              <el-input v-model="formData.ledIp"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示屏端口">
              <el-input v-model="formData.ledPort"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="innerVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </template>
  </el-dialog>
</div>
</template>

<script>
import { defineComponent, ref, getCurrentInstance, toRefs, reactive } from 'vue'
import { postAction, getAction } from '@/api/manage'
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup() {
    const channelList = ref([])
    const title = ref('')
    const sysForm = ref({})
    const formData = ref({})
    const innerVisible = ref(false)

    const state = reactive({
      url: {
        getConfig: '/config/getConfig',
        getDevice: '/device/getDevice',
        updateDevice: '/device/updateDevice',
        removeDevice: '/device/removeDevice',
        saveDevice: '/device/saveDevice',
        updateConfig: '/config/updateConfig',
        saveConfig: '/config/saveConfig',
        syncGoods: '/platform/syncGoods'
      },
    });
    const loadData = (arg) => {
      getConfig()
      getDevice()
    }

    function getDevice() {
      postAction(state.url.getDevice, {storeCode: JSON.parse(sessionStorage.getItem('storeInfo')).storeCode}).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        channelList.value = res.data
      })
    }

    function getConfig() {
      postAction(state.url.getConfig, {}).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        if (res.data.length > 0) {
          sysForm.value = {
            id: res.data[0].id,
            storeCode: res.data[0].storeCode,
            serverIp: res.data[0].serverIp,
            serverPort: res.data[0].serverPort
          }
        } else {
          sysForm.value = {
            id: '',
            storeCode: '',
            serverIp: '',
            serverPort: ''
          }
        }
      })
    }

    function syncGoods() {
      getAction(state.url.syncGoods).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        ElMessage.success(res.message)
      })
    }

    function saveConfig() {
      let url =  sysForm.value.id ? state.url.updateConfig : state.url.saveConfig
      if (!sysForm.value.storeCode) {
        return ElMessage.warning('库房编号不能为空')
      }
      if (!sysForm.value.serverIp) {
        return ElMessage.warning('服务器IP不能为空')
      }
      if (!sysForm.value.serverPort) {
        return ElMessage.warning('端口不能为空')
      }
      postAction(url, sysForm.value).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        ElMessage.success(res.message)
        sessionStorage.setItem('storeInfo', JSON.stringify(sysForm.value))
        getConfig()
      })
    }

    function edit(row) {
      title.value = '编辑通道'
      formData.value = JSON.parse(JSON.stringify(row))
      innerVisible.value = true
    }

    function add() {
      title.value = '新增通道'
      innerVisible.value = true
    }

    function handleSubmit() {
      let url = formData.value.id ? state.url.updateDevice : state.url.saveDevice
      formData.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
      postAction(url, formData.value).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        ElMessage.success(res.message)
        formData.value = {}
        innerVisible.value = false
        getDevice()
      })
    }

    function removeDevice(row) {
      postAction(state.url.removeDevice, {stationId: row.stationId, id: row.id}).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        ElMessage.success(res.message)
        getDevice()
      })
    }

    function handleCommand() {
      if (command === '#223170') { // 藏蓝
        sessionStorage.setItem('loginbg', 'bg1')
      }
      if (command === '#025799') { // 蓝色
        sessionStorage.setItem('loginbg', 'bg2')
      }
      if (command === '#1f8a36') { // 军绿
        sessionStorage.setItem('loginbg', 'bg')
      }
    }
    
    return {
      ...toRefs(state),
      sysForm,
      formData,
      innerVisible,
      title,
      channelList,
      getConfig,
      saveConfig,
      add,
      edit,
      handleSubmit,
      removeDevice,
      loadData,
      getDevice,
      syncGoods,
      handleCommand
    }
  },
})
</script>