<!--
   @description: 收件管理
   @author: XWl
   /shopmall/invoiceList
-->
<template>
  <div>
    <div class="header_box">
      <el-page-header content="发票收件管理" @back="goBack" />
    </div>
    <div class="shopmall-view">
      <el-row :gutter="14" class="invoiceManageList">
        <el-col v-for="(item,index) in list" :key="index" :span="7">
          <div :class="{children:true,acitve:index===actives,gray:index!==actives}" @click="rowBut(index)">
            <div class="invoiceManageInfo">
              <p>收件人姓名<span>{{ item.mailingName }}</span></p>
              <p>收件人电话<span>{{ item.mailingPhone }}</span></p>
              <p>收件人地址<span>{{ item.mailingAddress }}</span></p>
              <p>邮编<span>{{ item.postalcode }}</span></p>
            </div>
            <div class="edit-modify">
              <span class="iconfont icon-bianji" @click="edit(item.id)" />
              <span class="iconfont icon-shanchu" @click="deleteInvoice(item.id)" />
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="add_invoiceManage_info cursor" @click="add(list.length)">
            <i class="iconfont icon-tianjia2" />新增收件
          </div>
        </el-col>
      </el-row>
    </div>
    <!--弹框-->
    <div>
      <receiptManagement v-if="childenData.dialog" :childen-data="childenData" />
      <receiptManagementAdd v-if="childenDatas.dialog" :childen-data="childenDatas" />
    </div>
  </div>
</template>

<script>
import receiptManagement from './receiptManagement-dalog'
import receiptManagementAdd from './receiptManagementAdd-dalog'
import { getBilings, deleteBilings } from '@/api/shoppingmall/order'
export default {
  name: 'InvoiceList',
  components: {
    receiptManagement,
    receiptManagementAdd
  },
  filters: {
    TypeTo: function(value) {
      let ss = ''
      if (value === '00') {
        ss = '普通类型发票'
      } else {
        ss = '增值税专用票'
      }
      return ss
    }
  },
  data() {
    return {
      childenDatas: {
        dialog: false, // 弹框
        type: '', // 00 编辑 01 增加
        id: ''
      },
      // 传给子级的数据
      childenData: {
        dialog: false, // 弹框
        type: '', // 00 编辑 01 增加
        id: ''
      },
      actives: 0,
      list: [],
      status: ''
    }
  },
  created() {
    this.initData()
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {

    /**
       * 获取发票管理列表详情
       */
    initData() {
      getBilings().then((res) => {
        if (res.header.ret === '0') {
          this.list = res.data
        }
      }).catch((err) => {
        throw new Error('获取收件管理列表失败' + err)
      })
    },

    // 索引值
    rowBut(index) {
      this.actives = index
    },
    // 删除
    deleteInvoice(id) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteBilings(id).then((res) => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }
        }).catch((err) => {
          throw new Error('删除收件信息失败' + err)
        })
      }).catch((err) => {
        throw new Error('取消了删除' + err)
      })
    },
    //  修改
    edit(id) {
      this.childenData = {
        dialog: true,
        type: '00', // 00 编辑
        id: id
      }
      // console.log(this.childenData)
    },
    // 添加
    add(index) {
      // 样式索引
      this.actives = index
      this.childenDatas = {
        dialog: true,
        type: '01'// 01 新增
      }
    },
    // 获取收件地址列表
    reload() {
      this.initData()
    },
    goBack() {
      this.$router.push({
        path: '/personalCenter/reconciliationDetail',
        query: this.$route.query
      })
    }
  }
}
</script>

<style scoped lang="less">
.header_box {
  padding: 8px 12px;
  border-bottom: 1px solid #eeeeee;
  /deep/ .el-icon-back {
    position: relative;
    left: -8px;
    top: 0;
    transition: all .2s ease;
    opacity: 0;
  }
  /deep/ .el-page-header__title {
    position: relative;
    right: 10px;
    top: 0;
    transition: all .2s ease;
  }
  /deep/ .el-page-header__left {
    &:hover {
      .el-icon-back {
        left: 3px;
        opacity: 1;
        color: #007CCC;
      }
      .el-page-header__title {
        right: 0;
        color: #007CCC;
      }
    }
  }
  /deep/.el-page-header__content {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
