<template>
  <!-- 团队头像 -->
  <main-page header-bg="bg-transparent" title-color="text-white">
    <template slot="left">
      <app-icon
        type="png"
        class-name="w-6.5 w-6.5"
        :path="require('@/assets/icons/left-arrow-white.png')"
        @click="$router.go(-1)"
      />
    </template>
    <!-- 顶部右侧插槽 -->
    <template slot="right">
      <app-icon
        type="png"
        class-name="h-1 w-5"
        :path="require('@/assets/icons/dot-h.png')"
        @click="show=true"
      />
    </template>
    <div class="px-4 pt-14 border h-screen bg-black">
      <van-uploader :after-read="afterRead">
        <div class="wrapper rounded-full overflow-hidden mx-auto mt-12 bg-gray-100 flex items-center justify-center">
          <img :src="getImageUrl" alt="">
          <!-- {{ file.name }} -->
        </div>
      </van-uploader>
      
      <van-action-sheet
        v-model="show"
        cancel-text="取消"
        :actions="actions"
        @select="onSelect"
      />
      <!-- <van-uploader :after-read="afterRead" /> -->
    </div>
    <div class="fixed bottom-0 left-0 w-full px-4 py-2">
      <c-button round @click="$router.go(-1)">确定</c-button>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { ActionSheet, Uploader } from 'vant'

Vue.use(ActionSheet).use(Uploader)

export default Vue.extend({
  components:{ 
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'main-page': () => import('@/layout/main-page.vue')
  },
  name: 'TeamAvator',
  data() {
    return {
      show: false,
      actions: [
        { name: '拍照' },
        { name: '从手机相册选择' },
      ],
      file: ''
    }
  },
  computed: {
    getImageUrl(): string {
      if (this.file) {
        return (this.file as any).content
      } else {
        return require('@/assets/images/33.png')
      }
    }
  },
  methods: {
    onSelect(item: string) {
      (document.getElementsByTagName('input')[0] as HTMLInputElement).click()
      this.show = false
    },
    afterRead(file: any) {
      this.file = file
    }
  }
})
</script>

<style lang="less" scoped>
  .wrapper {
    height: 80vw;
    width: 80vw;
  }
  /deep/ .van-uploader {
    width: 100%;
    &__wrapper {
      justify-content: center !important;
    }
  }
</style>
