<template >
    <el-form :model="form" ref="dialogForm" label-width="80px" label-position="left" style="margin-top:-20px;">
        <el-row :gutter="15">
            <el-col :span="24">
                <el-divider >{{$t("reportDesigner.BasicInfo")}}</el-divider>
                <el-form-item :label="$t('reportDesigner.FileName')" prop="name">
                   <el-input v-model="form.name" clearable style="width:100%" @change="eventClick"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.PageSize')" prop="pageType">
                    <el-select v-model="form.pageType.key" style="width:100%" clearable filterable @change="pageEventClick">
                        <el-option v-for="item in pageItems" :key="item.key" :label="item.value" :value="item.key" />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.InverseColor')" prop="invertColor" >
                    <el-select v-model="form.invertColor" style="width:100%" clearable filterable @change="eventClick">
                        <el-option key="false" :label="$t('reportDesigner.NormalColor')" value="false" />
                        <el-option key="true" :label="$t('reportDesigner.Inverse')" value="true" />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" style="margin-top:-20px;">
            <el-col :span="24">
                <el-divider >{{$t("reportDesigner.PagePadding")}}</el-divider>
                <el-form-item :label="$t('reportDesigner.PaddingTop')" prop="marginTop">
                    <el-input v-model="form.marginTop" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.marginUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.PaddingBottom')" prop="marginBottom">
                    <el-input v-model="form.marginBottom" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.marginUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row> 
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.PaddingLeft')" prop="marginLeft">
                    <el-input v-model="form.marginLeft" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.marginUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.PaddingRight')" prop="marginRight">
                    <el-input v-model="form.marginRight" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.marginUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" style="margin-top:-20px;">
            <el-col :span="24">
                <!-- <sc-title title="页眉/页脚"></sc-title> -->
                <el-divider >{{$t("reportDesigner.HeaderFooter")}}</el-divider>
                <el-form-item :label="$t('reportDesigner.HeaderHeight')" prop="headerHeight">
                    <el-input v-model="form.headerHeight" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.headerUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.HeaderDistance')" prop="headerMarginTop">
                    <el-input v-model="form.headerMarginTop" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.headerUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.FooterHeight')" prop="footerHeight">
                    <el-input v-model="form.footerHeight" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.footerUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-form-item :label="$t('reportDesigner.FooterDistance')" prop="footerMarginBottom">
                    <el-input v-model="form.footerMarginBottom" clearable style="width:85%" @change="eventClick"></el-input><span>&nbsp;&nbsp;{{form.footerUnit}}</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <!-- <sc-title title="适用对象"></sc-title> -->
                <el-divider >{{$t("reportDesigner.UseObject")}}</el-divider>
                <el-form-item label="" prop="applicable">
                    <el-radio-group v-model="form.applicable" @change="eventClick">
                        <el-radio v-for="_item in applyTargets" :key="_item.key" :label="_item.key">{{$t(_item.value)}}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :span="24">
                <el-button style="width:100%" type="primary" @click="hiddenSetting">{{$t("reportDesigner.HiddenTemplateSetting")}}</el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
	export default {
        props: {
			pageConfig: { type: Object, default: () => {} },
		},
		data() {
			return {
				renderLoading: false,
                form:{
                    pageType: {
                        key:"", 
                        width: 0, 
                        height: 0
                    },
                    marginTop: "",
                    marginBottom: "",
                    marginLeft: "",
                    marginRight: "",
                    marginUnit:"",
                    headerHeight: "",
                    headerMarginTop: "",
                    headerUnit:"",
                    footerHeight: "",
                    footerMarginBottom: "",
                    footerUnit:"",
                    invertColor: "false",
                    applicable: "",
                    isCustom: false,
                    author:null,
                    name:''
                },
                pageItems: [],
                applyTargets: [],
			}
		},
        watch:{
			pageConfig(){
				this.render()
			},
		},
		computed: {
			hasPageConfig(){
				var res = Object.keys(this.pageConfig).length > 0;
                return res;
			},
		},
		mounted() {
			if (this.hasPageConfig){
				this.render()
			}
		},
		methods: {
            //初始化
            render(){
                this.loadData(this.pageConfig);
            },
            loadData(dataSetting) {
                this.form.pageType = {
                    key: dataSetting.defaultPageType.key, 
                    width:  dataSetting.defaultPageType.width, 
                    height:  dataSetting.defaultPageType.height
                };
                this.form.name = dataSetting.name;
                this.form.marginTop = dataSetting.defaultPagePadding.top;
                this.form.marginBottom = dataSetting.defaultPagePadding.bottom;
                this.form.marginLeft = dataSetting.defaultPagePadding.left;
                this.form.marginRight = dataSetting.defaultPagePadding.right;
                this.form.marginUnit = dataSetting.defaultPagePadding.unit;
                this.form.headerHeight = dataSetting.defaultPageHeader.height;
                this.form.headerMarginTop = dataSetting.defaultPageHeader.top;
                this.form.headerUnit = dataSetting.defaultPagePadding.unit;
                this.form.footerHeight = dataSetting.defaultPageFooter.height;
                this.form.footerMarginBottom = dataSetting.defaultPageFooter.bottom;
                this.form.footerUnit = dataSetting.defaultPagePadding.unit;
                this.form.applicable = dataSetting.applicable;
                this.form.invertColor = dataSetting.invertColor.toString();
                this.pageItems = dataSetting.pageItems();
                this.applyTargets = dataSetting.applyTargets();
            },
			//属性设置
			eventClick() {
                this.$emit("pageSetEventClick", 0,this.form);
			},
            //属性设置
            pageEventClick() {
                if (this.form.pageType.key && this.form.pageType.key.length > 0)
                {
                    this.pageItems.some(c => {
                        if (c.key === this.form.pageType.key)
                        {
                            this.form.pageType = {
                                key: c.key, 
                                width:  c.width, 
                                height:  c.height
                            };
                            return true;
                        }
                    });
                }
                this.$emit("pageSetEventClick", this.form);
			},
            //隐藏
            hiddenSetting() {
                this.$emit("pageSetEventClick", 1);
            }
		}
	}
</script>

<style scoped>
    
</style>
