<template>
  <div style="overflow-y: scroll;height: calc(100% - 46px); width: 100%;">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" style="width: 100%;padding: 10px 50px;">
      <el-form-item label="图层:" prop="z2">
        <el-input-number v-model="form.z2" controls-position="right" size="small" />
      </el-form-item>
      <el-form-item v-if="isUpdate" label="按钮编号:" prop="code">
        <el-input v-model="form.code" size="small" :disabled="true" />
      </el-form-item>
      <el-form-item label="X轴坐标:" prop="x">
        <el-input-number v-model="form.x" size="small" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="Y轴坐标:" prop="y">
        <el-input-number v-model="form.y" size="small" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="是否透明" prop="isTransparent">
        <el-checkbox v-model="form.isTransparent" size="small" />
      </el-form-item>
      <el-form-item label="按钮文字:" prop="context">
        <el-input v-model="form.context" size="small" />
      </el-form-item>
      <el-form-item label="文字颜色:" prop="textColor">
        <el-color-picker v-model="form.textColor" show-alpha size="small" />
      </el-form-item>
      <el-form-item label="选中文字颜色:" prop="textColorActive">
        <el-color-picker v-model="form.textColorActive" show-alpha size="small" />
      </el-form-item>
      <el-form-item label="背景颜色:" prop="textColor">
        <el-color-picker v-model="form.fillColor" show-alpha size="small" />
      </el-form-item>
      <el-form-item label="选中背景颜色:" prop="textColor">
        <el-color-picker v-model="form.fillColorActive" show-alpha size="small" />
      </el-form-item>
      <el-form-item label="文字大小:" prop="fontSize">
        <el-input-number v-model="form.fontSize" size="small" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="左右内距:" prop="levelPadding">
        <el-input-number v-model="form.levelPadding" size="small" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="上下内距:" prop="verticalPadding">
        <el-input-number v-model="form.verticalPadding" size="small" controls-position="right" :min="1" />
      </el-form-item>
      <el-form-item label="按钮功能:" prop="function">
        <el-select v-model="form.function" size="small">
          <el-option
            v-for="item in functionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.function=== 'ElementShow'" label="隐藏元素类型:" prop="hideType">
        <el-select v-model="form.hideType" size="small">
          <el-option
            v-for="item in hideTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit('form')">{{ buttonText }}</el-button>
        <el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
        <el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import {getUID} from '@/iscs/utils/Uid';
export default {
    name: 'IscsButton',
    components: {
    },
    data() {
        return {
            isUpdate: false,
            buttonText: '立即创建',
            showDeleteButton: false,
            functionList: [
                {label: '图元说明', value: 'GraphicEle'},
                {label: '公共区域', value: 'PublicArea'},
                {label: '操作按钮', value: 'OperatingButton'},
                {label: '返回', value: 'GoBack'},
                {label: '至EPS系统及导向照明', value: 'GoEPS'},
                {label: '射流风机图', value: 'GoJetFan'},
                {label: '至B端小系统', value: 'GoBMiniSystem'},
                {label: '至A端小系统(一)', value: 'GoAMiniSystem1'},
                {label: '至A端小系统(二)', value: 'GoAMiniSystem2'}
            ],
            form: {
                code: '',
                z2: 0,
                levelPadding: 10,
                verticalPadding: 5,
                fontSize: 10,
                x: 10,
                y: 10,
                isTransparent: false,
                context: '',
                function: '',
                textColor: '',
                textColorActive: '#000',
                fillColor: 'rgba(0,0,0,0)',
                fillColorActive: 'rgba(0,0,0,0)',
                hideType: ''
            },
            hideTypeList: [
                { label: '温感器', value: 'alarmLamp' },
                { label: '烟感器', value: 'smokeDetector' },
                { label: '防火阀', value: 'fireDamper' },
                { label: '报警按钮', value: 'alarmButton' }
                // { label: '消火栓按钮', value: 'zanwu' },
                // { label: '标签', value: '' }
            ],
            rules: {
                context: [
                    { required: true, message: '请填写按钮文字', trigger: 'blur' }
                ],
                function: [
                    { required: true, message: '请选择按钮功能', trigger: 'change'}
                ],
                hideType: [
                    { required: true, message: '请选择显隐元素类型', trigger: 'change' }
                ]
            }
        };
    },
    computed:{
        ...mapGetters('iscs', [
            'iscs'
        ])
    },
    watch:{
        '$store.state.iscs.rightClickCount': function (val) {
            const model = this.$store.getters['iscs/updateDeviceData'];
            if (model._type === 'IscsButton' ) {
                this.buttonText = '修改';
                this.showDeleteButton = true;
                this.isUpdate = true;
                this.form.code = model.code;
                this.form.z2 = model.z2;
                this.form.levelPadding = model.levelPadding;
                this.form.verticalPadding = model.verticalPadding;
                this.form.isTransparent = model.isTransparent;
                this.form.x = model.point.x;
                this.form.y = model.point.y;
                this.form.context = model.context;
                this.form.function = model.function;
                this.form.fontSize = model.fontSize;
                this.form.textColor = model.textColor || '#fff';
                this.form.textColorActive = model.textColorActive || '#000';
                this.form.fillColor = model.fillColor;
                this.form.fillColorActive = model.fillColorActive;
                this.form.hideType = model.hideType;
            }
        }
    },
    mounted() {
        if (this.$route.query.lineCode == '02') {
            this.functionList = [
                {label: '操作按钮', value: 'OperatingButton'},
                {label: '门禁站台层', value: 'goToStand'},
                {label: '门禁站厅层', value: 'goToStation'},
                {label: '火灾报警系统-站厅层A端', value: 'goFireStation-Two'},
                {label: '火灾报警系统-站厅层B端', value: 'goFireStation-Three'},
                {label: '火灾报警系统-站厅层C端', value: 'goFireStation-Four'},
                {label: '火灾报警系统-站厅层D端', value: 'goFireStation-Five'},
                {label: '火灾报警系统-站厅层E端', value: 'goFireStation-Six'},
                {label: '火灾报警系统-站厅层F端', value: 'goFireStation-Seven'},
                {label: '火灾报警系统-站台层A端', value: 'goFireStand-Two'},
                {label: '火灾报警系统-站台层B端', value: 'goFireStand-Three'},
                {label: '火灾报警系统-站台层公共区段', value: 'goFireStand-Four'},
                {label: '元素显隐', value: 'ElementShow'},
                {label: '返回', value: 'GoBack'}
            ];
        } else if (this.$route.query.lineCode == '07') {
            this.functionList = [
                {label: '图元说明', value: 'GraphicEle'},
                {label: '公共区域', value: 'PublicArea'},
                {label: '操作按钮', value: 'OperatingButton'},
                {label: '返回', value: 'GoBack'},
                {label: '至EPS系统及导向照明', value: 'GoEPS'},
                {label: '射流风机图', value: 'GoJetFan'},
                {label: '至B端小系统', value: 'GoBMiniSystem'},
                {label: '至A端小系统(一)', value: 'GoAMiniSystem1'},
                {label: '至A端小系统(二)', value: 'GoAMiniSystem2'}
            ];
        }
    },
    methods: {
        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    const rectModel = {
                        point: {
                            x: this.form.x,
                            y: this.form.y
                        },
                        code: this.isUpdate ? this.form.code : getUID('IscsButton', this.iscs.iscsButtonList),
                        _type: 'IscsButton',
                        z2: this.form.z2,
                        levelPadding: this.form.levelPadding,
                        verticalPadding: this.form.verticalPadding,
                        isTransparent: this.form.isTransparent,
                        context: this.form.context,
                        function: this.form.function,
                        fontSize: this.form.fontSize,
                        textColor: this.form.textColor,
                        textColorActive: this.form.textColorActive,
                        fillColor: this.form.fillColor,
                        fillColorActive: this.form.fillColorActive,
                        hideType: this.form.hideType
                    };
                    this.$emit('createDataModel', rectModel);
                    this.initPage();
                } else {
                    return false;
                }
            });
        },
        deleteDevice() {
            const rectModel = {
                point: {
                    x: this.form.x,
                    y: this.form.y
                },
                code: this.form.code,
                _type: 'IscsButton',
                levelPadding: this.form.levelPadding,
                verticalPadding: this.form.verticalPadding,
                isTransparent: this.form.isTransparent,
                context: this.form.context,
                function: this.form.function,
                fontSize: this.form.fontSize,
                fillColor: this.form.fillColor,
                fillColorActive: this.form.fillColorActive,
                hideType: this.form.hideType
            };
            this.$emit('deleteDataModel', rectModel);
        },
        initPage() {
            this.isUpdate = false;
            this.buttonText = '立即创建';
            this.showDeleteButton = false;
            this.form = {
                code: '',
                z2: '',
                levelPadding: 10,
                verticalPadding: 2,
                fontSize: 10,
                x: 10,
                y: 10,
                context: '',
                function: '',
                textColor: '',
                isTransparent: false,
                textColorActive: '#000',
                fillColor: '',
                fillColorActive: '',
                hideType: ''
            };
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .button_box{
        width: 100%;
        background: #f0f0f0;
        overflow: hidden;
    }
</style>
