<!--
  @description:查看发票
  @Modifier：wy
  @routerPath: /shopmall/viewInvoice
  @date：  2021/12/31-13:38
-->
<template>
  <div class="view_invoice">
    <div class="nav">
      <!--当前位置-面包屑-->
      <div class="crumbs_nav_main">
        <span class="pos_title">
          <i class="iconfont icon-dizhi" />
        </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="toBack()">
            {{ breadcrumbTitle }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span>查看发票</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <i class="el-icon-close pointer" title="关闭详情" style="font-size:20px;" @click="closePage" />
    </div>
    <!--  订单详情  -->
    <show-detail-info :info-content="orderContent" />
    <!--  发票信息  -->
    <show-detail-info :info-content="invoiceContent" />
    <!--  发票内容  -->
    <invoice-info />
    <!--  按钮区域  -->
    <div class="btn-area">
      <el-button type="danger" plain>
        发送邮箱
      </el-button>
      <el-button type="danger" plain @click="visibleDialog=true">
        申请换开
      </el-button>
    </div>
    <apply-replace-ment-dialog
      v-if="visibleDialog"
      :visible-dialog.sync="visibleDialog"
    />
  </div>
</template>

<script>
import showDetailInfo from './viewInvoiceDetail/showDetailInfo'
import invoiceInfo from './viewInvoiceDetail/invoiceInfo'
import applyReplaceMentDialog from './viewInvoiceDetail/applyReplaceMentDialog'
export default {
  name: 'ViewInvoice',
  components: {
    showDetailInfo,
    invoiceInfo,
    applyReplaceMentDialog
  },
  data() {
    return {
      orderContent: {
        title: '订单信息',
        descName: [
          {
            name: '订单状态',
            flag: 'orderStatus'
          },
          {
            name: '订单编号',
            flag: 'orderNum'
          },
          {
            name: '下单时间',
            flag: 'time'
          },
          {
            name: '发票类型',
            flag: 'type'
          }
        ]
      },
      invoiceContent: {
        title: '发票信息',
        descName: [
          {
            name: '发票状态',
            flag: 'orderStatus'
          },
          {
            name: '发票内容',
            flag: 'orderNum'
          },
          {
            name: '发票抬头',
            flag: 'time'
          }
        ]
      },
      visibleDialog: false
    }
  },
  computed: {
    // 面包屑标题
    breadcrumbTitle() {
      return '我的订单'
    }
  },
  methods: {
    // 面包屑跳转
    toBack() {
      const type = { path: this.$route.query.from, query: { menuIndex: this.$route.query.menuIndex }}
      return type
    },
    // 点右上角关闭时跳转
    closePage() {
      this.$router.push(this.toBack())
    }
  }

}
</script>

<style scoped lang="less">
.view_invoice {
    margin: 0 26px;
    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .crumbs_nav_main {
        padding: 10px 0;
        font-size: 14px;
    }
    .crumbs_nav_main .pos_title {
        display: inline-block;
        vertical-align: middle;
        color: #666;
    }
    .crumbs_nav_main .pos_title .iconfont {
        margin-right: 8px;
        color: #00AACA;
    }
    .crumbs_nav_main .el-breadcrumb {
        vertical-align: middle;
        display: inline-block;
    }
    .m{
        margin-bottom: 20px;
    }
    .order_title{
        font-weight: 500;
        font-style: normal;
        font-size: 18px;
        line-height: 40px;
    }
    .btn-area {
      margin-top: 20px;
      margin-bottom: 20px;
    }
}
</style>
