<template>
  <div>
    <div class="asset">
      <div class="asset_banner">
        <el-carousel trigger="click" height="425px" ref="carousel">
          <el-carousel-item v-for="(item,index) in listingList.serial_img" :key="index">
            <img :src="item" alt="" class="asset_banner_img">
          </el-carousel-item>
        </el-carousel>
        <div class="asset_banner1">
          <img :src="item" alt="" v-for="(item,index) in listingList.serial_img" :key="index" @click="setActiveItem(index)">
        </div>
      </div>

      <div class="asset_info">
        <p class="asset_info_title">{{listingList.serial_name}}</p>
        <p class="asset_info_p">
          <span>评估价格：</span>
          <span class="asset_info_span">¥ {{listingList.cartellino_type==1 ? listingList.price: listingList.start_auction_money}}</span>
        </p>
        <p class="asset_info_p">
          <span>资产类型：</span>
          <span class="asset_info_span1">{{listingList.asset_name}}</span>
        </p>
        <p class="asset_info_p">
          <span>所在地：</span>
          <span class="asset_info_span1">{{listingList.address_name}}</span>
        </p>
        <p class="asset_info_p">
          <span>交易方式：</span>
          <span class="asset_info_span1">{{listingList.buy_mode==1 ? '线下交易' : '线上交易'}}（{{listingList.goods_mode==1? '现场交付' :'物流配送'}}）</span>
        </p>
        <p class="asset_info_p">
          <span>有效日期：</span>
          <span class="asset_info_span1">{{listingList.endtime}} 前</span>
        </p>
        <p class="asset_info_p">
          <span>数量：</span>
          <el-input v-model="listingList.pay_count" placeholder="请输入标的所在地" class="seach_input" ></el-input>
          <span class="asset_info_span2">{{listingList.asset_unit}}（可购数量{{listingList.surplus_count}}{{listingList.asset_unit}}）</span>
        </p>
        <p class="asset_info_p1">浏览记录 {{listingList.views}}次</p>
        <div class="asset_info_button">
          <div class="purchase" @click="checkBuy(0)">
            <span>{{listingList.surplus_count==0?'正在交易':'立即购买' }}</span>
            <countDown :endTime="listingList.pay_overdue_time"   endText="已经结束了" class="countDown" v-if="listingList.surplus_count==0"></countDown>
          </div>
          <!-- <button class="purchase" @click="checkBuy(0)">{{listingList.surplus_count==0?'正在交易':'立即购买' }}</button> -->
          <button class="assessment" @click="checkBuy(1)">资产评估</button>
          <button class="collection" v-if="!listingList.is_collect" @click="collectAsset">放入收藏</button>
          <button class="collection" v-else @click="cancelCollectAsset">取消收藏</button>
        </div>
      </div>
    </div>

    <div class="asset1">
      <div class="asset1_title">
        <div class="asset1_title_item">标的物介绍</div>
        <!-- <div class="asset1_title_item">资产评估报告</div> -->
        <!-- <div class="asset1_title_item">购买须知</div>
        <div class="asset1_title_item">历史评价</div> -->
      </div>
      <div class="asset1_content">
        <div class="asset1_content_title">交易信息</div>
        <p>资产单价：¥ {{listingList.cartellino_type==1 ? listingList.price: listingList.start_auction_money}}</p>
        <p>资产单位："{{listingList.asset_unit}}"</p>
        <p>挂牌数量：{{listingList.count}}</p>
        <p>起购数量：{{listingList.pay_count}}</p>
        <p>付款方式：{{listingList.pay_mode==1?'网银支付':'对公转账'}}</p>
        <p>交易方式：{{listingList.buy_mode==1?'线下交易':'线上交易'}}</p>

        <div class="asset1_content_title">基础信息</div>
        <p>资产名称：{{listingList.serial_name}}</p>
        <p>资产类型：{{listingList.top_class_name}}</p>
        <p>资产所在地：{{listingList.province_name}} {{listingList.city_name}} {{listingList.area_name}}</p>
        <p>资产基本情况：{{listingList.serial_content}}</p>
        <p>内部决策情况：{{listingList.decision==1?'个人同意':listingList.decision==2?'股东会决议':listingList.decision==3?'董事会决议':listingList.decision==4?'总经理办公会决议':'其他'}}</p>
        <p v-if="listingList.decision==5">其他情况：{{listingList.decision_case}}</p>
        <p>挂牌时长：{{listingList.endtime}} 前</p>
      </div>
    </div>
  </div>
</template>
<script>
import {assetInfo,checkBuy,cancelCollectAsset,collectAsset} from '../../api/index'
export default {
  data(){
    return{
      number:1,
      query:{
        id:'',
        count:'',
        type:''
      },
      listingList:{}
    }
  },
  components: {
    countDown: () => import('../common/countDown.vue'),

  },
  created(){
    this.query.id=this.$route.query.id
    this.getData()
  },
  methods:{
    cancelCollectAsset(){
      cancelCollectAsset(this.query).then(res=>{
        console.info(res)
        if (res.code==100) {
          this.listingList.is_collect=false
          this.$message.success('取消收藏成功！')
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    collectAsset(){
      console.info(this.query)
      this.query.count=this.listingList.pay_count
      collectAsset(this.query).then(res=>{
        console.info(res)
        if (res.code==100) {
          this.listingList.is_collect=true
          this.$message.success('收藏资产成功！')
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    checkBuy(type){
      this.query.count=this.listingList.pay_count
      this.query.type=type
      checkBuy(this.query).then(res => {
        if(res.code==100){
          this.query.count=this.listingList.pay_count
          this.$router.push({path:'/order/confirmOrder',query:{step:0,id:this.query.id,count:this.query.count,type:0,orderType:type}})
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    getData(){
      assetInfo(this.query).then(res => {
        console.info(res)
        if(res.code==100){
          this.query.count=this.listingList.pay_count
          this.listingList=res.data;
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    setActiveItem(index){
      this.$refs.carousel.setActiveItem(index)
    }
  }
}
</script>
<style scoped>
  .assessment{
    background: #D0A6A5;
    font-size: 16px;
    color: #89201F;
    border: 1px solid #89201F;
    margin: 0 5px;
  }
  .asset1_content_title{
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
  }
  .asset{
    width: 100%;
    border: 1px solid #CCCCCC;
    height: 585px;
    margin-top: 20px;
    padding: 10px;
    display: flex;
  }
  .asset1{
    width: 100%;
    border: 1px solid #CCCCCC;
    padding-bottom: 15px;
    margin-top: 20px;
  }
  .asset_banner{
    width: 624px;
    height: 425px;
  }
  .asset_banner_img{
    width: 100%;
    height: 100%;
  }
  .asset_banner1{
    width: 624px;
    height: 108px;
    margin-top: 20px;
    display: flex;
    /* justify-content: space-between; */
  }
  .asset_banner1 img{
    width: 147px;
    height: 100%;
    margin-right: 20px;
  }
  .asset_info{
    margin-left: 20px;
    padding-top: 15px;
  }
  .asset_info_title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 60px;
  }
  .asset_info_p{
    font-size: 18px;
    color: #7F7F7F;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
  }
  .asset_info_span{
    font-size: 36px;
    color: #C94C4C;
  }
  .asset_info_span1{
    color: #333333;
    font-weight: bold;
  }
  .asset_info_span2{
    color: #333333;
  }
  .seach_input{
    width: 180px;
    height: 40px;
    border: 1px solid #CCCCCC;
    margin-left: 15px;
    margin-right: 5px;
  }
  .seach_input>>>.el-input__inner{
    border: none;
    padding-left: 5px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
  .asset_info_p1{
    font-size: 14px;
    color: #7F7F7F;
  }
  .asset_info_button{
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 53px;
  }
  .asset_info_button button{
    width: 150px;
    height: 100%;
    border-radius: 2px;
    font-size: 16px;
    cursor: pointer;
  }
  .purchase{
    border-radius: 2px;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    background-color: rgba(201, 76, 76, 1);
    border: none;
  }
  .collection{
    background-color: rgba(233, 173, 133, 1);
    border: 1px solid rgba(201, 76, 76, 1);
    color: rgba(201, 76, 76, 1);
  }
  .asset1_title{
    height: 70px;
    border-bottom: 1px solid #ADADAD;
    display: flex;
  }
  .asset1_title_item{
    height: 100%;
    width: 160px;
    font-size: 22px;
    color: #C94C4C;
    border-right: 1px solid #ADADAD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }
  .asset1_content{
    padding: 20px ;
  }
  .asset1_content p{
    margin-top: 10px;
  }
  .countDown{
    margin-top: 5px;
    font-size: 14px;
    color: white;
  }
</style>
