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

    <view class="choose-invoice-header" v-if="list.length">
      <radio-group class="radios">
        <label
          class="uni-list-cell uni-list-cell-pd radio-label lines"
          v-for="(item, index) in list"
          :key="index"
          :index="item.id"
        >
          <view
            class="invoice-header-info"
            @click.native="chooseHeader(item, index)"
          >
            <!-- <view><radio :value="item.id" :checked="index === current" /></view> -->
            <view class="invoice-header-text">
              <view class="invoice-header-name">
                <view class="invoice-header-name-text">
                  {{ item.invoiceTitleName
                  }}<text class="isDefault" v-if="item.setDefault === 1"
                    >默认</text
                  >
                </view>
                <view class="invoice-header-name-icon">
                  <view
                    class="edit-header"
                    @click.stop="changeHeader('edit', item.id)"
                  >
                    <image
                      class="invoice-header-arrow"
                      :src="editwIcon"
                      mode="widthFix"
                    ></image>
                  </view>
                  <view class="edit-header" @click.stop="delHeader(item.id)">
                    <image
                      class="invoice-header-arrow"
                      :src="delwIcon"
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
              </view>
              <view class="duty-paragraph">
                税号 {{ item.corporationTax }}
              </view>
            </view>
          </view>
          <!-- <view class="invoice-header-icon">
                        <view class="edit-header" @click.native="changeHeader('edit', item.id)">
                            <image class="invoice-header-arrow" :src="editwIcon" mode="widthFix"></image>
                        </view>
                        <view class="edit-header" @click.native="delHeader(item.id)">
                            <image class="invoice-header-arrow" :src="delwIcon" mode="widthFix"></image>
                        </view>
                    </view> -->
        </label>
      </radio-group>
    </view>
    <view class="choose-invoice-header noData" v-else>
      <image class="noDataImg" :src="noDataIcon" mode="widthFix"></image>
      <view class="">您还没添加发票抬头</view>
    </view>
    <view class="footer">
      <view
        :class="{
          'push-again-btn': true,
          'blue-push-again-btn': custTypeId === 1,
          'green-push-again-btn': custTypeId === 2,
        }"
        @click="changeHeader('add')"
        >添加抬头</view
      >
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
import editwIcon from '../static/images/edit.png';
import delwIcon from '../static/images/delete.png';
import noDataIcon from '../static/images/nodataicon.png';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      picUrl: this.$picUrl,
      editwIcon: editwIcon,
      delwIcon: delwIcon,
      noDataIcon: noDataIcon,
      globalData: app.globalData,
      current: -1,
      id: '',
      list: [],
      preUrl: '',
    };
  },
  onLoad(options) {
    if (options.id) this.id = options.id;
    // 埋点本地化
    this.preUrl = uni.getStorageSync('previousUrl');
    uni.setStorageSync(
      'previousUrl',
      '/pages/parkingFee/parkingReceipt/parkingChooseHeader.vue'
    );
  },
  onShow() {
    // console.log('全剧信息', this.globalData);
    this.getInvoiceTitle();
  },
  onBackPress() {
    console.log('===> 点击返回按钮');
    const pages = getCurrentPages();
    const prePage = pages[pages.length - 2];
    const options = {
      header: this.list[this.current] || {},
    };
    // TODO 开票界面选择了 A,两个列表中如果有当前是 A，删除 A之后，点击返回按钮 开票界面 A 还存在
    prePage.$vm.pageOptions = options;
  },
  computed: {
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  methods: {
    changeHeader(type, id) {
      if (id)
        uni.navigateTo({
          url:
            '/pages/parkingFee/parkingReceipt/parkingChangeHeader?type=' +
            type +
            '&id=' +
            id,
        });
      else
        uni.navigateTo({
          url:
            '/pages/parkingFee/parkingReceipt/parkingChangeHeader?type=' + type,
        });
    },
    // 删除抬头
    delHeader(id) {
      const self = this;
      self.$md([id]);
      uni.showModal({
        content: '确认要删除该发票抬头吗？',
        success: function (res) {
          if (res.confirm) {
            uni.request({
              url: self.$baseURL + 'api/1.0/invoiceTitle',
              method: 'delete',
              data: [id],
              header: JSON.parse(uni.getStorageSync('handleUser')),
              success: (res) => {
                console.log('删除抬头', res.data);
                if (res.data.code === 0) {
                  self.getInvoiceTitle();
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: 'none',
                  });
                }
              },
              fail: () => {
                uni.showToast({
                  title: '服务器开小差了呢，请您稍后再试',
                  icon: 'none',
                });
              },
            });
          }
        },
      });
    },
    // 选择抬头
    chooseHeader(item, index) {
      this.current = index;
      if (!this.id) return false;
      const pages = getCurrentPages();
      const prePage = pages[pages.length - 2];
      const options = {
        header: this.list[index] || {},
      };
      prePage.$vm.pageOptions = options;
      uni.navigateBack();
      // uni.redirectTo({ url: '/pages/parkingFee/parkingReceipt/parkingApplication?ids=' + this.id + '&header=' + JSON.stringify(item) });
    },
    // 查询全部抬头列表信息
    getInvoiceTitle() {
      const self = this;
      const params = {
        vipcode: this.globalData.member.vipcode,
      };
      self.$md(params);
      uni.request({
        url: self.$baseURL + 'api/1.0/invoiceTitle/page',
        method: 'GET',
        data: params,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.list = res.data.data;
            if (this.list.length) {
              this.list.map((item, index) => {
                if (item.setDefault === 1) this.current = index;
              });
              if (this.current == -1) this.current = 0;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../../styles/common.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
  .choose-invoice-header {
    padding: 20rpx 30rpx;
    .radios {
      width: 100%;
      .radio-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10rpx;
        background-color: #ffffff;
        margin-bottom: 20rpx;
        .invoice-header-info {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .invoice-header-text {
            width: 100%;
            padding: 0 20rpx;
            .invoice-header-name {
              color: #333333;
              padding: 20rpx 0;
              border-bottom: 2rpx solid #f8f8f8;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .isDefault {
                color: #8cc63f;
                border: 2rpx solid #8cc63f;
                margin-left: 16rpx;
                border-radius: 20rpx;
                padding: 0 10rpx;
              }
              .invoice-header-name-icon {
                width: 100rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .invoice-header-arrow {
                  width: 30rpx;
                }
              }
            }
          }
          .duty-paragraph {
            color: #6f6f70;
            padding: 20rpx 0;
          }
        }
        .invoice-header-icon {
          width: 100rpx;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .invoice-header-arrow {
            width: 30rpx;
          }
        }
      }
    }
  }
  .noData {
    position: relative;
    top: 20%;
    transform: translateY(-50%);
    color: #cccccc;
    text-align: center;
    .noDataImg {
      width: 200rpx;
      margin-bottom: 20rpx;
    }
  }
  .footer {
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
    -webkit-box-shadow: 0 0 20rpx 0 hsla(0, 6%, 58%, 0.6);
    -moz-box-shadow: 0 0 20rpx 0 hsla(0, 6%, 58%, 0.6);
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: 20rpx;
    .push-again-btn {
      margin: 20rpx 60rpx;
      color: #ffffff;
      background-image: linear-gradient(to right, #7d4ea1, #40397c);
      border-radius: 50rpx;
      text-align: center;
      padding: 20rpx 0;
    }
    .blue-push-again-btn {
      .color-background-color('blue');
    }
    .green-push-again-btn {
      .color-background-color('green');
    }
  }
  .lines {
    border-bottom: 2rpx solid #ececec;
  }
}
</style>
