<template>
  <view class="big">
    <view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}">
			<u-icon @click="Utils.goBack()"  name="arrow-left" color="#000000" size="20"></u-icon>
			<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">退款详情</view>
		</view>
    <view class="refundStep">
      <view class="refund_title">退款进程</view>
      <view class="refund_list" v-for="(item,index) in newList">
        <view :class="index===0?'refund_item_action':'refund_item'" v-for="(listItem,index) in item.list" :key="index">
          <view class="item">
            <view :class="index===0?'refund_info_action':'refund_info'">
              <view :class="index===0?'info_ciycle_action':'info_ciycle'"></view>
              <view class="info_text">
                <view :class="index===0?'info_title_action':'info_title'">{{listItem.title}}</view>
                <view :class="index===0?'info_time_action':'info_time'">{{listItem.time}}</view>
              </view>
            </view>
          </view>
        </view>

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

<script>
import Utils from '@/utils/utils'
import order from '@/request/order'
export default {
  data() {
    return {
        flag:false,
        Utils,
        list:[
            {
               skuName:'',
               list: [{
                   title:'退款申请已提交',
                   time:'2022年6月2日09:35:27',
                   state:0,
               },
               {
                   title:'退款中',
                   time:'2022年6月2日09:35:27',
                   state:1,
               },
               {
                   title:'退款成功',
                   time:'2022年6月2日09:35:27',
                   state:2,
               },
               {
                   title:'退款失败',
                   time:'2022年6月2日09:35:27',
                   state:3,
               }]
            }
        ],
        oldList:[],
        newList:[]
    };
  },
  computed: {
    systemBarHeight(){
      return  this.$store.state.user.systemBarHeight
    },
  },
  mounted() {

    this.getRefundInfo()
  },
  methods:{
    async getRefundInfo(){
      let orderId = uni.getStorageSync('orderId');
      const { data } = await order.getRefundInfo(orderId);
      const statusDesc = [
        {
          state:0,
          desc:'退款申请已提交'
        },
        {
          state:1,
          desc:'退款中'
        },        
        {
          state:2,
          desc:'退款成功'
        },        
        {
          state:3,
          desc:'退款失败'
        },
      ]
      const newList = []
      const test = [{
        state:3,
        createdAt:'111',
        updatedAt:'222'
      },
      {
        state:2,
        createdAt:'111',
        updatedAt:'222'
      }
      ]
      data.data.map(item => {
        const list = []
        for(let i=0;i<=item.state;i++){
          const time = ''
          if(i=== 0||i === 1){
            time = item.createdAt
          }else{
            time = item.updatedAt
          }
          list.push({
            title:statusDesc[i].desc,
            time:time,
            state:i
          })
          if(i===3){
            list.splice(2,1)
          }
        }
        newList.push({
          skuName:'',
          list:list.sort((a,b)=>{return b.state - a.state})
        })
      })

      this.list = newList
      if(this.list.length>1){
          this.newList = [...this.list].splice(0,1)
          this.flag = false
      }else{
          this.newList = this.list
      }
      console.log(newList, this.newList)
    },
    watchMore(){
        if(this.flag){
            this.newList = [...this.list].splice(0,1)
        }else{
            this.newList = this.list
        }
        this.flag = !this.flag
    }
  }
};
</script>

<style scoped lang="scss">
.big {
    background: #F8F8F8;
    height: 100vh;

  .topBar{
		width: 100%;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999;
		padding-left: 34rpx;
		// .arrow-left {
		// 	margin-left: 20rpx;
		// }
		.tabTitle{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			text-align: center;
			width: 79%;
			color: #333333
		}
	}
}
.refundStep {
  background: white;
  margin: 32rpx 32rpx 32rpx 32rpx;
  padding-bottom: 32rpx;
  overflow: hidden;

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

    .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: -8rpx;
          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);
    }
  }
  
  .refund_list:nth-child(1) {	
    margin-top: 38px;
  }

  .refund_list:nth-child(n + 3) {	
    margin-top: 38px;
  }

  .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;

      .arrow-right-select-down {
          animation-name: upAnidown;
          animation-duration: 0s;
          animation-fill-mode:forwards;
          @keyframes upAnidown {
            0% {
              transform: rotate(0);
              -webkit-transform: rotate(0);
            }
            100% {
              transform: rotate(-90deg);
              -webkit-transform: rotate(-90deg);
            }
          }
      };
      .arrow-right-select-right {
          animation-name: upAniup;
          animation-duration: 0s;
          animation-fill-mode:forwards;
          @keyframes upAniup {
            0% {
              transform: rotate(90deg);
              -webkit-transform: rotate(90deg);
            }
            100% {
              transform: rotate(0deg);
              -webkit-transform: rotate(0deg);
            }
          }
      }
		}
  }
}
</style>