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



    <div class="printcard-container">
      <div :class="item.isSelected ? 'printcard printcard-selected' : 'printcard'"
        v-for="(item, index) in InkjetPrinterData" :key="index" @click="toggleCard(item)">
        <!-- 卡片内容 -->
        <div class="printcard-content">
          <div class="printcard-header">
            <div class="printcard-title">
              <h4> {{ item.name }}</h4>
            </div>
            <div class="printcard-buttons">
              <a-button type="primary" @click.stop="pageStart(item)">启动</a-button>
              <a-button type="danger" @click.stop="pageStop(item)" style=" margin-left: 5px; ">停止</a-button>

            </div>
          </div>

          <h3> {{ (item.ip || '') + (item.ip ? ":" : '') + (item.port || '') }}</h3>
          <div class="printcard-toolbar">
            <a-icon key="setting" type="setting" @click.stop="pageSetting(item)"></a-icon>
          </div>



        </div>
      </div>
    </div>

    <div style="margin: 9px;width:300px;display: flex;">
      <a-input v-model="searchKey" /> <a-button style="margin-left: 4px;" @click.stop="pageSearch()">搜索</a-button>
      <a-button style="margin-left: 4px;" @click.stop="pageAdd()">新增</a-button>
    </div>
    <vxe-table border show-overflow keep-source ref="xTable" :height="table1Height" :data="detailsData"
      :row-config="{ height: 120 }" :column-config="{ resizable: true }">

  
      <vxe-column field="sequance" title="条码编号" width="180"></vxe-column>
      <vxe-column field="voucherdate" title="单据日期" width="110"></vxe-column>
      <vxe-column field="vouchercode" title="单据号" width="140"></vxe-column>
      <vxe-column field="departmentName" title="生产车间" width="120"></vxe-column>
      <vxe-column field="inventoryName" title="存货名称" width="130"></vxe-column>
      <vxe-column field="quantity" title="数量" width="80"></vxe-column>
      <vxe-column field="print_statistics" title="打印次数" width="100"></vxe-column>
      <vxe-column title="获取打印统计" width="150">
        <template #default="{ row }">
          <a-button type="primary" @click.stop="pageGetPrintInfo(row)">获取打印统计</a-button>
        </template>
      </vxe-column>
      <vxe-column title="设置" width="600">
        <template #default="{ row }">
          X <a-input-number style="width:60px" v-model="row.x" />

          Y <a-input-number style="width:60px" v-model="row.y" />
          角度 <a-input-number style="width:60px" v-model="row.direction" />
          字体 <a-select v-model="row.fontName" :options="fonts" style="width:80px;"></a-select>
          字号 <a-input-number style="width:60px" v-model="row.fontSize" />
          间距 <a-select v-model="row.fontSpacing" :options="fontSpacings" style="width:80px;"></a-select>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="150">
        <template #default="{ row }">
          <a-button type="primary" @click.stop="pageSend(row)">发送打印文件</a-button>
        </template>
      </vxe-column>

    </vxe-table>



  </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/list`,
        sequanceData: `http://36.133.149.247:9112/api/tp/getSqList`
      },
      searchKey: '',
      currentPrint: null,
      table1Height: 300,
      addText: '',
      InkjetPrinterData: [

      ],
      fonts: [
        { value: 'Arial', label: 'Arial' }
      ],
      fontSpacings: [
        { 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' },
      ],

      detailsData: [

      ]



    };


    return pageData;
  },


  created() {
    this.printInit();
    this.sequanceDataInit();
    this.heightInit();
  },
  // 函数
  methods: {
    pageSetting(row) {
      this.$openPage("/InkjetPrinter/InkjetPrinterSetting/" + row.id); // 打开页面  
    },
    sequanceDataInit() {
      this.$mk.post({
        url: this.actions.sequanceData,
        loading: "加载中...",
        data: {
          key: this.searchKey
        } 
      }).then(a => {

        if (a.code == 200) {

          let ds = [];
          let textList = a.textList || a.data.textList || [];


          textList.forEach(item => {
            let o = this.getDefaultData(item);
            if(o.voucherdate){
              o.voucherdate = o.voucherdate.substr(0,10)
            }
            ds.push(o)
          });

          ds= JSON.parse(JSON.stringify(ds)) 
          this.detailsData = ds;
        }
      });
    },
    pageSearch() {

      this.filesInit();


    },

    getDefaultData(item){
      return  Object.assign(item, {x: 0, y: 0, direction: 0, fontName: 'Arial', fontSize: 100, fontSpacing: 10 });
    },

    pageAdd() {


      this.detailsData = [...this.detailsData, this.getDefaultData({sequance:this.searchKey})];

    },

    printInit() {
      this.$mk.post({
        url: this.actions.get,
        loading: "加载中...",
        data: {
          "end_time": 0,
          "page": 1,
          "start_time": 0,
          "limit": 999,
          "order_bys": [
          ],
          "search_rules": [
          ]
        },
        useBigInt: true
      }).then(a => {

        this.InkjetPrinterData = a.data.InkjetPrinter;
      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });
    },

    heightInit() {

      this.$nextTick(() => {
        let h = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 360;
        if (h < 250) {
          h = 250;
        }

        this.table1Height = h;
      });

    },
    loadData() {
    },

    toggleCard(item) {

      this.InkjetPrinterData.forEach(o => {
        o.isSelected = false;
      })

      item.isSelected = true;
      this.currentPrint = item;
      this.$forceUpdate();
    },


    pageStart(item) {
      var sendData = {
        id: this.$mk.toBigInt(item.id)
      };
      this.$mk.post({
        url: `${BASE_URL.BASE_URL}/InkjetPrinter/v1/start/machine`,
        loading: "启动中...",
        data: sendData,
        useBigInt: true
      }).then(a => {
        if (a.code != 200) {
          this.$mk.error(a.msg);
        } else {
          this.$mk.success(a.msg || "启动成功");
        }
      });
    },

    pageStop(item) {
      var sendData = {
        id: this.$mk.toBigInt(item.id)
      };
      this.$mk.post({
        url: `${BASE_URL.BASE_URL}/InkjetPrinter/v1/stop/machine`,
        loading: "停止中...",
        data: sendData,
        useBigInt: true
      }).then(a => {
        if (a.code != 200) {
          this.$mk.error(a.msg);
        } else {
          this.$mk.success(a.msg || "停止成功");
        }
      });
    },
    pageGetPrintInfo(row) {
      if (!this.currentPrint) {
        this.$mk.error("请先选择机器");
        return;
      }
      var sendData = {};
      sendData.id = this.$mk.toBigInt(this.currentPrint.id);
      this.$mk.post({
        url: `${BASE_URL.BASE_URL}/InkjetPrinter/v1/get/print/statistics`,
        loading: "获取中...",
        data: sendData,
        useBigInt: true
      }).then(a => {
        if (a.code != 200) {
          this.$mk.error(a.msg);
        } else {
          if (a.data && a.data.print_statistics) {
            row.print_statistics = a.data.print_statistics;

            this.$forceUpdate();
          }
        }
      });
    },

    pageSend(item) {
      if (!this.currentPrint) {
        this.$mk.error("请先选择机器");
        return;
      }
      var sendData = Object.assign({}, item);
      delete sendData._X_ROW_KEY;
      delete sendData.print_statistics;
      sendData.id = this.$mk.toBigInt(this.currentPrint.id);
      sendData.contents = sendData.sequance;
      sendData.fileName = "";
      delete sendData.sequance
      delete sendData.voucherdate
      delete sendData.vouchercode
      delete sendData.inventoryName
      delete sendData.quantity
      delete sendData.departmentName
      this.$mk.post({
        url: `${BASE_URL.BASE_URL}/InkjetPrinter/v1/send/print/file`,
        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>
.printcard-container {
  display: flex;
  flex-wrap: wrap;
}

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

  cursor: pointer;
}

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

.printcard-content {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  position: relative;
  padding-bottom: 20px;
}

.printcard-content .ant-input {
  margin-bottom: 5px;
}

.printcard-header {
  display: flex;
}

.printcard-title {
  flex: 2;
}

.printcard-buttons {
  flex: 1;
}

.printcard-selected {
  background-color: #b2d9f1;
}

.printcard-toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
