<template>
  <div class="invoice-edit-layer">
    <div class="invoice-body">
      <h2>
        {{invoice.data ? $t('manage.myOrders.invoiceInfo') : $t('manage.myOrders.invoice')}}
        <div class="memeber-intro" v-if="!invoice.data">
          <h-icon type="register_help"></h-icon>
          <div class="intro-w">
            <p>{{$t('manage.myOrders.invoiceTip0')}}</p>
            <p>{{$t('manage.myOrders.invoiceTip1')}}</p>
            <p>{{$t('manage.myOrders.invoiceTip2')}}</p>
          </div>
        </div>
      </h2>
      <i class="iconfont icon-vip_false" @click="hideInvoice"></i>
      <div class="invoice-content">
        <editInvoice :data="invoice.data" :consumeType="consumeType" :orderId="invoice.orderId" :invoiceId="invoice.invoiceId" v-if="!invoice.data" />
        <div class="invoice-info" v-else>
          <p v-for="(item,i) in invoiceData" :key="i">
            <span>{{item['name']}}</span>
            {{invoice.data[item['key']]||'--'}}
          </p>
          <p class="maker">
            {{invoice.data.type === 3 ? $t('manage.myOrders.typeStip0') : $t('manage.myOrders.typeStip1')}}
          </p>
        </div>
      </div>
      <div class="bottom-floot" v-if="invoice.data">
        <div @click="hideInvoice" class="btn parmary">{{$t('manage.sceneAdmin.filterFormModule.enter')}}</div>
      </div>

    </div>
    

  </div>
</template>

<script>
import editInvoice from './editInvoice'
import { normal, zengzhi } from '@/components/editInvoice/invoice'


export default {
  components: {
    editInvoice
  },
  provide () {
    return {
      hideInvoice: this.hideInvoice,
      saveInvoiceData: this.saveInvoice
    }
  },
  props: ['invoice', 'consumeType'],
  methods: {
    hideInvoice() {
      this.$emit('cancle')
    },
    saveInvoice(data) {
      this.$set(this.invoice.order, 'invoice', data)
    }
  },
  computed: {
    invoiceData () {
      if (!this.invoice.data) {
        return ''
      }
      return this.invoice.data.type === 2 ? normal : zengzhi
    },
  }
}
</script>

<style lang="scss" scoped>
.invoice-edit-layer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.invoice-body {
  width: 540px;
  background: #FFFFFF;
  border-radius: 4px;
  position: relative;

  > h2 {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #202020;
    line-height: 22px;
    padding: 13px 0 11px 30px;
    border-bottom: 1px solid #EBEBEB;;
  }

  .icon-vip_false {
    position: absolute;
    top: 16px;
    right: 20px;
    color: #909090;
    font-size: 14px;
    cursor: pointer;
  }
}

.invoice-content {
  padding: 14px 48px 20px 30px;
}

.invoice-info {
  p {
    position: relative;
    padding-left: 130px;
    margin: 10px 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #202020;
    line-height: 40px;
    
    &.maker {
      color: #15BEC8;
      padding-left: 0;
    }

    > span {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100px;
      text-align: left;
      transform: translateY(-50%);
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #202020;
      line-height: 20px;
    }
  }

}


$theme-color: #15BEC8;
$border-color: #e7e7e7;
.bottom-floot {
  border-top: 1px solid #EBEBEB;
  padding: 20px;
  text-align: center;

  .btn {
    text-align: center;
    cursor: pointer;
    width: 126px;
    height: 36px;
    line-height: 36px;
    margin: 10px 25px 0 0;
    display: inline-block;
    border: solid 1px #ccc;
  }
  .parmary {
    background-color: $theme-color;
    border: solid 1px $theme-color;
  }

  .btn {
    border-radius: 4px;
    margin: 0;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #202020;

    &.parmary {
      color: #fff;
    }
    &:first-child {
      margin-right: 20px;
    }
  }
}

.memeber-intro {
      position: relative;
      display: inline-block;
      margin-left: 9px;
      cursor: pointer;
      font-weight: normal;
      &:hover {
        .intro-w {
          display: block;
        }
      }
      .intro-w {
        position: absolute;
        z-index: 1;
        bottom: -15px;
        left: -50px;
        transform: translateY(100%);
        padding: 20px;
        line-height: 16px;
        background: #ebebeb;
        border-radius: 4px;
        font-size: 12px;
        display: none;
        &::before {
          content: "";
          display: block;
          position: absolute;
          border: 7px solid transparent;
          border-bottom: 7px solid #ebebeb;
          top: -14px;
          left: 50px;
        }
        & > p {
          white-space: nowrap;
        }
        & > p:not(:first-child) {
          margin-top: 20px;
        }
      }
    }
</style>