<template>
  <IxForm :control="settingsForm"
      class="settings-form"
      label-align="end"
      layout="horizontal"
      message-tooltip
      @submit.prevent="submitHandler">
    <!--<IxFormItem>
      <IxSelect
          :dataSource="languageDataSource"
          control="language"/>
    </IxFormItem>-->
    <!--<IxFormItem>
      <IxSelect
          :dataSource="themeDataSource"
          control="theme"/>
    </IxFormItem>-->
    <IxFormItem>
      <IxTooltip placement="top" title="公司图标">
        <IxUpload v-model:files="files"
            :action="uploadBaseUrl"
            :max-count="1"
            :progress="{
      strokeColor: {
        '0%': '#108EE9',
        '100%': '#87D068',
      },
      strokeWidth: 3,
    }"
            :request-data="requestData"
            @requestChange="showMsg"
        >
          <IxButton>上传公司图标</IxButton>
          <template #list>
            <IxUploadFiles :icon="{file: 'paper-clip', remove: 'close', retry: 'redo'}" type="image"/>
          </template>
        </IxUpload>
      </IxTooltip>
    </IxFormItem>
    <IxButton block class="denglu-btn" mode="primary" type="submit">确定</IxButton>
  </IxForm>
</template>

<script lang="ts" setup>
import { useFormGroup } from '@idux/cdk'
import HeaderBarApi from '@/pages/main-zone/header-bar/header-bar-api.ts'
import { reloadUserInfo } from '@/common/app'
import {
  UploadFile,
  UploadRequestChangeOption
} from '@idux/components'
import { ref } from 'vue'
import AppApi from '@/common/app/app-api.ts'
import { uploadBaseUrl } from '@/common'
import Toast from '@/components/toast'

// const themeDataSource = ref([ {key: 'light', label: '明亮主题'} ])
// const languageDataSource = ref([ {key: 'zh', label: '简体'}, {key: 'en', label: 'English'} ])

const settingsForm = useFormGroup<SettingsTypes.SettingsForm>({
  theme: [ 'light' ],
  language: [ 'zh' ],
  logo: [ undefined ],
})

function submitHandler() {
  const value = settingsForm.getValue()
  const loading = Toast.loading('正在提交')
  HeaderBarApi.modifyUserSetting(value)
      .then(reloadUserInfo)
      .finally(() => {
        Toast.close(loading)
        settingsForm.reset()
        settingsForm.markAsPristine()
        files.value = []
      })
}

async function requestData({name, raw}: UploadFile) {
  if (raw == null) return Promise.reject()
  let res = await AppApi.obtainPresignedUrl(name)
  const logo = settingsForm.get('logo')
  logo?.setValue('/' + res.data.bucketName + '/' + res.data.objectName)
  delete res.data.bucketName
  delete res.data.objectName
  return Promise.resolve(res.data)
}

let loading: string | null = null

function showMsg({status}: UploadRequestChangeOption) {
  if (status === 'loadstart') {
    loading = Toast.loading('正在上传')
  } else if (status === 'loadend') {
    if (loading != null) Toast.close(loading)
    Toast.success('上传成功')
  } else if (status === 'error') {
    if (loading != null) Toast.close(loading)
    Toast.error('上传失败')
  } else if (status === 'abort') {
    if (loading != null) Toast.close(loading)
  }
}

const files = ref()

defineExpose({
  getValue() {
    return settingsForm.getValue()
  },
  setValue(data: SettingsTypes.SettingsForm) {
    settingsForm.setValue(data)
  },
  reset() {
    settingsForm.reset()
  }
})


</script>

<style lang="stylus" scoped>
.settings-form {
  padding: 1rem 0;
  height 100%
  display grid
  grid-template-columns 80%
  grid-template-rows 1fr 1fr 1fr 1fr
  justify-content center
  align-content: space-evenly
}

:deep(.ix-upload-selector ),
:deep(.ix-upload-selector .ix-button) {
  width 100%
}
</style>
