<template>
  <div class="print-box">
    <el-row class="tem-row">
      <el-col :span="24">
        <div id="printTest" 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.realName
              "
              style="margin-right: 40px; display: inline-block"
            >
              收货人：{{ orderDetail.receiveData.realName }}
            </div>
            <div
              v-if="
                form_obj.basic.indexOf('receivedMobile') > -1 &&
                orderDetail.receiveData.mobile
              "
              style="margin-right: 40px; display: inline-block"
            >
              收货电话：{{ orderDetail.receiveData.mobile }}
            </div>
            <div
              v-if="
                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('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('outNum') > -1">出库数量</th>
                  <th v-if="form_obj.goods.indexOf('unitPrice') > -1">单价</th>
                  <th v-if="form_obj.goods.indexOf('originTotalPrice') > -1">
                    商品总价
                  </th>
                  <th v-if="form_obj.goods.indexOf('totalPrice') > -1">
                    商品总价(优惠后)
                  </th>
                  <th
                    v-if="
                      form_obj.goods.indexOf('reservoirArea') > -1 &&
                      enableLocationManagement === '5'
                    "
                  >
                    库区
                  </th>
                  <th
                    v-if="
                      form_obj.goods.indexOf('location') > -1 &&
                      enableLocationManagement === '5'
                    "
                  >
                    库位
                  </th>
                  <th v-if="form_obj.goods.indexOf('strageCode') > -1">
                    货架编码
                  </th>
                  <th v-if="form_obj.goods.indexOf('barCode') > -1">
                    商品条码
                  </th>
                </tr>
                <tr v-for="(item, index) in orderDetail.details" :key="index">
                  <td v-if="form_obj.goods.indexOf('goodsId') > -1">
                    <!--                    序号-->
                    {{ index + 1 }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('goodsName') > -1">
                    <!--                    商品名称-->
                    {{ item.materielName }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('unitName') > -1">
                    <!--                    单位-->
                    {{ item.unitName }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('specName') > -1">
                    <!--                    属性-->
                    {{ item.skuName }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('skuValue') > -1">
                    <!--                    换算关系-->
                    {{ item.skuValue }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('buyNum') > -1">
                    <!--                    销售数量-->
                    {{ Number(item.total) }}
                    <span v-if="item.isEq === 5">
                      <span v-if="item.u_1_buy">
                        （{{ item.u_1_buy }}{{ item.u_1 }}）
                      </span>
                      <span v-else>（其他: {{ Number(item.otherNum) }}）</span>
                    </span>
                  </td>
                  <td v-if="form_obj.goods.indexOf('outNum') > -1">
                    <!--                    出库数量-->
                    {{ Number(item.outNum) }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('unitPrice') > -1">
                    <!--                    单价-->
                    {{ Number(item.unitPrice) }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('originTotalPrice') > -1">
                    <!--         销售总金额 -->
                    ¥{{
                      $NP.times(Number(item.unitPrice), Number(item.outNum))
                    }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('totalPrice') > -1">
                    <!--   商品总价(优惠后) -->
                    {{ Number(item.totalPrice) }}
                  </td>
                  <td
                    v-if="
                      form_obj.goods.indexOf('reservoirArea') > -1 &&
                      enableLocationManagement === '5'
                    "
                  >
                    <!--   库区 -->
                    {{ item.areaName }}
                    <span v-if="item.areaCode">（{{ item.areaCode }}）</span>
                  </td>
                  <td
                    v-if="
                      form_obj.goods.indexOf('location') > -1 &&
                      enableLocationManagement === '5'
                    "
                  >
                    <!--   库位 -->
                    {{ item.storageLocationName }}
                    <span v-if="item.storageLocationCode">
                      （{{ item.storageLocationCode }}）
                    </span>
                  </td>
                  <td v-if="form_obj.goods.indexOf('strageCode') > -1">
                    <!--                    货架编码-->
                    {{ item.skuStorage }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('barCode') > -1">
                    <!--                    商品条码-->
                    {{ item.skuBarCode }}
                  </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('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('outNum') > -1">
                    {{ totalOutNum }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('unitPrice') > -1">--</td>
                  <td v-if="form_obj.goods.indexOf('originTotalPrice') > -1">
                    {{ originTotalPrice }}
                  </td>
                  <td v-if="form_obj.goods.indexOf('totalPrice') > -1">
                    {{ totalMoney }}
                  </td>
                  <!--                  库区-->
                  <td
                    v-if="
                      form_obj.goods.indexOf('reservoirArea') > -1 &&
                      enableLocationManagement === '5'
                    "
                  >
                    --
                  </td>
                  <!--                  库位-->
                  <td
                    v-if="
                      form_obj.goods.indexOf('location') > -1 &&
                      enableLocationManagement === '5'
                    "
                  >
                    --
                  </td>
                  <td v-if="form_obj.goods.indexOf('strageCode') > -1">--</td>
                  <td v-if="form_obj.goods.indexOf('barCode') > -1">--</td>
                </tr>
                <tr v-if="form_obj.other.indexOf('shopDescribe') > -1">
                  <td :colspan="form_obj.goods.length" class="remarks">
                    主营：{{ orderDetail.shopDescribe }}
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div style="font-weight: bold; margin-top: 10px">
            <span
              v-if="form_obj.fiance.indexOf('accountName') > -1"
              class="add_num"
            >
              收款账户：{{ orderDetail.accountName }}
            </span>
            <span
              v-if="form_obj.fiance.indexOf('receivable') > -1"
              class="add_num"
            >
              应收：￥{{ orderDetail.receivable }}
            </span>
            <span
              v-if="form_obj.fiance.indexOf('orderPreferential') > -1"
              class="add_num"
            >
              优惠：￥{{ orderDetail.orderPreferential }}
            </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.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>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button
        v-print="'#printTest'"
        type="primary"
        @click="PrintNumPrintIncr"
      >
        确认打印（已打印{{ orderDetail.printingNum || 0 }}次）
      </el-button>
    </div>
  </div>
</template>

<script>
  import { getEnToken } from "@/utils/accessToken";
  import { getSaleOutInfo } from "@/api/Stock";
  import { getTemplateInfo } from "@/api/System";
  import { PrintNumPrintIncr } from "@/api/common";
  import { mapGetters } from "vuex";
  export default {
    name: "OutgoingPrinting",
    data() {
      return {
        no_time: "",
        tableData: [],
        add_form: {},
        self_label: "",
        form_obj: {
          basic: [],
          fiance: [],
          goods: [],
          other: [],
        },
        meal_id: 5,
        EnToken: getEnToken(),
        info_list: {},
        orderDetail: { receiveData: {}, details: [] },
      };
    },
    computed: {
      ...mapGetters({
        enableLocationManagement: "MUser/enableLocationManagement",
      }),
      totalNum() {
        if (!this.orderDetail.details.length) {
          return 0;
        } else if (this.orderDetail.details.length === 1) {
          if (this.orderDetail.details[0].isEq === 5) {
            return (
              Number(this.orderDetail.details[0].u_1_buy) ||
              Number(this.orderDetail.details[0].otherNum)
            );
          } else {
            return this.orderDetail.details[0].total - 0;
          }
        } else {
          let sum = 0;
          for (let i in this.orderDetail.details) {
            const item = this.orderDetail.details[i];
            //抄码商品 计算件
            if (item.isEq === 5) {
              sum = this.$NP.plus(sum, item.u_1_buy || item.otherNum);
            } else {
              sum = this.$NP.plus(sum, item.total - 0);
            }
          }
          return sum;
        }
      },
      totalOutNum() {
        if (!this.orderDetail.details.length) {
          return 0;
        } else if (this.orderDetail.details.length === 1) {
          return this.orderDetail.details[0].outNum - 0;
        } else {
          let sum = 0;
          for (let i in this.orderDetail.details) {
            const item = this.orderDetail.details[i];
            sum = this.$NP.plus(sum, item.outNum - 0);
          }
          return sum;
        }
      },
      originTotalPrice() {
        if (!this.orderDetail.details.length) {
          return `0`;
        } else if (this.orderDetail.details.length === 1) {
          return this.$NP.times(
            Number(this.orderDetail.details[0].unitPrice),
            Number(this.orderDetail.details[0].outNum)
          );
        } else {
          let sum = 0;
          for (let i in this.orderDetail.details) {
            const item = this.orderDetail.details[i];
            sum = this.$NP.plus(
              sum,
              this.$NP.times(Number(item.unitPrice), Number(item.outNum))
            );
          }
          return sum;
        }
      },
      totalMoney() {
        if (!this.orderDetail.details.length) {
          return `0`;
        } else if (this.orderDetail.details.length === 1) {
          return this.orderDetail.details[0].totalPrice - 0;
        } else {
          let sum = 0;
          for (let i in this.orderDetail.details) {
            const item = this.orderDetail.details[i];
            sum = this.$NP.plus(sum, item.totalPrice - 0);
          }
          return sum;
        }
      },
    },
    created() {
      this.no_time = this.$_common.formatDate(new Date().getTime());
      this.getTemplateInfo();
      this.getSaleOutInfo();
    },
    methods: {
      async PrintNumPrintIncr() {
        const data = await PrintNumPrintIncr({
          objectNo: this.orderDetail.no,
          objectType: this.orderDetail.type,
        });
        this.orderDetail.printingNum += 1;
        setTimeout(() => {
          window.close();
        }, 1000);
      },
      // 获取自定义模板详情
      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;
            }
          }
        });
      },
      // 获取列表详情
      async getSaleOutInfo() {
        const data = await getSaleOutInfo(this.$route.params.id);
        this.orderDetail = data.data;
      },
    },
  };
</script>

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