<template>
  <div>
    <scroll-view class="scroll-Y" scroll-y>
      <div class="part top">
        <div class="invoice-header">
          <div class="part-item header-type lines">
            <span class="part-item-key">抬头类型</span>
            <van-radio-group
              v-model="condition.invoiceTitleType"
              direction="horizontal"
              class="part-item-value"
              @change="radioChange"
            >
              <van-radio
                v-for="item in items"
                :key="item.name + item.value"
                checked-color="#064C8A"
                :name="item.value"
              >
                {{ item.name }}
              </van-radio>
            </van-radio-group>
          </div>
          <div class="part-item lines">
            <span class="part-item-key">抬头名称</span>
            <div class="part-item-value">
              <!-- <input
              type="text"
              placeholder="请输入抬头名称"
              v-model="condition.invoiceTitleName"
            /> -->
              <van-field
                v-model="condition.titleName"
                right-icon="arrow"
                input-align="right"
                placeholder="请输入抬头名称"
              />
            </div>
          </div>
          <div class="part-item lines" v-if="isCompany">
            <span class="part-item-key">公司税号</span>
            <div class="part-item-value">
              <!-- <input
              type="text"
              placeholder="请输入公司税号"
              v-model="condition.corporationTax"
            /> -->
              <van-field
                v-model="condition.taxNo"
                right-icon="arrow"
                input-align="right"
                placeholder="请输入公司税号"
              />
            </div>
          </div>
          <div class="part-item lines">
            <span class="part-item-key">设为默认</span>
            <div class="part-item-value">
              <van-switch
                active-color="#064C8A"
                v-model="condition.defaultOrNot"
                @change="switch1Change"
              />
            </div>
          </div>
        </div>
        <div class="invoice-more" v-if="isCompany">
          <div class="tab-title">更多信息(以下为选填内容)</div>
          <div class="company-box">
            <div class="part-item lines">
              <span class="part-item-key">公司地址</span>
              <div class="part-item-value">
                <van-field
                  v-model="condition.companyAddress"
                  right-icon="arrow"
                  input-align="right"
                  placeholder="请输入公司地址"
                />
              </div>
            </div>
            <div class="part-item lines">
              <span class="part-item-key">公司电话</span>
              <div class="part-item-value">
                <van-field
                  v-model="condition.companyTel"
                  right-icon="arrow"
                  input-align="right"
                  placeholder="请输入公司电话"
                />
              </div>
            </div>
            <div class="part-item lines">
              <span class="part-item-key">开户银行</span>
              <div class="part-item-value">
                <van-field
                  v-model="condition.depositBank"
                  right-icon="arrow"
                  input-align="right"
                  placeholder="请输入开户银行"
                />
              </div>
            </div>
            <div class="part-item lines" style="border: none">
              <span class="part-item-key">开户账户</span>
              <div class="part-item-value">
                <van-field
                  v-model="condition.depositAccount"
                  right-icon="arrow"
                  input-align="right"
                  placeholder="请输入开户账户"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
    <div class="part footer">
        <k-button title="保存" style="margin: 0 auto 30px" @click="submit" />
    </div>
  </div>
</template>

<script>
import parkingChangeHeaderJs from '../../../mixins/parkingReceipt/parkingChangeHeader'
export default {
  mixins:[parkingChangeHeaderJs]
}
</script>

<style lang="less" scoped>
// @import '../../../styles/mixins.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  // background: #f2f2f2;
  background: #f4f7ff;
  //padding: 30px 30px 30px 30px;

  .part {
    // background-color: #FAFBFF;
    width: calc(100% - 60px);

    .part-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // padding: 32px 0;
      font-size: 28px;
      width: 91.4%;
      height: 87px;
      margin: 0 auto;

      .part-item-key {
        color: #999;
      }

      .part-item-value {
        color: #999;
        text-align: right;

        > label {
          margin-left: 20px;
        }

        .van-cell {
          background-color: transparent;
          font-size: 30px;
          padding-right: 0;
        }
      }
    }

    .tab-title {
      color: #676767;
      padding-top: 36px;
      padding-bottom: 20px;
      // padding: 30px 35px;
      // background-color: #f1f1f1;
      font-size: 30px;
      font-weight: 400;
      color: #333333;
      line-height: 42px;
    }

    .company-box {
      background: #fafbff;
      border-radius: 4px;
      border: 1px solid #d8dae0;
    }

    .lines {
      border-bottom: 2px solid #ececec;
    }

    .invoice-more {
      padding-bottom: 8px;
    }

    .invoice-header {
      background: #fafbff;
      border-radius: 4px;
      border: 1px solid #d8dae0;
    }
  }

  .top {
    margin-top: 30px;
    margin-left: 30px;
  }

  .middle {
    margin: 20px 0;

    .purple {
      color: #a668b1;
    }
  }


}
.footer {
  width: 100%;
  //height: 150px;
  position: fixed;
  bottom: 0px;
  background-color: #FAFBFF;
  padding: 30px;
  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);
  padding: 30px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  
  .invoive-img {
    text-align: center;

    > img {
      width: 100%;
    }

    .download {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      > img {
        width: 32px;
      }

      > span {
        margin-left: 10px;
        color: #808080;
      }
    }
  }
}
</style>
