<template>
  <a-modal :footer="null" :visible="visible" :width="708" @cancel="$emit('close')">
    <a-form-model class="yo-form">
      <h3>布局设置</h3>
      <div class="yo-form-group">
        <a-form-model-item label="导航菜单位置">
          <a-select v-model="$root.global.settings.layout">
            <a-select-option value="left-menu">左侧菜单经典结构</a-select-option>
            <a-select-option value="top-nav">顶部导航菜单</a-select-option>
            <a-select-option value="right-menu">右侧菜单结构</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="内容宽度">
          <a-select v-model="$root.global.settings.container">
            <a-select-option value="container-fluid">整宽</a-select-option>
            <a-select-option v-if="$root.global.settings.layout === 'top-nav'" value="container">居中</a-select-option>
          </a-select>
        </a-form-model-item>
      </div>
      <h3>主题设置</h3>
      <div class="yo-form-group">
        <a-form-model-item label="导航颜色">
          <a-select v-model="$root.global.settings.navTheme">
            <a-select-option value="dark">深色</a-select-option>
            <a-select-option value="light">浅色</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="主题颜色">
          <a-select>
            <a-select-option value="1">蓝色</a-select-option>
            <a-select-option value="2">红色</a-select-option>
          </a-select>
        </a-form-model-item>
      </div>
    </a-form-model>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
  },
  watch: {
    '$root.global.settings.layout'() {
      if (this.$root.global.settings.layout === 'top-nav') {
        this.$root.global.settings.container = 'container';
      } else {
        this.$root.global.settings.container = 'container-fluid';
      }
    },
  },
};
</script>