<template>
  <div class="body">
    <div class="seach">
      <div class="seach1">
        <div class="seach1_item">
          <span>
            全部资产 （
            <span class="seach1_item_span">{{pageTotal}}</span>
            ）
          </span>
        </div>
        <!-- <div class="seach1_item">
          <el-select  v-model="query.sort" @change="getData">
            <el-option :key="0" label="标的价格升序" :value="1"></el-option>
            <el-option :key="1" label="标的价格降序" :value="2"></el-option>
            <el-option :key="2" label="挂牌时间升序" :value="3"></el-option>
            <el-option :key="3" label="挂牌时间降序" :value="4"></el-option>
          </el-select>
        </div> -->
        <div class="seach1_item">
          <el-date-picker
            v-model="query.remove_time"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="getData">
          </el-date-picker>
        </div>
        <!-- <div class="seach1_item">
          <span>价格</span>
          <el-input
            class="seach_input"
            v-model="query.min_price">
            <span slot="prefix" class="el-input__icon ">￥</span>
          </el-input>
          <span>-</span>
          <el-input
            class="seach_input"
            v-model="query.max_price">
            <span slot="prefix" class="el-input__icon ">￥</span>
          </el-input>
          <button @click="getData" class="seach_button">确定</button>
        </div> -->
      </div>

      <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.seller">
          </el-input>
        </div>
        <div class="seach1_item">
          <span>挂牌编号</span>
          <el-input
            class="seach1_select"
            placeholder="请输入挂牌编号"
            v-model="query.id">
          </el-input>
        </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>

    <div class="tabs">
      <el-table
        :data="listData"
        header-cell-class-name="theader"
        @row-click="goDetails"
        :header-cell-style="{background:'#F3F3F3 !important',color:'#333333',height:'60px',fontSize:'14px'}"
        style="width: 100%">
        <el-table-column
          prop="id"
          align="center"
          label="挂牌代码">
        </el-table-column>
        <el-table-column
          prop="firm_name"
          align="center"
          label="挂牌方名称">
        </el-table-column>
        <el-table-column
          prop="serial_name"
          align="center"
          label="标的名称">
        </el-table-column>
        <el-table-column
          prop="pay_mode"
          align="center"
          label="协议">
          <template slot-scope="scope">
            <span>{{scope.row.pay_mode==1?'协议':'拍卖'}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="create_time"
          align="center"
          :formatter="formatDate"
          label="挂牌日期">
        </el-table-column> -->
        <el-table-column
          prop="remove_time"
          align="center"
          label="摘牌日期">
        </el-table-column>
      </el-table>
    </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 {end_list} from '../../api/index'
import moment from 'moment'
export default {
  data(){
    return{
      query:{
        page:1,
        limit:10,
        sort:1,
        remove_time:'',
        seller:'',
        id:'',
        asset_name:'',
      },
      pageTotal:0,
      listData:[]
    }
  },
  created(){
    this.getData()
  },
  methods:{
    goDetails(row, column, event){
      this.$router.push({path:'/NoticeDetails',query:{id:row.id,type:1}})
    },
    //时间戳转换时间
    formatDate(row,colnum){
      return moment(row[colnum.property]*1000).format('YYYY-MM-DD HH:mm:ss')
    },
    getData(){
      end_list(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.listData=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>
  .body{
    width: 1200px;
    margin: 0 auto;
  }
  .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 20px;
    display: flex;
    align-items: center;
    border-right: 1px solid #D7D7D7;
    font-size: 12px;
    height: 100%;
  }
  .seach1_item_span{
    color: #C94C4C;
  }
  .seach1_item:last-child{
    border-right: none;
  }
  .select_city{
    margin: 0 15px;
  }
  .el-dropdown-link{
    color: #EAB1B1;
    cursor: pointer;
  }
  .tabs{
    margin-top: 20px;
  }
  .tabs>>> .el-table tr{
    border:1px solid #E9B7B7 !important
  }
  .tabs>>>.el-table td, .el-table th.is-leaf{
    border-bottom: none;
  }
  .tabs>>>.el-table::before{
    height: 0;
  }
</style>
