<template>
  <div class="shopAdd" v-loading="showLoading" element-loading-text="数据加载中">
    <div class="header">
      <div class="left">
        <div class="head-line">
          <div class="b_line"></div>
          <div class="triangle"></div>
        </div>
        <div class="label">USB打印机管理</div>
      </div>
    </div>
    <div class="printer-list">
      <div class="printer" @click="setPinter(i)" v-for="(v,i) in printerList" :key="i">
        <div :class="v.status ? 'img-wrap online-bg' : 'img-wrap offline-bg' ">
          <img :src="v.status ? require('../../../static/image/usb-online.png') : require('../../../static/image/usb-offline.png')" alt="">
        </div>
        <div class="name">{{v.deviceName}}</div>
      </div>
      <el-empty style="width:100%;" v-if="!printerList.length" description="无法获取系统打印机列表，请先安装下载中心USB打印相关插件！"></el-empty>
    </div>
    <!-- 打印机新增、编辑 -->
    <el-dialog width="600px" :title="title" destroy-on-close center :visible.sync="showVisible">
      <el-form :model="form" ref="form" label-width="130px">
        <el-form-item label="打印机系统名称" prop="deviceName">
          <span>{{form.deviceName}}</span>
        </el-form-item>
        <el-form-item label="打印机自定义名称" prop="name">
          <el-input v-model="form.name" placeholder="给这台打印机取个名字吧" autocomplete="off" style="width: 100%">
          </el-input>
        </el-form-item>
        <el-form-item label="接单自动打印" prop="deviceSecret">
          <el-switch v-model="form.openOrderPrint" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
        </el-form-item>
        <el-form-item label="取消单自动打印" prop="deviceSecret">
          <el-switch v-model="form.openOrderCancelPrint" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
        </el-form-item>
        <el-form-item label="打印份数">
          <div class="printer-num">
            <img @click="reduce(1)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="" />
            <div class="num">{{ form.printCustomerCount }} 份</div>
            <img @click="add(1)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="" />
            <div class="name">客户联</div>
          </div>
          <div class="printer-num">
            <img @click="reduce(2)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="" />
            <div class="num">{{ form.printMerchantCount }} 份</div>
            <img @click="add(2)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="" />
            <div class="name">商家联</div>
          </div>
          <div class="printer-num">
            <img @click="reduce(3)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="" />
            <div class="num">{{ form.printKitchenCount }} 份</div>
            <img @click="add(3)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="" />
            <div class="name">厨房联</div>
          </div>
        </el-form-item>
        <el-form-item label="小票宽度" prop="width">
          <el-radio-group v-model="form.width">
            <el-radio :label="58">58mm</el-radio>
            <el-radio :label="80">80mm</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="启用USB打印机" prop="status">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
        </el-form-item>
        <el-form-item>
          <el-tag @click="printTest" class="print-test" type="warning">打印测试</el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loading" size="medium" class="btn" @click="save">保存</el-button>
      </div>
    </el-dialog>
    <!-- usb自动打印 -->
    <usb-auto-print :orderType='orderType' :printNum="printNum" :printData="printData" :deviceName="deviceName"></usb-auto-print>
  </div>
</template>

<script>
import { addUsbPrint, getUsbPrint } from "../../api/shop.js";
import { getLodop } from "../../common/LodopFuncs.js";
import UsbAutoPrint from "../../common/UsbAutoPrint";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "bindUsbPrint",
  props: {},
  data() {
    return {
      title: "设置USB打印机",
      showVisible: false,
      form: {},
      loading: false,
      showLoading: true,
      printerList: [],
      form: {},
      orderType: 1,
      printNum: 0,
      deviceName: '',
      printData: {
        actDtos: [],
        boxFee: "2.0",
        caution:
          "【如遇缺货】： 缺货时电话与我沟通 顾客未对餐具数量做选择",
        createTime: "2021-11-16 19:07:10",
        daySeq: "5",
        deliverFee: "4.00",
        deliveryTime: "0",
        encryptRecipientPhone: "",
        invoiceTitle: null,
        isBook: 0,
        openQrCode: 1,
        orderGoodsDtoList: [
          { foodName: "测试商品1(不加糖)", price: 1, quantity: 3 },
          { foodName: "测试商品2(半糖)", price: 2, quantity: 6 },
          { foodName: "测试商品3(不加糖)", price: 3, quantity: 3 },
          { foodName: "测试商品4(半糖)", price: 4, quantity: 6 },
        ],
        orderSource: "美团",
        orderStatus: null,
        orderidView: "32135861322341985",
        originalPrice: 0.23,
        outOrderId: "32135861322341985",
        qrCode: null,
        quantity: null,
        recipientAddress: "苏州市新区",
        recipientName: "周女士",
        recipientPhone: "157****000",
        recipientPrivacyPhone: null,
        shipperPhone: "",
        shopName: "测试店铺",
        taxpayerId: null,
        totalPrice: 54.0,
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapGetters(["usbPrinter"]),
  },
  // 监控data中的数据变化
  watch: {
    usbPrinter: {
      handler(newVal) {
        this.printerList = newVal;
        this.showLoading = !newVal.length;
      },
      deep: true,
      immediate: true,
    },
  },
  components: {
    UsbAutoPrint,
  },
  created() {},
  mounted() {
    setTimeout(() => {
      if (!this.printerList.length) {
        this.showLoading = false;
      }
    }, 5000);
    this.$store.dispatch("getUsbPrint");
  },
  methods: {
    ...mapMutations(["SET_USBPRINTER"]),
    printTest() {
      this.deviceName = this.form.deviceName;
      this.printNum += 1;
    },
    setPinter(i) {
      this.showVisible = true;
      this.form = this.printerList[i];
    },
    save() {
      console.log(this.form);
      this.loading = true;
      addUsbPrint(this.form).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: `修改成功！`,
          });
          this.showVisible = false;
          this.$store.dispatch("getUsbPrint");
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },
    add(type) {
      switch (type) {
        case 1:
          this.form.printCustomerCount = ++this.form.printCustomerCount;
          break;
        case 2:
          this.form.printMerchantCount = ++this.form.printMerchantCount;
          break;
        case 3:
          this.form.printKitchenCount = ++this.form.printKitchenCount;
          break;

        default:
          break;
      }
    },
    reduce(type) {
      switch (type) {
        case 1:
          this.form.printCustomerCount = this.form.printCustomerCount
            ? --this.form.printCustomerCount
            : this.form.printCustomerCount;
          break;
        case 2:
          this.form.printMerchantCount = this.form.printMerchantCount
            ? --this.form.printMerchantCount
            : this.form.printMerchantCount;
          break;
        case 3:
          this.form.printKitchenCount = this.form.printKitchenCount
            ? --this.form.printKitchenCount
            : this.form.printKitchenCount;
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss">
// 添加颜色类
.el-radio__input.is-checked + .el-radio__label {
  color: #fc7200 !important;
}
.el-radio__input.is-checked .el-radio__inner {
  background: #fc7200 !important;
  border-color: #fc7200 !important;
}
.shopAdd {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
    .left {
      display: flex;
      align-items: center;

      .head-line {
        position: relative;
        width: 4px;
        height: 15px;
        background: #fc7200;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 10px;

        .b_line {
          width: 100px;
          height: 6px;
          background: #462bf7;
        }

        .triangle {
          width: 0;
          height: 0;
          border-top: 100px solid #462bf7;
          border-left: 100px solid transparent;
        }
      }

      .label {
        font-size: 16px;
        font-weight: 500;
        color: #0d1e40;
      }
    }
  }
  .printer-list {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 20px);
    background-color: #fff;
    padding: 10px;

    .printer {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      padding: 10px;
      width: 210px;
      height: 140px;
      cursor: pointer;
      background-color: #f3f3f7;
      margin: 0 10px 10px 0;
      .online-bg {
        background-color: #fc7200;
      }
      .offline-bg {
        background-color: #888;
      }
      .img-wrap {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-top: 30px;
        img {
          width: 22px;
          height: 20px;
        }
      }
      .name {
        margin-top: 15px;
        text-align: center;
      }
    }
  }
  .printer-num {
    display: flex;
    align-items: center;
    .reduce {
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
    .num {
      margin: 0 10px;
    }
    .add {
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
    .name {
      margin-left: 20px;
    }
  }
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
  }
  .print-test {
    cursor: pointer;
  }
  .el-dialog__headerbtn .el-dialog__close:hover {
    color: #909399;
  }

  .el-dialog__header {
    /*height: 48px;*/
    background: #f7f7f7;
    padding: 16px 20px;
  }

  .el-dialog__title {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }

  .el-form-item__label {
    text-align: left;
    color: #000000;
  }

  .el-input__inner:focus {
    border-color: #fc7b0f;
  }

  .el-input__inner {
    color: #222222;
  }

  .line {
    position: absolute;
    left: -103px;
    right: 0;
    bottom: -12px;
    border: 0.5px dashed #e0e0e0;
  }

  .logo_box {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    line-height: 0;

    img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 10px;
      vertical-align: top;
    }
  }

  .reviewed {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;

      .left {
        display: flex;
        align-items: center;
        line-height: 0;

        .logo {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .label {
          font-size: 14px;
          color: #000000;
        }
      }

      .tip {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 22px;
        border-radius: 22px;
        background: #f74141;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }

  .btn {
    background: #fc7200;
    color: #ffffff;
    width: 220px;
  }
}
</style>
