<template>
  <scroll-view class="scroll-Y" scroll-y>
    <!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->

    <div class="part top">
      <div class="invoice-header">
        <div class="part-item header-type lines">
          <span class="part-item-key">抬头类型</span>
          <van-radio-group
            class="part-item-value invoiceTitleType-box"
            v-model="condition.invoiceTitleType"
            direction="horizontal"
            @change="radioChange"
          >
            <van-radio
              v-for="item in items"
              :key="item.value"
              icon-size="24"
              style="transform: scale(0.7)"
              checked-color="#ED1C24"
              :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">
            <van-field
              placeholder="请输入抬头名称"
              v-model="condition.titleName"
            />
          </div>
        </div>
        <div class="part-item lines" v-if="isCompany">
          <span class="part-item-key">公司税号</span>
          <div class="part-item-value">
            <van-field
              placeholder="请输入公司税号"
              v-model="condition.taxNo"
            />
          </div>
        </div>
        <div class="part-item lines">
          <span class="part-item-key">设为默认</span>
          <div class="part-item-value">
            <van-switch
              active-color="#8CC63F"
              v-model="condition.defaultOrNot"
              @change="switch1Change"
            />
          </div>
        </div>
      </div>
      <div class="invoice-more" v-if="isCompany">
        <div class="tab-title">更多信息(以下为选填内容)</div>
        <div class="part-item lines">
          <span class="part-item-key">公司地址</span>
          <div class="part-item-value">
            <van-field
              placeholder="请输入公司地址"
              v-model="condition.companyAddress"
            />
          </div>
        </div>
        <div class="part-item lines">
          <span class="part-item-key">公司电话</span>
          <div class="part-item-value">
            <van-field
              placeholder="请输入公司电话"
              v-model="condition.companyTel"
            />
          </div>
        </div>
        <div class="part-item lines">
          <span class="part-item-key">开户银行</span>
          <div class="part-item-value">
            <van-field
              placeholder="请输入开户银行"
              v-model="condition.depositBank"
            />
          </div>
        </div>
        <div class="part-item lines" style="border: none">
          <span class="part-item-key">开户账户</span>
          <div class="part-item-value">
            <van-field
              placeholder="请输入开户账户"
              v-model="condition.depositAccount"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="part middle">
            <div class="part-item">
                <text class="part-item-key">总金额</text>
                <text class="part-item-value"><text class="purple">10.00</text>元</text>
            </div>
        </div> -->
    <div class="part footer">
      <!-- <div class="tab-title">接收方式</div>
            <div class="part-item lines">
                <text class="part-item-key">电子邮箱</text>
                <text class="part-item-value">sota_xu@hafengkeji.com</text>
            </div> -->
      <div
        :class="{
          'push-again-btn': true,
          'blue-push-again-btn': custTypeId === 1,
          'green-push-again-btn': custTypeId === 2,
        }"
        @click="submit"
      >
        保存
      </div>
    </div>
  </scroll-view>
</template>

<script>
import parkingChangeHeaderJs from '../../../mixins/parkingReceipt/parkingChangeHeader';

export default {
  mixins: [parkingChangeHeaderJs],
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;

  .part {
    background-color: #ffffff;

    .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: #333;
      }

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

        > label {
          margin-left: 20px;
        }
      }
    }

    .tab-title {
      color: #676767;
      padding: 30px 35px;
      background-color: #f1f1f1;
    }

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

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

  .top {
    padding-top: 20px;
  }

  .middle {
    margin: 20px 0;

    .purple {
      color: #a668b1;
    }
  }

  .footer {
    width: 100%;
    height: 110px;
    position: fixed;
    bottom: 0px;
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: 20px;
    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-top: 20px;
    .invoive-img {
      text-align: center;

      > image {
        width: 100%;
      }

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

        > image {
          width: 32px;
        }

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

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

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

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

<style lang="less">
.invoiceTitleType-box {
  margin-right: -20px;
  .van-radio {
    //flex: 1;
    //width: 100%;
    //white-space: nowrap;
    //box-sizing: border-box;

    //flex-grow:1;//是否自动增长空间
    //flex-shrink:0;//是否自动缩小空间
  }
}
.invoice-header,
.invoiceTitleType-box {

  //justify-content: flex-end;
  .van-radio {
    //flex: 1;
    //width: 50%;
  }

  .van-radio__label {
    font-size: 40px;
  }
}

.invoice-header,.invoice-more {
  .van-radio--horizontal {
    margin-right: 0;
  }

  .van-field__control {
    text-align: right;
  }
}
</style>
