<template>
  <section class="themeSetting">
    <ai-detail list>
      <ai-title slot="title" title="主题样式" isShowBottomBorder isShowBack @back="cancel">
        <template #rightBtn>
          <span class="mar-r8" v-text="'灰色滤镜'"/>
          <el-switch size="mini" v-model="form.enableGreyFilter" name="灰色滤镜" border active-value="1" inactive-value="0"/>
        </template>
      </ai-title>
      <template #content>
        <el-form size="small" :model="form" ref="ThemeForm">
          <ai-title title="WEB后台"/>
          <ai-select-card dict="themeWeb" v-model="form.colorScheme.web"/>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import AiSelectCard from "./components/AiSelectCard";

export default {
  name: "themeSetting",
  components: {AiSelectCard},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      form: {enableGreyFilter: '0', colorScheme: {}}
    }
  },
  methods: {
    getDetail() {
      const {id} = this.$route.query
      this.instance.post("/app/appdvcpconfig/detail", null, {params: {id}}).then(res => {
        if (res?.data) {
          let {colorScheme, enableGreyFilter} = res.data
          colorScheme = JSON.parse(colorScheme) || {web: 'blue'}
          this.form = {colorScheme, enableGreyFilter}
        }
      })
    },
    cancel() {
      return this.$router.push({})
    },
    submit() {
      this.$refs.ThemeForm.validate(v => {
        if (v) {
          let {colorScheme} = this.form
          colorScheme = JSON.stringify(colorScheme)
          this.instance.post("/app/appdvcpconfig/updateSysColorScheme", {...this.form, colorScheme}).then(res => {
            if (res?.code == 0) {
              this.$message.success("保存成功!")
              this.cancel().then(() => location.reload())
            }
          })
        }
      })
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.themeSetting {
  height: 100%;

  .mar-r8 {
    margin-right: 8px;
  }
}
</style>
