<template>
  <div class="print-box">
    <div class="tem-row">
      <div class="tem-img">
        <div class="top_view" style="font-size: 12px">
          <div class="time_view">
            <p>
              {{ no_time }}
            </p>
            <p v-if="form_obj.other.indexOf('printingNum') > -1">
              第{{ orderDetail.printingNum + 1 }}次打印
            </p>
          </div>
          <div class="name_view">
            <span v-if="form_obj.basic.indexOf('enterprise') > -1">
              {{ orderDetail.shopName }}
            </span>
            {{ info_list.title }}
          </div>
          <div class="num_view">
            <p
              v-if="orderDetail.serialNum"
              style="font-weight: bold; padding-bottom: 3px"
            >
              {{ orderDetail.serialNum }}
            </p>
            <p>{{ enterprise_title }}提供技术支持</p>
          </div>
        </div>
        <div
          v-if="
            orderDetail.printingNum > 0 &&
            form_obj.basic.indexOf('printing') > -1
          "
          class="print-tag"
        >
          <img :src="require('@/assets/img/print-tag.png')" alt="" />
        </div>
        <div class="infomation">
          <el-row :gutter="20">
            <el-col :span="8">
              <div v-if="form_obj.basic.indexOf('operatorName') > -1">
                制单人：{{ orderDetail.operatorName }}
              </div>
            </el-col>
            <el-col :span="10">
              <div v-if="form_obj.basic.indexOf('orderNo') > -1">
                单据号：{{ orderDetail.no }}
              </div>
            </el-col>
            <el-col :span="6">
              <div v-if="form_obj.basic.indexOf('createTime') > -1">
                制单日期：{{ $_common.formatDate(orderDetail.createTime) }}
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="infomation">
          <div
            v-if="form_obj.basic.indexOf('customerName') > -1"
            style="margin-right: 40px; display: inline-block"
          >
            客户姓名：{{ orderDetail.customerName }}
          </div>
          <div
            v-if="
              form_obj.basic.indexOf('customerMobile') > -1 &&
              orderDetail.customerMobile !== ''
            "
            style="margin-right: 40px; display: inline-block"
          >
            客户电话：{{ orderDetail.customerMobile }}
          </div>
          <div
            v-if="form_obj.basic.indexOf('deliveryType') > -1"
            style="margin-right: 40px; display: inline-block"
          >
            配送方式：{{ orderDetail.deliveryName }}
          </div>
          <div
            v-if="
              form_obj.basic.indexOf('receivedName') > -1 &&
              orderDetail.receiveData
            "
            style="margin-right: 40px; display: inline-block"
          >
            收货人：{{ orderDetail.receiveData.realName }}
          </div>
          <div
            v-if="
              form_obj.basic.indexOf('receivedMobile') > -1 &&
              orderDetail.receiveData
            "
            style="margin-right: 40px; display: inline-block"
          >
            收货电话：{{ orderDetail.receiveData.mobile }}
          </div>
          <div
            v-if="
              orderDetail.receiveData &&
              orderDetail.receiveData.area &&
              form_obj.basic.indexOf('customerAddress') > -1
            "
            style="display: inline-block; margin-right: 20px"
          >
            收货地址：{{ orderDetail.receiveData.area.provinceName
            }}{{ orderDetail.receiveData.area.cityName
            }}{{ orderDetail.receiveData.area.districtName
            }}{{ orderDetail.receiveData.address }}
          </div>

          <div
            v-if="form_obj.basic.indexOf('remark') > -1"
            style="font-weight: 560; font-size: 18px; display: inline-block"
          >
            <pre>{{ self_label }}：{{ orderDetail.remark }}</pre>
          </div>
        </div>

        <div>
          <div id="second">
            <table
              border="1"
              style="width: 100%; margin-top: 4px"
              class="goods-table"
            >
              <tr>
                <th v-if="form_obj.goods.indexOf('goodsId') > -1">序号</th>
                <th v-if="form_obj.goods.indexOf('images') > -1">商品图片</th>
                <th v-if="form_obj.goods.indexOf('goodsName') > -1">
                  商品名称
                </th>
                <th v-if="form_obj.goods.indexOf('unitName') > -1">单位</th>
                <th v-if="form_obj.goods.indexOf('specName') > -1">属性</th>
                <th v-if="form_obj.goods.indexOf('skuValue') > -1">换算关系</th>
                <th v-if="form_obj.goods.indexOf('buyNum') > -1">购买数量</th>

                <th v-if="form_obj.goods.indexOf('unitPrice') > -1">单价</th>
                <th v-if="form_obj.goods.indexOf('totalPrice') > -1">
                  商品总价
                </th>
                <th v-if="form_obj.goods.indexOf('barCode') > -1">商品条码</th>
              </tr>
              <tr v-for="(item, index) in orderDetail.goodsData" :key="index">
                <td v-if="form_obj.goods.indexOf('goodsId') > -1">
                  {{ index + 1 }}
                </td>
                <td v-if="form_obj.goods.indexOf('images') > -1">
                  <img :src="item.images" style="width: 50px; height: 50px" />
                </td>
                <td v-if="form_obj.goods.indexOf('goodsName') > -1">
                  {{ item.goodsName }}
                </td>
                <td v-if="form_obj.goods.indexOf('unitName') > -1">
                  {{ item.unitName }}
                </td>
                <td v-if="form_obj.goods.indexOf('specName') > -1">
                  <span v-for="(itemU, indexU) in item.specGroup" :key="indexU">
                    <span v-if="indexU > 0">_</span>
                    {{ itemU.specValueName }}
                  </span>
                </td>
                <td v-if="form_obj.goods.indexOf('skuValue') > -1">
                  {{ item.skuValue }}
                </td>
                <td v-if="form_obj.goods.indexOf('buyNum') > -1">
                  {{ item.buyNum - 0 }}
                  <span v-if="item.isEq === 5">
                    <span v-if="item.u_1_buy">
                      （{{ item.u_1_buy }}{{ item.u_1 }}）
                    </span>
                    <span v-else style="font-size: 13px">
                      （其他:{{ $_common.formatNub(item.otherNum) }}）
                    </span>
                  </span>
                </td>
                <td v-if="form_obj.goods.indexOf('unitPrice') > -1">
                  {{ item.price }}
                </td>
                <td v-if="form_obj.goods.indexOf('totalPrice') > -1">
                  {{ item.totalMoney }}
                </td>
                <td v-if="form_obj.goods.indexOf('barCode') > -1">
                  {{ item.barCode }}
                </td>
              </tr>
              <tr>
                <td
                  v-if="form_obj.goods.indexOf('goodsId') > -1"
                  colspan="1"
                  style="text-align: center"
                >
                  合计：
                </td>
                <td v-if="form_obj.goods.indexOf('goodsName') > -1">
                  {{ form_obj.goods.indexOf("goodsId") > -1 ? "--" : "合计：" }}
                </td>
                <td v-if="form_obj.goods.indexOf('images') > -1">--</td>
                <td v-if="form_obj.goods.indexOf('unitName') > -1">--</td>
                <td v-if="form_obj.goods.indexOf('specName') > -1">--</td>
                <td v-if="form_obj.goods.indexOf('skuValue') > -1">--</td>
                <td v-if="form_obj.goods.indexOf('buyNum') > -1">
                  {{ totalNum }}
                </td>
                <td v-if="form_obj.goods.indexOf('unitPrice') > -1">--</td>
                <td v-if="form_obj.goods.indexOf('totalPrice') > -1">
                  {{ totalMoney }}
                </td>
                <td v-if="form_obj.goods.indexOf('barCode') > -1">--</td>
              </tr>
              <tr v-if="form_obj.other.indexOf('shopDescribe') > -1">
                <td
                  v-if="form_obj.other.indexOf('shopDescribe') > -1"
                  colspan="10"
                  class="remarks"
                >
                  主营：{{ orderDetail.shopDescribe }}
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div style="font-weight: bold; margin-top: 5px">
          <span
            v-if="form_obj.fiance.indexOf('accountName') > -1"
            class="add_num"
          >
            收款账户：{{ orderDetail.accountName }}
          </span>
          <span
            v-if="form_obj.fiance.indexOf('orderPreferential') > -1"
            class="add_num"
          >
            优惠：￥{{ orderDetail.preferential }}
          </span>
          <span
            v-if="form_obj.fiance.indexOf('receivable') > -1"
            class="add_num"
          >
            应收：￥{{ orderDetail.receivable }}
          </span>
          <span
            v-if="form_obj.fiance.indexOf('netReceipts') > -1"
            class="add_num"
          >
            实收：¥{{ orderDetail.netReceipts }}
          </span>
          <span
            v-if="form_obj.fiance.indexOf('currentShortage') > -1"
            class="add_num"
          >
            本单欠：¥{{ orderDetail.currentShortage }}
          </span>
          <span v-if="form_obj.fiance.indexOf('upOwe') > -1" class="add_num">
            上欠：¥{{ orderDetail.upOwe }}
          </span>
          <span
            v-if="form_obj.fiance.indexOf('totalDeficit') > -1"
            class="add_num"
          >
            总欠：¥{{ orderDetail.totalDeficit }}
          </span>
        </div>
        <div class="infomation">
          <span
            v-if="form_obj.other.indexOf('shopName') > -1"
            style="margin-right: 40px"
          >
            商家名称：{{ orderDetail.shopName }}
          </span>
          <span
            v-if="form_obj.other.indexOf('shopMobile') > -1"
            style="margin-right: 40px"
          >
            商家电话：{{ orderDetail.shopMobile }}
          </span>
          <span
            v-if="
              form_obj.other.indexOf('shopAddress') > -1 &&
              orderDetail.shopAddress
            "
          >
            商家地址：{{ orderDetail.shopAddress.provinceName }}
            {{ orderDetail.shopAddress.cityName }}
            {{ orderDetail.shopAddress.districtName }}
            {{ orderDetail.shopAddress.address }}
          </span>
        </div>
        <div class="sign clearfix">
          <span
            v-if="form_obj.other.indexOf('signature') > -1"
            class="float_left"
          >
            客户签字：
          </span>
          <span class="float_right">经手人：{{ userName }}</span>
        </div>
        <div
          v-if="info_list.describe"
          class="sign"
          style="text-align: left; font-size: 12px"
        >
          <pre>{{ info_list.describe }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getTemplateInfo } from "@/api/System";
  export default {
    name: "PrintingPage",
    props: {
      orderDetail: {
        type: Object,
        default: () => {
          return {
            goodsData: [],
          };
        },
      },
    },
    data() {
      return {
        no_time: "",
        tableData: [],
        add_form: {},
        self_label: "",
        form_obj: {
          basic: [],
          fiance: [],
          goods: [],
          other: [],
        },
        meal_id: 1,
        info_list: {},
      };
    },
    computed: {
      totalNum() {
        if (!this.orderDetail.goodsData.length) {
          return 0;
        } else if (this.orderDetail.goodsData.length === 1) {
          if (this.orderDetail.goodsData[0].isEq === 5) {
            return (
              Number(this.orderDetail.goodsData[0].u_1_buy) ||
              Number(this.orderDetail.goodsData[0].otherNum)
            );
          } else {
            return Number(this.orderDetail.goodsData[0].buyNum);
          }
        } else {
          let sum = 0;
          for (let i in this.orderDetail.goodsData) {
            const item = this.orderDetail.goodsData[i];
            //抄码商品 计算件
            if (item.isEq === 5) {
              sum = this.$NP.plus(sum, item.u_1_buy || item.otherNum);
            } else {
              sum = this.$NP.plus(sum, item.buyNum);
            }
          }
          return sum;
        }
      },
      totalMoney() {
        if (!this.orderDetail.goodsData.length) {
          return 0;
        } else if (this.orderDetail.goodsData.length === 1) {
          return this.orderDetail.goodsData[0].totalMoney;
        } else {
          let sum = 0;
          for (let i in this.orderDetail.goodsData) {
            const item = this.orderDetail.goodsData[i];
            sum = this.$NP.plus(sum, Number(item.totalMoney));
          }
          return sum;
        }
      },
    },
    created() {
      this.no_time = this.$_common.formatDate(new Date().getTime());
      this.getTemplateInfo();
    },
    methods: {
      async getTemplateInfo() {
        const data = await getTemplateInfo(this.meal_id);

        this.info_list = data.data;
        if (this.info_list.describe) {
          this.info_list.describe = this.info_list.describe.replace(
            /<br\/>/g,
            "\n"
          );
        }
        this.add_form = data.data.fieldsData.templateInfo;
        this.form_obj.basic = this.add_form.basic
          .filter((item) => item.isShow === 5)
          .map((item) => item.alias);
        this.form_obj.goods = this.add_form.goods
          .filter((item) => item.isShow === 5)
          .map((item) => item.alias);
        this.form_obj.fiance = this.add_form.fiance
          .filter((item) => item.isShow === 5)
          .map((item) => item.alias);
        this.form_obj.other = this.add_form.other
          .filter((item) => item.isShow === 5)
          .map((item) => item.alias);
        this.add_form.basic.forEach((itemE) => {
          if (itemE.fields === "备注") {
            if (!itemE.selfLabel) {
              this.self_label = itemE.fields;
            } else {
              this.self_label = itemE.selfLabel;
            }
          }
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .tem-row {
    /*padding: 20px 80px;*/
    position: relative;
  }
  .tem-img {
    width: 100%;
  }
  .infomation {
    font-size: 14px;
  }
  .sign {
    margin-top: 6px;
    font-size: 14px;
  }
  .add_num {
    margin-right: 10px;
    font-size: 14px;
  }

  .print-tag {
    position: absolute;
    right: 190px;
    top: 0;
    img {
      width: 120px;
    }
  }
  .top_view {
    position: relative;
    height: 34px;
  }
  .time_view {
    position: absolute;
    left: 0;
    top: 0;
  }
  .name_view {
    text-align: center;
    font-size: 22px;
  }
  .num_view {
    position: absolute;
    right: 0;
    top: 0;
  }
</style>
