<template>
  <!-- 完善团队信息 -->
  <main-page
    :loading="loading"
    left-arrow
    @click-left="$router.go(-1)"
  >
    <avator-editor
      :show.sync="showEditor"
      :img-src.sync="defaultImg"
    />
    <div v-if="!showEditor" class="px-4 pt-14">
      <c-cell
        dot
        title="团队头像"
        @click="showEditor=true"
      >
        <template slot="right">
          <div class="w-7 h-7 rounded overflow-hidden flex items-center justify-center">
            <img v-if="defaultImg" class="max-w-full" :src="defaultImg" alt="">
          </div>
        </template>
      </c-cell>
      <input-cell
        class="mt-4"
        v-model="updateInfo.name"
        required
        :limit="20"
        label="团队名称"
        placeholder="请输入团队名称"
        error-msg="团队名称为空"
      />
      <input-cell
        class="mt-4"
        v-model="updateInfo.description"
        :limit="300"
        type="textarea"
        label="团队描述"
        placeholder="请输入团队描述"
      />
      <c-button class="mt-4" @click="save">保存</c-button>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import {updateEnterpriseDTO} from '@/service/moudles/service.dto'
import { EnterpriseInfo } from '@/store/store.dto'
import {getImgUrl} from '@/util/GetImgUrl'

export default Vue.extend({
  name: 'TeamInfo',
  components: {
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'avator-editor': () => import('@/views/team/components/avator-editor.vue')
  },
  data() {
    return {
      updateInfo: {} as updateEnterpriseDTO,
      defaultImg: require('@/assets/qrcode.png'),
      showEditor: false,
      loading: false,
      entInfo: {} as EnterpriseInfo
    }
  },
  mounted() {
    // const service = new BaseService()
    // service.useService
    this.entInfo = {...JSON.parse(localStorage.getItem('ENT_INFO') as string)}
    const {id, avatar, description, name} = this.entInfo
    this.updateInfo = {
      id,
      avatar,
      description,
      name
    }
    this.defaultImg = avatar
  },
  methods: {
    async save() {
      if (!this.updateInfo.name) {
        this.$toast('请检查填写信息')
        return
      }
      if (this.defaultImg.indexOf(';base64') > -1) {
        const imgUrlObj = await getImgUrl(this.defaultImg, this.entInfo.id)
        this.updateInfo.avatar = imgUrlObj.url
      } else {
        this.updateInfo.avatar = this.defaultImg
      }
      this.loading = true
      this.$service.enterprise.updateEnterprise(this.updateInfo)
        .then(async (res: any) => {
          this.loading = false
          const {data} = res
          if (data.code === this.$global.success) {
            this.$toast('修改成功')
            await this.getEntInfo(this.updateInfo.id)
            this.$router.go(-1)
          } else {
            this.$toast(data.msg)
          }
        }).catch(() => this.loading=false)
    },
    getEntInfo(id: string) {
      this.loading = true
      return this.$service.enterprise.getEnterpriseInfo({id})
        .then(async (res: any) => {
          const {data} = res
          this.loading=false
          if (data.code === this.$global.success) {
            localStorage.setItem('ENT_INFO', JSON.stringify(data.data))
            this.entInfo = data.data
            this.defaultImg = data.data.avatar
            // await refreshCompanyState()
          }
        }).catch(() => this.loading = false)
    }
  }
})
</script>

<style lang="less" scoped>
  /deep/ .cropper-container {
    width: 100% !important
  }
  .default-avator {
    min-width: 60vw;
    min-height: 60vw;
    // border: 1px solid red;
  }
</style>

