<!--
  @description:发票管理弹框
  @Modifier：qk
  @routerPath: /shopmall/mailingaddressonvoice
  @date：  2019/11/30-14:48
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childrenInvoice.dialog"
      :close-on-click-modal="false"
      title="选择发票"
      modal-append-to-body
      append-to-body
      width="1180px"
      custom-class="shop_mall_dialog"
    >
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
      >
        <el-table-column align="center" label="选择" width="65">
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
            >
              {{ "" }}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          label="发票抬头"
          min-width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.invoiceTitle }}
          </template>
        </el-table-column>
        <el-table-column
          prop="invoiceType"
          label="发票类型"
          min-width="95"
        />
        <el-table-column
          prop="taxpayerIdentificationNumber"
          label="发票税号"
          min-width="130"
          align="center"
        />
        <el-table-column
          prop="createName"
          min-width="95"
          label="发票管理员"
        />
        <el-table-column
          prop="taxpayertel"
          label="注册电话"
          min-width="110"
        />
        <el-table-column
          prop="bankname"
          label="发票开户银行"
          min-width="120"
        />
        <el-table-column
          prop="bankaccount"
          label="发票银行账号"
          min-width="120"
        />
        <el-table-column
          prop="taxpayeraddr"
          label="注册地址"
          min-width="120"
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="purple" @click="doneAddClickBtn">确 定</el-button>
        <el-button @click="childrenInvoice.dialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/shoppingmall/order'
export default {
  name: 'ConstrastAdd',
  props: {
    childrenInvoice: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      listData: [],
      status: '1',
      radio: 0,
      loading: false
    }
  },
  watch: {
    'childrenInvoice.dialog'(val) {
      if (val) {
        this.getEffectiveplanInit()
      }
    }
  },
  methods: {
    doneAddClickBtn() {
      if (!this.listData.length) {
        this.$message({
          type: 'warning',
          message: '请选择发票!'
        })
        return
      }
      if (this.listData[0].invoiceType === '普通类型发票') {
        this.$message({
          type: 'warning',
          message: '该发票类型为普通类型发票，请慎重选择!'
        })
      }
      this.childrenInvoice.dialog = false
      this.$emit('childrenInvoices', this.listData)
    },
    getEffectiveplanInit() {
      this.loading = true
      getList(this.status).then(res => {
        this.tableData = res.data
        this.tableData.forEach(ele => {
          if (ele.invoiceType === '00') {
            ele.invoiceType = '普通类型发票'
          }
          if (ele.invoiceType === '01') {
            ele.invoiceType = '增值税专用票'
          }
          this.loading = false
        })
      }).then(() => {
        // 回显
        if (this.childrenInvoice.selectedInvoice.length > 0) {
          this.tableData.forEach((item, index) => {
            if (item.id === this.childrenInvoice.selectedInvoice[0].id) {
              // 这里需要用 table 原来绑定的数据对象 作为回显函数的参数才能正确勾选
              this.radio = index
              this.listData = [item]
            }
          })
        } else {
          // 未选择发票
          // 默认选择第一个
          if (this.tableData.length > 0) {
            const defaultInvoice = []
            defaultInvoice.push(this.tableData[0])
            this.listData = [this.tableData[0]]
            this.$emit('childrenInvoices', defaultInvoice)
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 单选按钮点击
    getCurrentRow(val) {
      this.listData = [val]
    }
  }
}
</script>

<style scoped lang="less">
</style>

