<template>
    <Layout-Child>
        <div class="mt-6 mx-auto w-11/12 ">
            <div class="py-20  mx-auto flex  flex-col justify-center items-center">
               <img :src="srcData" class="  w-40 object-cover rounded-full shadow-lg">
            </div>
        </div>
        <div class="fixed bottom-0 w-full left-0 z-30">
            <app-btn text="确认上传" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none'></app-btn>
        </div>
    </Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data(){
    return{
      srcData:'' as string | ArrayBuffer | null
    }
  },
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
    //    'app-cell':()=>import('@/components/common/Cell.vue'),
        'app-btn':()=>import('@/components/common/Btn.vue')
  },
  mounted() {
    this.printFile(this.fileData[0])
  },
  methods:{
     printFile(file:any) {
        const that =this
        const reader = new FileReader();
        reader.onload = function(evt) {
          if(evt.target){
             console.log(evt.target.result);
            that.srcData = evt.target.result;
          }
          
        };
        reader.readAsDataURL(file);
      }
  },
  computed:{
    fileData:function(){
      return this.$store.state.app.fileData;
    }
  }
});
</script>

<style lang="less" scoped>

</style>