<template>
  <view class="big">
    <view class="refundStep">
      <view class="refund_title">退款进程</view>
      <view class="refund_list">
        <view :class="item.status===1?'refund_item_action':'refund_item'" v-for="(item,index) in newList" :key="index">
          <view class="item">
            <view :class="item.status===1?'refund_info_action':'refund_info'">
              <view :class="item.status===1?'info_ciycle_action':'info_ciycle'"></view>
              <view class="info_text">
                <view :class="item.status===1?'info_title_action':'info_title'">{{item.title}}</view>
                <view :class="item.status===1?'info_time_action':'info_time'">2022年6月2日09:35:27</view>
              </view>
            </view>
          </view>
        </view>

      </view>
      <view class="morInfo" v-if="list.length>4" @click="watchMore">
        
        <view>更多退款信息</view>
        <view  class="function_item_icon">
					<image :style="{'height':'100%','width':'100%'}" :src="'../../../static/imgs/jiantoulan.png'" />
				</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
        flag:false,
        list:[
            {
                title:'退款成功',
                time:'2022年6月2日09:35:27',
                status:0
            },
            {
                title:'退款中',
                time:'2022年6月2日09:35:27',
                status:1
            },
            {
                title:'审核中',
                time:'2022年6月2日09:35:27',
                status:0
            },
            {
                title:'退款申请已提交',
                time:'2022年6月2日09:35:27',
                status:0
            },
            {
                title:'退款申请已提交',
                time:'2022年6月2日09:35:27',
                status:0
            },
        ],
        oldList:[],
        newList:[]
    };
  },
  mounted() {
    if(this.list.length>4){
        this.newList = [...this.list].splice(0,4)
        this.flag = false
    }else{
        this.newList = this.list
    }
  },
  methods:{
    watchMore(){
        if(this.flag){
            this.newList = [...this.list].splice(0,4)
        }else{
            this.newList = this.list
        }
        this.flag = !this.flag
    }
  }
};
</script>

<style scoped lang="scss">
.big {
    background: #F8F8F8;
    padding-top: 32rpx;
    height: 100vh;
}
.refundStep {
  background: white;
  margin: 0rpx 32rpx 32rpx 32rpx;
  padding-bottom: 32rpx;
  overflow: hidden;

  .refund_title {
    margin: 38rpx 30rpx;
    height: 44rpx;
    margin-bottom: 42rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
  }
  .refund_list {
    margin: 0rpx 32rpx 0rpx 35rpx;

    .refund_item {
      height: 100rpx;
      border-left: 2rpx solid #ECECEC;
      .item {
        position: relative;
        .refund_info {
          width: 622rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          top: -12rpx;
          left: -8rpx;

          .info_ciycle {
            width: 18rpx;
            height: 16rpx;
            border: 2rpx solid #ECECEC;
            background-color: white;
            border-radius: 50%;
            box-sizing: border-box;
          }

          .info_text {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 40rpx;

            .info_title {
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }

            .info_time {
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
      }
    }

    .refund_item_action {
      height: 100rpx;
      border-left: 2rpx solid #ECECEC;
      .item {
        position: relative;
        .refund_info_action {
          width: 622rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          top: -12rpx;
          left: -10rpx;
          .info_ciycle_action {
            width: 22rpx;
            height: 20rpx;
            background: #0050f6;
            // border: 1rpx solid red;
            border-radius: 50%;
            box-sizing: border-box;
          }
          .info_text {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 40rpx;

            .info_title_action {
              font-size: 24rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
            }

            .info_time_action {
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }
    }

    .refund_item:last-child {
      height: 25rpx;
      border: 1px solid rgba(255, 255, 255, 0);
    }
    .refund_item_action:last-child {
      height: 25rpx;
      border: 1px solid rgba(255, 255, 255, 0);
    }
  }
  
  .morInfo {
    margin-top: 40rpx;
    margin-right: 32rpx;
    text-align: right;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0050F6;
    line-height: 34rpx;
    display: flex;
    justify-content: flex-end;

    .function_item_icon {
			margin-left: 6rpx;
			width: 11.27rpx;
			height: 15.68rpx;
		}
  }
}
</style>