<template>
<div>
  <el-tabs type="border-card">
    <el-tab-pane>
      <template #label>
        <span class="card-title">系统配置</span>
      </template>
      <el-card style="height: calc(100vh - 227.75px)">
        <el-form :model="sysForm" :inline="true" style="margin-top: 20px;">
          <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="primary" @click="resetConfig">读取</el-button>
            <el-button round type="primary" @click="saveConfig" v-if="sysForm.id">保存</el-button>
            <el-button round type="primary" @click="syncGoods">同步物资</el-button>
            <el-dropdown @command="handleCommand">
              <span style="cursor: pointer; background: #67c23a;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-divider><span style="font-size: 20px;">库房/ip配置</span></el-divider>
        <div class="head-container">
          <el-button class="filter-item" type="primary" style="float: right" @click="addConfig">新增</el-button>
        </div>
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="configList" border style="width: 100%;">
          <el-table-column type="index" label="序号" align="center" width="70"/>
          <el-table-column prop="storeCode" label="库房代码" align="center"/>
          <el-table-column prop="serverIp" label="服务器IP" align="center"/>
          <el-table-column prop="serverPort" label="服务器端口" align="center"/>
          <el-table-column prop="masterIp" label="物理主机IP" align="center" />
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" @click="editConfig(scope.row)">编辑</el-button>
              <el-popconfirm title="你确定删除吗?" @confirm="removeConfig(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-tab-pane>
      <template #label>
        <span class="card-title">通道配置</span>
      </template>
      <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 :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="channelList" border style="width: 100%;">
          <el-table-column prop="stationId" label="通道号" align="center" width="100"/>
          <el-table-column label="通道模式" align="center">
            <template #default="scope">
              {{scope.row.type == 'IN' ? '入库' : '出库' }}
            </template>
          </el-table-column>
          <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 label="1号显示屏" align="center">
            <template #default="scope">
              {{ scope.row.ledIp1 && scope.row.ledPort1 ? scope.row.ledIp1 + ':' + scope.row.ledPort1 : '无' }}
            </template>
          </el-table-column>
          <el-table-column label="2号显示屏" align="center">
            <template #default="scope">
              {{ scope.row.ledIp2 && scope.row.ledPort2 ? scope.row.ledIp2 + ':' + scope.row.ledPort2 : '无' }}
            </template>
          </el-table-column>
          <el-table-column label="通道状态" align="center">
            <template #default="scope">
              <el-switch ghost type="primary" v-model="scope.row.status" @change="editDevice(scope.row)" inline-prompt
                         size="large" :active-value="0" :inactive-value="1"
                         active-text="启用" inactive-text="禁用" active-color="#13ce66" inactive-color="#ff4949"/>
            </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-tab-pane>
      <template #label>
        <span class="card-title">LED参数配置</span>
      </template>
      <el-card style="height: calc(100vh - 227.75px)">
        <div class="head-container">
          <el-select v-model="form.stationId" @change="getLedConfigList">
            <el-option :label="'通道' + item.stationId" :value="item.stationId" v-for="item in channelList" :key="item.stationId"></el-option>
          </el-select>
          <el-button class="filter-item" type="primary" style="float: right" @click="addLedConfig">新增</el-button>
        </div>
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="ledConfigList" border style="width: 100%;">
          <el-table-column type="index" label="序号" align="center" width="70"/>
          <el-table-column prop="sendType" label="发送led类型" align="center">
            <template #default="scope">
              {{scope.row.sendType == '0' ? '标题' : scope.row.sendType == '1' ? '内容' : '报错' }}
            </template>
          </el-table-column>
          <el-table-column prop="left1" label="左边距" align="center"/>
          <el-table-column prop="top" label="上边距" align="center"/>
          <el-table-column prop="width" label="宽度" align="center"/>
          <el-table-column prop="height" label="高度" align="center"/>
          <el-table-column prop="fontname" label="字体名称" align="center"/>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" @click="editLedConfig(scope.row)">编辑</el-button>
              <el-popconfirm title="你确定删除吗?" @confirm="removeLed(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-tab-pane>
      <template #label>
        <span class="card-title">光电配置</span>
      </template>
      <el-card style="height: calc(100vh - 227.75px)">
        <div class="head-container">
          <el-button class="filter-item" type="primary" style="float: right" @click="addGpioConfig">新增</el-button>
        </div>
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="gpioConfigList" border style="width: 100%;">
          <el-table-column type="index" label="序号" align="center" width="100"/>
          <el-table-column label="触发模式" align="center">
            <template #default="scope">
              {{scope.row.gpioType == 'IN' ? '入库' : '出库' }}
            </template>
          </el-table-column>
          <el-table-column label="GPIO地址" align="center">
            <template #default="scope">
              {{scope.row.gpioIp}}
            </template>
          </el-table-column>
          <el-table-column label="GPIO编号" align="center">
            <template #default="scope">
              {{ scope.row.gpioId }}
            </template>
          </el-table-column>
          <el-table-column label="电平状态" align="center">
            <template #default="scope">
              {{ scope.row.gpioHigh == 0 ? '低电平' : '高电平'}}
            </template>
          </el-table-column>
          <el-table-column label="触发次数" align="center">
            <template #default="scope">
              {{ scope.row.count }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" @click="editGpioConfig(scope.row)">编辑</el-button>
              <el-popconfirm title="你确定删除吗?" @confirm="removeGpioConfig(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="visible" width="30%" :title="title" @close="closeConfig">
    <el-form label-position="right" size="large" label-width="90px" :model="configForm" :rules="rules" ref="storeIp">
      <el-form-item label="库房代码">
        <el-input v-model="configForm.storeCode" placeholder="请输入库房代码"/>
      </el-form-item>
      <el-form-item label="服务器IP" prop="serverIp">
        <el-input v-model="configForm.serverIp" placeholder="请输入服务器IP"/>
      </el-form-item>
      <el-form-item label="服务器端口" prop="serverPort">
        <el-input v-model="configForm.serverPort" placeholder="请输入服务器端口"/>
      </el-form-item>
      <el-form-item label="物理主机IP" prop="masterIp">
        <el-input v-model="configForm.masterIp" placeholder="请输入物理主机IP"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false" size="large">关闭</el-button>
        <el-button type="primary" @click="submitConfig" size="large">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="innerVisible" width="40%" :title="title">
      <el-form label-position="right" size="large" label-width="120px" :model="formData">
        <el-row>
          <el-col :span="12">
            <el-form-item label="通道号">
              <el-input v-model="formData.stationId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通道模式">
              <el-select v-model="formData.type" style="width: 100%;">
                <el-option value="IN" label="入库模式"></el-option>
                <el-option value="OUT" label="出库模式"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>  
        <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之间。八通道同理"/>
        </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="1号显示屏IP">
              <el-input v-model="formData.ledIp1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="1号显示屏端口">
              <el-input v-model="formData.ledPort1"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="2号显示屏IP">
              <el-input v-model="formData.ledIp2"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="2号显示屏端口">
              <el-input v-model="formData.ledPort2"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="双重校验">
              <el-select v-model="formData.doubleCheck" style="width: 100%;">
                <el-option :value="0" label="开启"></el-option>
                <el-option :value="1" label="关闭"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="LED标题">
              <el-input v-model="formData.ledTitle"/>
            </el-form-item>
          </el-col>
        </el-row>  
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="innerVisible = false" size="large">关闭</el-button>
          <el-button type="primary" @click="handleSubmit" size="large">提交</el-button>
        </div>
      </template>
  </el-dialog>


  <el-dialog v-model="ledVisible" width="50%" :title="title">
    <el-form :model="form" label-width="160px">
      <el-divider>基本配置</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="左边距" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.left1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">  
            <el-form-item label="LED宽度" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.width" />
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="上边距" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.top" />
            </el-form-item>
          </el-col>
          <el-col :span="12">  
            <el-form-item label="LED高度" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.height" />
            </el-form-item>
          </el-col>
        </el-row>  
        <el-row>
          <el-col :span="12">
            <el-divider>字体</el-divider>
            <el-form-item label="字体名称" :rules="[{ required: true, message: '必填' }]">
              <el-input v-model="form.fontname" style="width: 160px;" placeholder="宋体"/>
            </el-form-item>
            <el-form-item label="字体大小" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.fontsize" />
            </el-form-item>
            <el-form-item label="横向对齐方式" :rules="[{ required: true, message: '必填' }]">
              <el-radio-group v-model="form.halign">
                <el-radio :label="0">靠左</el-radio>
                <el-radio :label="1">居中</el-radio>
                <el-radio :label="2">靠右</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="纵向对齐方式" :rules="[{ required: true, message: '必填' }]">
              <el-radio-group v-model="form.valign">
                <el-radio :label="0">靠上</el-radio>
                <el-radio :label="1">居中</el-radio>
                <el-radio :label="2">靠下</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="自动换行" :rules="[{ required: true, message: '必填' }]">
              <el-radio-group v-model="form.wordwrap">
                <el-radio label="true">自动换行</el-radio>
                <el-radio label="false">不自动换行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发送方式" :rules="[{ required: true, message: '必填' }]">
              <el-radio-group v-model="form.sendType">
                <el-radio :label="0">标题</el-radio>
                <el-radio :label="1">内容</el-radio>
                <el-radio :label="2">报错</el-radio>
              </el-radio-group>
            </el-form-item>
            
          </el-col>
          <el-col :span="12">
            <el-divider>显示方式</el-divider>
            <el-form-item label="引入方式" :rules="[{ required: true, message: '必填' }]">
              <el-select v-model="form.inmethod" style="width: 160px;">
                <el-option label="随机" :value="0" />
                <el-option label="立即显示" :value="1" />
                <el-option label="左滚显示" :value="2" />
                <el-option label="上滚显示" :value="3" />
                <el-option label="右滚显示" :value="4" />
                <el-option label="下滚显示" :value="5" />
                <el-option label="连续左滚显示" :value="6" />
                <el-option label="连续上滚显示" :value="7" />
                <el-option label="连续右滚显示" :value="8" />
                <el-option label="连续下滚显示" :value="9" />
                <el-option label="中间向上下展开" :value="10" />
                <el-option label="中间向两边展开" :value="11" />
                <el-option label="中间向四周展开" :value="12" />
                <el-option label="从右向左移入" :value="13" />
                <el-option label="从左向右移入" :value="14" />
                <el-option label="从左向右展开" :value="15" />
                <el-option label="从右向左展开" :value="16" />
                <el-option label="从右上角移入" :value="17" />
                <el-option label="从右下角移入" :value="18" />
                <el-option label="从左上角移入" :value="19" />
                <el-option label="从左下角移入" :value="20" />
                <el-option label="从上向下移入" :value="21" />
                <el-option label="从下向上移入" :value="22" />
                <el-option label="横向百叶窗" :value="23" />
                <el-option label="纵向百叶窗" :value="24" />
              </el-select>
            </el-form-item>
            <el-form-item label="引入速度" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.inspeed"/>
            </el-form-item>
            <el-form-item label="引出方式" :rules="[{ required: true, message: '必填' }]">
              <el-radio-group v-model="form.outmethod">
                <el-radio :label="0">随机</el-radio>
                <el-radio :label="1">始终显示</el-radio>
                <el-radio :label="2">立即消失</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="引出速度" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.outspeed"/>
            </el-form-item>
            <el-form-item label="停留方式" :rules="[{ required: true, message: '必填' }]">
              <el-radio-group v-model="form.stopmethod">
                <el-radio :label="0">静态显示</el-radio>
                <el-radio :label="1">闪烁显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="停留速度" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.stopspeed"/>
            </el-form-item>
            <el-form-item label="停留时间(毫秒)" :rules="[{ required: true, message: '必填' }]">
              <el-input-number :min="0" v-model="form.stoptime"/>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="ledVisible = false" size="large">关闭</el-button>
        <el-button type="primary" @click="onLedSubmit" size="large">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="gpioVisible" width="30%" :title="title" @close="closeGpioConfig">
    <div style="display: flex;justify-content: center">
      <el-form label-position="right" size="large" label-width="90px" :model="gpioForm" :rules="gpioRules" ref="storeGpio">
        <el-form-item label="触发类型" prop="gpioType" style="align-content: center">
          <el-select v-model="gpioForm.gpioType" style="width: 200px;" placeholder="请选择触发类型">
            <el-option label="入库" value="IN" />
            <el-option label="出库" value="OUT" />
          </el-select>
        </el-form-item>
        <el-form-item label="GPIO地址" prop="gpioIp">
          <el-input v-model="gpioForm.gpioIp" style="width: 200px;" placeholder="请输入GPIO地址"/>
        </el-form-item>
        <el-form-item label="GPIO编号" prop="gpioId">
          <el-input-number :min="0" :max="30" v-model="gpioForm.gpioId" style="width: 185px;" placeholder="请输入编号"/>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="(如GPIO1的编号为1，GPIO2的编号为2)"
              placement="top-start"
          >
            <el-icon><Warning /></el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="电平状态" prop="gpioHigh">
          <el-select v-model="gpioForm.gpioHigh" style="width: 200px;" placeholder="请选择电平状态">
            <el-option label="低电平" :value="0" />
            <el-option label="高电平" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="gpioVisible = false" size="large">关闭</el-button>
        <el-button type="primary" @click="submitGpioConfig" size="large">提交</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 { proxy } = getCurrentInstance()
    const configList = ref([])
    const channelList = ref([])
    const title = ref('')
    const sysForm = ref({})
    const configForm = ref({})
    const gpioForm = ref({})
    const formData = ref({})
    const visible = ref(false)
    const innerVisible = ref(false)
    const ledVisible = ref(false)
    const gpioVisible = ref(false)
    const form = ref({})
    const ledConfigList = ref([])
    const gpioConfigList = ref([])

    // ip正则表达式
    function isIp(str) {
      const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(str)
    }
    
    // ip校验
    const validateIp = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入Ip'))
      } else if (!isIp(value)) {
        callback(new Error('ip格式不正确'))
      } else {
        callback()
      }
    }
    
    // port校验
    const validatePort = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入端口'))
      } else if (isNaN(value)) {
        callback(new Error('请输入数字值'));
      } else if(value < 0 || value > 65535 ) {
        callback(new Error('端口范围在(0-65535)'))
      } else {
        callback()
      }
    }

    // gpio校验
    const validateGpio = (rule, value, callback) => {
      if (!value && value != 0) {
        console.log('打印校验数据', value)
        callback(new Error('请选择或输入内容'))
      } else {
        callback()
      }
    }

    const rules = reactive({
      serverIp: [{ validator: validateIp, trigger: 'blur' }],
      serverPort: [{ validator: validatePort, trigger: 'blur' }],
      masterIp: [{ validator: validateIp, trigger: 'blur' }]
    })

    const gpioRules = reactive({
      gpioType: [{ validator: validateGpio, trigger: 'blur' }],
      gpioIp: [{ validator: validateIp, trigger: 'blur' }],
      gpioId: [{ validator: validateGpio, trigger: 'blur' }],
      gpioHigh: [{ validator: validateGpio, trigger: 'blur' }]
    })

    const state = reactive({
      url: {
        getStoreCode: '/config/getStoreCode',
        getConfig: '/config/getConfig',
        getConfigPage: '/config/getConfigPage',
        updateConfig: '/config/updateConfig',
        saveConfig: '/config/saveConfig',
        removeConfig: '/config/removeConfig',

        getDevice: '/device/getDevice',
        updateDevice: '/device/updateDevice',
        removeDevice: '/device/removeDevice',
        saveDevice: '/device/saveDevice',


        getLedConfig: '/ledConfig/getConfigList',
        updateLedConfig: '/ledConfig/updateConfig',
        saveLedConfig: '/ledConfig/saveConfig',
        removeLedConfig: '/ledConfig/removeConfig',

        getGpioConfig: '/gpio/getConfig',
        updateGpioConfig: '/gpio/updateConfig',
        saveGpioConfig: '/gpio/saveConfig',
        removeGpioConfig: '/gpio/removeConfig',
        
        syncGoods: '/platform/syncGoods'
      },
    });


    const loadData = (arg) => {
      getConfigPage()
      getDevice()
      resetConfig()
      getGpioConfigList()
    }

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

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

    function editDevice(row) {
      const formData = row;
      if (formData.status == 0){
        formData.status == 1;
      } else {
        formData.status == 0;
      }
      postAction(state.url.updateDevice, formData).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        ledConfigList.value = res.data
      })
      getLedConfigList()
    }

    function getConfigPage() {
      postAction(state.url.getConfigPage, {}).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        configList.value = res.data.records
      })
    }
    
    function addConfig() {
      title.value = '新增'
      visible.value = true
    }

    function editConfig(row) {
      title.value = '编辑'
      configForm.value = JSON.parse(JSON.stringify(row))
      visible.value = true
    }

    function addLedConfig() {
      title.value = '新增'
      form.value = {
        id: '',
        left1: 0,
        top: 0,
        halign: 1,
        valign: 1,
        fontname: '宋体',
        fontsize: 15,
        inmethod: 1,
        stopmethod: 0,
        stopspeed: 0,
        stoptime: 0,
        outmethod: 1,
        inspeed: 0,
        outspeed: 0,
        wordwrap: 'false',
        stationId: form.value.stationId,
        storeCode: form.value.storeCode
      }
      ledVisible.value = true
    }

    function editLedConfig(row) {
      title.value = '编辑'
      form.value = JSON.parse(JSON.stringify(row))
      ledVisible.value = true
    }

 
    function submitConfig() {
      let url = configForm.value.id ? state.url.updateConfig : state.url.saveConfig
      proxy.$refs.storeIp.validate((valid) => {
        if (!valid) {
          ElMessage.warning('请正确填写信息')
        } else {
          postAction(url, configForm.value).then(res => {
            if (res.code !== 99200) return ElMessage.error(res.message);
            ElMessage.success(res.message)
            configForm.value = {}
            visible.value = false
            getConfigPage()
          })
        }
      })
    }

    function closeConfig() {
      configForm.value = {}
    }

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

    function getDevice() {
      if (!sessionStorage.getItem('storeInfo')) return;
      form.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
      postAction(state.url.getDevice, {storeCode: form.value.storeCode}).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        channelList.value = res.data
        if (channelList.value.length > 0) {
          form.value.stationId = res.data[0].stationId
          getLedConfigList()
        }
      })
    }
    
    function resetConfig() {
      getAction(state.url.getStoreCode).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        postAction(state.url.getConfig, {storeCode: res.data}).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          if (res.data.length > 0) {
            sysForm.value = JSON.parse(JSON.stringify(res.data[0]))
            sysForm.value.isHide = JSON.parse(sessionStorage.getItem('storeInfo')).isHide
          }
        })
      })
    }

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

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

    function addGpioConfig(row) {
      title.value = '新增GPIO触发'
      gpioVisible.value = true;
    }

    function editGpioConfig(row) {
      title.value = '编辑GPIO触发'
      gpioForm.value = JSON.parse(JSON.stringify(row))
      gpioVisible.value = true;
    }

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

    function submitGpioConfig() {
      let url = gpioForm.value.id ? state.url.updateGpioConfig : state.url.saveGpioConfig
      proxy.$refs.storeGpio.validate((valid) => {
        if (!valid) {
          ElMessage.warning('请正确填写信息')
        } else {
          gpioForm.value.storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
          postAction(url, gpioForm.value).then(res => {
            if (res.code !== 99200) return ElMessage.error(res.message);
            ElMessage.success(res.message)
            gpioForm.value = {}
            gpioVisible.value = false
            getGpioConfigList()
          })
        }
      })
    }

    function closeGpioConfig () {
      gpioForm.value = {}
      gpioVisible.value = false
      getGpioConfigList()
    }

    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 removeLed(row) {
      postAction(state.url.removeLedConfig, {id: row.id}).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        ElMessage.success(res.message)
        getLedConfigList()
      })
    }

    function handleCommand(command) {
      if (command === '#223170') { // 藏蓝
        sessionStorage.setItem('bgColor', '#223170')
      }
      if (command === '#025799') { // 蓝色
        sessionStorage.setItem('bgColor', '#025799')
      }
      if (command === '#1f8a36') { // 军绿
        sessionStorage.setItem('bgColor', '#1f8a36')
      }
      window.location.reload()
    }

    const onLedSubmit = () => {
      let url = form.value.id ? state.url.updateLedConfig : state.url.saveLedConfig
      if (form.value.sendType == undefined || form.value.width == undefined || form.value.height == undefined) {
        return ElMessage.warning('未填写完整')
      }
      postAction(url, form.value).then(res => {
        if (res.code !== 99200) return ElMessage.error(res.message);
        ElMessage.success(res.message)
        ledVisible.value = false
        getLedConfigList()
      })
    }
    
    return {
      ...toRefs(state),
      sysForm,
      configForm,
      gpioForm,
      formData,
      rules,
      gpioRules,
      visible,
      innerVisible,
      ledVisible,
      gpioVisible,
      title,
      configList,
      channelList,
      ledConfigList,
      gpioConfigList,
      getLedConfigList,
      editDevice,

      resetConfig,

      addConfig,
      editConfig,
      removeConfig,
      saveConfig,
      submitConfig,
      closeGpioConfig,
      submitGpioConfig,
      closeConfig,

      add,
      edit,
      addGpioConfig,
      editGpioConfig,
      removeGpioConfig,
      handleSubmit,
      removeDevice,
      loadData,
      getDevice,
      syncGoods,
      getConfigPage,
      handleCommand,
      form,
      onLedSubmit,
      addLedConfig,
      editLedConfig,
      removeLed
    }
  },
})
</script>
