<template>
  <div class="body">
    <div>
      <div class="seach">
        <div class="seach_left">
          <img src="../../assets/img/all_zc.png" alt="">
          <span>标的类型</span>
        </div>
        <div class="seach_right">
          <el-radio-group v-model="query.serial_type" class="seach_group" @change="changeDate(3)">
            <el-radio-button label="" >不限</el-radio-button>
            <el-radio-button label="1">知识产权（著作权、专利权、专有技术、商标专有权）</el-radio-button>
            <el-radio-button label="2">销售网络及客户关系</el-radio-button>
            <el-radio-button label="3">特许经营权</el-radio-button>
            <el-radio-button label="4">合同权益</el-radio-button>
            <el-radio-button label="5">域名</el-radio-button>
            <el-radio-button label="6">商誉</el-radio-button>
            <el-radio-button label="7">时间和档期</el-radio-button>
            <el-radio-button label="8">其它</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="seach">
        <div class="seach_left">
          <img src="../../assets/img/all_zc1.png" alt="">
          <span>标的所在地</span>
        </div>
        <div class="seach_right">
          <el-radio-group  class="seach_group" @change="changeDate(2)">
            <el-radio-button >不限</el-radio-button>
          </el-radio-group>
          <el-select  placeholder="选择具体省份" clearable  filterable v-model="query.province" class="select_city" @change="changeDate(0)">
            <el-option
            v-for="item in province"
            :key="item.id"
            :label="item.name"
            :value="item.province_code" >
            </el-option>
          </el-select>
          <el-select  placeholder="选择具体城市" clearable  filterable v-model="query.city" class="select_city" @change="changeDate(1)">
            <el-option
            v-for="item in city"
            :key="item.id"
            :label="item.name"
            :value="item.city_code" >
            </el-option>
          </el-select>
          <el-select  placeholder="选择具体区镇" clearable  filterable v-model="query.area" class="select_city" @change="changeDate(3)">
            <el-option
            v-for="item in area"
            :key="item.id"
            :label="item.name"
            :value="item.area_code">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="seach">
        <div class="seach_left">
          <img src="../../assets/img/all_zc2.png" alt="">
          <span>标的状态</span>
        </div>
        <div class="seach_right">
          <el-radio-group v-model="query.asset_status" class="seach_group" @change="changeDate(3)">
            <el-radio-button label="" >不限</el-radio-button>
            <el-radio-button :label="1">挂牌中</el-radio-button>
            <el-radio-button :label="2">交易中</el-radio-button>
            <el-radio-button :label="3">已成交</el-radio-button>
            <el-radio-button :label="4">已摘牌</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="seach1">
      <div class="seach1_item">
        <span>
          全部资产 （
          <span class="seach1_item_span">{{pageTotal}}</span>
          ）
        </span>
      </div>
      <div class="seach1_item">
        <el-select  placeholder=""    v-model="query.sort" @change="changeDate(3)">
          <el-option :key="0" label="标的价格升序" value="create_time asc"></el-option>
          <el-option :key="1" label="标的价格降序" value="create_time desc"></el-option>
          <el-option :key="2" label="挂牌时间升序" value="price asc"></el-option>
          <el-option :key="3" label="挂牌时间降序" value="price desc"></el-option>
        </el-select>
      </div>
      <div class="seach1_item">
        <el-date-picker
          v-model="query.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd"
          @change="changeDate(3)"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期">
        </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="changeDate(3)" class="seach_button">确定</button>
      </div>
    </div>

    <div class="tabs">
      <div class="tabs_item" @click="goDetails(item.id)" v-for="(item,index) in listingList" :key="index">
        <img :src="item.serial_img" alt="" class="tabs_item_img">
        <div class="tabs_item_lable">{{item.serial_number}}</div>
        <div class="tabs_item_content">
          <p class="tabs_item_content_title">{{item.serial_name}}</p>
          <p class="tabs_item_content_p">
            <span>资产价格： </span>
            <span class="tabs_item_content_span">￥</span>
            <span class="tabs_item_content_span tabs_item_content_span1">{{item.price}}</span>
          </p>
          <p class="tabs_item_content_p">
            <span>标的类型： </span>
            <span class="tabs_item_content_span2 tabs_item_content_span3">{{item. serial_type_name}}</span>
          </p>
          <p class="tabs_item_content_p">
            <span>所在地： </span>
            <span class="tabs_item_content_span2 tabs_item_content_span3">{{item.address}}</span>
          </p>
          <p class="tabs_item_content_p">
            <span>有效日期： </span>
            <span class="tabs_item_content_span2 ">{{item.effective_date}}前</span>
          </p>
        </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 {assetClassInfo,getProvince,getCity,getArea,} from '../../api/index'
export default {
  data(){
    return{
      query:{
        page:1,
        limit:12,
        province:'',
        city:'',
        area:'',
        serial_type:'',
        asset_status:'',
        date:'',
        min_price:'',
        max_price:'',
        sort:'create_time desc'
      },
      pageTotal:0,
      listingList:[],
      province:[],
      city:[],
      area:[],
    }
  },
  created(){
    this.getData()
    this.getProvince();
  },

  methods:{
    changeDate(type){
      if(type==0){
        this.getCity()
      }else if(type==1){
        this.getArea()
      }else if(type==2){
        this.query.province=''
        this.query.city=''
        this.query.area=''
      }
      console.info(this.query)
      this.getData()
    },
    getProvince(){
      getProvince().then(res => {
        if(res.code==100){
          this.province=res.list
        }
      })
    },
    getCity(){
      let data={
        code:this.query.province
      }
      getCity(data).then(res=>{
        if(res.code==100){
          this.city=res.list
        }
      })
    },
    getArea(){
      let data={
        code:this.query.city
      }
      getArea(data).then(res=>{
        if(res.code==100){
          this.area=res.list
        }
      })
    },
    getData(){
      assetClassInfo(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.listingList=res.data.list;
          this.pageTotal=res.data.count
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'page', val);
      // this.getData();
    },
    goDetails(id){
      this.$router.push({path:'/AssetDetails',query:{id:id}})
    }
  }
}
</script>
<style scoped>
  .body{
    width: 1200px;
    margin: 0 auto;
  }
  .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_item{
    padding: 0 15px;
    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;
  }
  .seach{
    padding: 25px 0;
    border-bottom: 1px solid #D7D7D7;
    display: flex;
  }
  .seach:last-child{
    border-bottom: none;
  }
  .seach_left{
    display: flex;
    align-items: center;
    font-weight: 650;
    font-size: 14px;
    color: #C94C4C;
    width: 130px;
    margin-right: 20px;
  }
  .seach_group >>> .el-radio-button--small .el-radio-button__inner{
    border: none;
    border-radius: 0;
  }
  .seach_group >>> .el-radio-button__orig-radio:checked+.el-radio-button__inner{
    color: #FFF;
    background-color: #C94C4C;
    box-shadow: none;
  }
  .seach_left img{
    width: 17px;
    height: 17px;
    margin-right: 5px;
  }
  .el-dropdown-link{
    color: #EAB1B1;
    cursor: pointer;
  }
  .tabs{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }
  .tabs_item{
    width: 283px;
    height: 300px;
    border: 1px solid #E9B7B7;
    margin-bottom: 20px;
    box-sizing: border-box;
    position: relative;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 20px;
  }
  .tabs_item:nth-child(4n+4){
    margin-right: 0;
  }
  .tabs_item_img{
    width: 100%;
    height: 170px;
    border-radius: 5px 5px 0 0;
  }
  .tabs_item_lable{
    width: 100px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #FFFFFF;
    background: #C94C4C;
    z-index: 100;
    line-height: 25px;
    text-align: center;
  }
  .tabs_item_lable::after{
    content: '';
    border-top: 12.5px solid transparent;
    border-left: 10px solid #C94C4C;
    border-bottom: 12.5px solid transparent;
    position: absolute;
    top: 0;
    left: 100px;
  }
  .breadcrumb{
    margin-top: 30px;
  }
  .el-breadcrumb{
    font-size: 18px;
  }
  .tabs_item_content{
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    height: 150px;
    margin-top: -40px;
    /* padding: 10px 10px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    /* padding-bottom: 10px; */
  }
  .tabs_item_content_title{
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 14px;
    background: rgba(238, 238, 238, 0.5);
    box-sizing: border-box;
    padding: 10px;
  }
  .tabs_item_content_p{
    color: #7F7F7F;
    font-size: 12px;
    padding-left: 10px;
  }
  .tabs_item_content_span{
    color: #C94C4C;
  }
  .tabs_item_content_span1{
    font-size: 18px;
  }
  .tabs_item_content_span2{
    color: #333333;
  }
  .tabs_item_content_span3{
    font-weight: bold;
  }
</style>
