<template>
  <a-spin :spinning="loading">
    <a-card>
      <a-form-model
        class="search-box"
        :model="form"
        layout="inline"
        @submit.native.prevent="getOrderList"
      >
        <a-form-model-item
          label="开票申请起始时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker v-model="form.startDate" show-time></a-date-picker>
        </a-form-model-item>
        <a-form-model-item
          label="开票申请截止时间"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-date-picker v-model="form.endDate" show-time></a-date-picker>
        </a-form-model-item>
        <a-form-model-item
          label="门票号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.keyWords1"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="渠道名"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.keyWords2"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="流水号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.keyWords3"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="开票方"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.keyWords4"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="购买方"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.keyWords5"></a-input>
        </a-form-model-item>
        <!-- <a-form-model-item
          label="操作人"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.keyWords6"></a-input>
        </a-form-model-item> -->
        <a-form-model-item
          label="状态"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-select v-model="form.keyWords8" style="width:120px">
            <a-select-option value=""> 全部 </a-select-option>
            <a-select-option value="SUCCESS"> 已开票 </a-select-option>
            <a-select-option value="FAILED"> 开票失败 </a-select-option>
            <a-select-option value="INVOICING"> 开票中 </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-button
          type="primary"
          @click="getList"
          style="margin-left:10px"
        >
          搜索
        </a-button>
      </a-form-model>
      <a-table
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="handleTableChange"
        :scroll="{ x: 1200}"
      >

        <template slot="ticket_no" slot-scope="text, record">
          <a-tag>{{ record.ticket_no }}</a-tag>
        </template>

        <template slot="invoice_ticket_no" slot-scope="text, record">
          <a-tag v-for="(item,index) in record.invoice_ticket_no" :key="index">{{ item }}</a-tag>
        </template>

        <template slot="type" slot-scope="text, record">
          {{ record.type==='TICKET'?'门票':'会员' }}
        </template>

        <template slot="order_time" slot-scope="text, record">
          {{ moment(record.order_time).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template slot="submit_time" slot-scope="text, record">
          <span v-if="record.submit_time">
            {{ moment(record.submit_time).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
        <template slot="complete_time" slot-scope="text, record">
          <span v-if="record.complete_time">
            {{ moment(record.complete_time).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
        <template slot="status" slot-scope="text, record">
          {{ statusMap[record.status] }}
        </template>
        <template slot="qrcode_url" slot-scope="text, record">
          <a-button v-if="record.qrcode_url" size="small" @click="showUrl(record.qrcode_url)">查看</a-button>
        </template>
        <template slot="download_url" slot-scope="text, record">
          <a-button v-if="record.download_url" size="small" @click="download(record.download_url)">下载</a-button>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button size="small" @click="updateStatus(record)">修改状态</a-button>
        </template>
      </a-table>

      <a-modal :visible="visible" title="开票二维码" :footer="null" @cancel="visible=false">
        <div
          class="img-wrap"
          style="display:block">
          <div
            class="img"
            :style="{backgroundImage:`url(${qrImg})`,height:'100%'}">
          </div>
        </div>
      </a-modal>

      <a-modal :visible="visible2" title="修改状态" @cancel="visible2=false" @ok="handleOk2">
        <a-form-model layout="inline">
          <a-form-model-item label="当前状态">
            {{ statusMap[currentRecord.status] }}
          </a-form-model-item>
          <a-form-model-item label="修改后状态">
            <a-select v-model="status" style="width:120px">
              <a-select-option value="SUCCESS" :disabled="currentRecord.status==='SUCCESS'"> 已开票 </a-select-option>
              <a-select-option value="FAILED" :disabled="currentRecord.status==='FAILED'"> 开票失败 </a-select-option>
              <a-select-option value="INVOICING" :disabled="currentRecord.status==='INVOICING'"> 开票中 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>

    </a-card>
  </a-spin>
</template>

<script>
import { listTicketInvoiceRecord, invoiceUpdateTicketInvoiceRecord } from '@/api/ticketSetting/invoice'
import moment from 'moment'
import QRCode from 'qrcode'

const columns = [
  {
    title: '门票号',
    dataIndex: 'ticket_no',
    key: 'ticket_no',
    scopedSlots: { customRender: 'ticket_no' },
    width: '160px'
  },
  {
    title: '开票票号',
    dataIndex: 'invoice_ticket_no',
    key: 'invoice_ticket_no',
    scopedSlots: { customRender: 'invoice_ticket_no' },
    width: '160px'
  },
  {
    title: '渠道名',
    dataIndex: 'channel_name',
    key: 'channel_name'
  },
  {
    title: '下单时间',
    dataIndex: 'order_time',
    key: 'order_time',
    scopedSlots: { customRender: 'order_time' }
  },
  {
    title: '流水号',
    dataIndex: 'transaction_no',
    key: 'transaction_no'
  },
  {
    title: '金额(元)',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '开票提交时间',
    dataIndex: 'submit_time',
    key: 'submit_time',
    scopedSlots: { customRender: 'submit_time' }
  },
  {
    title: '开票完成时间',
    dataIndex: 'complete_time',
    key: 'complete_time',
    scopedSlots: { customRender: 'complete_time' }
  },
  {
    title: '开票方',
    dataIndex: 'invoice_seller',
    key: 'invoice_seller'
  },
  {
    title: '购买方',
    dataIndex: 'invoice_buyer',
    key: 'invoice_buyer'
  },
  {
    title: '购买人电话',
    dataIndex: 'invoice_buyer_phone',
    key: 'invoice_buyer_phone'
  },
  {
    title: '购买方税号',
    dataIndex: 'invoice_buyer_tax_num',
    key: 'invoice_buyer_tax_num'
  },
  {
    title: '开户行',
    dataIndex: 'invoice_buyer_bank',
    key: 'invoice_buyer_bank'
  },
  {
    title: '开户行账号',
    dataIndex: 'invoice_buyer_account',
    key: 'invoice_buyer_account'
  },
  {
    title: '地址',
    dataIndex: 'invoice_buyer_address',
    key: 'invoice_buyer_address'
  },
  {
    title: '接收邮箱',
    dataIndex: 'invoice_buyer_receive_email',
    key: 'invoice_buyer_receive_email'
  },
  {
    title: '接收手机号',
    dataIndex: 'invoice_buyer_receive_phone',
    key: 'invoice_buyer_receive_phone'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '失败原因',
    dataIndex: 'err_info',
    key: 'err_info',
    scopedSlots: { customRender: 'err_info' }
  },
  {
    title: '二维码地址',
    dataIndex: 'qrcode_url',
    key: 'qrcode_url',
    width: '100px',
    fixed: 'right',
    scopedSlots: { customRender: 'qrcode_url' }
  },
  {
    title: '下载地址',
    dataIndex: 'download_url',
    key: 'download_url',
    width: '100px',
    fixed: 'right',
    scopedSlots: { customRender: 'download_url' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: '100px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: {
  },
  data () {
    return {
      columns,
      form: {
        startDate: null,
        endDate: null,
        keyWords1: '', // 订单号
        keyWords2: '', // 渠道名
        keyWords3: '', // 流水号
        keyWords4: '', // 开票方
        keyWords5: '', // 购买方
        keyWords6: '', // 操作人(id)
        keyWords8: '' // 状态
      },
      loading: false,
      dataList: [],
      pagination: {},
      params: {
        pageNum: 1,
        pageSize: 10
      },
      editVisible: false,
      // 当前对象
      currentItem: null,
      currentUrl: '',
      qrImg: '',
      visible: false,
      visible2: false,
      currentRecord: {},
      status: '',
      statusMap: {
        'SUCCESS': '已开票',
        'FAILED': '开票失败',
        'INVOICING': '开票中'
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    moment,
    getList () {
      this.loading = true
      listTicketInvoiceRecord({ ...this.params, ...this.form }).then(res => {
        this.dataList = res.extraInfo.list
        this.dataList.forEach(v => {
          v.invoice_ticket_no = v.details.map(o => o.ticket_no)
        })

        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total

        this.pagination = pagination
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.params.pageNum = pagination.current
      this.params.pageSize = pagination.pageSize

      this.getList()
    },
    handleEdit (data) {
      this.editVisible = true
      this.currentItem = data
    },
    download (url) {
      window.open(url)
    },
    showUrl (qrcode) {
      this.visible = true
      this.$nextTick(async () => {
        var opts = {
          errorCorrectionLevel: 'H',
          type: 'image/png',
          quality: 1,
          color: {
            dark: '#000000ff', // Blue dots
            light: '#0000' // Transparent background
          }
        }
        this.qrImg = await QRCode.toDataURL(qrcode, opts)
      })
    },
    updateStatus (record) {
      this.currentRecord = record
      this.status = ''
      this.visible2 = true
    },
    handleOk2 () {
      if (this.status === '') return this.$message.error('请选择状态')
      invoiceUpdateTicketInvoiceRecord({ id: this.currentRecord.id, status: this.status }).then(res => {
        this.$message.success('修改成功')
        this.currentRecord = {}
        this.status = ''
        this.visible2 = false
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img-wrap{
  height:300px;
}
.img{
  height: 100%; background: no-repeat center center /contain;
}
</style>
