<template>
  <div>
    <m-card title="个性化配置" class="pb-5">
      <div style="width: 100%;text-align: center;">
        <form-list ref="form" style="max-width: 800px;margin: auto;" class="my-5" :items="formItems"></form-list>
        <div>
          <v-btn color="primary" rounded class="elevation-5 mr-5 buttons" @click="confirm">确 认</v-btn>
          <v-btn color="primary" rounded class="elevation-5 buttons" @click="reset">恢复默认配置</v-btn>
        </div>
      </div>
    </m-card>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import FormList from '@/components/Form/list'
import { mapMutations, mapGetters } from 'vuex'
import { uploadFile } from '@/api/user'
import { updateSystemSetting, getSettingInfo } from '@/api/system'
export default {
  name: 'system-individuation',
  components: { MCard, FormList },
  data () {
    return {
      img: null,
      query: {},
      formItems: {
        options: [
          { type: 'text', key: 'title', value: null, default: null, label: '请输入平台标题', outlined: true, dense: true },
          { type: 'text', key: 'titleEn', value: null, default: null, label: '请输入平台英文标题', outlined: true, dense: true },
          { type: 'upload', key: 'img', value: null, label: '请点击上传logo图片', outlined: true, dense: true, accept: 'image/*', loading: false, rules: [v => v !== null || '请点击上传logo图片'] },
          { type: 'colorPicker', key: 'bgc', value: '#007cd6', mode: 'hexa', flexStyle: 'justify-center', change: this.changeColor }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['systemInfo'])
  },
  created () {
    this.getInfo()
  },
  methods: {
    ...mapMutations('system', ['SET_SYSTEM_INFO']),
    flattenObject (obj) {
      let result = {}
      for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          const value = obj[key]
          if (typeof value === 'object' && value !== null) {
            result = { ...result, ...this.flattenObject(value, key) }
          } else {
            result[key] = value || null
          }
        }
      }
      return result
    },
    // 获取配置信息
    async getInfo () {
      try {
        const { data } = await getSettingInfo({ path: '', hostName: '' })
        this.SET_SYSTEM_INFO(this.flattenObject(data))
        this.formItems.options.forEach(item => {
          item.value = this.systemInfo[item.key]
        })
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    // 提交
    confirm () {
      this.$confirm('系统提示', '是否确定修改配置项？').then(async () => {
        const title = this.formItems.options.find(e => e.key === 'title').value
        const titleEn = this.formItems.options.find(e => e.key === 'titleEn').value
        const bgc = this.formItems.options.find(e => e.key === 'bgc').value
        this.query = {
          title,
          headImg: '',
          tenantCode: this.systemInfo.tenantCode,
          showSetting: {
            titleEn,
            bgc
          }
        }

        if (this.formItems.options.find(e => e.key === 'img').value) {
          this.upload().then(_ => {
            this.query.headImg = this.img
            this.update(this.query)
          })
        } else this.update(this.query)
      }).catch(e => {})
    },
    // 修改、恢复默认配置
    async update (query) {
      try {
        await updateSystemSetting(query)
        this.$snackbar.success('修改成功！')
        this.getInfo()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    // 恢复默认配置
    reset () {
      this.$confirm('系统提示', '是否确定恢复默认配置？').then(() => {
        this.update({
          title: this.$DEFAULT_TITLE,
          headImg: '',
          showSetting: {
            bgc: '#007cd6',
            titleEn: 'Refined Management'
          }
        })
      }).catch(e => {})
    },
    // 上传logo
    async upload () {
      try {
        const { data } = await uploadFile('data/', this.formItems.options.find(e => e.key === 'img').value)
        this.img = data.url
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    changeColor (val) {
      this.formItems.options.find(e => e.key === 'bgc').value = val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
