<template>
  <div class="container-wrapper" style="padding: 24px">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="tableDate" label-width="auto"
             class="demo-ruleForm" status-icon>
      <el-form-item label="打印机名称" prop="common_name">
        <el-select v-model="printConfig.printName" >
          <el-option v-for="item in tableDate" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="打印类型" prop="common_sortName">
        <el-select v-model="printConfig.pageType">
          <el-option v-for="item in pageTypes" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <span class="default-btn" @click="save">保存</span>
    </el-form>

  </div>
</template>
<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import {useWsStore} from "@/stores/wsStore.ts";
import type {Request, Response} from "@/utils/ws.ts";
import {ElMessage} from "element-plus";

const pageTypes = [
  {
    label: "80小票打印机",
    value: "80"
  },
  {
    label: "58小票打印机",
    value: "58"
  }
]
const printConfig= ref<any>({
  printName:"",
  pageType:""
})


const save = () => {
  post("common/config/savePrinter", {printConfig:printConfig.value}).then((res:any)=>{
    ElMessage.success("保存成功")
  })
}
const getPrintConfig = () => {
  post("common/config/getPrintConfig").then((res:any)=>{
    printConfig.value.printName=res.printName
    printConfig.value.pageType=res.pageType
  })
}
const tableDate = ref<any>([])
const wsStore = useWsStore();


let request: Request = {
  type: "getPrintList",
  config: null,
  data: null
}
wsStore.sendMessage(request);
const reciceMessage = (response: Response) => {
  tableDate.value = response.Data;
  getPrintConfig()
}


onMounted(async () => {
  wsStore.setMessageCallback(reciceMessage)
})
onUnmounted(() => {
  wsStore.removeAllMessageCallback()
})

</script>
<style scoped lang="scss">

</style>