<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form label-position="top">
            <el-form-item label="内容">
                <el-checkbox-group v-model="checkedInfo" :min="1" @change="handleCheckedChange">
                    <el-checkbox :key="0" :label="0">温度</el-checkbox>
                    <el-checkbox :key="1" :label="1">城市名称</el-checkbox>
                    <el-checkbox :key="2" :label="2">天气实况</el-checkbox>
                    <el-checkbox :key="3" :label="3">灾害预警</el-checkbox>
                    <el-checkbox :key="4" :label="4">空气质量</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="样式">
                <span>温度文字大小</span>
                <el-input v-model.number="curComponent.propValue.config.tmpSize">
                    <template slot="suffix">px</template>
                </el-input>
                <span>温度文字颜色</span>
                <el-input v-model="curComponent.propValue.config.tmpColor">
                    <el-color-picker slot="suffix" v-model="curComponent.propValue.config.tmpColor" />
                </el-input>
                <span>城市名文字大小</span>
                <el-input v-model.number="curComponent.propValue.config.citySize">
                    <template slot="suffix">px</template>
                </el-input>
                <span>城市名文字颜色</span>
                <el-input v-model="curComponent.propValue.config.cityColor">
                    <el-color-picker slot="suffix" v-model="curComponent.propValue.config.cityColor" />
                </el-input>
                <span>天气图标尺寸</span>
                <el-input v-model.number="curComponent.propValue.config.weatherIconSize">
                    <template slot="suffix">px</template>
                </el-input>
                <span>预警图标尺寸</span>
                <el-input v-model.number="curComponent.propValue.config.alertIconSize">
                    <template slot="suffix">px</template>
                </el-input>
                <span>空气质量文字大小</span>
                <el-input v-model.number="curComponent.propValue.config.aqiSize">
                    <template slot="suffix">px</template>
                </el-input>
                <span>空气质量文字颜色</span>
                <el-input v-model="curComponent.propValue.config.aqiColor">
                    <el-color-picker slot="suffix" v-model="curComponent.propValue.config.aqiColor" />
                </el-input>
            </el-form-item>
            <el-form-item label="背景颜色">
                <el-radio-group v-model="curComponent.propValue.config.background">
                    <span>
                        <el-radio class="v-bg-radio" label="1" border>随天气变化</el-radio>
                    </span>
                    <!--                    <span>-->
                    <!--                        <el-radio class="v-bg-radio" label="4" border>-->
                    <!--                            选择颜色-->
                    <!--<el-color-picker v-model="curComponent.propValue.config.backgroundColor" size="small" />-->
                    <!--                        </el-radio>-->
                    <!--                    </span>-->
                    <span>
                        <el-radio class="v-bg-radio" label="3" border>深色</el-radio>
                    </span>
                    <span>
                        <el-radio class="v-bg-radio" label="2" border>浅色</el-radio>
                    </span>
                    <span>
                        <el-radio class="v-bg-radio" label="5" border>透明</el-radio>
                    </span>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="内边距">
                <el-input v-model.number="curComponent.propValue.config.aqiSize" style="width: 40%;text-align: center;">
                    <template slot="prefix"><p>上</p></template>
                    <template slot="suffix"><p>px</p></template>
                </el-input>
                <el-input v-model.number="curComponent.propValue.config.aqiSize" style="width: 40%;text-align: center;left: 5%;">
                    <template slot="prefix"><p>右</p></template>
                    <template slot="suffix"><p>px</p></template>
                </el-input>
                <el-input v-model.number="curComponent.propValue.config.aqiSize" style="width: 40%;text-align: center;top: 4px;">
                    <template slot="prefix"><p>下</p></template>
                    <template slot="suffix"><p>px</p></template>
                </el-input>
                <el-input v-model.number="curComponent.propValue.config.aqiSize" style="width: 40%;text-align: center;top: 4px;left: 5%;">
                    <template slot="prefix"><p>左</p></template>
                    <template slot="suffix"><p>px</p></template>
                </el-input>
            </el-form-item>
            <el-form-item label="对齐方式">
                <el-select v-model="curComponent.propValue.config.horizontal" placeholder="请选择">
                    <el-option
                        v-for="item in [{label:'水平居中',value: 'center'},{label: '靠左对齐',value: 'left'},{label: '靠右对齐',value: 'right'}]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="curComponent.propValue.config.vertical" placeholder="请选择" style="margin-top: 5px;">
                    <el-option
                        v-for="item in [{label:'垂直居中',value: 'center'},{label: '顶部对齐',value: 'top'},{label: '底部对齐',value: 'bottom'}]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="阴影">
                <el-radio-group v-model="curComponent.propValue.config.shadow">
                    <el-radio label="0">无</el-radio>
                    <el-radio label="1">有</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="圆角">
                <el-radio-group v-model="curComponent.propValue.config.borderRadius">
                    <span>
                        <el-radio class="v-bg-radio" label="0" border>无</el-radio>
                    </span>
                    <span>
                        <el-radio class="v-bg-radio" label="1" border>
                            <input v-model.number="curComponent.propValue.config.borderRadius" class="v-circle">px
                        </el-radio>
                    </span>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="语言">
                <el-radio-group v-model="curComponent.propValue.config.language">
                    <span>
                        <el-radio class="v-bg-radio" label="auto" border>自动</el-radio>
                    </span>
                    <span>
                        <el-radio class="v-bg-radio" label="zh" border>中文</el-radio>
                    </span>
                    <span>
                        <el-radio class="v-bg-radio" label="en" border>English</el-radio>
                    </span>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="定位方式">
                <el-radio-group v-model="curP">
                    <span>
                        <el-radio
                            class="v-bg-radio"
                            label="auto"
                            @change="handlerAuto"
                        >自动</el-radio>
                    </span>
                    <span>
                        <el-radio class="v-bg-radio" label="zh">
                            <el-cascader
                                v-model="curComponent.propValue.config.city"
                                :options="cityMap"
                                :props="cascaderProps"
                                :disabled="curP==='auto'"
                            ></el-cascader>
                        </el-radio>
                    </span>
                </el-radio-group>
                <!--                <el-form-item label="固定在浏览器中">-->
                <!--                    <el-radio-group v-model="curComponent.propValue.config.fixed">-->
                <!--                        <el-radio label="false">否</el-radio>-->
                <!--                        <el-radio label="true">是</el-radio>-->
                <!--                    </el-radio-group>-->
                <!--                    <template-->
                <!--                        v-if="curComponent.propValue.config.fixed === 'true'"-->
                <!--                    >-->
                <!--                        <el-input-->
                <!--                            v-if="levelType === 'top'"-->
                <!--                            v-model.number="curComponent.propValue.config.top"-->
                <!--                            class="input-with-select"-->
                <!--                            @change="fixedLevelChange"-->
                <!--                        >-->
                <!--                            <el-select slot="prepend" v-model="levelType">-->
                <!--                                <el-option key="top" label="上" value="top" />-->
                <!--                                <el-option key="bottom" label="下" value="bottom" />-->
                <!--                            </el-select>-->
                <!--                            <template slot="append">px</template>-->
                <!--                        </el-input>-->
                <!--                        <el-input-->
                <!--                            v-if="levelType === 'bottom'"-->
                <!--                            v-model.number="curComponent.propValue.config.bottom"-->
                <!--                            class="input-with-select"-->
                <!--                            @change="fixedLevelChange"-->
                <!--                        >-->
                <!--                            <el-select slot="prepend" v-model="levelType">-->
                <!--                                <el-option key="top" label="上" value="top" />-->
                <!--                                <el-option key="bottom" label="下" value="bottom" />-->
                <!--                            </el-select>-->
                <!--                            <template slot="append">px</template>-->
                <!--                        </el-input>-->
                <!--                        <el-input-->
                <!--                            v-if="verticalType === 'left'"-->
                <!--                            v-model.number="curComponent.propValue.config.left"-->
                <!--                            class="input-with-select"-->
                <!--                            @change="fixedVerticalChange"-->
                <!--                        >-->
                <!--                            <el-select slot="prepend" v-model="verticalType">-->
                <!--                                <el-option key="left" label="左" value="left" />-->
                <!--                                <el-option key="right" label="右" value="right" />-->
                <!--                            </el-select>-->
                <!--                            <template slot="append">px</template>-->
                <!--                        </el-input>-->
                <!--                        <el-input-->
                <!--                            v-if="verticalType === 'right'"-->
                <!--                            v-model.number="curComponent.propValue.config.right"-->
                <!--                            class="input-with-select"-->
                <!--                            @change="fixedVerticalChange"-->
                <!--                        >-->
                <!--                            <el-select slot="prepend" v-model="verticalType">-->
                <!--                                <el-option key="left" label="左" value="left" />-->
                <!--                                <el-option key="right" label="右" value="right" />-->
                <!--                            </el-select>-->
                <!--                            <template slot="append">px</template>-->
                <!--                        </el-input>-->
                <!--                    </template>-->
                <!--                </el-form-item>-->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import CommonAttr from '@/custom-component/common/CommonAttr.vue'

export default {
    components: { CommonAttr },
    data() {
        return {
            checkedInfo: [],
            cityMap: require('../../assets/city.json'),
            curP: 'auto',
            cascaderProps: {
                expandTrigger: 'click',
                emitPath: false,
                children: 'children', // 匹配响应数据中的children
                label: 'hk', // 匹配响应数据中的name
                value: 'id', // 匹配响应数据中的id
            },
            levelType: 'top',
            verticalType: 'left',
        }
    },
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
    },
    mounted() {
        for (let i = 0; i < this.curComponent.propValue.config.modules.length; i++) {
            this.checkedInfo.push(parseInt(this.curComponent.propValue.config.modules[i]))
        }
        // console.log(this.curComponent.propValue.config.hasOwnProperty('city'))
        if (!this.curComponent.propValue.config.hasOwnProperty('city') || this.curComponent.propValue.config.city === '') {
            delete this.curComponent.propValue.config.city
            this.curP = 'auto'
        } else {
            this.curP = 'zh'
        }
    },
    methods: {
        handleCheckedChange(value) {
            value.sort((x, y) => x - y)
            this.curComponent.propValue.config.modules = value.join('')
        },
        handlerAuto(value) {
            if (value === 'auto') {
                delete this.curComponent.propValue.config.city
                console.log(this.curComponent.propValue.config)
            }
        },
        fixedLevelChange(value) {
            if (this.levelType === 'top') {
                delete this.curComponent.propValue.config.bottom
            } else {
                delete this.curComponent.propValue.config.top
            }
            console.log(this.curComponent.propValue.config, this.levelType, value.toString())
        },
        fixedVerticalChange(value) {
            if (this.levelType === 'left') {
                delete this.curComponent.propValue.config.right
            } else {
                delete this.curComponent.propValue.config.left
            }
            console.log(this.curComponent.propValue.config, this.levelType, value.toString())
        },
    },
}
</script>
<style lang="scss" scoped>
.v-bg-radio {
    width: 100%;
    margin-bottom: 4px;
}
::v-deep .el-color-picker__trigger {
    border: none;
}
.v-circle {
    width: 3rem;
    text-align: center;
    border: none;
    outline: 0;
}
.v-circle ::v-deep .el-input__inner {
    border: 0;
}
/*::v-deep .el-input__prefix {*/
/*    left: 0;*/
/*}*/
.input-with-select{
    margin-top: 5px;
}
.input-with-select ::v-deep .el-input-group__prepend {
    background-color: #fff;
    width: auto;
    padding-right: 0;
}
</style>
