<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="150px">
        <el-form-item
          label="创建时间(起)"
          prop="createTimeBegin">
          <el-date-picker
            v-model="form.createTimeBegin"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="创建时间(止)"
          prop="createTimeEnd">
          <el-date-picker
            v-model="form.createTimeEnd"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="发票渠道"
          prop="channelName">
          <el-input
            v-model="form.channelName"
            placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item
          label="开票人"
          prop="userId">
          <el-input
            v-model="form.userId"
            placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item
          label="买方名称"
          prop="invoiceBuyerName">
          <el-input
            v-model="form.invoiceBuyerName"
            placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item
          label="买方税号"
          prop="invoiceBuyerTaxNum">
          <el-input
            v-model="form.invoiceBuyerTaxNum"
            placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item
          label="买方接收邮箱"
          prop="invoiceBuyerReceiveEmail">
          <el-input
            v-model="form.invoiceBuyerReceiveEmail"
            placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item
          label="买方接收号码"
          prop="invoiceBuyerReceivePhone">
          <el-input
            v-model="form.invoiceBuyerReceivePhone"
            placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status">
          <el-select
            clearable
            v-model="form.status"
            placeholder="请选择">
            <el-option
              label="已开票"
              value="SUCCESS"></el-option>
            <el-option
              label="开票失败"
              value="FAILED"></el-option>
            <el-option
              label="开票中"
              value="INVOICING"></el-option>
            <el-option
              label="发票红冲中"
              value="RED_INVOICING"></el-option>
            <el-option
              label="发票已红冲"
              value="RED_SUCCESS"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="票号"
          prop="ticketNo">
          <el-input
            v-model="form.ticketNo"
            placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item
          label="开票备注"
          prop="remark">
          <el-input
            v-model="form.remark"
            placeholder="请输入">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button
          @click="reset">重置</el-button>
        <el-button
          type="primary"
          @click="getInvoiceList($event,true)">搜索</el-button>
        <el-button
          type="primary"
          @click="reportExport">导出</el-button>
      </div>
    </div>

    <div class="tableBox">
      <!-- <div class="block-title">
        查询信息
      </div> -->
      <el-table
        :data="invoiceTableData"
        stripe
        row-class-name="is-center"
        v-loading="invoiceLoading">
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="channelName"
          label="渠道">
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="金额">
        </el-table-column>
        <el-table-column
          prop="invoiceSellerName"
          label="销方名称"
          width="140">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerName"
          label="购方名称"
          width="140">
        </el-table-column>
        <el-table-column
          prop="invoiceBuyerTaxNum"
          label="购方税号"
          width="160">
        </el-table-column>
        <el-table-column
          prop="submitTime"
          label="提交时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="completeTime"
          label="完成时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="160">
        </el-table-column>
        <el-table-column
          prop="errInfo"
          label="错误信息"
          width="200">
        </el-table-column>
        <el-table-column
          label="电子发票">
          <template slot-scope="scope">
            <a
              v-if="scope.row.downloadUrl"
              :href="scope.row.downloadUrl"
              target="_blank">下载</a>
          </template>
        </el-table-column>
        <el-table-column
          label="票号">
          <template slot-scope="scope">
            <span>{{ formatInvoiceDetails(scope.row.details) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        @current-change="getInvoiceList"
        layout="total, prev, pager, next"
        :total="invoiceTotal">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import { getInventoryList } from '@/api/order'
import moment from 'moment'

export default {
  name: 'salesReport',
  data () {
    return {
      form: {
        createTimeBegin: moment().startOf('day'),
        createTimeEnd: moment().endOf('day'),
        channelName: '',
        userId: '',
        invoiceBuyerName: '',
        invoiceBuyerTaxNum: '',
        invoiceBuyerReceiveEmail: '',
        invoiceBuyerReceivePhone: '',
        status: '',
        ticketNo: '',
        remark: '',
        export: false,
        pageNum: 1,
        pageSize: 10
      },
      invoiceLoading: false,
      invoiceTableData: [],
      invoiceTotal: 0
    }
  },
  created () {
    this.getInvoiceList()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    getInvoiceList (e, goFirst) {
      if (goFirst) { this.form.pageNum = 1 }

      if (!this.form.createTimeBegin || !this.form.createTimeEnd) {
        this.$message.error('请选择起始时间和截止时间')
        return
      }

      this.form.createTimeBegin = moment(this.form.createTimeBegin).format('YYYY-MM-DD HH:mm:ss')
      this.form.createTimeEnd = moment(this.form.createTimeEnd).format('YYYY-MM-DD HH:mm:ss')

      this.invoiceLoading = true
      getInventoryList(this.form).then(res => {
        const data = res.data || {}
        this.invoiceTableData = data.records || []
        this.invoiceTotal = data.total || 0
        this.invoiceLoading = false
      }).catch(() => {
        this.invoiceLoading = false
      })
    },
    formatInvoiceDetails (details) {
      if (!details || !details.length) return ''
      return details.map(item => item.ticketNo).filter(Boolean).join('、')
    },
    reportExport () {
      this.$confirm(`是否要导出明细数据`, '确认提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        this.handelExport({
          ...this.form,
          export: true,
          exportDetail: true
        })
      }).catch(() => {
        this.handelExport({
          ...this.form,
          export: true,
          exportDetail: false
        })
      })
    },
    handelExport (params) {
      getInventoryList(params).then(res => {
        this.$confirm('导出成功，是否去下载页', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/queryReport/reportExport')
        }).catch(() => {})
      }, () => {
        this.$notify.error({
          title: '提示',
          message: '导出失败'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
