<template>
  <div>
    <div class="scroll-Y">
      <div class="push-box">
        <div class="choose-invoice-header lines" @click="changeHeader">
          <div class="invoice-header-info" v-if="headerInfo.titleName">
            <div class="invoice-header-name" :class="headerInfo.invoiceTitleType == 'COMPANY' ? 'header-name' : ''">
              <div>
                {{ headerInfo.titleName }}
                <span class="isDefault" v-if="headerInfo.defaultOrNot">默认</span>
              </div>
              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
            </div>
            <div v-if="headerInfo.invoiceTitleType == 'COMPANY'" class="duty-paragraph">税号：{{ headerInfo.taxNo }}</div>
          </div>
          <div class="invoice-header-info" v-else>
            <div class="invoice-header-name">
              <div>请选择发票抬头</div>
              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
            </div>
            <div class="duty-paragraph">未选择发票抬头</div>
          </div>
        </div>
        <div class="tab-header" v-if="headerInfo.titleName">发票详情</div>
        <div class="part" v-if="headerInfo.titleName">
          <div class="invoice-header">
            <div class="part-item">
              <span class="part-item-key">发票类型</span>
              <span class="part-item-value">增值税普通发票</span>
            </div>
            <div class="part-item">
              <span class="part-item-key">抬头类型</span>
              <span class="part-item-value">{{ headerInfo.invoiceTitleType === 'COMPANY' ? '单位' : '个人/非企业单位' }}</span>
            </div>
            <div class="part-item" :class="headerInfo.invoiceTitleType == 'COMPANY' ? 'header-name' : ''">
              <span class="part-item-key">抬头名称</span>
              <span class="part-item-value">{{ headerInfo.titleName }}</span>
            </div>
            <div class="part-item lines" v-if="headerInfo.invoiceTitleType === 'COMPANY'">
              <span class="part-item-key">公司税号</span>
              <span class="part-item-value">{{ headerInfo.taxNo }}</span>
            </div>
          </div>
          <div class="invoice-more" v-if="headerInfo.invoiceTitleType === 'COMPANY'">
            <div class="tab-title show-more" @click="changeShowMore">
              <span class="c">更多信息</span>
              <!--  :class="!isShowMore ? 'toBottom' : 'toRight'" -->
              <div class="arrow-box">
                <img :src="arrowIcon" mode="widthFix" />
              </div>
            </div>
            <div class="is-show-more" v-if="isShow">
              <div class="part-item">
                <span class="part-item-key">公司地址</span>
                <span class="part-item-value">{{ headerInfo.companyAddress }}</span>
              </div>
              <div class="part-item">
                <span class="part-item-key">公司电话</span>
                <span class="part-item-value">{{ headerInfo.companyTel }}</span>
              </div>
              <div class="part-item">
                <span class="part-item-key">开户银行</span>
                <span class="part-item-value">{{ headerInfo.depositBank }}</span>
              </div>
              <div class="part-item top">
                <span class="part-item-key">开户账户</span>
                <span class="part-item-value">{{ headerInfo.depositAccount }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="part middle">
          <div class="part-item lines">
            <span class="part-item-key">总金额</span>
            <span class="part-item-value"
              ><span class="purple">{{ invoiceAmount }} 元</span></span
            >
          </div>
          <div class="part-item top" v-if="type == ''">
            <span class="part-item-key"
              >共<span class="purple">{{ orderQuantity }}笔</span>缴费记录</span
            >
            <div class="part-item-value" @click="gotoDetail">
              <span>查看详情</span>
              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
            </div>
          </div>
        </div>
        <div class="tab-header">接收方式</div>
        <div class="part">
          <div class="part-item lines">
            <span class="part-item-key" style="min-width: 120px; white-space: nowrap">电子邮箱</span>
            <div class="part-item-value">
              <input class="van-field__control" style="white-space: nowrap" type="text" @blur="mailboxChange" placeholder="请输入电子邮箱" v-model="condition.email" />
            </div>
          </div>
          <div class="part-item default-email" @click="changeDefaultEMail">
            <van-checkbox v-model="condition.emailAsDefault" @change="emailAsDefaultChange" icon-size="30PX"><span class="text">保存电子邮箱为默认邮箱</span></van-checkbox>
          </div>
        </div>
        <div class="tab-header">备注</div>
        <div class="textarea-remark">
          <textarea rows="3" placeholder-style="color:#999999" placeholder="选填" @blur="storeRemarkChange" v-model="condition.remark"></textarea>
        </div>
        <!-- 占位 -->
        <div style="height: 75px; background-color: transparent; color: transparent; position: relative">占位</div>
      </div>
    </div>
    <div class="footer">
      <k-button v-if="headerInfo.titleName" title="提交" style="margin: 0 auto 30px" disabledColor="#D1D2D9" @click="submit" />
      <k-button v-else disabled title="请选择发票抬头" style="margin: 0 auto 30px" disabledColor="#D1D2D9" />
    </div>
  </div>
</template>

<script>
import parkingApplicationJs from '../../../mixins/parkingReceipt/parkingApplication';
export default {
  mixins: [parkingApplicationJs],
};
</script>

<style lang="less" scoped>
//@import '../../../styles/common.less';

.scroll-Y {
  width: 100%;
  display: flex;
  height: 100vh;
  overflow-y: scroll;
  flex-direction: column;
  // height: 88vh;
  background-color: #f4f7ff;
  // padding: 30px 20px;
  box-sizing: border-box;

  .push-box {
    padding: 30px 20px;
    width: 750px;
    box-sizing: border-box;
    margin-bottom: 180px;
  }

  .choose-invoice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 20px 30px;
    padding: 32px;
    font-size: 28px;
    background: #fafbff;
    border: 1px solid #d8dae0;
    margin-bottom: 24px;
    border-radius: 4px;

    .invoice-header-info {
      flex: 1;

      .invoice-header-name {
        color: #333333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 32px;
        border-bottom: 1px solid #d8dae0;

        .isDefault {
          color: #8cc63f;
          border: 1px solid #8cc63f;
          margin-left: 30px;
          border-radius: 20px;
          display: inline-block;
          padding: 0 21px;
        }
      }

      .duty-paragraph {
        color: #999;
        margin-top: 32px;
      }
    }
  }

  .tab-header {
    color: #808080;
    padding: 10px 20px 20px;
  }

  .part {
    // background-color: #ffffff;

    background: #fafbff;
    // padding-left: 30px;
    margin-bottom: 20px;
    border-radius: 4px;
    padding: 30px;
    border: 1px solid #d8dae0;

    .part-item {
      font-size: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;

      .part-item-key {
        color: #333333;
        min-width: 146px;
      }

      .part-item-value {
        flex: 1;
        color: #999;
        text-align: right;
        display: flex;
        align-items: center;
        .van-field__control {
          text-align: right;
        }
      }
    }

    .is-show-more {
      .part-item {
        padding-top: 32px;
      }
    }

    .tab-title {
      color: #676767;
      padding-top: 30px;
    }

    .show-more {
      display: flex;
      justify-content: space-between;
      align-content: center;
      // padding-right: 30px;

      .arrow-box {
        // transform: rotate(90deg);
        // transition-duration:0.1s;
        > img {
          width: 30px;
        }
      }
    }

    .default-email {
      justify-content: flex-start;
      color: #999999;
      margin-top: 20px;
      // font-size: 28PX;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      padding-bottom: 0;
      .text {
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        line-height: 40px;
      }
      // line-height: 80PX;
      // /deep/ .van-checkbox__icon {
      //   font-size: 25PX;
      // }
      // /deep/ .van-checkbox__label {
      //   line-height: 80PX;
      // }
    }
  }

  .top {
    padding-top: 20px;
    padding-bottom: 0 !important;
  }

  .middle {
    // padding: 20px 0;

    > .part-item {
      // background-color: #ffffff;
      // padding-left: 30px;
    }

    .purple {
      color: #064c8a;
    }
  }

  .footer {
    // padding-top: 20px;
    border-radius: 4px;
  }

  .textarea-remark {
    margin-bottom: 20px;

    > textarea {
      background-color: #fafbff;
      width: 100%;
      padding: 32px;
      // padding: 10px 20px;
      border-radius: 4px;
      box-sizing: border-box;

      border-color: #d8dae0;
    }
  }

  .invoice-header-arrow {
    width: 30px;
  }

  .lines {
    border-bottom: 1px solid #d8dae0;
  }

  .toBottom {
    transform: rotate(90deg);
    transition-duration: 0.1s;
  }

  .toRight {
    transform: rotate(-90deg);
    transition-duration: 0.1s;
  }

  .header-name {
    padding: 0 !important;
    border: unset !important;
  }
}
.push-btn {
  width: 100%;
  height: 170px;
  background-color: #fff;
  // padding: 0 41px;
  position: fixed;
  bottom: 0;
  z-index: 999;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
  -webkit-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);
  -moz-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);
  // width: 100%;
  // padding: 20px 0;
  // position: fixed;
  // bottom: 0px;
  // height: 110px;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  // box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
  // -webkit-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);
  // -moz-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);

  .btn {
    // margin: 20px 60px;
    color: #ffffff;
    border-radius: 50px;
    text-align: center;
    // padding: 20px 0;
    height: 80px;
    line-height: 80px;
    width: 90%;
    margin: 0 auto;
    margin-top: 25px;
    border-radius: 45px;
  }

  .push-again-btn {
    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
    background: #064c8a;
  }

  .blue-push-again-btn {
    .color-background-color('blue');
  }

  .green-push-again-btn {
    .color-background-color('green');
  }

  .disable-btn {
    background-color: #bdbdbd;
  }
}

.footer {
  width: 100%;
  //background-color: #ffffff;
  background-color: #fafbff;
  position: fixed;
  bottom: 0;
  box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
  -webkit-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);
  -moz-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);
  //padding-bottom: constant(safe-area-inset-bottom);
  //padding-bottom: env(safe-area-inset-bottom);
  //padding-bottom: 20px;
  //margin: 30px;
  padding: 30px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .push-again-btn {
    color: #ffffff;
    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
    background-color: #064c8a;
    border-radius: 50px;
    text-align: center;
    //padding: 20px 0;
  }

  .blue-push-again-btn {
    .color-background-color('blue');
  }

  .green-push-again-btn {
    .color-background-color('green');
  }
}
</style>
