<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <el-form-item :label="this.$t('ibp.alarmCode')" prop="code">
                <el-input :disabled="true" v-model="form.code">
                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
                </el-input>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.alarmWidth')" prop="alarmWidth">
                <el-input-number v-model="form.alarmWidth" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.xCoordinate')">
                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.yCoordinate')">
                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
                <el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'ButtonDraft',
        components: {
        },
        data() {
            return {
                isUpdate: false,
                buttonText: this.$t('ibp.createNow'),
                showDeleteButton: false,
                form: {
                    code: '',
                    alarmWidth: '',
                    x: 10,
                    y: 10
                },
                rules: {
                    code: [
                        { required: true, message: this.$t('rules.enterTheAlarmCode'), trigger: 'blur' },
                    ],
                    alarmWidth: [
                        { required: true, message: this.$t('rules.enterTheAlarmWidth'), trigger: 'blur' },
                    ]
                }
            };
        },
        computed: {

        },
        watch: {
            '$store.state.ibp.rightClickCount': function (val) {
                const model = this.$store.getters['ibp/updateDeviceData'];
                if (model._type === 'Alarm' ){
                    this.buttonText = this.$t('global.modify');
                    this.showDeleteButton = true;
                    this.isUpdate = true;
                    this.form.code = model.code;
                    this.form.alarmWidth = model.width;
                    this.form.x = model.point.x;
                    this.form.y = model.point.y;
                }
            }
        },
        mounted() {
        },
        methods: {
            onSubmit(form) {
                this.$refs[form].validate((valid) => {
                   if (valid){
                       const alarmModel = {
                           point:{
                               x: this.form.x,
                               y: this.form.y
                           },
                           code: this.form.code,
                           _type: 'Alarm',
                           width: this.form .alarmWidth,
                       };
                       this.$emit('createAlarm', alarmModel);
                       this.initPage();
                   } else {
                       return false;
                   }
                });
            },
            deleteDevice() {
                const alarmModel = {
                    point:{
                        x: this.form.x,
                        y: this.form.y
                    },
                    code: this.form.code,
                    _type: 'Alarm',
                    width: this.form .alarmWidth,
                };
                this.$emit('deleteDataModel',alarmModel );
                this.initPage();
            },
            initPage() {
                this.isUpdate = false;
                this.buttonText = this.$t('ibp.createNow');
                this.showDeleteButton = false;
                this.form = {
                    code: '',
                    alarmWidth: '',
                    x: 10,
                    y: 10
                };
            },
            generateCode() {
                const mydate = new Date();
                this.form.code =  "alarm_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
