<template>
  <div class="app-container" >
    <van-nav-bar
      title="我的竞价"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
    >
      <div class="list_li" v-for="(item,index) in biddinglist" :key="index" >

        <div class="list_li_tt" @click="$router.push({name:'projectDetail', query: {id:item.id}})">
          <p>{{item.projectName}}</p>
          <p :style="{
                color: {
                  '未开始': '#007E72',
                  '已结束': '#848484',
                  '竞价中': '#c21F3a',
                }[item.projectShowStatus]}">{{item.projectShowStatus}}</p>
        </div>
        <div class="list_li_time" @click="$router.push({name:'projectDetail', query: {id:item.id}})">
          <van-count-down :time="item.biddingStopTime">
            <template #default="timeData">
              <span style="color: #848484;font-size: 14PX;">距结束</span>
              <span :style="{'font-size':'14px',
                color: {
                  '未开始': '#007E72',
                  '已结束': '#848484',
                  '竞价中': '#c21F3a',
                }[item.projectShowStatus]}">
                    <span style="font-size: 18PX;">{{timeData.days}}</span>天
                    <span style="font-size: 18PX;">{{timeData.hours}}</span>时
                    <span style="font-size: 18PX;">{{timeData.minutes}}</span>分
                    <span style="font-size: 18PX;">{{timeData.seconds}}</span>秒
                  </span>
            </template>
          </van-count-down>
        </div>
        <div class="list_li_time" @click="$router.push({name:'projectDetail', query: {id:item.id}})">
          <p>
            <span style="color: #848484">当前价格</span>
            <span :style="{'font-size':'14px',
                  color: {
                    '未开始': '#007E72',
                    '已结束': '#848484',
                    '竞价中': '#c21F3a',
                  }[item.projectShowStatus]}" v-if="item.biddingType=='1'&&item.projectShowStatus=='竞价中'">
                    *
                  </span>

            <span :style="{'font-size':'14px',
                  color: {
                    '未开始': '#007E72',
                    '已结束': '#848484',
                    '竞价中': '#c21F3a',
                  }[item.projectShowStatus]}" v-if="(item.biddingType!='1'&&item.money) || item.projectShowStatus=='已结束'">
                    {{item.money}}{{item.unit}}
                  </span>

            <span :style="{'font-size':'14px',
                  color: {
                    '未开始': '#007E72',
                    '已结束': '#848484',
                    '竞价中': '#c21F3a',
                  }[item.projectShowStatus]}" v-if="item.biddingType!='1'&&!item.money">
                    暂无出价
            </span>
          </p>
        </div>
        <div class="list_li_time">
          <p @click="$router.push({name:'projectDetail', query: {id:item.id}})">
            <span style="color: #848484">我的出价</span>
            <span :style="{'font-size':'14px',
              color: {
                '未开始': '#007E72',
                '已结束': '#848484',
                '竞价中': '#c21F3a',
              }[item.projectShowStatus]}" v-if="item.biddingType!='自由竞价'&&item.money">
                {{item.memberMoney}}{{item.unit}}
            </span>
          </p>
          <p class="showList" @click="showList(item.id)">竞价记录</p>
        </div>
      </div>
    </van-list>

    <van-dialog v-model="show" title="出价记录">
      <div style="height: 50vh;overflow-y: scroll;padding: 0 5PX;">
        <van-cell title="出价金额" value="出价时间" />
        <van-cell v-for="(item,index) in userBiddingList" :key="index" :title="item.money" :value="item.loginTime" />
      </div>
    </van-dialog>

<!--    <van-list-->
<!--      v-model="loading"-->
<!--      :finished="finished"-->
<!--      finished-text="没有更多了"-->
<!--      @load="getList"-->
<!--      class="biddingList"-->
<!--    >-->
<!--      <van-cell v-for="(item , index) in biddinglist" :key="index" :to="{name:'projectDetail', query: {id:item.id}}">-->
<!--        <van-row>-->
<!--          <van-col span="24" style="font-size: 0.4rem;margin-bottom: 0.1rem;">{{item.projectName}}</van-col>-->
<!--        </van-row>-->
<!--        <van-row>-->
<!--          <van-col span="24">-->
<!--            <van-row class="row">-->
<!--              <van-col span="4" style="font-size: 0.2rem;">当前价格</van-col>-->
<!--              <van-col span="8" class="col"><span>{{item.money}}</span>{{item.unit}}</van-col>-->
<!--              <van-col span="4" style="font-size: 0.2rem;">我的出价</van-col>-->
<!--              <van-col span="8" class="col"><span>{{item.memberMoney}}</span>{{item.unit}}</van-col>-->
<!--            </van-row>-->
<!--            <van-row class="row">-->
<!--              <van-col span="5" style="font-size: 0.2rem;">距竞价结束</van-col>-->
<!--              <van-col span="19" class="col">-->
<!--                <van-count-down :time="item.biddingStopTime" format="DD天HH时mm分ss秒" style="font-size: 0.2rem;color: #C21F3A;margin-top: 3px;" />-->
<!--              </van-col>-->
<!--            </van-row>-->
<!--          </van-col>-->
<!--        </van-row>-->
<!--      </van-cell>-->
<!--    </van-list>-->
  </div>
</template>

<script>
import { getMember , biddinglist,userBiddingList } from "@/api/user/index";
import { getInfo } from "@/api/login/index";
import Cookies from "js-cookie";
export default {
  name: "userBidding",
  data() {
    return {
      loading: false,
      finished: false,
      biddinglist:[],
      userBiddingList:[],
      queryParams:{
        memberId: Cookies.get("memberId"),
        pageNum:1,
        pageSize:10
      },
      show:false
    };
  },
  created() {
  },
  methods: {
    // getInfo(){
    //   getInfo().then(response => {
    //     getMember(response.user.userId).then(response => {
    //       this.queryParams.memberId = response.data.id;
    //     });
    //   });
    // },
    getList(){
      biddinglist(this.queryParams).then(response => {
        for (var i = 0; i < response.rows.length; i++) {
          var nowTime = Date.parse(new Date());
          var timeTest = response.rows[i].biddingStopTime;
          var endTimes=timeTest.substring(0,10).split('-');
          timeTest = endTimes[1]+'/'+endTimes[2]+'/'+endTimes[0]+' '+timeTest.substring(10,19);
          var leftTime = Date.parse(timeTest)-nowTime;
          response.rows[i].biddingStopTime = leftTime ;
          this.biddinglist.push(response.rows[i]);
        }
        if(this.biddinglist.length >= response.total){
          this.finished = true;
          return;
        }else{
          this.loading = false;
          this.queryParams.pageNum += 1 ;
        }
      });
    },
    showList(id){
      this.show = true;
      userBiddingList({projectId:id,memberId:this.queryParams.memberId}).then(response => {
        this.userBiddingList = response.rows;
      });
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  /*background-color: #FFF;*/
}
.biddingList{
  padding: 0 2%;
}
.row{
  color: #666666;
  margin-bottom: 5px;
}
.col{
  color: #C21F3A;
  span{
    font-weight: bold;
  }
}
.list_li{
  width: 94%;
  background: #ffffff;
  border-radius: 8PX;
  margin: 10PX auto 0;
  padding: 3vw 5%;
  .list_li_tt{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10PX;
    border-bottom: 1PX solid rgb(239,239,239);
    align-items: center;
    p{
      line-height: 22PX;
      &:nth-child(1){
        color: #333333;
        font-weight: bold;
        font-size: 16PX;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        word-break: break-all;
        overflow: hidden;
      }
      &:nth-child(2){
        flex-shrink: 0;
        margin-left: 15PX;
      }
    }
  }

  .list_li_time{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10PX;
  }

}
  .showList{
    background: #007E72;
    color: #ffffff;
    padding: 5PX 10PX;
    border-radius: 20PX;
  }
/deep/ .van-cell__title{flex: 0.8}
/deep/ .van-cell__value{flex: 1.2}
</style>
