<template>
  <div class="app-container">
   <el-row  type="flex" justify="space-between" style="margin-bottom:20px">
       <div class="grid-content bg-purple">
         <el-dropdown @command="handleCommand">
           <div class="pulldown">
             <span class="el-dropdown-link" v-if="!status">
              月
             </span>
             <span class="el-dropdown-link" v-if="status">
               {{status}}
             </span>
             <i class="el-icon-arrow-down el-icon--right"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="1">1月</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>


       <div class="grid-content bg-purple">
         <div class="block">
           <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
             start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
           </el-date-picker>
         </div>

       </div>
  <!-- <el-col :xs="24" :sm="10" :md="8" :lg="5" :xl="5">
     <div class="grid-content bg-purple">
       <div class="grid-content bg-purple" style="margin-left: 30px;">
         <el-input
             placeholder="请输入查询内容"
             v-model="input4" style="width: 80%;">
             <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
       </div>
     </div>
     </el-col> -->
    <!-- <el-col :span="1">
       <div class="grid-content bg-purple"></div>
     </el-col> -->
       <div class="grid-content bg-purple" style="display: flex;justify-content: flex-end;">
        <el-button type="primary" @click="index">承兑人分类报表</el-button>
        <el-button type="primary" @click="shipments1">出票人分类报表</el-button>
        <el-button type="primary" disabled>合同统计列表</el-button>
        <el-button type="primary" @click="shipments3">供应商统计列表</el-button>
         <el-button type="primary" @click="Export">导出</el-button>

       </div>

   </el-row>
    <el-table v-loading="listLoading" :data="srcList" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="" width="55">
        <template slot-scope="scope">
         <el-checkbox v-model="checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="合同名称"  align="center" prop="contractName">

      </el-table-column>
      <el-table-column label="汇票承兑日"  align="center" prop="acceptDate">

      </el-table-column>
      <el-table-column label="汇票贴现日"  align="center" prop="expectDiscountDate">

      </el-table-column>
     <el-table-column label="汇票笔数"  align="center" prop="count">

     </el-table-column>
     <el-table-column label="汇票金额" align="center" prop="money">

     </el-table-column>
     <el-table-column label="服务费"  align="center" prop="serviceMoney">

     </el-table-column>
     <el-table-column label="利息"  align="center">
       <template slot-scope="scope">
         xxxx
       </template>
     </el-table-column>

     <!-- <el-table-column align="center" prop="created_at" label="操作" width="250">
        <template slot-scope="scope">
          <el-tag type="success" style="cursor: pointer;margin-right: 15px;">恢复</el-tag>
         <el-tag type="warning" style="margin-right: 15px;cursor: pointer;">下载</el-tag>
          <el-tag type="danger" style="cursor: pointer;">删除</el-tag>
        </template>
      </el-table-column> -->
    </el-table>
   <div class="pagesip">
   	<el-button type="primary" size="small"
   		style="background-color:#D8AB5A ;border-color:#D8AB5A ; margin: 0 20px;" @click="jumpFirstPage">首页
   	</el-button>
   	<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next"
   		:total="list.length" :page-size="1" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
   		ref="pagination">
   	</el-pagination>
   	<el-button type="primary" size="small"
   		style="background-color:#D8AB5A ;border-color:#D8AB5A ;margin: 0 20px;" @click="jumpLastPage">尾页
   	</el-button>
   </div>
  </div>
</template>

<script>
  import {
    getList
  } from '@/api/table'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
		srcList:[],
		currentPage: 1,
		pagesize: 11,
        list: [],
        listLoading: false,
        status: '',
        hpstatus:'',
        input4:'',
        checked:false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      }
    },
    created() {
      // this.fetchData()
    },
    mounted(){
      this.$request({
        url:'/api/Report/contractReport?contractName=&startDate=&endDate=',
        method:'get',
      }).then((res)=>{
        this.list=res.data
		this.getPageData()
      })
    },
    methods: {
      handleCommand(command) {
        this.status = command

      },
      handlehpCommand(command) {
        this.hpstatus = command

      },
      index(){
        this.$router.push({path:'/shipments/index'})
      },
      shipments1(){
        this.$router.push({path:"/shipments1"})
      },
      shipments3(){
        this.$router.push({path:"/shipments3"})
      },
      Export(){

		window.open('http://123.207.180.167:8700/api/Report/export/contractReport?contractName=&startDate=&endDate=')
      },
	  jumpFirstPage(){
		this.$refs.pagination.handleCurrentChange(1);
		this.$emit('handleCurrentChange', 1);
	  },
	  jumpLastPage(){
		let font = this.$refs.pagination
		let cpage = Math.ceil(font.total / font.pageSize);
		font.handleCurrentChange(cpage);
	  },
	  handleCurrentChange(val) {
		this.currentPage = val;
		this.getPageData();
	  },
	  getPageData() {
		let start = (this.currentPage - 1) * this.pagesize;
		let end = start + this.pagesize;
		this.srcList = this.list.slice(start, end);
	  },
    }
  }
</script>
<style lang="scss">
  .pulldown {
    width: 185px;
    height: 40px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #999999;
  }
  .pagesip{
    width: 100%;
    margin: 20px auto;
    display: flex;
    // align-items: center;
    justify-content: flex-end;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#D8AB5A;
  }
  .el-col{
    margin-bottom: 20px;
  }
</style>
