<template>
  <div class="">
    <main-page left-arrow @click-left="$router.go(-1)" class=" relative">
      <template slot="right">
        <app-icon
          type="png"
          class-name="w-6.5 h-6.5"
          :path="require('@/assets/icons/add-friend-group.png')"
          @click="$router.push('/team/add-member')"
        />
      </template>
      <div class="left-border w-0.5 bg-border-lighter h-full left-8 absolute"/>
      <!-- 申请信息 -->
      <div class="request relative px-4 pt-14">
        <!-- 时间 -->
        <!-- 申请详情 -->
        <div :details="List" v-for="(item,index) in List" :key="index">
          <p class=" text-right text-xs text-text-secondary pr-4 pb-2 ">{{item.time}}</p>
          <div v-for="(detail,i) in item.children" :key="i">
            <request :detail="detail" class=" pb-4" @change="changeState($event,index,i)" />
          </div>
        </div>
      </div>
    </main-page>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { List, Info, details } from '@/DTO/request'

export default Vue.extend({
  name:'requestmanagement',
  components:{
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'request':()=>import('@/views/team/components/request.vue')
  },
  methods: {
    handleClickLeft() {
      console.log('click left')
    },
    changeState(state:string,index:number,i:number){
      this.List[index].children[i].current = state   
      // console.log(state,index,i);   
    }
  },
  props:{
    details:{
      type: Object as PropType<List>
    },
    detail:{
      type: Array as PropType<Array<Info>>
    }
  },
  data(){
    let List :Array<List> = details
    return{
      List
    }
  }
});
</script>

<style>

</style>