<template>
  <div class="wrap" >
    <div class="headerWrap">
      <div v-if="isWebFunc()" style="opacity: 0;" class="back"></div>
      <img v-else class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
      <span>求购</span>
      <div style="opacity: 0;" class="back"></div>
    </div>
    <div class="contentWrap">
      <div class="titleWrap wrapCommon">
        <div class="info">
          <span>{{ detailInfo.vehicleType }}</span>
        </div>
        <div class="time">
          <span>{{ detailInfo.createTime?.substring(0,10) }}</span><span>发布</span>
        </div>
        <div class="priceWrap">
          <div class="price">
            售价（含税）：
            <span class="num">{{formatNumber(detailInfo.minPrice) }}</span> <span  class="danwei">万</span>
            <span class="su">~</span>
            <span class="num">{{formatNumber(detailInfo.maxPrice) }}</span> <span  class="danwei">万</span>
          </div>
          <div class="viewNum">{{detailInfo.attentionCount}}人想卖<span>{{detailInfo.browseCount}}人浏览</span></div>
        </div>
        <div class="priceWrap">
          <div class="commonColor" style="margin-top: 5px">
            车源ID: &nbsp;&nbsp;&nbsp;&nbsp;{{ detailInfo.code }}
            <img class="copyIcon" @click="copyHandler(detailInfo.code)" src="@/assets/copy.png" />
          </div>
        </div>
      </div>
      <div class="detailInfoWrap wrapCommon">
        <div>
          <img class="descImg firstDescImg" src="@/assets/secondHandCar/details.png" />
        </div>
        <div class="descItem descCommon">
          <div class="itemInfo">
            <el-tooltip class="item" effect="dark" :content="detailInfo.vehicleType" placement="top">
              <span style="cursor: pointer">{{ detailInfo.vehicleType }}</span>
            </el-tooltip>
            <span>车辆类型</span>
          </div>
          <div class="suGang"></div>
          <div class="itemInfo">
            <span>{{ detailInfo.boardType?.label }}&nbsp;&nbsp;</span>
            <span>落板方式</span>
          </div>
          <div class="suGang"></div>
          <div class="itemInfo">
            <span>{{ detailInfo.emissionStandard?.label }}</span>
            <span>排放标准</span>
          </div>
        </div>
        <div>
          <img class="descImg"  src="@/assets/secondHandCar/description.png" />
        </div>
        <div class="descCommon desc">{{detailInfo.desc}}</div>
      </div>
      <div  v-if="isList && !detailInfo.selfSupplierPublish"  class="btn"  @click="noMultipleClicks(handle)">我有车源</div>
    </div>
 </div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {carInfoDetail, saveRecord} from "@/api/secondHandCar";
import {Dialog} from "vant";
export default {
  name: "wantBuySale",
  mixins:[myMixins],
  data(){
    return{
      noClick:true,
      id:'',
      queryType:'',
      detailInfo:'',
      duration:'',
      startTime: null, // 记录进入时间
      isList:false,
      recordResponseId:'',//信息记录获取的id，用于关闭界面掉接口所需参数
    }
  },
  async mounted() {
    window.addEventListener('message', (event) => {
      if (event.data === 'dialogClosed') {
        console.log('Dialog 已关闭');
        this.getDuration(1)
      }
    });
    this.startTime = new Date();
    const urlParams = new URLSearchParams(window.location.search);
    this.id=this.$route.query.id ||  urlParams.get('id');
    this.queryType=this.$route.query.queryType || urlParams.get('queryType');
    this.isList=this.$route.query.isList || urlParams.get('isList');
    if( this.id) {
      let res = await carInfoDetail({
        id: this.id,
        queryType: this.queryType,
      })
      this.detailInfo = res?.data
      let result=await saveRecord({type: 1, carInfoId: this.id, duration:'',id:''});
      this.recordResponseId=result?.data?.id
    }
  },
  destroyed() {
    this.getDuration(1)
  },
  methods:{
    copyHandler(copyText){
      let inputNode = document.createElement('input')  // 创建input
      inputNode.value = copyText // 赋值给 input 值
      document.body.appendChild(inputNode) // 插入进去
      inputNode.select() // 选择对象
      document.execCommand('Copy') // 原生调用执行浏览器复制命令
      inputNode.className = 'oInput'
      inputNode.style.display = 'none' // 隐藏
      this.$toast('复制成功')
    },
    getDuration(type){
      const endTime = new Date();
      const duration = (endTime - this.startTime) / 1000; // 计算时长（秒）
      this.saveRecord(duration,type);
    },
    async saveRecord(duration,type){
      await saveRecord({type:type,carInfoId:this.id,duration,id:this.recordResponseId || ''})
    },
    handle(){
      this.getDuration(2)
      Dialog.alert({
        message:this.detailInfo.contactNumber	,
        confirmButtonText:this.isWebFunc() ? '确定' : '拨打电话',
        showCancelButton:true,
      }).then(() => {
        if(!this.isWebFunc()){
          window.location.href = `tel:${this.detailInfo.contactNumber}`;
        }
      }).catch(() => {
        // on cancel
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
.wrap {
  @include wh(100%, 100%);
  position: relative;
  background-color: #F6F6F6;
}
.headerWrap{
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  .back{
    @include wh(15px,15px);
  }
  span{
    font-weight: bold;
    font-size: 16px;
    color: #203152;
  }
}
.contentWrap{
  height: calc(100% - 42px);
  overflow-y: auto;
  .wrapCommon{
    width: 100%;
    background: #FFFFFF;
    border-radius: 6px;
    backdrop-filter: blur(5.602678571428572px);
    box-sizing: border-box;
    margin: 12px 0;
  }
  .titleWrap{
    margin-top: 10px;
    height: 108px;
    padding: 18px 0 15px 21px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .info{
      font-weight: 600;
      font-size: 15px;
      color: #212020;
      line-height: 21px;
      span{
        margin-right: 10px;
      }
    }
    .time{
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 17px;
      span:first-child{
        margin-right: 20px;
      }
    }
    .priceWrap{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .viewNum{
        //color: #ccc;
        margin-right: 15px;
        span{
          margin-left: 10px;
        }
      }
    }
    .price{
      color: #FF5533;
      font-weight: 600;
      display: flex;
      align-items: center;
     .num{
        font-size: 20px;
       margin-right: 4px;
      }
      .danwei,.su{
        font-size: 11px;
      }
      .su{
        margin: 0 4px;
      }
    }
  }
  .detailInfoWrap{
    box-sizing: border-box;
    padding: 18px 28px 15px 22px;
    .descImg{
      @include wh(72px, 19px);
    }
    .firstDescImg{
      margin-bottom: 24px;
    }
    .descCommon{
      width: 100%;
      box-sizing: border-box;
      padding-left: 15px;
    }
    .descItem{
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 20px;
    }
    .itemInfo{
      display: flex;
      flex-direction: column;
      width: 28%;
      span:first-child{
        width: 100%;
        font-weight: bold;
        font-size: 14px;
        color: #282828;
        line-height: 20px;
        margin-bottom: 2px;
        white-space: nowrap; /* 强制文本在一行显示 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }
      span:last-child{
        font-weight: 400;
        font-size: 10px;
        color: #999999;
        line-height: 14px;
      }
    }
    .suGang{
      width: 1px;
      height: 8px;
      border-right: 1px solid #999999;
      opacity: 0.5;
    }
    .desc{
      font-weight: 400;
      font-size: 12px;
      color: #282828;
      margin-top: 10px;
    }
  }
  .btn{
    width: 296px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    color: #FFFFFF;
    background: #4A7FEB;
    margin: 0 auto;
    font-size: 15px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
}
.commonColor {
  color: #999999 !important;
  display: flex;
  align-items: center;
}
.copyIcon {
  width: 35px;
  height: 15px;
  margin-left: 10px
}
</style>
