<template>
  <div class='adminbank-project-list'>
    <transition-group name="list">
      <div class='list' v-for='(val, key) in Data_projectList' :key='key'>
        <a href='val.url' target='_blank'>
          <span :class='Data_bone'>{{val.aleph}}</span>
          <p :class='Data_bone'>{{val.leader}}</p>
          <h2 :class='Data_bone'>{{val.name}}</h2>
        </a>
      </div>
    </transition-group>
  </div>
</template>

<script>
  import './style.less';
  
  export default {
    name: 'CardProjectList',
    data () {
      return {
        Data_bone: {
          'bone': true
        },
        Data_projectList: [
          {
            aleph: 'H',
            leader: 'Team Leader: Leader',
            name: 'Show project name',
            url: '#'
          },
          {
            aleph: 'H',
            leader: 'Team Leader: Leader',
            name: 'Show project name',
            url: '#'
          },
          {
            aleph: 'H',
            leader: 'Team Leader: Leader',
            name: 'Show project name',
            url: '#'
          },
          {
            aleph: 'H',
            leader: 'Team Leader: Leader',
            name: 'Show project name',
            url: '#'
          },
        ]
      }
    },
    created () {
      let list = [
        {          
          name: '测试专用自动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: 'ssss'
        },
        {          
          name: 'Cubes服务质量可视化',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: 'ssss'
        },
        {          
          name: '服务质量可视化',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: 'ssss'
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '动化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
        {          
          name: '1化发布系统测试专用自动化发布系统',
          url: 'fjiowj.sjfoiwe.sjfoiewj',
          leader: ''
        },
      ]
      
      let projectList = list.map(val => {
        return {
          aleph: val.name.substr(0, 1),
          leader: `Team Leader: ${val.leader || this.$lang('UNKNOWN')}`,
          name: val.name,
          url: val.url
        }
      })
      
      setTimeout(() => {
        this.Data_bone = false;
        this.Data_projectList = projectList;
      },1000)
    },
    methods: {
    }
  }
</script>