<template>
  <div id="app">
    <mu-type :typeList="list"></mu-type>
    <mu-textarea></mu-textarea>
    <mu-file-list :files="files" :maxNum="maxNum"  v-on:add-file="handleAddFile" v-on:close-file="handleCloseFile"></mu-file-list>
  </div>
</template>
<script>
import btnType  from 'muse-ui/type';
import Files  from 'muse-ui/files';
import TextArea  from 'muse-ui/textarea';
export default {
    name: 'app',
    components:{
      'mu-file-list':Files,
      'mu-textarea':TextArea,
      'mu-type':btnType
    },
    data: function () {
      return{
        list:[{
          Id:'1',
          name:"截屏反馈"
        },{
          Id:'1',
          name:"截屏反馈"
        },{
          Id:'1',
          name:"截屏反馈"
        },{
          Id:'1',
          name:"截屏反馈"
        }],
        files:[{
          id : 1,
          url : 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
          state:'error'
        },{
          id : 2,
          url : 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
          state:'loading'
        },{
          id : 3,
          url : 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
          state:'loading'
        }],
        maxNum:4
      }
    },
    created: function() {
    },
    mounted:function(){
      var self = this;
      setTimeout(function(){
        self.editFiles();
      },3000);
    },
    methods: {
      editFiles(){
        this.files.map((file)=>{
          if(file.id == '1'){
            file.state = 'error';
          }else if(file.id == '2'){
            file.state = 'success'
            file.url = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc7651.png';
            setTimeout(function(){
              file.url = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
            },2000);
          }
        });
        console.log(JSON.stringify(this.files));
      },
      handleAddFile(){
        console.log('添加');
      },
      handleCloseFile(){
        console.log('关闭');
      }
    }
}
</script>
<style>
#app{
background: #f3f4f5;
}
</style>
