<template>
  <div id="invoice_red_letter_see" class="body" v-loading="load" element-loading-text="开具中，请稍等">
    <div class="body" v-loading="specialStatus" :element-loading-text="specialMessage" element-loading-spinner="22">
      <!--      <div>-->
      <!--        <span>开票日期：</span>-->
      <!--        <span>申请方经办人：</span>-->
      <!--      </div>-->
      <div style="margin-top:20px">
        <keep-alive>
          <div id="invoice-container" class="invoice">
            <ul class="pointGroup">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <div class="invoiceMain" style="min-height: 621px">
              <div class="invoice-body">
                <div data-v-ab32345e class="grid-hf">
                  <div data-v-ab32345e class="grid-hf-col col-a">
                    购买单位
                  </div>
                  <div data-v-ab32345e class="grid-hf-col col-b roll-height" style="width: 50%">
                    <ul data-v-ab32345e class="trader">
                      <li data-v-ab32345e>
                        <span data-v-ab32345e class="label">名称</span>：
                        <div data-v-ab32345e style="display: inline-block;width: 52.5%;margin-left: 1px;">
                          <div data-v-ab32345e
                               class="ivu-auto-complete input name ivu-select ivu-select-single ivu-select-default"
                               remote
                               type="text">
                            <div tabindex="-1" class>
                              <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                <span>{{ buyerName }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li data-v-ab32345e>
                        <span data-v-ab32345e class="label" style="width: 20%">纳税人识别号</span>：
                        <span>{{ buyerTaxNumber }}</span>
                      </li>
                    </ul>
                  </div>
                  <div data-v-ab32345e class="grid-hf-col col-a">销货单位</div>
                  <div data-v-ab32345e class="grid-hf-col col-d last" style="text-align: left">
                    <ul data-v-ab32345e class="trader">
                      <li data-v-ab32345e>
                        <span data-v-ab32345e class="label">名称</span>：
                        <div data-v-ab32345e style="display: inline-block;width: 70%;margin-left: 1px;">
                          <div data-v-ab32345e
                               class="ivu-auto-complete input name ivu-select ivu-select-single ivu-select-default"
                               remote
                               type="text"
                          >
                            <div tabindex="-1" class>
                              <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type">
                                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                <span>{{ sellerName }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li data-v-ab32345e>
                        <span data-v-ab32345e class="label" style="width: 30%">纳税人识别号</span>：
                        {{ sellerTaxNumber }}
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="grid-list">
                  <div class="grid-list-main">
                    <div class="grid-list-head">
                      <div class="grid-list-col col-index" style="height: 31px">
                        行号
                      </div>
                      <div class="grid-list-col col-a" style="height: 31px" v-if="isDetailed == false">
                        <span>货物或应税劳务.服务名称</span>
                      </div>
                      <div class="grid-list-col col-a" style="height: 31px" v-if="isDetailed == true">
                        <span class="fontColor: red">(清单)</span>货物或应税劳务.服务名称
                      </div>
                      <div class="grid-list-col col-b" style="height: 31px">
                        规格型号
                      </div>
                      <div class="grid-list-col col-c" style="height: 31px">
                        单位
                      </div>
                      <div class="grid-list-col col-d" style="height: 31px">
                        数 量
                      </div>
                      <div class="grid-list-col col-e" style="height: 31px" v-if="isTaxIncluded == false">
                        单价<span>(不含税)</span>
                      </div>
                      <div class="grid-list-col col-e" style="height: 31px" v-if="isTaxIncluded == true">
                        单价<span class="fontColor: red">(含税)</span>
                      </div>
                      <div class="grid-list-col col-f" style="height: 31px" v-if="isTaxIncluded == false">
                        金额<span>(不含税)</span>
                      </div>
                      <div class="grid-list-col col-f" style="height: 31px" v-if="isTaxIncluded == true">
                        金额<span class="fontColor: red">(含税)</span>
                      </div>
                      <div class="grid-list-col col-g" style="height: 31px">
                        税率
                      </div>
                      <div class="grid-list-col col-h col-i tax" style="height: 31px">
                        税 额
                      </div>
                      <div class="grid-list-col col-j last"></div>
                    </div>
                    <el-form :model="productData" ref="dynamicValidateForm" class="from-item">
                      <div class="grid-list-body">
                        <div class="grid-list-body-outline">
                          <div class="grid-list-col col-index"></div>
                          <div class="grid-list-col col-a"></div>
                          <div class="grid-list-col col-b"></div>
                          <div class="grid-list-col col-c"></div>
                          <div class="grid-list-col col-d"></div>
                          <div class="grid-list-col col-e"></div>
                          <div class="grid-list-col col-f"></div>
                          <div class="grid-list-col col-g"></div>
                          <div class="grid-list-col col-h col-i tax"></div>
                          <div class="grid-list-col col-j last"></div>
                        </div>
                        <div class="grid-list-body-data">
                          <div class="grid-list-item" v-bind:key="index" v-for="(domain,index) in productData.product">
                            <div class="grid-list-col col-index">
                              {{ index + 1 }}
                            </div>
                            <div class="grid-list-col col-a">
                              <div style="display: inline-block;width: 85%;">
                                <div class="ivu-auto-complete name ivu-select ivu-select-single ivu-select-default"
                                     remote
                                     type="text">
                                  <div tabindex="-1" class>
                                    <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type ground">
                                      <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"
                                      ></i>
                                      <input
                                          autocomplete="off"
                                          spellcheck="false"
                                          type="text"
                                          placeholder
                                          readonly="readonly"
                                          v-model="domain.productName"
                                          class="ivu-input ivu-input-default"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="grid-list-col col-b">
                              <input type="text" class="input" readonly="readonly" v-model="domain.specification"/>
                            </div>
                            <div class="grid-list-col col-c">
                              <input type="text"
                                     readonly="readonly"
                                     class="input"
                                     v-model="domain.units"
                              />
                            </div>
                            <div class="grid-list-col col-d">
                              <div data-v-33b11dca class>
                                <input
                                    data-v-33b11dca
                                    type="text"
                                    autocomplete="off"
                                    class="input"
                                    readonly="readonly"
                                    v-model="domain.number"
                                />
                              </div>
                            </div>
                            <div class="grid-list-col col-e">
                              <div data-v-33b11dca class>
                                <input
                                    data-v-33b11dca
                                    type="text"
                                    autocomplete="off"
                                    class="input"
                                    readonly="readonly"
                                    v-model="domain.price"
                                />
                              </div>
                            </div>
                            <div class="grid-list-col col-f">
                              <div data-v-33b11dca class>
                                <input
                                    data-v-33b11dca
                                    type="text"
                                    autocomplete="off"
                                    class="input"
                                    readonly="readonly"
                                    v-model="domain.amount"
                                />
                              </div>
                            </div>
                            <div class="grid-list-col col-g" v-if="domain.preferentialFlag !== 1">
                              <select class style="width: 96%;"
                                      v-model="domain.taxRate" disabled="disabled"
                              >
                                <option :value="value"
                                        v-bind:key="row"
                                        v-for="(value,row) in domain.taxRates"
                                >
                                  {{ value * 100 }}%
                                </option>
                              </select>
                            </div>
                            <div class="grid-list-col col-g" v-if="domain.preferentialFlag === 1">
                              <input
                                  type="text"
                                  class="input"
                                  v-model="domain.preferentialType"
                                  :disabled="true"
                                  :title="domain.preferentialType"
                              />
                            </div>
                            <div class="grid-list-col col-h col-i tax">
                              <input
                                  type="text"
                                  readonly="readonly"
                                  class="input"
                                  v-model="domain.taxAmount"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-form>
                    <div class="grid-list-foot">
                      <div class="grid-list-col col-a sum">
                        合计
                      </div>
                      <div class="grid-list-col col-b">
                        &nbsp;
                      </div>
                      <div class="grid-list-col col-c">
                        &nbsp;
                      </div>
                      <div class="grid-list-col col-d">
                        &nbsp;
                      </div>
                      <div class="grid-list-col col-e">
                        &nbsp;
                      </div>
                      <div class="grid-list-col col-f">
                        ￥
                        <span>{{ totalAmountRate }}</span>
                      </div>
                      <div
                          class="grid-list-col col-g"
                      ></div>
                      <div class="grid-list-col col-h">
                        ￥{{ totalTaxAmount }}
                      </div>
                      <div class="grid-list-col col-i">
                      </div>
                      <div
                          class="grid-list-col col-j last"
                      >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <p style="font-weight: bold">其它说明信息</p>
                <div style="display: flex">
                  <div>
                    <span>【{{ sellerType }}】</span>
                  </div>
                  <div>
                    <p v-if="this.status === 1">对应蓝字专用发票抵扣增值税销项税额情况:{{ deductionFont }}</p>
                    <span v-if="this.deduction === false || this.status === 2">对应蓝字专用发票密码区内打印的发票信息：</span>
                  </div>
                </div>
                <div style="display: flex; flex-direction: column" v-if="this.deduction === false || this.status === 2">
                  <span>发票代码：{{ invoiceCode }}</span>
                  <span>发票号码：{{ invoiceNumber }}</span>
                  <span>发票类型：{{ invoiceTypeName }}</span>
                </div>

                <div style="display: flex;margin-bottom: 10px;margin-top: 10px">
                  <span>联系电话：</span>
                  {{ contactNumber }}
                </div>
                <div style="display: flex">
                  <span>申请理由：</span>
                  <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="explain"
                      class="invoice_text"
                      readonly="readonly">
                  </el-input>
                </div>
              </div>
            </div>
            <ul class="pointGroup">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import '@/utils/css/54.bdcd03887ce3138b0f6f.css'
import '@/utils/css/vendors_cloud.5d0cbba7097d23ee8c5f.css'
import '@/utils/css/cloud.28e91b0965c466baef7a.css'
import '@/utils/54.83af1a94df1e7e208022'
import cache from '@/utils/cache'
import {AxiosRequestData} from '@/data/axios_request'
import {
  InvoiceTotalAmount,
  RedLetterInfoProduct
} from '@/data/invoice_calculation'

export default {
  name: 'invoice_red_letter_see',
  data() {
    return {
      status: 1, // 1：购买方申请 2：销货方申请
      load: false,
      account: '',
      token: '',
      pageNum: 1,
      pageSize: 10,
      detailed: '明细',
      buyerName: '',
      buyerTaxNumber: '',
      sellerName: '',
      sellerTaxNumber: '',
      totalPage: 0,
      totalNumber: 0,
      productData: {
        product: [
          {
            productCheck: false,
            productName: "",
            productCode: "",
            specification: "",
            units: "",
            number: "",
            price: "",
            amount: "",
            taxRate: "",
            taxAmount: "",
            taxRates: "",
            totalAmountRate: "",
            preferentialFlag: 0,
            preferentialType: "",
            zeroRateFlag: null,
            rowStatus: 0, // 0表示正常行，1表示被折扣行，2表示折扣行，3表示开票成功展示数据, 4表示产品有优惠政策或者零税率，税率和税额不可修改
          },
        ],
      },
      billingTaxId: "",
      billingAddress: "",
      billingBank: "",
      productList: [],
      isCustomer: false,
      isCommodity: false,
      queryProductName: "",
      productRowInfo: {},
      customerData: [],
      queryTaxName: "",
      pageCustomerNum: 1,
      pageCustomerSize: 10,
      totalAmount: 0.0,
      totalTaxAmount: 0.0,
      totalAmountRate: 0.0,
      capitalizedAmount: "",
      rates: "",
      isTaxIncluded: false,
      isDetailed: false,
      invoiceReqFlowNo: "",
      nowTime: "",
      specialStatus: false,
      specialMessage: "",
      entTaxId: "",
      isDiscount: false,
      originalAmount: "",
      selectDiscount: -1,
      discountTotalRate: 0.0,
      timerRequestNum: 1,
      timer: "",
      buyerTimer: "",
      orderId: "",
      invoiceType: null,
      machineNo: "",
      invoiceCheckCode: "",
      taxControlCode: "",
      isShow: false,
      discountRowNumber: 1,
      buyerData: [],
      blurTimer: "",
      isShowInvoiceCopy: false,
      searchInvoiceType: 4, // 发票种类 1.增值税普通电子发票   2.增值税电子专用发票  3.增值税普通纸质发票  4 增值税专用纸质发票
      isInvoiceInfo: false,
      checkShow: true,
      expirationTime: '',
      isShowProduct: false,
      isShowSplit: false,
      isSplit: false,
      defaultDeviceInfo: {},
      invoiceSplitList: [],
      isClose: true,
      contactNumber: '',
      explain: '',
      testShow: false,
      invoiceCode: '',
      invoiceNumber: '',
      invoiceDate: '',
      buyer: null,
      deduction: false,
      requestId: '',
      sellerType: '',
      deductionFont: '未抵扣',
      invoiceTypeName: ''
    }
  },
  methods: {
    // 获取产品列表数据
    async getProductData() {
      if (this.account) {
        const url = "/sys/product/findPage";
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              productName: this.queryProductName,
              mobile: this.account,
              reqChannel: 4,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              entTaxId: this.billingTaxId,
            },
            false,
            2
        );
        if (response) {
          console.log(response)
          if (response.code === 0) {
            this.totalNumber = response.data.total;
            this.totalPage = response.data.pages;
            if (response.data.records.length > 0) {
              let rates = "";
              let productList = [];
              for (
                  let i = 0;
                  i < response.data.records.length;
                  i++
              ) {
                const url = "/sys/entInfo/rates";
                let res = await AxiosRequestData(
                    url,
                    this.token,
                    {
                      entTaxId: this.billingTaxId,
                      taxCateCode:
                      response.data.records[i]
                          .taxationCateCode,
                    },
                    false,
                    2
                );
                if (res) {
                  let rate = response.data.records[
                      i
                      ].taxRate.toString();
                  if (res.code === 0) {
                    if (res.data.length > 0) {
                      for (
                          let i = 0;
                          i < res.data.length;
                          i++
                      ) {
                        if (
                            rate.indexOf(
                                res.data[i].toString()
                            ) == -1
                        ) {
                          rate =
                              rate +
                              "," +
                              res.data[i];
                        }
                      }
                    }
                    rates = rate;
                  } else {
                    rates = rate;
                  }
                }
                let list = {
                  productId:
                  response.data.records[i].productId,
                  productName:
                  response.data.records[i].productName,
                  productCode:
                  response.data.records[i].productCode,
                  parentCode:
                  response.data.records[i].parentCode,
                  taxItem: response.data.records[i].taxItem,
                  shortCode:
                  response.data.records[i].shortCode,
                  taxRate: response.data.records[i].taxRate,
                  specsModel:
                  response.data.records[i].specsModel,
                  price:
                      response.data.records[i].price ==
                      null ||
                      response.data.records[i].price == ""
                          ? ""
                          : response.data.records[i].price,
                  unit: response.data.records[i].unit,
                  taxPriceFlag:
                  response.data.records[i].taxPriceFlag,
                  hiddenFlag:
                  response.data.records[i].hiddenFlag,
                  taxationCateCode:
                  response.data.records[i]
                      .taxationCateCode,
                  taxationCateName:
                  response.data.records[i]
                      .taxationCateName,
                  taxationCateAbbr:
                  response.data.records[i]
                      .taxationCateAbbr,
                  preferentialFlag:
                  response.data.records[i]
                      .preferentialFlag,
                  preferentialType:
                  response.data.records[i]
                      .preferentialType,
                  zeroRateFlag:
                  response.data.records[i].zeroRateFlag,
                  taxSpeManage:
                  response.data.records[i].taxSpeManage,
                  manageUserId:
                  response.data.records[i].manageUserId,
                  entName: response.data.records[i].entName,
                  entTaxId: response.data.records[i].entTaxId,
                  taxRates: rates,
                };
                productList = productList.concat(list);
              }
              this.productList = productList;
            }
          }
        }
      }
    },
    // 获取客户信息
    async getCustomerData() {
      if (this.account) {
        const url = "/sys/customer/customerSearch";
        let args = {
          customerName: this.queryTaxName,
          entTaxId: this.entTaxId,
          reqChannel: 4,
        };
        let response = await AxiosRequestData(
            url,
            this.token,
            args,
            false,
            2
        );
        if (response) {
          if (response.code === 0) {
            this.customerData = response.data;
          } else {
            this.$message.error(response.msg);
          }
        }
      }
    },
    // 计算总金额和总折扣金额
    calculationTotalAmount(products) {
      let total = InvoiceTotalAmount(products, this.isTaxIncluded, true)
      this.totalAmount = total.totalAmount
      this.totalTaxAmount = total.totalTaxRate
      this.totalAmountRate = total.totalAmountRate
      this.discountTotalRate = total.discountTotalRate
    },
    // 清单和明细切换
    detailedState() {
      if (this.detailed === "明细") {
        if (this.productData.product.length > 8) {
          this.$message({
            message: "超过8行清单不允许转换为明细!",
            type: "warning",
          });
          this.detailed = "清单";
          return;
        }
      }
      this.isDetailed = !this.isDetailed;
    },
    // 获取当前时间，格式：2012年12月12日
    TimeFormate() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      this.nowTime =
          date.year + "年" + date.month + "月" + date.date + "日";
    },
    // 清空信息
    clearInfo(state) {
      if (state) {
        this.purchaserName = "";
        this.taxNumber = "";
        this.addressPhone = "";
        this.openingBank = "";
        this.purchaserNameTemporary = "";
        this.taxNumberTemporary = "";
        this.addressPhoneTemporary = "";
        this.openingBankTemporary = "";
      }
      this.buyerName = ''
      this.buyerTaxNumber = ''
      this.sellerName = ''
      this.sellerTaxNumber = ''
      this.status = 0;
      this.load = false;
      this.pageNum = 1;
      this.pageSize = 10;
      this.detailed = "明细";
      this.remark = "";
      this.totalPage = 0;
      this.totalNumber = 0;
      this.selectIndex = -1;
      this.productData = {
        product: [
          {
            productCheck: false,
            productName: "",
            productCode: "",
            specification: "",
            units: "",
            number: "",
            price: "",
            amount: "",
            taxRate: "",
            taxAmount: "",
            taxRates: "",
            totalAmountRate: "",
            rowStatus: 0,
          },
        ],
      };
      this.queryProductName = "";
      this.productRowInfo = {};
      this.customerData = [];
      this.queryTaxName = "";
      this.pageCustomerNum = 1;
      this.pageCustomerSize = 10;
      this.totalAmount = 0.0;
      this.totalTaxAmount = 0.0;
      this.capitalizedAmount = "";
      this.rates = "";
      this.invoiceReqFlowNo = "";
      this.invoiceCode = "";
      this.invoiceNumber = "";
      this.originalAmount = "";
      this.selectDiscount = -1;
      this.discountTotalRate = 0.0;
      this.timer = "";
      this.orderId = "";
      this.invoiceType = "";
      this.machineNo = "";
      this.invoiceCheckCode = "";
      this.taxControlCode = "";
      this.discountRowNumber = 1;
      this.getProductData();
      this.checkShow = true;
    },
    // 加载发票默认信息
    setInvoiceInfo() {
      let user = JSON.parse(cache.getSession('user'))
      let company = JSON.parse(cache.getSession('company'))
      this.entTaxId = company.entTaxId
      this.defaultDeviceInfo = company.defaultDeviceInfo
      this.account = user.account
      this.expirationTime = user.expirationTime
      this.token = cache.getToken()
      this.requestId = this.$attrs.invoiceRedLetterSee.requestId
      this.getRedLetterData()
    },
    // 读取数据
    async getRedLetterData() {
      if (this.token) {
        const url = '/sys/invoice/redInfo/findApplyDetail'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              requestId: this.requestId
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.buyerName = response.data.REQUEST_COMMON_HZSQ.SPF_MC
            this.buyerTaxNumber = response.data.REQUEST_COMMON_HZSQ.SPF_NSRSBH
            this.sellerName = response.data.REQUEST_COMMON_HZSQ.KPF_MC
            this.sellerTaxNumber = response.data.REQUEST_COMMON_HZSQ.KPF_NSRSBH
            this.invoiceCode = response.data.REQUEST_COMMON_HZSQ.FPDM
            this.invoiceNumber = response.data.REQUEST_COMMON_HZSQ.FPHM
            if (response.data.REQUEST_COMMON_HZSQ.SQLX === 1) {
              this.sellerType = '购买方申请'
              this.status = 1
            } else {
              this.sellerType = '销售方申请'
              this.status = 2
            }
            if (response.data.REQUEST_COMMON_HZSQ.DKBZ) {
              this.deduction = true
              this.deductionFont = '已抵扣'
            } else {
              this.deduction = false
              this.deductionFont = '未抵扣'
            }
            this.invoiceType = response.data.REQUEST_COMMON_HZSQ.FPZL
            if (this.invoiceType === 1) {
              this.invoiceTypeName = '增值税普通电子发票'
            }
            if (this.invoiceType === 2) {
              this.invoiceTypeName = '增值税电子专用发票'
            }
            if (this.invoiceType === 3) {
              this.invoiceTypeName = '增值税普通纸质发票'
            }
            if (this.invoiceType === 4) {
              this.invoiceTypeName = '增值税专用纸质发票'
            }
            this.contactNumber = response.data.REQUEST_COMMON_HZSQ.LXDH
            this.explain = response.data.REQUEST_COMMON_HZSQ.SQLY
            let products = await RedLetterInfoProduct(response.data.REQUEST_COMMON_HZSQ
                .COMMON_FPKJ_XMXXS.COMMON_FPKJ_XMXX, this.entTaxId, this.token)
            this.calculationTotalAmount(products)
            this.productData.product = products
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.body {
  flex: 1;
}

.invoice_text {
  width: 90%;
}
</style>
