<template>
  <div class="invoices-management">
    <div class="search">
      <div class="left" />
      <div class="right">
        <div>
          <el-input v-model="search.businessNo" placeholder="请输入业务编号" clearable />
        </div>
        <div>
          <el-select v-model="search.status" placeholder="请选择状态" clearable>
            <el-option
              v-for="item in constant.InvoiceStatus"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </div>
        <div>
          <el-input v-model="search.fastSearch" placeholder="请输入项目名称/主企业名称/核心企业名称" clearable />
        </div>
        <div class="right-btn">
          <el-button type="primary" @click="fetchData('search')">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="modifyClick('create')">申请开票</el-button>
        </div>
      </div>
    </div>
    <cy-comm-table
      ref="commTable"
      v-loading="loading"
      style="margin-top: 10px;"
      :columns="columns"
      :table-options="tableOptions"
      :data="tableData"
      :count="total"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import indexTable from './indexTable'
import { exportFile } from '@/utils/index'
import { getInvoicesManagementList, saleInvoicePreview, saleInvoiceDownload } from '@/api/mySettlement/invoicesManagement'
export default {
  name: 'InvoicesManagement',
  mixins: [indexTable],
  data() {
    return {
      loading: false,
      tableData: [],
      search: {
        businessNo: '',
        status: '',
        fastSearch: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'constant'
    ])
  },
  mounted() {
    this.fetchData()
  },
  created() {
    this.$store.dispatch('getConstant', ['InvoiceStatus'])
  },
  methods: {
    fetchData(type) {
      this.loading = true
      const params = {
        ...this.search,
        page: this.page,
        rows: this.size
      }
      getInvoicesManagementList(params).then(({ data }) => {
        this.tableData = data.rows
        this.total = data.records
        this.loading = false
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    handlerOperate(type, row) {
      if (type === 'seeInvoice') {
        if (row && row.status && row.status.name !== '已开票') {
          this.$message.warning('您的发票正在处理中，待发票状态变更为“已开票”后，您即可查看和下载发票。')
          return
        }
        // 查看发票
        saleInvoicePreview({ id: row.id }).then((res) => {
          const curFile = res.data[0]
          if (curFile) {
            window.open(`#/perview?fileId=${curFile.id}&name=${curFile.originalName}&absolutePath=${curFile.absolutePath}`)
          }
        })
      } else if (type === 'downloadInvoice') {
        if (row && row.status && row.status.name !== '已开票') {
          this.$message.warning('您的发票正在处理中，待发票状态变更为“已开票”后，您即可查看和下载发票。')
          return
        }
        // 下载发票
        saleInvoiceDownload({ id: row.id }).then((res) => {
          console.log('saleInvoiceDownload')
          console.log(res)
          exportFile(res)
        })
      } else {
        this.$router.push({
          name: 'MySettlementInvoicesManagementApplyInvoicing',
          params: { id: 'children' },
          query: {
            module: '发票管理',
            id: row.id,
            taskId: row.taskId,
            type,
            status: row.status.code
          }
        })
      }
    },
    modifyClick() {
      this.$router.push({
        name: 'MySettlementInvoicesManagementApplyInvoicing',
        params: { id: 'children' },
        query: {
          module: '发票管理'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.invoices-management {

}
</style>
