<template>
  <div class="page-body">

    <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
      :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
    </vxe-form>


    <div class="settingcard-container">
      <div class="settingcard" v-for="(item, index) in settingData" :key="index">
        <!-- 卡片内容 -->
        <div class="settingcard-content">
          <h4> {{ item.title }}</h4>
          <a-input v-if="item.type == 'integer'" v-model="item.value" />
          <a-select style="width:100%;margin-bottom: 5px;" v-if="item.type == 'select'" v-model="item.value"
            :options="item.options"></a-select>


          <a-button type="primary" @click.stop="pageSend(item)">发送指令</a-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import BASE_URL from '@/services/base/api.js';

export default {

  props: {
    dataId: {
    }

  },

  data() {

    // 页面数据变量
    var pageData = {

      actions: {
        get: `${BASE_URL.BASE_URL}/InkjetPrinter/v1/inkjet/printer/detail`,
      },

      settingData: [
        { title: '启动喷印', url: "/InkjetPrinter/v1/start/machine" },
        { title: '加锁', url: "/InkjetPrinter/v1/lock" },
        { title: '停止喷印', url: "/InkjetPrinter/v1/stop/machine" },
        { title: '解锁', url: "/InkjetPrinter/v1/unlock" },
        { title: '开启触发信号', url: "/InkjetPrinter/v1/open/trigger/signal" },
        { title: '复位打印统计', url: "/InkjetPrinter/v1/reset/print/statistics" },
        { title: '取消报警闪烁', url: "/InkjetPrinter/v1/cancel/alarm/flash" },
        { title: '设置打印延迟', postField: 'delay', url: "/InkjetPrinter/v1/set/print/delay", type: 'integer', value: 1000 },
        { title: '设置字体大小', postField: 'fontSize',isNumber:true, url: "/InkjetPrinter/v1/font/size", type: 'integer', value: 80 },
        { title: '设置字体间距', postField: 'fontSpacing', url: "/InkjetPrinter/v1/font/spacing", type: 'select',options: [
        { value: 5, label: '5' },
        { value: 4, label: '4' },
        { value: 3, label: '3' },
        { value: 2, label: '2' },
        { value: 1, label: '1' },
        { value: 0, label: '0' },
        { value: -1, label: '-1' },
        { value: -2, label: '-2' },
        { value: -3, label: '-3' },
        { value: -4, label: '-4' },
        { value: -5, label: '-5' },
      ] , value: 0 },
        {
          title: '设置打印上下翻转', postField: 'direction', url: "/InkjetPrinter/v1/set/print/flip", type: 'select', value: 0,
          options: [{ value: 0, label: '上翻' }, { value: 1, label: '下翻' }]
        },
        {
          title: '设置打印左右翻转', postField: 'direction', url: "/InkjetPrinter/v1/set/scan/direction", type: 'select', value: 0,
          options: [{ value: 0, label: '左翻' }, { value: 1, label: '右翻' }]
        },
        {
          title: '设置扫描方向', postField: 'direction', url: "/InkjetPrinter/v1/start/machine", type: 'select', value: 0,
          options: [{ value: 0, label: '从左到右' }, { value: 1, label: '从右到左' }]
        },
      ],

      formOptions: {
        data: {
          "name": "",
          "code": "",
          enum_id: "0"
        },

        titleWidth: 150,
        titleAlign: 'right',

        rules: {
        },

        items: [
          { field: 'code', title: '编码', span: 12, itemRender: { name: 'MkFormInputShow' } },
          { field: 'name', title: '名称', span: 12, itemRender: { name: 'MkFormInputShow' } },
          { field: 'ip', title: 'ip', span: 12, itemRender: { name: 'MkFormInputShow' } },
          { field: 'port', dataRule: { type: 'integer' }, title: '端口', span: 12, itemRender: { name: 'MkFormInputShow', props: { type: 'number' } } },
        ]
      }

    };

    pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);

    return pageData;
  },


  created() {
    let dataId = this.getDataId();
    if (dataId) {
      this.$mk.post({
        url: this.actions.get,
        loading: "加载中...",
        data: {
          id: this.$mk.toBigInt(dataId)
        },
        useBigInt: true
      }).then(a => {

        this.formOptions.data = a.data.inkjet_printer;
      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });
    }
  },
  // 函数
  methods: {

    getDataId() {
      let dataId = this.dataId;
      if (this.$route.params.id) {
        dataId = this.$route.params.id;
      }
      if (!dataId) {
        dataId = 0;
      }
      return dataId;
    },
    loadData() {
    },

    pageSend(item) {
      let dataId = this.getDataId();
      if (dataId) {
        var sendData = {
          id: this.$mk.toBigInt(dataId)
        };
        if (item.postField) {
          sendData[item.postField] = item.value;
        }
        if(item.isString){
          sendData[item.postField] = item.value +"";
        }
        this.$mk.post({
          url: `${BASE_URL.BASE_URL}` + item.url,
          loading: "发送指令中...",
          data: sendData,
          useBigInt: true
        }).then(a => {
          if (a.code != 200) {
            this.$mk.error(a.msg);
          } else {
            this.$mk.success(a.msg || "发送成功");
          }
        });
      }
    },

    cancel() {
      this.$emit("callback", {});
    }
  },
  // 监听属性
  watch: {

  }
};

</script>
<style>
.settingcard-container {
  display: flex;
  flex-wrap: wrap;
}

.settingcard {
  width: calc(33.33% - 20px);
  /* 调整卡片宽度，包括间距 */
  margin: 10px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
  transition: box-shadow 0.3s ease;
  /* 添加过渡效果 */
}

.settingcard:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 鼠标悬停时增加阴影效果 */
}

.settingcard-content {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

.settingcard-content .ant-input {
  margin-bottom: 5px;
}
</style>
