<template>
  <div id="invoice_purchase" class="body" v-loading="load" element-loading-text="查询中，请稍等！">
    <div class="searchCondition">
      发票类型：
      <el-select v-model="invoiceType" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      &nbsp; &nbsp;
      分发状态：
      <el-select v-model="distributeStatus" placeholder="请选择">
        <el-option
            v-for="item in distributeStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <div style="margin-left: 10px">
        <el-button @click="getInvoicePurchaseList" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="searchClean">重置</el-button>
      </div>
    </div>
    <div class="taxInfo">
      <span style="margin: 5px">对应纳税人信息：</span>
      <div class="taxDetail">
        <p>纳税人名称：{{ taxName }}</p>
        <p>纳税人识别号：{{ taxNumber }}</p>
        <p>设备编号：{{ deviceNumber }}</p>
      </div>
    </div>
    <div style="margin-top: 5px; margin-bottom: 5px">
      <div style="display: flex">
        <div>
          <span>注意：</span>
        </div>
        <div>
          <div style="margin-bottom: 5px">
            <span>1、网上申领发票需先在【发票管理——发票申领】功能中完成申领确认操作后，方可进行发票分发操作</span>
          </div>
          <div>
            <span>2、自助机上申领发票可直接进行分发操作</span>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-container>
        <el-table :data="purchaseList" border stripe style="width: 100%" :height="tableHeight">
          <el-table-column prop="invoiceCateCode" width="240" label="发票类别编码" align="center"></el-table-column>
          <el-table-column prop="invoiceCateName" width="240" label="发票类别名称"></el-table-column>
          <el-table-column prop="invoiceCode" width="240" label="发票代码"></el-table-column>
          <el-table-column prop="invoiceBeginNo" width="180" label="起始号码"></el-table-column>
          <el-table-column prop="invoiceEndNo" label="终止号码"></el-table-column>
          <el-table-column prop="surplusNum" label="份数"></el-table-column>
          <el-table-column prop="invoicePurchaseDate" width="180" label="领购日期"></el-table-column>
          <el-table-column prop="effectiveDate" width="180" label="有效日期"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button @click="showInvoicePurchase(scope.row)" type="primary" size="small">分发</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-container>
      <el-row type="flex" :gutter="20">
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <div style="text-align:right">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="sizes, prev, pager, next"
                :total="totalNumber"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="发票领购" :visible.sync="isShow">
      <div>
        <div class="invoice_info">
          <p>发票类别名称：{{ purchaseRow.invoiceCateName }}</p>
          <p>发票代码：{{ purchaseRow.invoiceCode }}</p>
        </div>
        <div class="invoice_info">
          <p>起始号码：{{ purchaseRow.invoiceBeginNo }}</p>
          <p>终止号码：{{ purchaseRow.invoiceEndNo }}</p>
        </div>
      </div>
      <div>
        <span>领购份数：</span>
        <el-input class="invoice_input" v-model="purchase" type="number"></el-input>
      </div>
      <div slot="footer" class="customer">
        <el-button class="invoice_button" type="primary" v-on:click="cancelInvoicePurchase">取 消</el-button>
        <el-button class="invoice_button" type="primary" v-on:click="setInvoicePurchase">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cache from '@/utils/cache'
import { AxiosRequestData } from '@/data/axios_request'

export default {
  name: 'invoice_purchase',
  data() {
    return {
      buyerInfo: '',
      device: '',
      invoiceType: '',
      taxName: '',
      taxNumber: '',
      deviceNumber: '',
      purchaseList: [],
      pageNum: 1,
      pageSize: 10,
      totalNumber: 10,
      totalPage: 0,
      pageSizes: [10, 30, 50, 100],
      options: [{
        value: '1',
        label: '增值税普通电子发票'
      },
        {
          value: 2,
          label: '增值税电子专用发票',
        },
        {
          value: '3',
          label: '增值税普通纸质发票'
        }, {
          value: '4',
          label: '增值税专用纸质发票'
        }],
      distributeStatus: '',
      distributeStatusList: [{
        value: '0',
        label: '待分发'
      }, {
        value: '1',
        label: '分发中'
      }],
      isShow: false,
      purchase: 0,
      token: '',
      purchaseRow: {},
      company: {},
      pageStatus: 0,
      load: false,
      tableHeight: ''
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 250
    let company = JSON.parse(cache.getSession('company'))
    this.company = company
    let user = JSON.parse(cache.getSession('user'))
    this.token = cache.getToken()
    this.account = user.account
    this.taxName = company.entName
    this.taxNumber = company.entTaxId
    this.deviceNumber = company.defaultDeviceInfo.deviceLabel
    // this.getInvoicePurchaseList()
  },
  mounted() {
    this.tableHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    // 变更每页显示的数据条数
    handleSizeChange(val) {
      this.pageSize = val
      this.totalNumber = val
      this.getInvoicePurchaseList()
    },
    // 翻页
    handleCurrentChange(val) {
      if (val < this.pageNum) {
        this.pageStatus = 1
      } else {
        this.pageStatus = 0
      }
      this.pageNum = val
      this.getInvoicePurchaseList()
    },
    // 清空查询条件
    searchClean() {
      this.invoiceType = ''
      this.distributeStatus = ''
    },
    // 查询发票领购记录
    async getInvoicePurchaseList() {
      if (this.invoiceType === '' || this.distributeStatus === '') {
        await this.$alert('发票类型和分发状态是必选项，请选择发票类型和分发状态！', '提示信息', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
        return
      }
      if (this.account) {
        this.load = true
        const url = '/sys/invoicePurchase/distributeInfos'
        let response = await AxiosRequestData(url, this.token, {
          entTaxId: this.company.entTaxId,
          deviceType: this.company.defaultDeviceInfo.deviceType,
          taxDiscId: this.company.defaultDeviceInfo.taxDiscId,
          invoiceCategory: this.invoiceType,
          distributeStatus: this.distributeStatus,
          pageNo: this.pageNum,
          pageSize: this.pageSize,
          mobile: this.account
        }, false, 2)
        if (response) {
          if (response.code === 0) {
            this.load = false
            if (response.data.statusMemo != null) {
              this.$message.closeAll()
              await this.$alert(response.data.statusMemo, '提示信息', {
                confirmButtonText: '确定',
                callback: action => {

                }
              })
            }
            if (response.data.hasNext) {
              if (this.pageStatus === 0) {
                this.totalNumber += this.pageSize
              }
            }
            this.purchaseList = response.data.distributeVOs
          } else {
            this.load = false
            this.$message.error(response.msg)
          }
        } else {
          this.load = false
        }
      }
    },
    // 显示发票领购页面
    showInvoicePurchase(row) {
      this.purchase = row.surplusNum
      this.isShow = true
      this.purchaseRow = row
    },
    // 取消清空申领页面
    cancelInvoicePurchase() {
      this.isShow = false
      this.purchaseRow = {}
      this.purchase = 0
    },
    // 查询发票领购记录
    async setInvoicePurchase() {
      if (this.purchase <= 0) {
        this.$message({
          message: '请输入正确的发票领购数！',
          type: 'warning'
        })
        return
      }
      if (this.account) {
        const url = '/sys/invoicePurchase/distribute'
        let response = await AxiosRequestData(url, this.token, {
          entTaxId: this.purchaseRow.entTaxId,
          deviceType: this.purchaseRow.deviceType,
          taxDiscId: this.purchaseRow.taxDiscId,
          invoiceCateCode: this.purchaseRow.invoiceCateCode,
          surplusNum: this.purchaseRow.surplusNum,
          invoiceCode: this.purchaseRow.invoiceCode,
          invoiceBeginNo: this.purchaseRow.invoiceBeginNo,
          invoiceEndNo: this.purchaseRow.invoiceEndNo,
          distributeNum: this.purchase,
          mobile: this.account,
          reqChannel: 4
        }, false, 1)
        if (response) {
          if (response.code === 0) {
            this.isShow = false
            this.$message({
              message: response.data.statusMemo,
              type: 'success'
            })
            await this.getInvoicePurchaseList(this.company)
          } else {
            this.$message.error(response.msg)
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.body {
  height: 100%;
}

.taxInfo {
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-width: 1px;
  border-color: #d3dce6;
  margin-bottom: 10px;
}

.taxDetail {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.searchCondition {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.invoice_input {
  width: 250px;
  margin: 5px;
}

.invoice_info {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
