<template>
  <el-dialog
    append-to-body
    custom-class="center-dialog"
    title="福家优鲜 线上超市"
    top="0vh"
    :visible.sync="isDialog"
    width="400px"
    @close="closeDialog"
    class="receiptDialog-container"
  >
    <div class="block-container">
      <!-- <div v-for="(item,index) of receiptConfig" :key="index" :class="[item.class,test(item.classText)]" :style="item.style" v-show=" item.show.length > 0 ?  test2(item.show) : test3(item.handerChekcItems)">
            {{ item.data != '' ? item.data  : item.dataKey.length > 0 ? printData[item.dataKey[0]][item.dataKey[1]] : '' }}
            <div v-if="item.children.length > 0 ">
                <div :style="group.style" :class="[group.class,test(group.classText)]" v-for="(group,index2) of item.children" :key="index2" v-show="(group.show)">
                    {{ handerText(group)  }}
                </div>
            </div>
        </div> -->
      <div
        style="padding-bottom: 10px"
        :class="[
          'block-content',
          'item-block',
          classItem('header_info', 'template_size', 'template_bold'),
        ]"
        v-show="showItem('header_info', 'template_status')"
      >
        {{ printData.header_info.template_name || '小票名称' }}
      </div>
      <div
        style="padding-bottom: 10px"
        :class="[
          'block-content',
          'item-block',
          classItem('header_info', 'shop_name_size', 'shop_name_bold'),
        ]"
        v-show="showItem('header_info', 'shop_name')"
      >
        商城名称
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('recharge_info', [
            'recharge_money',
            'send_money',
            'customer_balance',
          ]) && [3].includes(form.resource)
        "
      >
        <div
          class="item-block-left"
          v-show="showItem('header_info', 'write_off_name')"
        >
          核销员：张三
        </div>
        <div
          class="item-block-left"
          v-show="showItem('header_info', 'write_off_time')"
        >
          核销时间：2023-12-12 14:20:20
        </div>
        <div
          class="item-block-left"
          v-show="showItem('header_info', 'order_no')"
        >
          订单编号：ES20231026111444527685
        </div>
        <div
          class="item-block-left"
          v-show="showItem('header_info', 'write_off_type')"
        >
          核销类型：自提订单
        </div>
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('header_info', [
            'open_time',
            'print_time',
            'print_people',
          ]) && form.resource == 5
        "
      >
        <div
          class="item-block-left"
          v-show="showItem('header_info', 'open_time')"
        >
          营业时间：2023-02-17
        </div>
        <div
          class="item-block-left"
          v-show="showItem('header_info', 'print_time')"
        >
          打印时间：2023-02-28 16:29:29
        </div>
        <div
          class="item-block-left"
          v-show="showItem('header_info', 'print_people')"
        >
          打印人：张三
        </div>
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('stand_info', ['name', 'start_time', 'end_time']) &&
          form.resource == 5
        "
      >
        <div class="item-block-left" v-show="showItem('stand_info', 'name')">
          收银员：李四
        </div>
        <div
          class="item-block-left"
          v-show="showItem('stand_info', 'start_time')"
        >
          开始：2023-02-28 16:29:29
        </div>
        <div
          class="item-block-left"
          v-show="showItem('stand_info', 'end_time')"
        >
          结束：2023-02-28 16:29:29
        </div>
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('finish_info', [
            'all',
            'pay_order_count',
            'sale_goods_count',
            'card_price',
            'recharge_money_price',
            'refund_price',
            'refund_order_count',
            'refund_goods_count',
            'real_money',
          ]) && form.resource == 5
        "
      >
        <div class="item-block gift-block">
          <div class="gift-boder"></div>
          <div class="gift-num item-small-size bold">营业汇总</div>
          <div class="gift-boder"></div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'all')"
        >
          <div class="item-balance-info-name">总交易额</div>
          <div class="item-balance-info-num">31000</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'pay_order_count')"
        >
          <div class="item-balance-info-name">支付订单数</div>
          <div class="item-balance-info-num">3600</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'sale_goods_count')"
        >
          <div class="item-balance-info-name">出售商品件数</div>
          <div class="item-balance-info-num">5000</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'card_price')"
        >
          <div class="item-balance-info-name">会员卡交易额</div>
          <div class="item-balance-info-num">3546</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'recharge_money_price')"
        >
          <div class="item-balance-info-name">余额充值金额</div>
          <div class="item-balance-info-num">9555</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'refund_price')"
        >
          <div class="item-balance-info-name">退款金额</div>
          <div class="item-balance-info-num">3000</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'refund_order_count')"
        >
          <div class="item-balance-info-name">退款订单数</div>
          <div class="item-balance-info-num">30</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('finish_info', 'refund_goods_count')"
        >
          <div class="item-balance-info-name">退款件数</div>
          <div class="item-balance-info-num">20</div>
        </div>
        <div
          :class="[
            'item-block',
            'item-balance-info',
            classItem('finish_info', 'real_money_size', 'real_money_blod'),
          ]"
          v-show="showItem('finish_info', 'real_money')"
        >
          <div class="item-balance-info-name">实营收额</div>
          <div class="item-balance-info-num">250000</div>
        </div>
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('pay_type_info', [
            'wechat',
            'ali',
            'cash',
            'balance',
            'other',
          ]) && form.resource == 5
        "
      >
        <div class="item-block gift-block">
          <div class="gift-boder"></div>
          <div class="gift-num item-small-size bold">支付方式组成</div>
          <div class="gift-boder"></div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('pay_type_info', 'wechat')"
        >
          <div class="item-balance-info-name">微信</div>
          <div class="item-balance-info-num">31000</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('pay_type_info', 'ali')"
        >
          <div class="item-balance-info-name">支付宝</div>
          <div class="item-balance-info-num">3600</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('pay_type_info', 'cash')"
        >
          <div class="item-balance-info-name">现金</div>
          <div class="item-balance-info-num">5000</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('pay_type_info', 'balance')"
        >
          <div class="item-balance-info-name">余额</div>
          <div class="item-balance-info-num">3546</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('pay_type_info', 'other')"
        >
          <div class="item-balance-info-name">其他线下方式</div>
          <div class="item-balance-info-num">9555</div>
        </div>
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('checkstand_writeoff', [
            'self',
            'virtual',
            'timegoods',
            'booking',
            'giftpackage',
            'coupon',
            'hotel',
          ]) && form.resource == 5
        "
      >
        <div class="item-block gift-block">
          <div class="gift-boder"></div>
          <div class="gift-num item-small-size bold">核销记录</div>
          <div class="gift-boder"></div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('checkstand_writeoff', 'self')"
        >
          <div class="item-balance-info-name">自提订单</div>
          <div class="item-balance-info-num">100单</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('checkstand_writeoff', 'virtual')"
        >
          <div class="item-balance-info-name">虚拟核销订单</div>
          <div class="item-balance-info-num">200单</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('checkstand_writeoff', 'timegoods')"
        >
          <div class="item-balance-info-name">计次时卡券</div>
          <div class="item-balance-info-num">5000</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('checkstand_writeoff', 'booking')"
        >
          <div class="item-balance-info-name">余额</div>
          <div class="item-balance-info-num">35406</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('checkstand_writeoff', 'giftpackage')"
        >
          <div class="item-balance-info-name">预约到店</div>
          <div class="item-balance-info-num">500次</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('checkstand_writeoff', 'coupon')"
        >
          <div class="item-balance-info-name">优惠券</div>
          <div class="item-balance-info-num">30张</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('checkstand_writeoff', 'hotel')"
        >
          <div class="item-balance-info-name">酒店预订</div>
          <div class="item-balance-info-num">5单</div>
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('header_info', [
            'gen_num',
            'order_sort',
            'quick_buy',
            'customer_mark',
            'selfsend_time',
          ]) && [1, 2].includes(form.resource)
        "
      >
        <div
          :class="[
            'item-block',
            classItem('header_info', 'gen_num_size', 'gen_num_bold'),
          ]"
          v-show="showItem('header_info', 'gen_num')"
        >
          #0001
        </div>
        <div
          :class="[
            'item-block',
            classItem(
              'header_info',
              'order_sort_font_size',
              'order_sort_font_bold'
            ),
          ]"
          v-show="showItem('header_info', 'order_sort') && form.resource == 1"
        >
          {{ printData.header_info.order_sort_prefix || '序号' }}
        </div>
        <div
          :class="[
            'item-block',
            classItem('header_info', 'quick_buy_size', 'quick_buy_bold'),
          ]"
          v-show="showItem('header_info', 'quick_buy')"
        >
          快速购买渠道名称
        </div>
        <div
          :class="[
            'item-block-left',
            classItem(
              'header_info',
              'customer_mark_size',
              'customer_mark_bold'
            ),
          ]"
          v-show="
            showItem('header_info', 'customer_mark') && form.resource == 1
          "
        >
          买家备注：多用一层包装袋，送到后请打电话，谢谢！！
        </div>
        <div
          :class="[
            'item-block-left',
            classItem(
              'header_info',
              'selfsend_time_size',
              'selfsend_time_bold'
            ),
          ]"
          v-show="
            showItem('header_info', 'selfsend_time') && form.resource == 1
          "
        >
          配送时间：10-25 14:00-14:30
        </div>
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('order_info', [
            'order_no',
            'order_from',
            'order_goods_type',
            'order_pay_type',
            'order_status',
            'order_dispatch_name',
            'order_create_time',
            'order_pay_time',
            'order_finish_time',
          ]) && [1, 2].includes(form.resource)
        "
      >
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_no')"
        >
          订单编号：ES20231026111444527685
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_from')"
        >
          订单来源：微信小程序
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_goods_type')"
        >
          商品类型：实体商品
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_pay_type')"
        >
          支付方式：微信支付
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_status')"
        >
          订单状态：已完成
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_dispatch_name')"
        >
          配送方式：同城配送
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_create_time')"
        >
          下单时间：2023-12-12 14:20:20
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_pay_time')"
        >
          付款时间：2023-12-12 14:20:20
        </div>
        <div
          class="item-block-left"
          v-show="showItem('order_info', 'order_finish_time')"
        >
          完成时间：2023-12-12 14:20:20
        </div>
        <div
          class="item-block-left"
          v-show="
            showItem('order_info', 'refund_create_time') && form.resource == 2
          "
        >
          申请退款时间：2023-12-12 14:20:20
        </div>
        <div
          class="item-block-left"
          v-show="
            showItem('order_info', 'refund_finish_time') && form.resource == 2
          "
        >
          退款完成时间：2023-12-12 14:20:20
        </div>
      </div>
      <div
        style="padding-bottom: 10px"
        class="block-content"
        v-show="form.resource == 2"
      >
        <div
          class="item-block refund-block bold"
          v-show="showItem('make_info', 'gift_info')"
        >
          <div class="refund-xing">*********************</div>
          <div class="refund-num item-small-size">退款商品</div>
          <div class="refund-xing">*********************</div>
        </div>
        <div class="item-block item-flex bold">
          <div class="item-flex-1">商品名称</div>
          <div class="item-flex-2">退款数量</div>
          <div class="item-flex-2" v-show="showItem('make_info', 'real_price')">
            实退款
          </div>
        </div>
        <div
          :class="[
            'item-block-left',
            classItem('make_info', 'real_price_size', 'real_price_bold'),
          ]"
          v-show="showItem('make_info', 'goods_name')"
          style="padding: 0"
        >
          (退)可口可乐mini罐 经典碳酸饮料【新包装；200ml*12罐】
        </div>
        <div class="item-flex">
          <div class="item-flex-1"></div>
          <div
            class="item-flex-2"
            :class="
              classItem('make_info', 'real_price_size', 'real_price_bold')
            "
          >
            [
            <span style="padding: 0 5px">X 2</span>
            ]
          </div>
          <div
            class="item-flex-2"
            :class="
              classItem('make_info', 'real_price_size', 'real_price_bold')
            "
            v-show="showItem('make_info', 'real_price')"
          >
            ¥54.5
          </div>
        </div>
        <div
          :class="[
            'item-block-left',
            classItem('make_info', 'real_price_size', 'real_price_bold'),
          ]"
          v-show="showItem('make_info', 'goods_name')"
        >
          (退)超薄液晶电视
        </div>
        <div class="item-flex">
          <div class="item-flex-1"></div>
          <div
            class="item-flex-2"
            :class="
              classItem('make_info', 'real_price_size', 'real_price_bold')
            "
          >
            1
          </div>
          <div
            class="item-flex-2"
            :class="
              classItem('make_info', 'real_price_size', 'real_price_bold')
            "
            v-show="showItem('make_info', 'real_price')"
          >
            ¥1999
          </div>
        </div>
      </div>
      <div
        class="block-content item-small-size"
        v-show="
          handerChekcItem('refund', [
            'type',
            'apply_time',
            'apply_money',
            'apply_reason',
            'apply_real',
            'apply_detail',
          ]) && form.resource == 2
        "
      >
        <div class="item-block-left" v-show="showItem('refund', 'type')">
          退款方式：售后（仅退款）
        </div>
        <div class="item-block-left" v-show="showItem('refund', 'apply_time')">
          申请售后时间：2023-12-12 14:20:20
        </div>
        <div
          class="item-block item-flex"
          v-show="showItem('refund', 'apply_money')"
        >
          申请金额：64.5
        </div>
        <div
          class="item-block-left"
          v-show="showItem('refund', 'apply_reason')"
        >
          申请原因：拍多了。
        </div>
        <div
          :class="[
            'item-block item-flex',
            classItem('refund', 'apply_real_size', 'apply_real_bold'),
          ]"
          v-show="showItem('refund', 'apply_real')"
        >
          <div class="item-flex-1">实退金额</div>
          <div class="item-flex-2">64.5</div>
        </div>
        <div
          class="item-block-left"
          v-show="showItem('refund', 'apply_detail')"
        >
          微信退款金额：50（原路退还）
        </div>
        <div
          class="item-block-left"
          v-show="showItem('refund', 'apply_detail')"
        >
          余额退款金额：14.5
        </div>
      </div>
      <div
        style="padding-bottom: 10px"
        class="block-content"
        v-show="[1, 3].includes(form.resource)"
      >
        <div class="item-block item-flex">
          <div class="item-flex-1">商品名称</div>
          <div class="item-flex-2">数量</div>
          <div
            class="item-flex-2"
            v-show="showItem('order_price', 'pay_price')"
          >
            金额
          </div>
        </div>
        <div
          :class="[
            'item-block-left',
            classItem('make_info', 'goods_name_size', 'goods_name_bold'),
          ]"
          v-show="showItem('make_info', 'goods_name')"
          style="padding: 0"
        >
          可口可乐mini罐 经典碳酸饮料【新包装；200ml*12罐】
        </div>
        <div
          class="item-small-size"
          v-show="showItem('make_info', 'goods_code')"
        >
          123456789
        </div>
        <div
          style="margin: 0"
          class="item-block-left item-small-size"
          v-show="showItem('make_info', 'product_sn')"
        >
          6970448170051
        </div>
        <div class="item-flex">
          <div class="item-flex-1"></div>
          <div
            class="item-flex-2"
            :class="classItem('make_info', 'num_size', 'num_bold')"
          >
            [
            <span style="padding: 0 5px">X 2</span>
            ]
          </div>
          <div
            class="item-flex-2"
            :class="
              classItem('order_price', 'pay_price_size', 'pay_price_bold')
            "
            v-show="showItem('order_price', 'pay_price')"
          >
            ¥54.5
          </div>
        </div>
        <div
          :class="[
            'item-block-left',
            classItem('make_info', 'goods_name_size', 'goods_name_bold'),
          ]"
          v-show="showItem('make_info', 'goods_name')"
        >
          超薄液晶电视
        </div>
        <div
          class="item-small-size"
          v-show="showItem('make_info', 'goods_code')"
        >
          123456789
        </div>
        <div
          style="margin: 0"
          class="item-block-left item-small-size"
          v-show="showItem('make_info', 'product_sn')"
        >
          6970448170051
        </div>
        <div class="item-flex">
          <div class="item-flex-1"></div>
          <div
            class="item-flex-2"
            :class="classItem('make_info', 'num_size', 'num_bold')"
          >
            1
          </div>
          <div
            class="item-flex-2"
            :class="
              classItem('order_price', 'pay_price_size', 'pay_price_bold')
            "
            v-show="showItem('order_price', 'pay_price')"
          >
            ¥1999
          </div>
        </div>
        <div v-show="showItem('make_info', 'attach')">
          <div class="item-block-left item-small-size">（上门安装服务）</div>
          <div class="item-flex">
            <div class="item-flex-1"></div>
            <div class="item-flex-2">1</div>
            <div class="item-flex-2" v-show="showItem('make_info', 'price')">
              ¥0
            </div>
          </div>
          <div class="item-block-left item-small-size">（3年延保）</div>
          <div class="item-flex">
            <div class="item-flex-1"></div>
            <div class="item-flex-2">1</div>
            <div class="item-flex-2" v-show="showItem('make_info', 'price')">
              ¥199.99
            </div>
          </div>
        </div>
        <div
          class="item-block gift-block"
          v-show="showItem('make_info', 'gift_info')"
        >
          <div class="gift-boder"></div>
          <div class="gift-num item-small-size">赠品</div>
          <div class="gift-boder"></div>
        </div>
        <div v-show="showItem('make_info', 'gift_info')">
          <div
            class="item-block-left item-small-size"
            v-show="form.resource == 1"
          >
            余额：50
          </div>
          <div
            class="item-block-left item-small-size"
            v-show="form.resource == 1"
          >
            积分：50
          </div>
          <div class="item-block-left item-small-size">
            商品：冰红茶风味饮料x2；五香瓜子【150g；小包装】x1
          </div>
          <div
            class="item-block-left item-small-size"
            v-show="form.resource == 1"
          >
            优惠券：元旦大促7折券x1
          </div>
          <div
            class="item-block-left item-small-size"
            v-show="form.resource == 1"
          >
            会员卡：超级会员卡Plus【365天】
          </div>
          <div
            class="item-block-left item-small-size"
            v-show="form.resource == 1"
          >
            礼品卡：超值复购大礼包x1
          </div>
        </div>
      </div>
      <div
        class="block-content"
        v-show="form.resource == 3 && printData.write_off_info"
      >
        <div class="item-block item-size bold">#001</div>
        <div class="item-block-left item-small-size">
          核销自提点：自提点名称
        </div>
        <div class="item-block-left item-small-size">
          联系方式：123456789123
        </div>
        <div class="item-block-left item-small-size">
          地址：北京市朝阳区朝阳路1号
        </div>
        <div class="item-block-left item-small-size">营业时间：00:00~23:59</div>
        <div class="item-block-left item-small-size">
          自提时间：10-20 14:00~14:30
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('order_price', [
            'goods_count',
            'price_detail',
            'price_detail',
            'price_detail',
            'discount_detail',
            'discount_detail',
          ]) && form.resource == 1
        "
      >
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('order_price', 'goods_count')"
        >
          <div class="item-balance-info-name">商品件数</div>
          <div class="item-balance-info-num">3</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('order_price', 'price_detail')"
        >
          <div class="item-balance-info-name">商品总额</div>
          <div class="item-balance-info-num">800</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('order_price', 'price_detail')"
        >
          <div class="item-balance-info-name">押金</div>
          <div class="item-balance-info-num">200</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('order_price', 'price_detail')"
        >
          <div class="item-balance-info-name">运费</div>
          <div class="item-balance-info-num">10</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('order_price', 'discount_detail')"
        >
          <div class="item-balance-info-name">会员权益</div>
          <div class="item-balance-info-num">3</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('order_price', 'discount_detail')"
        >
          <div class="item-balance-info-name">秒杀</div>
          <div class="item-balance-info-num">-100</div>
        </div>
        <div
          :class="[
            'item-block-left',
            classItem('order_price', 'pay_price_size', 'pay_price_bold'),
          ]"
          v-show="showItem('order_price', 'pay_price')"
        >
          实付金额
        </div>
        <div
          :class="[
            'item-block',
            classItem('make_info', 'real_price_size', 'real_price_bold'),
          ]"
          style="text-align: right"
          v-show="showItem('make_info', 'real_price')"
        >
          ¥860.00
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('recharge_info', [
            'recharge_money',
            'send_money',
            'customer_balance',
          ]) && form.resource == 4
        "
      >
        <div
          :class="[
            'item-block',
            'item-balance-info',
            classItem(
              'recharge_info',
              'recharge_money_size',
              'recharge_money_blod'
            ),
          ]"
          v-show="showItem('recharge_info', 'recharge_money')"
        >
          <div class="item-balance-info-name">充值金额</div>
          <div class="item-balance-info-num">¥100.00</div>
        </div>
        <div
          :class="[
            'item-block',
            'item-balance-info',
            classItem('recharge_info', 'send_money_size', 'send_money_blod'),
          ]"
          v-show="showItem('recharge_info', 'send_money')"
        >
          <div class="item-balance-info-name">赠送金额</div>
          <div class="item-balance-info-num">¥50.00</div>
        </div>
        <div
          :class="[
            'item-block',
            'item-balance-info',
            classItem(
              'recharge_info',
              'customer_balance_size',
              'customer_balance_blod'
            ),
          ]"
          v-show="showItem('recharge_info', 'customer_balance')"
        >
          <div class="item-balance-info-name">账户余额</div>
          <div class="item-balance-info-num">¥250.00</div>
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('mark_info', ['form_data', 'saler_mark']) &&
          form.resource == 1
        "
      >
        <div
          class="item-small-size"
          v-show="showItem('mark_info', 'form_data')"
        >
          <div class="item-block-left">表单信息：信息内容</div>
          <div class="item-block-left">表单信息：信息内容</div>
          <div class="item-block-left">表单信息：信息内容</div>
        </div>
        <div
          :class="[
            'item-block-left',
            classItem('mark_info', 'saler_mark_size', 'saler_mark_bold'),
          ]"
          v-show="showItem('mark_info', 'saler_mark')"
        >
          商家备注：老客户再赠送一箱牛奶；玻璃瓶包装轻拿轻放
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('customer_info', [
            'customer_name',
            'customer_mobile',
            'customer_realname',
            'customer_balance',
            'customer_credit',
            'customer_remark',
          ]) && [1, 2, 3, 4].includes(form.resource)
        "
      >
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('customer_info', 'customer_name')"
        >
          <div class="item-balance-info-name">会员名称</div>
          <div class="item-balance-info-num">AAAAAAA</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('customer_info', 'customer_mobile')"
        >
          <div class="item-balance-info-name">会员手机号</div>
          <div class="item-balance-info-num">
            133{{
              printData.customer_info.customer_mobile_des == 1
                ? '****'
                : printData.customer_info.customer_mobile_des || '5555'
            }}3333
          </div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('customer_info', 'customer_realname')"
        >
          <div class="item-balance-info-name">姓名</div>
          <div class="item-balance-info-num">张三</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('customer_info', 'customer_balance')"
        >
          <div class="item-balance-info-name">余额</div>
          <div class="item-balance-info-num">1200.5</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('customer_info', 'customer_credit')"
        >
          <div class="item-balance-info-name">积分</div>
          <div class="item-balance-info-num">500</div>
        </div>
        <div
          class="item-block item-balance-info item-small-size"
          v-show="showItem('customer_info', 'customer_remark')"
        >
          <div class="item-balance-info-name">备注：本店前100注册优质客户</div>
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('customer_info', [
            'buyer_name',
            'buyer_mobile',
            'buyer_address',
          ]) && form.resource == 1
        "
      >
        <div
          :class="[
            'item-block-left',
            classItem('customer_info', 'buyer_name_size', 'buyer_name_blod'),
          ]"
          v-show="showItem('customer_info', 'buyer_name')"
        >
          收货人：张三
        </div>
        <div
          :class="[
            'item-block-left',
            classItem(
              'customer_info',
              'buyer_mobile_size',
              'buyer_mobile_blod'
            ),
          ]"
          v-show="showItem('customer_info', 'buyer_mobile')"
        >
          联系方式：133{{
            printData.customer_info.buyer_mobile_des == 1
              ? '****'
              : printData.customer_info.buyer_mobile_des || '5555'
          }}3333
        </div>
        <div
          :class="[
            'item-block-left',
            classItem(
              'customer_info',
              'buyer_address_size',
              'buyer_address_blod'
            ),
          ]"
          v-show="showItem('customer_info', 'buyer_address')"
        >
          收货地址：北京市朝阳区朝阳路朝阳人民小区1号楼1栋1101
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('customer_info', ['invoice', 'invoice_info']) &&
          form.resource == 1
        "
      >
        <div
          class="item-block-left item-small-size"
          v-show="showItem('customer_info', 'invoice')"
        >
          发票：需要开具
        </div>
        <div v-show="showItem('customer_info', 'invoice_info')">
          <div class="item-block-left item-small-size">抬头类型：企业</div>
          <div class="item-block-left item-small-size">
            抬头信息：网络科技有限公司
          </div>
          <div class="item-block-left item-small-size">税号：123456789</div>
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('pick_store', [
            'store_name',
            'store_address',
            'store_contact',
            'store_contact_name',
          ]) && form.resource == 1
        "
      >
        <div
          class="item-block-left item-small-size"
          v-show="showItem('pick_store', 'store_name')"
        >
          自提门店：门店名称
        </div>
        <div
          class="item-block-left item-small-size"
          v-show="showItem('pick_store', 'store_address')"
        >
          门店地址：北京市朝阳区朝阳路朝阳人民小区22号楼2栋2202
        </div>
        <div
          class="item-block-left item-small-size"
          v-show="showItem('pick_store', 'store_contact')"
        >
          联系人：李四
        </div>
        <div
          class="item-block-left item-small-size"
          v-show="showItem('pick_store', 'store_contact_name')"
        >
          联系方式：13111111111
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('footer_info', [
            'stand_name',
            'cashier_name',
            'shop_name',
            'shop_phone',
            'store_name',
            'store_phone',
            'shop_qrcode',
            'print_time',
            'print_footer',
          ]) && [1, 3, 4].includes(form.resource)
        "
      >
        <div
          class="item-block-left item-small-size"
          v-show="
            showItem('footer_info', 'stand_name') && [1].includes(form.resource)
          "
        >
          收银员：名称
        </div>
        <div
          class="item-block-left item-small-size"
          v-show="
            showItem('footer_info', 'cashier_name') &&
            [1].includes(form.resource)
          "
        >
          导购员：名称
        </div>
        <div
          class="item-block item-small-size"
          v-show="showItem('footer_info', 'shop_name')"
        >
          商城名称
        </div>
        <div
          class="item-block item-small-size"
          v-show="showItem('footer_info', 'shop_phone')"
        >
          010-12345678
        </div>
        <div
          class="item-block item-small-size"
          v-show="showItem('footer_info', 'store_name')"
        >
          门店名称
        </div>
        <div
          class="item-block item-small-size"
          v-show="showItem('footer_info', 'store_phone')"
        >
          010-12345678
        </div>
        <div class="item-block" v-show="showItem('footer_info', 'shop_qrcode')">
          <img src="./../../../../assets/weChat.png" width="300" height="300" />
        </div>
        <div
          :class="[
            [1, 3, 4].includes(form.resource)
              ? 'item-block'
              : 'item-block-left',
            'item-small-size',
          ]"
          v-show="showItem('footer_info', 'print_time')"
        >
          打印时间：2023-12-12 12:12:20
        </div>
        <div
          class="item-block item-small-size"
          v-show="showItem('footer_info', 'print_footer')"
        >
          {{ printData.footer_info.print_footer_info }}
        </div>
      </div>
      <div
        class="block-content"
        v-show="
          handerChekcItem('footer_info', ['manage', 'print_time']) &&
          form.resource == 2
        "
      >
        <div
          class="item-block-left item-small-size"
          v-show="showItem('footer_info', 'manage') && form.resource == 2"
        >
          操作人：李四
        </div>
        <div
          :class="[
            form.resource == 1 ? 'item-block' : 'item-block-left',
            'item-small-size',
          ]"
          v-show="showItem('footer_info', 'print_time')"
        >
          打印时间：2023-12-12 12:12:20
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { config, printData } from './receiptConfig.js'
export default {
  data() {
    return {
      isDialog: false,
      receiptConfig: config,
      printData: printData,
      form: {
        resource: 1,
        tepName: '',
      },
    }
  },
  methods: {
    showDialog() {
      this.isDialog = true
    },
    closeDialog() {
      this.isDialog = false
    },
    handleClass(str) {
      var _str = str.replace(/\['|'\]$/g, '"').replace(/','/g, '","')
      debugger
      // return JSON.parse(_str);
    },
    handerText(group) {
      if (group) {
        if (group.data) {
          return group.data
        }
      }
    },
    handerChekcItem(itemName, keyGroups) {
      for (var key of keyGroups) {
        if (this.printData[itemName][key] == 1) {
          return true
        }
      }
    },
    // test(items){
    //     if(items.length <= 0 ) return;

    //     let arr = [];

    //     if(this.printData[items[0]][items[1]] == 1){
    //         arr.push('item-size');
    //     }else{
    //         arr.push('item-small-size')
    //     }

    //     if(this.printData[items[0]][items[2]] == 1){
    //         arr.push('bold');
    //     }

    //     return arr;
    // },
    // test2(items){
    //     if(items.length <= 0 ) return;
    //     return this.printData[items[0]][items[1]] !=0 ? true : false
    // },
    // test3(items){
    //     if(items.length <= 0 ) return;
    //     for(var key of items[1]){
    //         if(this.printData[items[0]][key] == 1){
    //             return true;
    //         }
    //     }
    // },
    classItem(blockName, itemSizeName, itemBoldName) {
      let arr = []

      if (this.printData[blockName][itemSizeName] == 1) {
        arr.push('item-size')
      } else {
        arr.push('item-small-size')
      }

      if (this.printData[blockName][itemBoldName] == 1) {
        arr.push('bold')
      }

      return arr
    },
    // classItem(blockName,itemName){

    //     let arr = [];

    //     Object.keys(this.printData[blockName]).some(key=>{
    //         console.log(key);
    //         if(key.includes(itemName) && key.includes('size')){
    //             if(this.printData[blockName][key] == 1){
    //                 arr.push('item-size');
    //             }else{
    //                 arr.push('item-small-size')
    //             }
    //         }

    //         if(key.includes(itemName) && key.includes('bold')){
    //             if(this.printData[blockName][key] == 1){
    //                 arr.push('bold');
    //             }
    //         }
    //     })

    //     return arr;
    // },
    showItem(blockName, itemName) {
      if (!this.printData == null) return
      return this.printData[blockName][itemName] != 0 ? true : false
    },
  },
}
</script>

<style lang="scss">
.receiptDialog-container {
  .el-dialog__header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1001;
  }

  .el-dialog {
    height: 670px;
    max-height: 670px;
    overflow: hidden;
    overflow-y: auto;
  }

  .el-dialog__title {
    font-size: 16px !important;
  }

  .el-dialog__body {
    padding: 10px !important;
    color: #000;
  }

  .block-container {
    padding: 10px;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #f8f8f9;
  }

  .block-content {
    border-bottom: 1px dashed #ccc;
    color: #333333 !important;
  }

  .item-flex {
    display: flex;
    font-size: 16px;

    .item-flex-1 {
      flex: 2 1 0%;
      text-align: left;
    }

    .item-flex-2 {
      flex: 1;
      text-align: right;
    }
  }

  .item-balance-info {
    display: flex;
    justify-content: space-between;
  }

  .gift-block {
    display: flex;
    align-items: center;

    .gift-num {
      padding: 0 10px;
    }

    .gift-boder {
      flex: 1;
      border-bottom: 1px dashed #ccc;
    }
  }

  .refund-block {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: bold;

    .refund-xing {
      margin-top: 7px;
      line-height: 1;
    }

    .refund-num {
      padding: 0 10px;
    }
  }

  .item-size {
    font-size: 20px;
  }

  .item-small-size {
    font-size: 16px;
  }

  .item-block {
    margin: 10px 0;
    text-align: center;
  }

  .item-block-left {
    margin: 10px 0;
    text-align: left;
  }

  .bold {
    font-weight: 700;
  }
}
</style>