@extends('layouts.base')

@section('content')
@section('title', trans('开票记录'))

@include('Yunshop\Invoice::admin.mixins')
<style scoped>
  .search-box{
    display: flex;
    flex-wrap: wrap;
  }
  .search-item{
    width: 240px;
    margin: 10px;
  }

  .fixed{
    /* width: calc(100% - 274px);
    margin-left: 0; */
  }
</style>
<div class="all">
  <div id="app" v-cloak>
    <box-item text="开票记录筛选">
      <div class="search-box">
        <template v-for="item in searchTag">
          <el-input class="search-item" v-model="search[item.model]" :placeholder="item.p" clearable v-if="item.type=='input'"></el-input>
          <el-select class="search-item" v-model="search[item.model]" :placeholder="item.p" clearable v-else>
            <el-option v-for="(select,i) in item.options" :key="i" :label="select.label" :value="select.value"></el-option>
          </el-select>
        </template>
        <el-date-picker style="margin: 10px;"  v-model="elDate"  type="datetimerange" :picker-options="pickerOptions" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="pickerDate" value-format="timestamp"><!--yyyy-MM-dd HH-mm-ss-->
        </el-date-picker>
        <el-button type="primary" style="margin: 10px;" icon="el-icon-search" @click="searchVal">搜索</el-button>
      </div>
    </box-item>
    <box-item text="开票记录列表">
      <el-table :data="tableData" style="width: 100%" align="center" v-loading="tableLoading">
        <el-table-column prop="order_sn" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="invoice_number" label="发票号码" width="180"></el-table-column>
        <el-table-column  prop="invoice_no" label="发票编号" width="180"></el-table-column>
        <el-table-column  prop="invoice_type" label="发票类型">
          <template slot-scope="scope">
            [[scope.row.invoice_type==0?"电子发票":scope.row.invoice_type==1?"纸质发票":"专用发票"]]
          </template>
        </el-table-column>
        <el-table-column  prop="collect_name" label="发票抬头"></el-table-column>
        <el-table-column  prop="price" label="开票金额"></el-table-column>
        <el-table-column  prop="invoicing_time" label="开票时间"></el-table-column>
        <el-table-column  prop="member" label="开票会员">
          <template slot-scope="scope">
            <div v-if="scope.row.has_one_member">
              <img :src="scope.row.has_one_member.avatar"  style="width:30px;height:30px;">
              <p>[[scope.row.has_one_member.nickname]]</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column  prop="status" label="发票状态">
          <template slot-scope="scope">开票[[scope.row.status==1?"成功":scope.row.status==0?"失败":"中" ]]</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-button  @click.native.prevent="confirm('下载',scope.row)" type="text" size="small" v-if="scope.row.status==1">下载</el-button>
            <el-button  @click.native.prevent="reason(scope.row)" type="text" size="small" v-if="scope.row.status==0">查看原因</el-button>
            <el-button  @click.native.prevent="toOrderDetail(scope.row)" type="text" size="small">查看订单</el-button>
            <el-button  @click.native.prevent="confirm('冲红',scope.row)" type="text" size="small" v-if="scope.row.status==1">冲红</el-button>
          </template>
        </el-table-column>
      </el-table>
    </box-item>
    <div class="fixed" v-if="tableTotal>0">
      <div class="fixed_box">
      <!-- :page-sizes="tablePageSizes"  layout="total, sizes, prev, pager, next, jumper" -->
        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="tablePage" :page-size="tablePageSize"
          layout="total,  prev, pager, next, jumper" :total="tableTotal" >
        </el-pagination>
      </div>
    </div>

  </div>
</div>

<script>
  const vm = new Vue({
    mixins:[tableMixins],
    data(){
      function onClick(day){
        return (picker)=>{
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
          picker.$emit('pick', [start, end]);
        }
      }
      return {
        elDate:[],
        tableUrl:"{!!yzWebFullUrl('plugin.invoice.admin.invoicing-log.get-list')!!}",
        pickerOptions:{
          shortcuts:[
          {text: '最近一周',onClick:onClick(7)},
          {text: '最近一个月',onClick:onClick(30)},
          {text: '最近三个月',onClick:onClick(91)},
          {text: '最近半年',onClick:onClick(183)},
        ]},
        search:{
          member_id:"",
          member:"",
          invoice_number:"",
          order_sn:"",
          invoice_type:"",
          collect_name:"",
          status:"",
          start:"",
          end:""
        },
        searchTag:[
          {p:"会员Id",model:"member_id",type:"input"},
          {p:"会员昵称/姓名/手机号",model:"member",type:"input"},
          {p:"发票号码",model:"invoice_number",type:"input"},
          {p:"订单编号",model:"order_sn",type:"input"},
          {p:"发票类型",model:"invoice_type",type:"select",options:[{label:"电子发票",value:'-1'},{label:"纸质发票",value:1},{label:"专用发票",value:2}]},
          {p:"发票抬头",model:"collect_name",type:"input"},
          {p:"发票状态",model:"status",type:"select",options:[{label:"开票成功",value:1},{label:"开票失败",value:'-1'},{label: "开票中", value: 2}]},
        ],
      }
    },
    methods:{
      confirm(type,row){
        this.$confirm(`确定要${type}此条数据吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(type=="下载")this.download(row.invoice_no);
            else if(type=="冲红") this.rushRed(row.order_id)
          }).catch(()=>{})
      },
      pickerDate(data){
        if (data===null) {
          this.search.start = "";
          this.search.end = "";
        }else{
          this.search.start = parseInt(data[0] / 1000);
          this.search.end = parseInt(data[1] / 1000);
        }
      },
      rushRed(order_id){
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-log.rush-red')!!}",{order_id}).then(({data:{result,msg="",data}})=>{
          if(result==1){
            this.$message.success(msg);
            this.last_page = "";
            this.tablePage = 1;
            this.getTableData();
          }
          else this.$message.error(msg)
        })
      },
      download(invoice_sn){
        console.log(invoice_sn);
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-log.go-download')!!}",{invoice_sn}).then(({data:{result,msg="",data}})=>{
          if(result==1){
            // this.$message.success("下载成功");
            window.location.href=data.pdf
            this.last_page = "";
            this.tablePage = 1;
            this.getTableData();
          }
          else this.$message.error(msg)
        })
      },
      reason({error_msg}){
        this.$alert(error_msg, '查看原因', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
      },
      toOrderDetail({order_id}){
        let url = "{!!yzWebFullUrl('order.detail.vue-index')!!}";
            url += "&order_id=" + order_id;
            url += "&id=" + order_id;
            window.location.href = url;
      },

    }
  })
</script>
@endsection('content')