<template>
  <div>
    <el-card>
      <el-form :model="formData" :rules="formRules" label-width="160px" ref="dataForm">

        <el-button-group style="display: flex;margin: 0px 0 10px 90%; ">
          <!--          <el-button type="primary" @click.native="saveTest()">测试货架组件</el-button>-->
          <el-button type="primary" @click.native="save()">保存</el-button>
        </el-button-group>

        <el-collapse v-model="activeNames">

          <el-collapse-item name="0">
            <template slot="title">
              <p class="form-title">原始单据下载设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="开启单据自动下载:" prop="autoDownload" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoDownload">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="起始下载时间:" prop="startDownloadTime" label-width="160px">
                  <el-date-picker
                    v-model="formData.startDownloadTime"
                    type="datetime"
                    placeholder="请输入起始下载时间"
                    style="width: 90%"
                    :clearable="false"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

            </el-row>
          </el-collapse-item>
          <el-collapse-item name="1">
            <template slot="title">
              <p class="form-title">原始单据处理设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="自动转成待处理单据:" prop="autoDealOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoDealOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="2">
            <template slot="title">
              <p class="form-title">单据处理设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="待处理单据自动分配:" prop="autoAllotOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoAllotOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="单据自动完成:" prop="autoFinishOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoFinishOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="寄售预验收扫码校验:" prop="autoFinishOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.isScanCodeCheck">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <p class="form-title">单据上传设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="已完成单据自动上传:" prop="autoUploadOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoUploadOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="起始上传时间:" prop="startUploadTime" label-width="160px">
                  <el-date-picker
                    v-model="formData.startUploadTime"
                    type="datetime"
                    placeholder="请输入起始上传时间"
                    style="width: 90%"
                    :clearable="false"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="设置轮询时间(小时):" prop="startUploadHour" label-width="160px">
                  <el-input-number v-model="formData.startUploadHour"
                                   :min="1" :max="24" label="描述文字">

                  </el-input-number>

                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <p class="form-title">拆零设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="是否启用扫码拆零确认:" prop="lastCodeSplit" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.lastCodeSplit">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="8" class="el-col">
                <el-form-item label="是否启用取药拆零确认:" prop="getSplitConfirm" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.getSplitConfirm">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template slot="title">
              <p class="form-title">扫码设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="网页扫码数量设置:" prop="scanMaxCount" style="margin-bottom: 0">
                  <el-input
                    style="width: 90%"
                    size="small"
                    type='number'
                    splaceholder="请输入内容"
                    v-model="formData.scanMaxCount"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="PAD扫码数量设置:" prop="pdaMaxCount" style="margin-bottom: 0">
                  <el-input
                    style="width: 90%"
                    size="small"
                    type='number'
                    splaceholder="请输入内容"
                    v-model="formData.pdaMaxCount"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="工控扫码数量设置:" prop="ipcMaxCount" style="margin-bottom: 0">
                  <el-input
                    style="width: 90%"
                    size="small"
                    type='number'
                    splaceholder="请输入内容"
                    v-model="formData.ipcMaxCount"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!--<el-row :gutter="20" style="margin-top: 20px">-->
            <!--  <el-col :span="8" class="el-col">-->
            <!--    <el-form-item label="是否手动解码:" prop="scanMaxCount" style="margin-bottom: 0">-->
            <!--      <el-radio-group v-model="formData.isAutoCodec">-->
            <!--        <el-radio :label="true">是</el-radio>-->
            <!--        <el-radio :label="false">否</el-radio>-->
            <!--      </el-radio-group>-->
            <!--    </el-form-item>-->
            <!--  </el-col>-->
            <!--</el-row>-->
          </el-collapse-item>
          <el-collapse-item name="4">
            <template slot="title">
              <p class="form-title">高拍仪扫码设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="扫码数量设置:" prop="fixedCount" style="margin-bottom: 0">
                  <el-input
                    style="width: 90%"
                    size="small"
                    type='number'
                    splaceholder="请输入内容"
                    v-model="formData.fixedCount"
                  ></el-input>
                </el-form-item>
              </el-col>
              <!--<el-col :span="8" class="el-col">-->
              <!--  <el-form-item label="PAD扫码数量设置:" prop="pdaMaxCount" style="margin-bottom: 0">-->
              <!--    <el-input-->
              <!--      style="width: 90%"-->
              <!--      size="small"-->
              <!--      type='number'-->
              <!--      splaceholder="请输入内容"-->
              <!--      v-model="formData.pdaMaxCount"-->
              <!--    ></el-input>-->
              <!--  </el-form-item>-->
              <!--</el-col>-->
              <!--<el-col :span="8" class="el-col">-->
              <!--  <el-form-item label="工控扫码数量设置:" prop="ipcMaxCount" style="margin-bottom: 0">-->
              <!--    <el-input-->
              <!--      style="width: 90%"-->
              <!--      size="small"-->
              <!--      type='number'-->
              <!--      splaceholder="请输入内容"-->
              <!--      v-model="formData.ipcMaxCount"-->
              <!--    ></el-input>-->
              <!--  </el-form-item>-->
              <!--</el-col>-->
              <el-col :span="8" class="el-col">
                <el-form-item label="是否自动解码:" prop="autoDecode" style="margin-bottom: 0">
                  <el-select v-model="formData.autoDecode"  placeholder="选择是否自动解码">
                    <el-option label="否" :value="0"></el-option>
                    <el-option label="是" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8" class="el-col">
                <el-form-item label="输出顺序:" prop="outputMode" >
                  <el-select v-model="formData.outputMode"  placeholder="选择输出顺序">
                    <el-option label="不排序" :value="0"></el-option>
                    <el-option label="从左到右" :value="1"></el-option>
                    <el-option label="从右到左" :value="2"></el-option>
                    <el-option label="从上到下" :value="3"></el-option>
                    <el-option label="从下到上" :value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px">

            </el-row>
          </el-collapse-item>
        </el-collapse>


        <el-dialog
          title="测试组件"
          :visible.sync="ShelfDisplayFlag"
          width="75%"
          v-if="ShelfDisplayFlag"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <ShelfDisplay
            :shelfData="this.shelfData"
            @slot-click="handleSlotClick"
          >
          </ShelfDisplay>
        </el-dialog>
      </el-form>
    </el-card>
  </div>
</template>

<script>

import {getSet, updateSet} from "@/api/collect/collectSet";
import ShelfDisplay from "@/components/ShelfDisplay";
import { isBlank } from '@/utils/strUtil'

export default {
  name: 'timerSetting',
  data() {
    return {
      num: 1,
      ShelfDisplayFlag: false,
      shelfData: [
        {
          row: 1,
          height: 50,
          slots: [
            {id: 1, item: 'Item A1'},
            {id: 2, item: 'Item A2'},
            {id: 3, item: 'Item 3'},
            {id: 4, item: 'Item 4'},
          ]
        },
        {
          row: 2,
          height: 80,
          slots: [
            {id: 1, item: 'Item B1'},
            {id: 2, item: 'Item B2'},
            {id: 3, item: 'Item 3'},
            {id: 4, item: 'Item 4'},
            {id: 5, item: 'Item 3'},
          ]
        },
        {
          row: 3,
          height: 80,
          slots: [
            {id: 1, item: 'Item B1'},
            {id: 2, item: 'Item B2'},
            {id: 3, item: 'Item 3'},
            {id: 4, item: 'Item 4'},
            {id: 5, item: 'Item 3'},
          ]
        },
        {
          row: 6,
          height: 80,
          slots: [
            {id: 1, item: 'Item B1'},
            {id: 2, item: 'Item B2'},
            {id: 3, item: 'Item 3'},
            {id: 4, item: 'Item 4'},
            {id: 5, item: 'Item 3'},
            {id: 5, item: 'Item 3'},
            {id: 5, item: 'Item 3'},
            {id: 5, item: 'Item 3'},
            {id: 5, item: 'Item 3'},
            {id: 5, item: 'Item 3'},
          ]
        },
        {
          row: 5,
          height: 200,
          slots: [
            {id: 1, item: 'Item B1'},
            {id: 2, item: 'Item B2'},
          ]
        },
        {
          row: 4,
          height: 80,
          slots: [
            {id: 1, item: 'Item B1'},
            {id: 2, item: 'Item B2'},
            {id: 3, item: 'Item 3'},
            {id: 4, item: 'Item 4'},
            {id: 5, item: 'Item 3'},
          ]
        },
      ],
      activeNames: ['0', '1', '2', '3','4'],
      formData: {
        startDownloadTime: null,
        lastCodeSplit: true,
        isScanCodeCheck: true,
        getSplitConfirm: false,
        fixedCount:null,
        pdaMaxCount: null,
        ipcMaxCount: null,
        autoDecode:1,
        outputMode:1,
      },
      systemParam: null,
      socket:null,

    }
  },
  components: {
    ShelfDisplay
  },
  methods: {
    handleSlotClick(slot) {
      // 在这里处理被点击的货位信息
      console.log('被点击的货位:', slot);
      // 你可以根据需要执行其他操作，例如更新父组件的状态或导航到另一个
    },
    selectSysParam() {
      getSet().then((response) => {
        if (response.code == 20000) {
          this.formData = response.data
          // this.formData.autoDecode = 1
          // this.formData.OutputMode = 1
        }
      })
    },
    saveTest() {
      this.ShelfDisplayFlag = true
    },
    save() {
      if (isBlank(this.formData.scanMaxCount)){
        this.formData.scanMaxCount = 0
      }
      if (isBlank(this.formData.pdaMaxCount)){
        this.formData.pdaMaxCount = 0
      }
      if (isBlank(this.formData.ipcMaxCount)){
        this.formData.ipcMaxCount = 0
      }
      if (isBlank(this.formData.autoDecode)){
        this.formData.autoDecode = 1
      }
      if (isBlank(this.formData.fixedCount)){
        this.formData.fixedCount = 0
      }
      if (isBlank(this.formData.outputMode)){
        this.formData.outputMode = 1
      }
      updateSet(this.formData)
        .then((response) => {
          if (response.code != 20000) {
            this.$message.error(response.message);
          } else
            this.$message.success("操作成功");
        })
        .catch(() => {
        });

      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        const { autoDecode, fixedCount, outputMode } = this.formData;

        const settings = [
          { key: "AutoDecode", value: autoDecode },
          { key: "FixedCount", value: fixedCount },
          { key: "OutputMode", value: outputMode }
        ];

        settings.forEach(setting => {
          if (!isBlank(setting.value)) {
            const setStr = `${setting.key}=${setting.value}`;
            this.sendData(setStr);
          }
        });

      }
      // if (this.socket && this.socket.readyState === WebSocket.OPEN){
      //   if (!isBlank(this.formData.autoDecode)){
      //     var setStr = "AutoDecode=" +  this.formData.autoDecode
      //     this.sendData(setStr)
      //   }
      //   if (!isBlank(this.formData.fixedCount)){
      //     var setStr = "FixedCount=" +  this.formData.fixedCount
      //     this.sendData(setStr)
      //   }
      //
      //   if (!isBlank(this.formData.outputMode) ){
      //     var setStr = "OutputMode=" +  this.formData.outputMode
      //     this.sendData(setStr)
      //   }
      //
      // }
    },
    // 连接 WebSocket
    connectWebSocket() {
      // WebSocket 服务器地址

      // 创建 WebSocket 连接
      this.socket = new WebSocket('ws://127.0.0.1:9988')

      // 监听连接成功事件
      this.socket.onopen = () => {
        console.log("WebSocket connected!");
      };

      // 监听接收消息事件
      this.socket.onmessage = (event) => {
        this.receivedMessage = event.data; // 更新接收到的消息
        console.log("Received message:", event.data);
      };

      // 监听错误事件
      this.socket.onerror = (error) => {
        console.error("WebSocket error:", error);
      };

      // 监听连接关闭事件
      this.socket.onclose = () => {
        console.log("WebSocket connection closed.");
      };
    },
    // 发送数据
    sendData(data) {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        // const data = JSON.stringify({ action: "subscribe", channel: "updates" }); // 发送的参数

        this.socket.send(data); // 发送数据
        console.log("Data sent:", data);
      } else {
        console.error("WebSocket is not connected.");
      }
    },
  },
  mounted() {
    // 在组件挂载时创建 WebSocket 连接
    this.connectWebSocket();
  },
  created() {
    this.selectSysParam()

  },
  beforeDestroy() {
    // 组件销毁前关闭 WebSocket 连接
    if (this.socket) {
      this.socket.close();
      console.log("WebSocket connection closed in beforeDestroy.");
    }
  }
}
</script>

<style scoped>
.form-title {
  font-size: 16px;
  font-family: Noto Sans SC;
  font-weight: bold;
  color: #303133;
  padding-bottom: 17px;
  padding-top: 17px;
}

</style>
