<template>
    <view
      class="container"
      :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]"
    >
      <navBar />
      <view class="content">
        <view class="info">
          <view class="i-header">
            <view class="tabbox">
              <view
                class="li"
                @click="changeValidType(1)"
                :class="{ active: state.vaildType == 1 }"
              >
              {{ $t("invoiceApply.electronicInvoice") }}
              </view>
              <!-- <view
                class="li"
                @click="changeValidType(2)"
                :class="{ active: state.vaildType == 2 }"
              >
                {{ $t("invoiceApply.paperInvoice") }}
              </view> -->
              <view class="bottom-line" :class="{ right: state.vaildType == 2 }"></view>
            </view>
          </view>
          <view class="infobox">
            <view class="personal">
              <view class="select">
                <view class="label"> * 发票类型 INVOICE TYPE </view>
                <view class="inputBox">
                  <view class="value">
                    <uv-radio-group size="12" v-model="state.formData.applicationType" @change="changeApplicationType" placement="row">
                        <uv-radio :name="2" label="全电普票"></uv-radio>
                        <uv-radio :name="1" label="全电专票"></uv-radio>
                      </uv-radio-group>
                  </view>
                </view>
              </view>


              <view class="select">
                <view class="label"> * 抬头类型 HEADER TYPE </view>
                <view class="inputBox">
                  <view class="value">
                    <uv-radio-group size="12"  v-model="state.formData.titleType" placement="row">
                        <uv-radio :disabled="state.formData.applicationType==1" :name="1" label="个人/事业单位"></uv-radio>
                        <uv-radio :name="2" label="公司/企业单位"></uv-radio>
                      </uv-radio-group>
                  </view>
                </view>
              </view>

              <view class="select">
                <view class="label"> * 发票抬头 INVOICE TITLE </view>
                <view class="inputBox">
                  <view class="value">
                    <input placeholder="发票抬头" type="text" v-model="state.formData.title"  />
                  </view>
                  <!-- #ifdef MP-WEIXIN -->
                  <view @click="chooseInvoiceTitle" style="display: flex;align-items: center;font-size: 26rpx;">
                    抬头簿
                    <uv-icon name="file-text-fill" color="#000" size="26"></uv-icon> 
                  </view>
                  <!-- #endif -->
                </view>
              </view>

              <view class="select">
                <view class="label"> {{ state.formData.titleType == 2 ? '*' : '-' }} 纳税人识别号 IDENTIFICATION NUMBER </view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.identificationNo"  />
                  </view>
                  
                </view>
              </view>

              <view class="select" @click="state.expand = !state.expand">
                <view class="label"> - 更多信息 REMARKS </view>
                <view class="inputBox">
                  <view class="value">
                    <view class="label">{{ state.expand?'点击收起信息':'展开可填写购买方信息、备注等。' }}  </view>
                  </view>
                  <view class="arrow" :class="{ arrowClose: !state.expand }" >
                    <image src="/static/setOrder/selectArrow.png" mode=""></image>
                  </view>
                </view>
              </view>
              <template v-if="state.expand">
              <!-- <view class="select">
                <view class="label"> - 银行账号 ACCOUNT NUMBER</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.bank"  />
                  </view>
                </view>
              </view> -->
              <view class="select">
                <view class="label"> - 银行账号 ACCOUNT NUMBER</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.bankAccount"  />
                  </view>
                </view>
              </view>

              <view class="select">
                <view class="label"> - 开户银行 ACCOUNT OPENING</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.bank"  />
                  </view>
                </view>
              </view>

              <view class="select">
                <view class="label"> - 公司地址 ADDRESS</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.address"  />
                  </view>
                </view>
              </view>

              <view class="select">
                <view class="label"> - 公司电话 PHONE NUMBER</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.telephone"  />
                  </view>
                </view>
              </view>
            </template>
              <view class="receiving" style="padding: 10rpx 0;">
                * 收票邮箱 RECEIVING INFORMATION
              </view>
              <view class="select">
                <view class="label"> * 收票邮箱 EMAIL</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.email"  />
                  </view>
                </view>
              </view>
              <!-- <view class="select">
                <view class="label"> * 收票人姓名 NAME</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.recipient"  />
                  </view>
                </view>
              </view>

              <view class="select">
              <view class="label"> * 收票人电话 PHONE</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.recipientPhone"  />
                  </view>
                </view>
              </view>

              <view class="select">
              <view class="label"> * 收票人地址 ADDRESS</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" v-model="state.formData.recipientAddress"  />
                  </view>
                </view>
              </view>-->

              <view class="select">
              <view class="label"> - 备注信息 REMARKS</view>
                <view class="inputBox">
                  <view class="value">
                    <input type="text" placeholder="请填写需在发票备注栏中显示的内容" v-model="state.formData.remarks"  />
                  </view>
                </view>
              </view> 

              <view class="select">
              <view class="label"> - 发票金额 AMOUNT</view>
                <view class="inputBox">
                  <view class="value">
                    {{ currency }} {{ state.formData.amount }}
                  </view>
                </view>
              </view>

              <view class="btn">
                <button class="next-btn" @click="submit()">
                  {{ $t("common.submit") }}
                </button>
              </view>
              <view class="tips" style="padding: 10rpx 0;">
                根据相关政策规定，消费环节汇总各种形式的券、积分等金额不支持开票。
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 是否验证成功 -->
      <myModal v-model="state.showAuthModal" :content="state.contentTips" @confirm="confirm"  :cancelShow="false"></myModal>
    </view>
  </template>
  
  <script setup>
  import { ref, reactive, computed } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import { navigateBack } from '@/utils/common.js';
  import navBar from "@/components/navBar.vue";
  // 主题色配置
  import { useMainStore } from "@/store/index.js";
  import myModal from "@/components/myModal.vue";
  const { themeInfo, storeState } = useMainStore();
  import { useI18n } from 'vue-i18n';
  import { useLoginApi } from "@/Apis/login.js";
  import { useInvoiceApi } from "@/Apis/invoice.js";
  import { currency } from "@/config/index.js";
  const { t } = useI18n();
  const pages = getCurrentPages()
  const getLoginApi = useLoginApi();
  const getInvoiceApi = useInvoiceApi();
  
  const canGetCode = ref();
  const state = reactive({
    expand: false,
    tips: "获取验证码",
    hasVeriPerson: false, // 是否验证过个人
    hasVeriEnterprise: false, // 是否验证过企业
    editPerson: true, // 是否编辑个人信息
    editEnterprise: true, // 是否编辑企业信息
    vaildType: 1, // 1 电子发票 2 纸质发票
    showAuthModal: false,
    contentTips:'发票申请成功,请耐心等待工作人员审核。', // 验证成功提示
    formData: {
      id:'',
      paymentId:'',
      applicationType: 2,//发票类型 1 增值税 2 普通发票
      titleType: 1,//抬头类型 1 个人 2 企业
      title: '',// 抬头
      identificationNo:'',//纳税人识别号
      email: '', //邮箱
      bankAccount: '', // 银行账号
      bank: '', // 开户银行名称
      address: '', // 开户银行地址
      telephone: '', // 公司电话
      remarks: '', // 备注
      amount: 0,
      recipient: "",
      recipientPhone: "",
      recipientAddress: ""
    },
  
  });
  const changeValidType = (val) => {
  state.vaildType = val;
};
const changeApplicationType = (val) => {
   if(state.formData.applicationType == 1){
     state.formData.titleType = 2
   }
}

  onLoad((e) => {
    console.log(e.id);
    // e.id 有值为编辑
    if(e.id){
      state.formData.id = e.id;
      getDeteil(e.id)
    }
    state.formData.paymentId = e.paymentId?.split(',');
    state.formData.amount = e.num;
  });
  const getDeteil = () => {
    getInvoiceApi.GetInvoiceApplyForById({id:state.formData.id}).then((res) => {
      if (res.code == 200) {
        state.formData = res.data
      }
    });
  }
  const chooseInvoiceTitle = (val) => {
    uni.chooseInvoiceTitle({
    success(res) {
        state.formData.titleType = res.type == 0 ? 2 : 1;
        state.formData.title = res.title;
        state.formData.identificationNo = res.taxNumber;
        state.formData.address = res.companyAddress;
        state.formData.telephone = res.telephone;
        state.formData.bank = res.bankName;
        state.formData.bankAccount = res.bankAccount;
  }
})
  }
  
  const getPhoneNumber = (e) => {
    if (!state.editPerson) return;
    // if (state.hasPhone) {
    //   state.formData.phone = storeState.userInfo.phone;
    // } else {
    // }
      uni.showLoading();
      if (e.code) {
        getLoginApi.GetPhoneNumber({code:e.code}).then((res) => {
          if (res.code == 200) {
            uni.hideLoading();
            state.formData.phone = res.data;
          }
        });
      } else {
        uni.hideLoading();
        uni.showToast({
          title: t('validation.getPhoneFail'),
          icon: "none",
          duration: 2000,
        });
      }
    
  }
  
  const confirm = () => {
    navigateBack()
    // uni.redirectTo({
    //    url: '/pagesb/invoiceApplyforRecord/index'
    // });
  }
  
  
  const submit = () => {
    // todo 提交
    verifyPerson();
  }
  
  // 提交
  const verifyPerson = () => {
    const params = {
      ...state.formData,
    }
    delete params.amount;
    if (!state.formData.title) {
      return uni.showToast({
        title: "请填写抬头",
        icon: 'none'
      });
    }
    if(state.formData.titleType == 2){
      if (!state.formData.identificationNo) return uni.showToast({
        title: "请填写纳税人识别号",
        icon: 'none'
      });
    }
    // if(state.formData.applicationType == 1){
    //   if(!state.formData.bankAccount||!state.formData.bank||!state.formData.address||!state.formData.telephone)  {
    //     uni.showToast({
    //       title: "请填写完整,开户银行与公司信息",
    //       icon: 'none'
    //     })
    //     return
    //   }
    // }
    if (!state.formData.email) return uni.showToast({
      title: "请填写邮箱",
      icon: 'none'
    });
    uni.showLoading({mask:true});
    if(state.formData.id){
      getInvoiceApi.UpdateInvoiceApplyFor(params).then(res => {
        uni.hideLoading();
      if (res.code == 200) {
        state.showAuthModal = true;
      }
    });
    }else{
      getInvoiceApi.InvoiceApplyFor(params).then(res => {
        uni.showLoading({mask:true})
      if (res.code == 200) {
        state.showAuthModal = true;
      }
    });
    }
  }
  
  </script>
  <style lang="scss" scoped>
  @import "@/static/style/theme.scss";
  
  .container {
    margin: 0;
    padding: 0 20upx;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(
      to bottom,
      var(--right-linear),
      var(--left-linear2)
    );
    background-attachment: fixed;
    .content {
      width: 100%;
      .infobox {
        width: 100%;
        padding: 20upx 30upx;
        background-color: #ffffff;
        position: relative;
              &::before {
          content: "";
          z-index: 9;
          position: absolute;
          bottom: -7px;
          left: 0;
          width: 100%;
          height: 14px;
          background: radial-gradient(var(--left-linear2) 0px, var(--left-linear2) 5px, transparent 5px, transparent);
          background-size: 14px 14px;
        }
      }
      .btn {
        margin-top: 60rpx;
        margin-bottom: 20rpx;
        button {
          font-size: 40rpx;
          color: var(--text-color);
          background: var(--active-color);
          border-radius: 10rpx;
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
        }
      }
      .receiving{
        font-size: 32rpx;
      }
      .tips{
        font-size: 32rpx;
      }
      .select {
        border-bottom: 1px dashed #d8d8d857;
        margin-bottom: 16rpx;
        .label {
          color: #bec2ce;
          font-size: 26rpx;
        }
        .info {
          color: #242e42;
          font-size: 22rpx;
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          padding: 0 18rpx;
          opacity: 0.7;
          &.Total {
            margin-top: 10rpx;
            color: #242e42;
            opacity: 1;
          }
        }
        .garyBox {
          background-color: rgba(216, 216, 216, 0.3);
          border-radius: 8rpx;
          padding: 2rpx 10rpx;
          font-size: 20rpx;
          font-weight: bold;
          color: rgb(36, 46, 66);
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10rpx 4rpx;
        }
        .inputBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx;
          margin-left: 5px;
          :deep(.uv-radio){
            margin-right: 20rpx;
          }
          .ImgUpload {
            display: flex;
            margin: 10upx 0;
            ::v-deep .uv-upload {
            margin-right: 40rpx;
            border-radius: 18rpx;
            border:2px solid #9797974F;
            .uv-upload__wrap__preview{
              margin: 0;
            }
          }
            .upLoadText{
              font-size: 28upx;
              text-align: center;
              padding: 10upx 0;
              background: var(--active-color);
              border-radius:  0 0 18upx 18upx;
              margin: -1px;
            }
          }
          .value {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            color: #242e42;
            font-size: 24rpx;
            font-weight: bold;
            input {
              width: 100%;
            }
          }
          .arrowClose{
            // 中心点翻转
            transform: rotate(180deg);
          }
          .arrow {
            width: auto;
            font-size: 24rpx;
            .codeBtn {
              font-size: 24rpx;
              background-color: #d1cbcb2d;
            }
          }
          image {
            width: 20rpx;
            height: 12rpx;
          }
        }
      }
    }
    .i-header {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 0;
        width: 100%;
        height: 14px;
        background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
        background-size: 14px 14px;
        z-index: 9;
      }
      padding: 30upx 0;
      width: 100%;
      background-color: #f7f7f7;
      color: #242e42;
      .tabbox {
        position: relative;
        padding: 20upx 10%;
        display: flex;
        justify-content: space-around;
        .li {
          width: 50%;
          background-color: transparent;
          font-size: 32upx;
          outline: none;
          text-align: center;
        }
        .li.active {
          font-weight: bold;
        }
        .bottom-line {
          position: absolute;
          // left: calc(50% - 220rpx);
          bottom: 0;
          width: 160rpx;
          height: 2.5px;
          border-radius: 20px;
          background: var(--main-color);
          transition: left 0.5s ease;
  
          &.right {
            left: calc(50% + 60rpx);
          }
        }
      }
    }
  }
  </style>
  