<!--
  @description:发票管理
  @Modifier:
  @routerPath: /personalCenter/invoiceList
  @date: 2021-11-25 11:24
-->
<template>
  <div>
    <div class="shopmall-page-title">
      发票管理
    </div>
    <div class="shopmall-view">
      <el-row :gutter="14" class="invoiceManageList">
        <el-col v-for="(item,index) in list" :key="index" :span="6">
          <div :class="{children:true,acitve:index===actives,gray:index!==actives}" @click="rowBut(index)">
            <div class="invoiceManageInfo">
              <p>发票类型<span>{{ item.invoiceType | TypeTo }}</span></p>
              <p class="clearfix">
                发票抬头<span class="overFont cursor" :title="item.invoiceTitle">{{ item.invoiceTitle }}</span>
              </p>
              <p>发票税号<span>{{ item.taxpayerIdentificationNumber }}</span></p>
              <p v-if=" item.auditStatus === '00'">
                审核状态<span>待审核</span>
              </p>
              <p v-if=" item.auditStatus === '01'">
                审核状态<span>审核通过</span>
              </p>
              <p v-if=" item.auditStatus === '02'" style="display:flex;">
                审核状态<span style="margin-right:6px;">驳回</span>审核意见
                <el-tooltip effect="dark" :content="item.auditOptions" placement="top">
                  <span class="text_over cursor">
                    {{ item.auditOptions }}
                  </span>
                </el-tooltip>
              </p>
            </div>
            <div class="edit-modify invoice_pos">
              <!-- 普通发票不需要再次审核，增值税发票编辑后需要再次审核 -->
              <span class="iconfont icon-bianji" title="编辑" @click="editInvoice(item.id, item.invoiceType)" />
              <span class="iconfont icon-shanchu" title="删除" @click="deleteInvoice(item.id)" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="add_invoiceManage_info flex cursor" @click="add(list.length)">
            <i class="iconfont icon-tianjia2" />新增发票
          </div>
        </el-col>
      </el-row>
    </div>
    <!--弹框-->
    <div>
      <!-- 编辑/新增 -->
      <invoiceAdd v-if="childenData.dialog" :data="childenData" @saveSuccess="saveSuccess" />
    </div>
  </div>
</template>
<script>
import invoiceAdd from '@/views/shoppingmall/invoice/invoicesAdd-dialog'
import { getList, deleteInvoice } from '@/api/shoppingmall/order'
export default {
  name: 'InvoiceList',
  components: {
    invoiceAdd
  },
  filters: {
    TypeTo: function(value) {
      let ss = ''
      if (value === '00') {
        ss = '普通类型发票'
      } else {
        ss = '增值税专用票'
      }
      return ss
    }
  },
  data() {
    return {
      // 传给子级的数据
      childenData: {
        dialog: false, // 弹框
        type: '', // 00 编辑 01 增加
        id: ''
      },
      actives: 0,
      list: [],
      status: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    /**
     * 获取发票管理列表详情
     */
    initData() {
      getList(this.status).then((res) => {
        this.$nextTick(() => {
          this.list = res.data
          // 是否有默认的发票
          // const result = this.list.filter(item => item.status).length
        })
      }).catch((err) => {
        throw new Error('获取发票管理列表失败' + err)
      })
    },
    // 索引值
    rowBut(index) {
      // this.actives = index
    },
    // 删除
    deleteInvoice(id) {
      this.$confirm('确定删除此发票吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteInvoice(id).then((res) => {
          this.$message.success('操作成功')
          this.initData()
        }).catch((err) => {
          throw new Error('删除发票失败' + err)
        })
      }).catch(() => {
      })
    },
    // 编辑需要重新审核
    editAndAudit(id) {
      this.$confirm('编辑后需要重新审核发票, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.editNotAudit(id)
      }).catch(() => {
      })
    },
    // 普票直接编辑
    editNotAudit(id) {
      this.childenData = {
        dialog: true,
        type: '00', // 00 编辑
        id: id
      }
    },
    //  修改
    editInvoice(id, type) {
      // 普通发票
      if (type === '00') {
        this.editNotAudit(id)
      }
      // 增值税发票
      if (type === '01') {
        this.editAndAudit(id)
      }
    },
    // 添加
    add() {
      this.childenData = {
        dialog: true,
        type: '01'// 01 新增
      }
    },
    // 保存成功或者编辑成功 重新获取数据
    saveSuccess() {
      this.initData()
    }
  }
}
</script>

<style scoped lang="less">
.text_over {
  max-width: 28%;
  display: inline-block;
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invoice_pos {
  border: none !important;
  bottom: 18px !important;
  right: 5px;
  padding: 0 !important;
}
</style>
