<template>
  <div>
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>交易订单管理</a-breadcrumb-item>
        <a-breadcrumb-item>待交付订单</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="body">
      <div class="query">
        <a-row  type="flex" justify="space-between" >
          <a-col :lg="12" :xl="8" :xxl="6" class="query_item">
            <span>订单编号：</span>
            <a-input v-model="query.batchcode"/>
          </a-col>
          <a-col :lg="12" :xl="8" :xxl="6" class="query_item query_item3">
            <span>委托方/授权方：</span>
            <a-input v-model="query.entrust_name" placeholder="名称/交易主体唯一标志码"/>
          </a-col>
          <a-col :lg="12" :xl="8" :xxl="6" class="query_item query_item3">
            <span>购买方/被授权方：</span>
            <a-input v-model="query.buy_name" placeholder="名称/交易主体唯一标志码"/>
          </a-col>
          <a-col :lg="12" :xl="8" :xxl="6" class="query_item">
            <span>交易标的：</span>
            <a-input v-model="query.goods_name" placeholder="名称/标的ISLI标志码"/>
          </a-col>

          <!-- <a-col :span="5" class="query_item" >
            <span>订单类型：</span>
            <a-select default-value=""   v-model="query.order_type" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">委托订单</a-select-option>
              <a-select-option value="2">认证订单</a-select-option>
              <a-select-option value="3">服务订单</a-select-option>
            </a-select>
          </a-col> -->
          <a-col :lg="12" :xl="8" :xxl="6" class="query_item">
            <span>收费类型：</span>
            <a-select default-value=""   v-model="query.charges_type" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">免费</a-select-option>
              <a-select-option value="2">付费</a-select-option>
            </a-select>
          </a-col>
          <a-col :lg="12" :xl="8" :xxl="6" class="query_item">
            <span>交易方式：</span>
            <a-select default-value=""   v-model="query.entrust_type" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">转让</a-select-option>
              <a-select-option value="2">授权</a-select-option>
            </a-select>
          </a-col>
          <a-col :lg="12" :xl="8" :xxl="12" class="query_item query_item2">
            <span>订单创建时间：</span>
            <a-range-picker  v-model="query.createtime" valueFormat="YYYY-MM-DD"/>
          </a-col>
          <a-col :lg="12" :xl="8" :xxl="12" class="query_item query_item3">
            <span>标的金额：</span>
            <a-input v-model="query.biaodi_start" placeholder="最小值"/>
            <el-col :span="10" v-html="'\u00a0'"/>
            <el-col style="color:#d9d9d9;">-</el-col>
            <el-col :span="10" v-html="'\u00a0'"/>
            <a-input v-model="query.biaodi_end" placeholder="最大值"/>
          </a-col>
          <a-col :lg="12" :xl="8" :xxl="12" class="query_item query_item3">
            <span>订单金额：</span>
            <a-input v-model="query.dingdan_start" placeholder="最小值"/>
            <el-col :span="10" v-html="'\u00a0'"/>
            <el-col style="color:#d9d9d9;">-</el-col>
            <el-col :span="10" v-html="'\u00a0'"/>
            <a-input v-model="query.dingdan_end" placeholder="最大值"/>
          </a-col>
          <a-col :lg="12" :xl="16" :xxl="24" class="query_item query_item1">
            <a-space :size="21">
              <a-button type="primary" class="query_button" @click="getList(1)">查 询</a-button>
              <a-button class="query_button" @click="resetQurey">重 置</a-button>
              <a-button type="default" class="query_button" @click="xlsdc">导 出</a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <div class="table">
        <div class="table_title">
          <span>查询结果</span>
          <!-- <a-button type="primary" class="query_button">导 出</a-button> -->
        </div>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <template slot="type" slot-scope="type">
            <span>{{type==1?'委托订单':type==2?'认证订单':'服务订单'}}</span>
          </template>
          <template slot="operation" slot-scope="item">
            <a-space :size="24">
              <span class="table_operation" @click="SelectDate(item.batchcode)">标的信息</span>
              <span class="table_operation" @click="SelectOrder(item.batchcode)">订单详情</span>
            </a-space>
          </template>
        </a-table>
        <a-pagination
        class="pagination"
        size="small"
        :total="total"
        v-model="page"
        :page-size="limit"
        :show-total="total => `第 ${startTotal} - ${endTotal} 条 / 总共 ${total} 条`"
        :page-size-options="pageSizeOptions"
        @showSizeChange="onShowSizeChange"
        @change="changePage"
        show-size-changer >
          <template slot="buildOptionText" slot-scope="props">
            <span >{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <orderDataSelect :visible.sync="visible" v-if="visible" :batchcode="batchcode" :type="1"></orderDataSelect>
    <orderDetails :visible.sync="visible2" v-if="visible2" :batchcode="batchcode"></orderDetails>
  </div>
</template>
<script>
import Operation from '../../Operation.vue'
import {getOrderList,xlsdc} from '../../../api/index'
export default {
  data() {
    return{
      query:{
        batchcode:'',
        entrust_name:'',
        buy_name:'',
        goods_name:'',
        order_type:'',
        entrust_type:'',
        transaction_status:'2',
        createtime:[],
        goods_isli:'',
        charges_type:'',
        biaodi_start:'',
        biaodi_end:'',
        dingdan_start:'',
        dingdan_end:'',
      },
      visible:false,
      visible2:false,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      total:0,
      //一页多少条
      startTotal:1,
      endTotal:10,
      limit:10,
      // 当前页数
      page:1,
      data:[],
      columns:[
        // {
        //   title: '序号',
        //   dataIndex: 'id',
        //   width:'65px',
        //   align:'center'
        // },
        {
          title: '订单创建时间',
          dataIndex: 'createtime',
          width:'120px',
          // align:'center'
        },
        {
          title: '订单编号',
          dataIndex: 'batchcode',
          // align:'center'
        },
        {
          title: '委托方/授权方',
          dataIndex: 'entrust_name',
          width:'125px',
          // align:'center'
        },
        {
          title: '标的名称',
          dataIndex: 'goods_name',
          // align:'center'
        },
        {
          title: '购买方/被授权方',
          dataIndex: 'buy_username',
          width:'135px',
          // align:'center'
        },
        // {
        //   title: '订单类型',
        //   dataIndex: 'type',
        //   scopedSlots: { customRender: 'type' },
        //   align:'center'
        // },
        {
          title: '交易方式',
          width:'90px',
          dataIndex: 'entrust_type',
          // align:'center'
        },
        {
          title: '标的金额',
          dataIndex: 'goods_price',
          width:'90px',
          // align:'center'
        },
        {
          title: '交易佣金',
          dataIndex: 'total_service_charge',
          width:'90px',
          // align:'center'
        },
        {
          title: '订单金额',
          dataIndex: 'total_money',
          width:'90px',
          // align:'center'
        },
        {
          title: '操作',
          width:'170px',
          scopedSlots: { customRender: 'operation' },
          align:'center'
        },
      ]
    }
  },
  components:{
    Operation,
    orderDataSelect: () => import('../../dateSelect/order.vue'),
    orderDetails: () => import('../../orderDetails/index.vue'),
  },
  created(){
    this.getList()
  },
  methods:{
    // 重置query
    resetQurey(){
      Object.assign(this.query, this.$options.data().query)
      this.getList()
    },
        //  导出xls
    xlsdc(){
      xlsdc(this.query).then(res=>{
        const fname = new Date().getTime()+".xlsx"
        let bloburl = window.URL.createObjectURL(new Blob([res]))
        const a = document.createElement('a')
        a.download = fname
        a.href = bloburl
        // add click
        a.click()
        window.URL.revokeObjectURL(bloburl)
      })
      .catch(err=>{
        console.error(err)
      });
    },
    getList(type){
      let data=this.query
      data.limit=this.limit
      if(type==1){
        this.page=1
      }
      data.page=this.page
      getOrderList(data).then(res=>{
        if(res.code==200){
          this.data=res.data.data
          this.startTotal=res.data.start
          this.endTotal=res.data.end
          this.total=res.data.total
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    SelectOrder(val){
      this.batchcode=val
      this.visible2=true
    },
    SelectDate(val){
      this.visible=true
      this.batchcode=val
    },
    // 切换一页显示多少条
    onShowSizeChange(current, pageSize){
      this.page=1
      this.limit = pageSize;
      this.getList()
    },
    // 切换页数
    changePage(page){
      this.page=page
      this.getList()
    },
  }
}
</script>
<style scoped>

</style>
