<template>
  <div class="full-height full-width column" ref="memberListRef">
        <div class="text-dark text-weight-bolder">基本信息</div>
        <div class="borders-light q-pa-xl rounded q-mt-xl" style="width:650px;">
            <div class=" row items-center">
                <el-avatar fit="contain" :size="66" :src="userInfo.logo" shape="square"  class="borders"></el-avatar>
                <div class="col q-ml-lg">
                    <div class="text-dark text-weight-bold">{{ userInfo.company }}</div>
                </div>
                <div>
                    <el-button type="info" class="ppt-button text-weight-bolder" @click="showOrgFormHandler">编辑</el-button>
                </div>
            </div>
            <div class="q-mt-lg text-small text-info">完善所属行业与设计用途偏好设置，让推荐更精准</div>
        </div>
    </div>
    <el-dialog v-model="formVisible" title="团队/企业信息" style="width:480px;" :close-on-click-modal="false" :close-on-press-escape="false">
        <main>
            <div class="f14">企业LOGO/标识</div>
            <div class="row q-mt-md">
                <el-avatar fit="contain" :size="80" :src="orgModel.logo" shape="square" class="borders"></el-avatar>
                <div class="col q-ml-md column" style="height: 80px">
                    <div class="text-smll text-info">建议尺寸100*100/200*200</div>
                    <div class="text-smll text-info col">格式jpg/png/ico，大小不超过5M</div>
                    <div>
                        <el-upload action="#" :auto-upload="false" accept=".jpg,.png" :show-file-list="false" :on-change="handleChangeMakerImage">
                            <el-button :disabled="loading">更改</el-button>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="f14 q-mt-xl">企业名称</div>
            <div class="q-mt-md">
                <el-input v-model="orgModel.name" placeholder="请输入企业名称" size="large"  :disabled="loading"/>
            </div>
        </main>
        <template #footer>
            <el-button size="large" class="ppt-button" @click="()=>formVisible=false" :disabled="loading">取消</el-button>
            <el-button size="large" type="primary" class="ppt-button" :loading="loading" @click="saveOrgInfoHandler">确认</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import OrgService from "@/services/OrgService";
import { useUserStore } from "@/store";
import AliyunUpload from "@/utils/upload/aliyun";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import CryptoJS from 'crypto-js'

const formVisible = ref(false)
const newLogoSourceFile = ref<any>()
const {userInfo} = storeToRefs(useUserStore())
const orgModel = ref({
    logo:'',
    name:''
})
const loading = ref(false)

const handleChangeMakerImage=(uploadFile:any, uploadFiles:any)=>{
    const raw = uploadFile.raw
    console.log(raw.type)
    if(raw.type == 'image/jpeg' || raw.type == 'image/png' || raw.type=='image/x-icon'){
        if(raw.size<=1024*1024*5){
            var reader = new FileReader();
            reader.readAsDataURL(raw);
            reader.onload = () => { 
                orgModel.value.logo = reader.result?.toString()??'';
                newLogoSourceFile.value = raw
            } 
            reader.onerror = function(err) {
                ElMessage.error({message:'图片解析失败，请更换图片'})
            }
        } else ElMessage.error({message:'图片过大，图片不能超过2MB'})
    } else ElMessage.error({message:'错误的图片格式，目前支持jpg/png'})
}

const saveOrgInfoHandler = async ()=>{
    if(!orgModel.value.name || orgModel.value.name==''){
        ElMessage.error({message:'请填写企业名称'})
        return
    } else if(!orgModel.value.logo || orgModel.value.logo==''){
        ElMessage.error({message:'请上传企业Logo'})
        return
    }

    if(loading.value) return
    loading.value = true

    await uploadWaterMarkerImage()
    const response = await OrgService.SetTenantInfoAsync(orgModel.value.logo,orgModel.value.name)
    if(response.data.resultCode == ApiResult.SUCCESS) {
        ElMessage.success('更新企业信息成功')
        userInfo.value.logo = orgModel.value.logo
        userInfo.value.company = orgModel.value.name
        formVisible.value=false
        return
    }
    ElMessage.error({message:'更新企业信息失败'})
    loading.value = false
    
}
const uploadWaterMarkerImage = async ()=>{
    if(newLogoSourceFile.value){
        const url = await AliyunUpload.UploadAsync(newLogoSourceFile.value,`watermark/${CryptoJS.SHA256(userInfo.value.id)}.${newLogoSourceFile.value.name.split('.')[1]}`)
        if(url!='') {
            orgModel.value.logo = `${url}?t=${new Date().getTime().toString()}`
        }
    }
}
const showOrgFormHandler=()=>{
    orgModel.value.logo=userInfo.value.logo,
    orgModel.value.name=userInfo.value.company
    newLogoSourceFile.value = null
    formVisible.value = true
    loading.value=false
}
</script>

<style>

</style>