<template>
  <div class="device_container" v-loading="requestLoading">
    <div class="header" @click="router.back()">
      <el-icon style="position: relative; top: 2px; margin-right: 4px" size="22">
        <ArrowLeft />
      </el-icon>
      <el-text>{{ form.id ? "编辑小票打印机" : "添加小票打印机" }}</el-text>
    </div>
    <div class="d_content">
      <div class="d_list">
        <el-form :model="form" label-position="left" label-width="60%">
          <el-form-item label="设备名称">
            <el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-radio-group v-model="form.connectionType" @change="form.address = ''">
              <el-radio-button label="USB" value="USB"></el-radio-button>
              <el-radio-button label="局域网" value="局域网"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="打印机品牌">
            <el-input v-model="form.contentType" placeholder="请输入打印机品牌"></el-input>
          </el-form-item> -->
          <el-form-item label="设备尺寸">
            <el-select v-model="form.receiptSize">
              <el-option label="58mm" value="58mm"></el-option>
              <el-option label="80mm" value="80mm"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择设备" v-if="form.connectionType === 'USB'">
            <el-select v-model="form.address">
              <el-option :label="item.name" :value="item.name" v-for="item in printList" :key="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备IP" v-if="form.connectionType === '局域网'">
            <el-input v-model="form.address" placeholder="请输入设备IP地址"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <div class="column">
              <el-radio-group v-model="form.classifyPrint" @change="form.categoryList = []; form.categoryIds = ''">
                <el-radio-button label="全部" value="0"></el-radio-button>
                <el-radio-button label="部分" value="1" v-show="printTypeList[1].values.length > 0"></el-radio-button>
              </el-radio-group>
              <div style="cursor: pointer" @click="classifyRef.show()" v-if="form.classifyPrint == '1'">
                <span style="color: #409eff" v-if="form.categoryList.length">
                  {{form.categoryList.map(item => item.name).join(',')}}
                </span>
                <span style="color: #e65d6e" v-else>
                  请选择分类
                </span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="打印类型">
            <div class="row" v-for="(item, index) in printTypeList" :key="index">
              <div class="title">{{ item.label }}</div>
              <div class="cont">
                <el-checkbox-group v-model="item.values" @change="printTypeChange($event, index)">
                  <el-checkbox :label="item.label" :value="item.value" v-for="item in item.list"
                    :key="item.value"></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <!-- <el-form-item label="打印份数">
            <el-select v-model="form.printQty">
              <el-option :label="item" :value="item" v-for="item in 4" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品模式">
            <el-select v-model="form.config.model">
              <el-option label="普通出单" value="normal"></el-option>
              <el-option label="分类出单" value="category"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="打印子订单">
            <el-select v-model="form.config.printSub">
              <el-option label="是" :value="0"></el-option>
              <el-option label="否" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自动切刀">
            <el-select v-model="form.config.autoCut">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="尾部留空">
            <el-select v-model="form.config.feet">
              <el-option :label="`${item}行`" :value="`${item}`" v-for="item in feets" :key="item"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="menu_wrap">
        <div class="print_view">
          <div class="title t1">{{ printData.shop_name }}</div>
          <div class="title t2">
            预结算单 <span style="margin-left: 6px;">#{{ printData.orderInfo.orderNum }}</span>
          </div>
          <div class="title t2" style="margin-bottom: 20px;">
            桌号：无
          </div>
          <div class="row">订单号：{{ printData.orderInfo.orderNo }}</div>
          <div class="row">交易时间：{{ printData.createdAt }}</div>
          <div class="row">收银员：{{ printData.loginAccount }}</div>
          <div class="line"></div>
          <table class="table">
            <thead>
              <tr>
                <td>品名</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in printData.carts" :key="index">
                <td>
                  <div>{{ item.name }}</div>
                  <div class="sku">{{ item.skuName }}</div>
                </td>
                <td>{{ item.salePrice }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.totalAmount }}</td>
              </tr>
            </tbody>
          </table>
          <div class="line"></div>
          <div class="row between">
            <span>原价：</span>
            <span>{{ printData.originAmount }}</span>
          </div>
          <div class="row between">
            <span>折扣：</span>
            <span>-0.00</span>
          </div>
          <div class="line"></div>
          <div class="row between" style="font-size: 24px;">
            <span>实付：</span>
            <span>￥{{ printData.amount }}</span>
          </div>
          <div class="line"></div>
          <div class="row" style="font-weight: bold;">备注：{{ printData.remark }}</div>
          <div class="row" style="font-size: 14px;">打印时间：{{ printData.printTime }}</div>
        </div>
        <div class="btn_wrap">
          <div class="btn">
            <el-button plain style="width: 100%" :loading="printDataLoading" @click="printHandle">
              打印测试小票
            </el-button>
          </div>
          <div class="btn">
            <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
              保存
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <classify ref="classifyRef" @success="(e) => (form.categoryList = e)" />
</template>

<script setup>
import _ from 'lodash'
import dayjs from "dayjs";
import { ipcRenderer } from "electron";
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useUser } from "@/store/user.js";
import { usePrint } from "@/store/print.js";
import { printerAdd, printerDetail } from "@/api/account.js";
import classify from "@/components/classify/index.vue";
import { useGoods } from '@/store/goods.js'
import receiptPrint from "@/components/lodop/receiptPrint.js";
const goodsStore = useGoods()

const classifyRef = ref(null);

const printStore = usePrint();
const store = useUser();

const router = useRouter();
const route = useRoute();

const printList = ref([]);
const feets = ref([0, 1, 2, 3, 4, 5, 8]);
const loading = ref(false);
const requestLoading = ref(false);
const printTypeList = ref([
  {
    label: '前台',
    values: [],
    list: [
      { label: '客看单', value: 'GUEST_ORDER' },
      { label: '预结算单', value: 'PRE_ORDER' },
      { label: '结算单', value: 'ORDER' },
      { label: '退菜单', value: 'RETURN_ORDER' },
      { label: '退款单', value: 'REFUND_ORDER' },
    ]
  },
  {
    label: '后厨',
    values: [],
    list: [
      { label: '后厨-整单', value: 'ALL_KITCHEN' },
      { label: '后厨-分单', value: 'ONLY_KITCHEN' },
      { label: '后厨-退菜单', value: 'REFUND_KITCHEN' },
    ]
  },
  {
    label: '其它',
    values: [],
    list: [
      { label: '交班单', value: 'HANDOVER' },
      { label: '排队取号', value: 'CALL' },
      { label: '储值单', value: 'RECHARGE' },
      { label: '出入库单', value: 'STOCK' },
      { label: '盘点单', value: 'STOCK_CHECK' },
      { label: '商品报表', value: 'PRODUCT_REPORT' },
      { label: '经营日报', value: 'DAY_REPORT' },
      { label: '日结单', value: 'DAY_ORDER' },
    ]
  }
])

const categoryIdsType = ref('all') // all=全部 custom=部分 

const form = ref({
  id: "",
  name: '', // 设备名称
  connectionType: 'USB', // 现在打印机支持USB 和 网络、蓝牙、局域网
  address: '', // 打印机名称
  port: '', // 端口
  printType: 'cash', // 打印类型（分类）label标签cash小票kitchen出品
  contentType: '', // 打印机品牌
  categoryIds: '', // 打印分类Id
  categoryList: [], // 分类
  sort: '',
  receiptSize: '58mm', // 小票尺寸 58mm 80mm
  classifyPrint: '0', // 分类打印 0-所有 1-部分分类 2-部分商品
  printNum: '', // 打印数量 c1m1^2 = 顾客+商家[2张] m1^1 = 商家[1张] c1^1顾客[1张] c2m1^3顾客2+商家1[3张]
  kitchenPrintMode: 'all', // 打印方式 all-全部打印 normal-仅打印结账单「前台」one-仅打印制作单「厨房」queue-仅打印排队取号
  printContentType: [],
  status: 1,
  handoverSwitch: 0, // 交班单开关 0-关闭 1-开启
});

const printDataLoading = ref(false);
const printData = reactive({
  shop_name: '',
  loginAccount: '',
  isBefore: true,
  carts: [
    {
      id: 1,
      name: "【测试勿管】娃哈哈矿泉水",
      skuName: "500ml",
      salePrice: "1.0",
      number: "10",
      totalAmount: "10",
    },
  ],
  amount: "10.00",
  originAmount: '10.00',
  discountAmount: "0.00",
  discountAllAmount: 0,
  orderAmount: 10,
  discount: 0,
  remark: "给我多放点辣椒，谢谢老板",
  orderInfo: {
    masterId: "",
    orderNo: "202404021023542223445",
    orderNum: '12',
    discountAllAmount: 0,
    orderAmount: 10,
  },
  deviceName: "",
  createdAt: "2024-04-02 10:15",
  printTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});

// 获取打印机列表
function getPrintList() {
  ipcRenderer.send("getPrintList");
  ipcRenderer.on("printList", (event, arg) => {
    printList.value = arg;
  });
}

// 测试打印
function printHandle() {
  if (form.value.connectionType === 'USB' && !form.value.address) {
    ElMessage.error("请选择打印设备");
    return;
  }
  if (form.value.connectionType === '局域网' && !form.value.address) {
    ElMessage.error("请输入设备IP地址");
    return;
  }

  printDataLoading.value = true;
  printData.shop_name = store.shopInfo.shopName
  printData.loginAccount = store.userInfo.name
  printData.deviceName = form.value.name;
  printData.printTime = dayjs().format("YYYY-MM-DD HH:mm:ss");

  if (form.value.connectionType === 'USB') {
    receiptPrint(printData,)
  } else if (form.value.connectionType === '局域网') {
    ipcRenderer.send('ORDER', JSON.stringify({
      printerIp: form.value.address,
      orderData: printData
    }))
  }
  setTimeout(() => {
    printDataLoading.value = false;
  }, 2500);
}

// 打印类型切换
function printTypeChange(e, index) {
  if (index == 1 && printTypeList.value[index].values.length == 0) {
    form.value.categoryList = []
    form.value.classifyPrint = '0'
  } else {
    form.value.classifyPrint = '1'
  }
}

// 提交打印机
async function submitHandle() {
  try {
    if (!form.value.name) {
      ElMessage.error("请输入设备名称");
      return;
    }
    if (form.value.connectionType === 'USB' && !form.value.address) {
      ElMessage.error("请选择打印设备");
      return;
    }
    if (form.value.connectionType === '局域网' && !form.value.address) {
      ElMessage.error("请输入设备IP地址");
      return;
    }

    if (form.value.classifyPrint == '1' && !form.value.categoryList.length) {
      ElMessage.error("请选择商品分类");
      return;
    }

    loading.value = true;
    form.value.categoryIds = form.value.categoryList.map(item => item.id).join(',')

    let arr = []
    printTypeList.value.forEach(item => {
      arr.push(...item.values)
    })

    form.value.printContentType = arr.join(',')
    await printerAdd(form.value, form.value.id ? "put" : "post");
    ElMessage.success(form.value.id ? "编辑成功" : "添加成功");
    printStore.init();
    router.back();
  } catch (error) {
    console.log(error);
  }
  loading.value = false;
}

// 查询打印机详情
async function tbPrintMachineDetailAjax(id) {
  try {
    requestLoading.value = true;
    const res = await printerDetail({ id: id });
    form.value = res;

    // 做分类信息补全
    let arr = []
    let categoryIds = res.categoryIds.split(',')
    goodsStore.originCategoryList.map(item => {
      categoryIds.map(val => {
        if (item.id == val) {
          arr.push({
            id: item.id,
            name: item.name
          })
        }
      })
    })
    form.value.categoryList = arr

    // 补全已选中的打印类型
    const printContentTypes = res.printContentType.split(',')
    printTypeList.value.forEach(val => {
      val.values = _.map(
        _.filter(val.list, item => printContentTypes.includes(item.value)),
        'value'
      );
    })

    console.log(form.value);


    // if (printTypeList.value[1].values.length > 0 && form.value.classifyPrint == 1) {
    //   form.value.classifyPrint = 1
    // }
  } catch (error) {
    console.log(error);
  }
  requestLoading.value = false;
}

onMounted(() => {
  printData.shop_name = store.shopInfo.shopName
  printData.loginAccount = store.userInfo.name

  getPrintList();
  if (route.query.id) {
    tbPrintMachineDetailAjax(route.query.id);
  }
});
</script>

<style scoped lang="scss">
.device_container {
  width: 100vw;
  height: 100vh;
  padding: 15px;
  background-color: #f1f1f1;
}

.header {
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.d_content {
  padding-top: 15px;
  display: flex;
  height: calc(100vh - 15px * 2 - 50px);

  .d_list {
    flex: 2;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;
    overflow-y: auto;
  }

  .menu_wrap {
    flex: 1;
    flex-direction: column;
    display: flex;
    margin-left: 15px;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 15px;

    .btn_wrap {
      display: flex;
      gap: var(--el-font-size-base);
      padding: var(--el-font-size-base) 0;

      .btn {
        flex: 1;
      }
    }

    .print_view {
      flex: 1;
      padding: 20px 0;

      .title {
        display: flex;
        justify-content: center;
        margin-bottom: 4px;

        &.t1 {
          font-size: 24px;
        }
      }

      .row {
        margin-top: 2px;

        &.between {
          display: flex;
          justify-content: space-between;
        }
      }


      .line {
        margin: 10px 0;
        border-bottom: 1px solid #ddd;
      }

      .table {
        width: 100%;

        tr {
          width: 100%;
          display: flex;

          &:not(:last-child) {
            margin-bottom: 10px;
          }

          td {
            flex: 1;

            &:nth-child(1) {
              flex: 2;
            }

            &:not(:first-child) {
              display: flex;
              justify-content: flex-end;
            }

            .sku {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
