<template>
  <!-- 发票信息弹窗 -->
  <view
    class="popup"
    :class="{ show: isShowInvoicePopup }"
  >
    <view
      class="popup-mask"
      @tap="closePopup"
    />
    <view class="popup-con-bottom invoice">
      <view class="popup-tit">
        <view class="tit-text">
          发票信息
        </view>
        <view
          class="close"
          @tap="closePopup"
        >
          <image src="@/static/images/close.png" />
        </view>
      </view>
      <view class="con-box">
        <view class="invoice-msg">
          <view class="invoice-item">
            <view class="item-tit">
              <view class="text">
                发票类型
              </view>
            </view>
            <view class="item-con">
              <view
                class="item-btn"
                :class="{active : dataFrom.invoiceType === 1}"
                @tap="selectInvoiceType(1)"
              >
                电子普通发票
              </view>
              <view
                v-if="!orderInvoiceId"
                class="item-btn"
                :class="{active : dataFrom.invoiceType === 2}"
                @tap="selectInvoiceType(2)"
              >
                本次不开具发票
              </view>
            </view>
          </view>
          <view
            v-if="dataFrom.invoiceType === 1"
            class="invoice-item"
          >
            <view class="item-tit">
              <view class="text">
                发票抬头
              </view>
            </view>
            <view
              class="item-con"
            >
              <view
                class="item-btn pd60"
                :class="{active : dataFrom.headerType === 2}"
                @tap="selectheaderType(2)"
              >
                个人
              </view>
              <view
                class="item-btn pd60"
                :class="{active : dataFrom.headerType === 1}"
                @tap="selectheaderType(1)"
              >
                单位
              </view>
            </view>
          </view>

          <view
            v-if="dataFrom.invoiceType === 1 && dataFrom.headerType === 1"
            class="invoice-item"
          >
            <view class="item-tit">
              <view class="text">
                单位名称
              </view>
              <view class="text-red">
                *
              </view>
            </view>
            <view class="item-con">
              <input
                v-model="dataFrom.headerName"
                type="text"
                class="item-input"
                maxlength="50"
                placeholder="请输入单位名称"
              >
            </view>
          </view>

          <view
            v-if="dataFrom.invoiceType === 1 && dataFrom.headerType === 2"
            class="invoice-item"
          >
            <view class="item-tit">
              <view class="text">
                个人名称
              </view>
            </view>
            <view class="item-con">
              <input
                v-model="dataFrom.headerName"
                type="text"
                class="item-input"
                maxlength="50"
                placeholder="请输入个人名称"
              >
            </view>
          </view>

          <view
            v-if="dataFrom.invoiceType === 1 && dataFrom.headerType === 1"
            class="invoice-item"
          >
            <view class="item-tit">
              <view class="text">
                纳税人识别号
              </view>
              <view class="text-red">
                *
              </view>
            </view>
            <view class="item-con">
              <input
                v-model="dataFrom.invoiceTaxNumber"
                maxlength="18"
                type="text"
                class="item-input"
                placeholder="请输入纳税人识别号"
              >
            </view>
          </view>

          <view
            v-if="dataFrom.invoiceType === 1 && dataFrom.invoiceType === 1"
            class="invoice-item"
          >
            <view class="item-tit">
              <view class="text">
                发票内容
              </view>
            </view>
            <view class="item-con">
              <view class="item-btn active">
                商品明细
              </view>
            </view>
          </view>

          <view class="invoice-item">
            <view class="item-tit">
              <view class="text">
                发票须知
              </view>
            </view>
            <view class="item-con">
              <view class="text-box">
                <view class="item-text">
                  1、依照税局最新开票法规，发票开具内容均为明细;
                </view>
                <view class="item-text">
                  2、电子普通发票和纸质普通发票具备同等法律效力，可支持报销入账;
                </view>
                <view class="item-text">
                  3、开票金额为实际支付金额，不包括优惠券、积分、红包等支付金额;
                </view>
                <view class="item-text">
                  4、电子发票可在确认收货后，在“发票详情”页面下载。
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="btn-box">
        <view
          class="btn"
          @tap="submitData"
        >
          确定
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  orderInvoiceId: {
    type: Number,
    default: 0
  },
  shopId: {
    type: Number,
    default: 0
  },
  invoiceDataFrom: {
    type: Object,
    default () {
      return {}
    }
  },
  orderId: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: null
  }
})

const emit = defineEmits([
  'closePopup',
  'getInvoiceData',
  'closePopup',
  'getData',
  'closePopup',
  'closePopup',
  'getInvoiceData'
])

const dataFrom = ref({
  invoiceType: 1, // 发票类型 1、普通电子发票 2、不开具发票
  headerType: 2, // 抬头类型 2、个人 1、企业
  invoiceContext: 1
})

const isShowInvoicePopup = ref(false) // 发票信息弹窗
onMounted(() => {
  if (Object.keys(props.invoiceDataFrom).length !== 0) {
    dataFrom.value = JSON.parse(JSON.stringify(props.invoiceDataFrom))
  } else {
    dataFrom.value = {
      invoiceType: 1, // 发票类型 1、普通电子发票 2、不开具发票
      headerType: 2, // 抬头类型 2、个人 1、企业
      invoiceContext: 1,
      headerName: '',
      shopId: props.shopId
    }
  }
  if (props.data) {
    init(props.data)
  }
  isShowInvoicePopup.value = true
})
const init = (data) => {
  dataFrom.value = data
}
defineExpose({
  init
})
const selectInvoiceType = (type) => {
  dataFrom.value.invoiceType = type
}

const selectheaderType = (headerType) => {
  dataFrom.value.headerType = headerType
}

// 关闭弹窗
const closePopup = () => {
  isShowInvoicePopup.value = false
  emit('closePopup')
}

// 提交数据
const submitData = () => {
  const dataFromPar = dataFrom.value
  if (dataFromPar.invoiceType === 2) {
    emit('getInvoiceData', dataFromPar)
    emit('closePopup')
    return
  }
  if (dataFromPar.headerType === 1 && (!dataFromPar.headerName || !dataFromPar.headerName.trim())) {
    uni.showToast({
      title: '请输入单位名称',
      icon: 'none'
    })
    return
  }
  if (dataFromPar.headerType === 1) {
    if (!dataFromPar.invoiceTaxNumber || !dataFromPar.invoiceTaxNumber.trim()) {
      uni.showToast({
        title: '请输入纳税人识别号',
        icon: 'none'
      })
      return
    }
    if (dataFromPar.invoiceTaxNumber.trim().length < 15 || dataFromPar.invoiceTaxNumber.trim().length > 20) {
      uni.showToast({
        title: '请输入正确的纳税人识别号',
        icon: 'none'
      })
      return
    }
  }
  dataFromPar.invoiceTaxNumber = dataFromPar.invoiceTaxNumber && dataFromPar.invoiceTaxNumber.trim()
  if (props.shopId) {
    dataFromPar.shopId = props.shopId
  }
  if (props.orderId) {
    dataFromPar.orderId = props.orderId
    if (props.orderInvoiceId) {
      dataFromPar.orderInvoiceId = props.orderInvoiceId
    }
    const method = props.orderInvoiceId ? 'PUT' : 'POST'
    http.request({
      url: '/mall4cloud_order/order_invoice',
      method,
      data: dataFromPar
    }).then(() => {
      uni.showToast({
        title: '提交成功',
        icon: 'none'
      })
      setTimeout(() => {
        emit('getData')
        emit('closePopup')
        isShowInvoicePopup.value = false
      }, 500)
    })
  } else {
    emit('closePopup')
    emit('getInvoiceData', dataFromPar)
    isShowInvoicePopup.value = false
  }
  dataFrom.value = dataFromPar
}
</script>
<style lang="scss" scoped>
@use "index";
@use "../../../popup";
</style>
