import './index.less';
import ThemeColor from './ThemeColor';
import BlockChecbox from './BlockChecbox';
import { Drawer, Modal, Divider, message } from "ant-design-vue";
import { mapGetters } from "vuex";
const Body = {
props:['title'],
render: function render() {
var h = arguments[0];
const { $slots,title } = this
return h('div', { style: { marginBottom: 24 } }, [h('h3', { 'class': 'title' }, title), $slots['default']])
}
}
const SettingDrawer = {
// data: () => ({
// primaryColor: "#42b983",
// blockChecbox: "sidemenu"
// }),
props: ["collapse"],
computed: {
...mapGetters({
settings: "global/settings",
}),
},
methods: {
changeSetting(key,value) {
const nextState = this.settings;
nextState[key] = value;
if (key === 'layout') {
nextState.contentWidth = value === 'topmenu' ? 'Fixed' : 'Fluid';
}
// else if (key === 'fixedHeader' && !value) {
// nextState.autoHideHeader = false;
// }
// console.log(this.settings);
// console.log(nextState);
// this.$store.commit('global/UpdateDefaultSettings', this.s)
// this.$store.commit('global/UpdateDefaultSettings', nextState)
// console.log(key);
// console.log(value);
// message.loading("正在编译主题！", 3);
this.$store.dispatch('global/defaultSettings',true)
},
togglerContent() {
this.$parent.collapse = !this.collapse
}
},
render() {
const { collapse } = this
const { primaryColor, layout, navTheme } = this.settings
return (
<Drawer
title="我是一个抽屉"
placement="right"
closable={false}
onClose={this.togglerContent}
visible={collapse}
width={300}
>
<div class="setting-drawer content">
<Body title={this.$t('app.setting.pagestyle')}>
<BlockChecbox
list={[
{
key: 'dark',
url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
title: this.$t('app.setting.pagestyle.dark'),
},
{
key: 'light',
url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
title: this.$t('app.setting.pagestyle.light'),
},
]}
value={navTheme}
onChange={e=>{this.changeSetting('navTheme',e)}}
/>
</Body>
<Divider />
<ThemeColor
title={this.$t('app.setting.themecolor')}
value={primaryColor}
onChange={e=>{this.changeSetting('primaryColor',e)}}
/>
<Divider />
<Body title={this.$t('app.setting.navigationmode')}>
<BlockChecbox
list={[
{
key: 'sidemenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
title: this.$t('app.setting.sidemenu'),
},
{
key: 'topmenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
title: this.$t('app.setting.topmenu'),
style: {paddingLeft: '18px'}
},
]}
value={layout}
onChange={e=>{this.changeSetting('layout',e)}}
/>
</Body>
<Divider />
<p>其它设置</p>
</div>
</Drawer>
)
}
}
export default SettingDrawer