<template>
  <div>
    <div class="header">
      <span v-for="(item,index) in headerList" :key="index" :class="header_active==index ? 'header_active':''" @click="changeSelect(index,item.type)">{{item.name}}</span>
    </div>
    <div class="seach">
      <div class="seach1">
        <div class="seach1_item">
          <span>订单类型</span>
          <el-select      v-model="query.cartellino_type" @change="getData" class="seach1_select">
            <el-option :key="0" label="全部" value=""></el-option>
            <el-option :key="1" label="协议" :value="1"></el-option>
            <el-option :key="2" label="拍卖" :value="2"></el-option>
          </el-select>
        </div>
        <div class="seach1_item">
          <span>摘牌方名称</span>
          <el-input
            class="seach1_select"
            placeholder="请输入挂牌方关键字"
            v-model="query.buyer">
          </el-input>
        </div>
        <div class="seach1_item">
          <span>下单时间</span>
          <el-date-picker
            v-model="query.create_time"
            type="date"
            placeholder="选择日期"
            class="seach1_select1"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="getData">
          </el-date-picker>
        </div>
        <div class="seach1_item">
          <span>资产名称</span>
          <el-input
            class="seach1_select"
            placeholder="请输入标的名称关键字"
            v-model="query.asset_name">
          </el-input>
        </div>
        <div class="seach1_item">
          <button @click="getData" class="seach_button">确定</button>
        </div>
      </div>
      <div class="body_header">
        <span style="width:48px">序号</span>
        <span style="width:495px">资产</span>
        <span style="width:100px">单价</span>
        <span style="width:170px">数量</span>
        <span style="width:115px">交易总额</span>
        <span style="width:170px">交易状态</span>
        <span style="width:75px;text-align: right;">交易操作</span>
      </div>
    </div>
    <div class="body">
      <div class="order_item" v-for="(item,index) in orderList" :key="index">
        <div class="order_item_id">{{item.id}}</div>
        <img :src="item.serial_img" alt="" class="order_item_img">
        <div class="order_item_info">
          <div class="order_item_info_title">
            <span>{{item.create_time | formatDate}}</span>
            <span>订单编号：{{item.batchcode}}</span>
            <span>托管方：{{item.firm_name}}</span>
            <span>资产编号：{{item.serial}}</span>
          </div>
          <div class="order_item_info_content">
            <div class="order_item_info_content_left">
              <p>{{item.serial_name}}</p>
              <p>契税：¥ {{item.contract_tax}}</p>
              <p>印花税：¥ {{item.printing_tax}}</p>
            </div>
            <div class="order_item_info_content_price">
              <p>¥ {{item.price}}</p>
            </div>
            <div class="order_item_id">{{item.count}}</div>
            <div class="order_item_info_content_all">¥ {{item.total_price}}</div>
            <div>
              <span v-if="item.status==0">待支付</span>
              <span v-else-if="item.status==1">待审核付款</span>
              <span v-else-if="item.status==2">待上传签约合同</span>
              <span v-else-if="item.status==3">待确认签约合同</span>
              <span v-else-if="item.status==4">待交付</span>
              <span v-else-if="item.status==5">待确认交付</span>
              <span v-else-if="item.status==6">待结算</span>
              <span v-else-if="item.status==7">已完成</span>
              <span v-else-if="item.status==8">已关闭</span>
              <span v-else-if="item.status==9">退款中</span>
              <span v-else-if="item.status==10">已退款</span>
              <span v-else-if="item.status==11">已取消</span>
            </div>
            <div class="order_item_info_content_operation">
              <p @click="goDetails(item.status,item.batchcode)">订单详情</p>
              <p>下载合同</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="query.page"
        :page-size="query.limit"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {seller_order_list} from '../../../api/index'
export default {
  data(){
    return{
      query:{
        cartellino_type:'',
        buyer:'',
        create_time:'',
        asset_name:'',
        page:1,
        limit:10,
        order_status:''
      },
      pageTotal:0,

      headerList:[
        {name:'全部订单',type:''},
        {name:'待付款',type:1},
        {name:'待签约',type:2},
        {name:'待交付',type:3},
        {name:'已完成',type:4},
        {name:'已关闭',type:5},
      ],
      orderList:[],
      header_active:0
    }
  },
  created(){
    this.getData()
  },
  methods:{
    goDetails(status,batchcode){
      let step,
      type=1,
      url='/order/sellorderPendingPay';
      if(status==0||status==1){
        step=1
      }else if(status==2||status==3){
        step=2
      }else if(status==4||status==5){
        step=3
      }else if(status==6 ){
        step=4
      }else if(status==7){
        step=5
        url='/order/orderDetails'
      }else if (status==8) {
        step=2
        url='/order/orderDetails'
        type=2
      }
      this.$router.push({path:url,query:{step:step,batchcode:batchcode,type:type}})
    },
    changeSelect(index,type){
      this.header_active=index
      this.query.order_status=type
      this.getData()
    },
    getData(){
      seller_order_list(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.orderList=res.data.list;
          this.pageTotal=res.data.count
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'page', val);
      this.getData();
    }
  }
}
</script>
<style scoped>
  .seach1_select1{
    margin-left: 10px;
  }
  .body_header{
    background: #F2F2F2;
    width: 100%;
    border: 1px solid #D7D7D7;
    border-top: none;
    font-size: 14px;
    color: #333333;
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .body_header span{
    display: inline-block;
    text-align: center;
  }
  .seach{
    margin: 20px 0;
  }
  .seach1_select{
    margin-left: 10px;
    width: 170px;
  }
  .seach_button{
    width: 60px;
    height: 30px;
    font-size: 12px;
    color: #333333;
    background-color: transparent;
    border:1px solid #D7D7D7;
    cursor: pointer;
  }
  .seach_input{
    width: 100px;
    margin: 0 15px;
  }
  .seach1{
    width: 100%;
    height: 50px;
    background: #F2F2F2;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .seach1:last-child{
    border-top: none;
  }
  .seach1_item{
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 100%;
  }
  .seach1_item_span{
    color: #C94C4C;
  }
  .select_city{
    margin: 0 15px;
  }
  .header{
    font-size: 14px;
  }
  .header_active{
    color: rgba(201, 76, 76, 0.698039215686274);
    font-size: 16px;
    font-weight: bold;
  }
  .header span{
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
    margin-right: 20px;
  }
  .header span:hover{
    color: rgba(201, 76, 76, 0.698039215686274);
    font-size: 16px;
    font-weight: bold;
  }
  .el-dropdown-link{
    color: #EAB1B1;
    cursor: pointer;
  }
  .body{
    margin-top: 10px;
  }
  .order_item{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 15px 0;
  }
  .order_item:nth-child(2n+2){
    background-color: #F2F2F2;
  }
  .order_item_id{
    padding: 0 15px;
  }
  .order_item_img{
    width: 100px;
    height: 100px;
    margin: 0 15px;
  }
  .order_item_info_title{
    display: flex;
    font-size: 14px;
    color: #7F7F7F;
    align-items: center;
    width: 1020px;
    justify-content: space-between;
  }
  .order_item_info_content{
    display: flex;
    align-items: center;
    width: 1020px;
    font-size: 14px;
    justify-content: space-between;
    margin-top: 5px;
    color: #333333;
    padding-right: 15px;
    box-sizing: border-box;
  }
  .order_item_info_content_left p{
    width: 300px;
    margin-bottom: 5px;
  }
  .order_item_info_content_price{
    /* margin:0 30px; */
    text-align: center;
  }
  .order_item_info_content_price_p{
    text-decoration: line-through;
    margin-bottom: 5px;
  }
  .order_item_info_content_all{
    font-weight: bold;
  }
  .order_item_info_content_operation{
    color: #555555;
  }
  .order_item_info_content_operation p{
    margin-bottom: 5px;
    cursor: pointer;
  }
</style>
