<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <el-form-item :label="this.$t('ibp.arrowCode')" 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.arrowDirection')" prop="orientation">
                <el-select v-model="form.orientation" :placeholder="this.$t('rules.selectTheDirectionOfTheArrow')">
                    <el-option :label="this.$t('ibp.up')" value="top"></el-option>
                    <el-option :label="this.$t('ibp.down')" value="bottom"></el-option>
                    <el-option :label="this.$t('ibp.left')" value="left"></el-option>
                    <el-option :label="this.$t('ibp.right')" value="right"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.arrowLength')" prop="arrowLength">
                <el-input-number v-model="form.arrowLength" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.arrowWidth')" prop="arrowLength">
                <el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.arrowColor')" prop="fillColor">
                <el-color-picker v-model="form.fillColor"></el-color-picker>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.vertexXCoordinate')">
                <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.vertexYCoordinate')">
                <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: 'ArrowDraft',
        components: {
        },
        data() {
            return {
                isUpdate: false,
                buttonText: this.$t('ibp.createNow'),
                showDeleteButton: false,
                form: {
                    code: '',
                    orientation: 'left',
                    arrowWidth: '',
                    arrowLength: '',
                    fillColor: '',
                    x: 10,
                    y: 10
                },
                rules: {
                    code: [
                        { required: true, message: this.$t('rules.enterTheArrowCode'), trigger: 'blur' },
                    ],
                    orientation: [
                        { required: true, message: this.$t('rules.selectTheDirectionOfTheArrow'), trigger: 'change'}
                    ],
                    arrowLength: [
                        { required: true, message: this.$t('rules.enterTheArrowLength'), trigger: 'blur' },
                    ],
                    arrowWidth: [
                        { required: true, message: this.$t('rules.enterTheArrowWidth'), trigger: 'blur' },
                    ],
                    fillColor: [
                        { required: true, message: this.$t('rules.enterTheArrowColor'), trigger: 'blur' },
                    ],
                }
            };
        },
        computed: {

        },
        watch: {
            '$store.state.ibp.rightClickCount': function (val) {
                const model = this.$store.getters['ibp/updateDeviceData'];
                if (model._type === 'Arrow' ){
                    this.buttonText = this.$t('global.modify');
                    this.showDeleteButton = true;
                    this.isUpdate = true;
                    this.form.code = model.code;
                    this.form.orientation = model.orientation;
                    this.form.arrowLength = model.length;
                    this.form.arrowWidth = model.width;
                    this.form.fillColor = model.fill;
                    this.form.x = model.point.x;
                    this.form.y = model.point.y;
                }
            }
        },
        mounted() {
        },
        methods: {
            onSubmit(form) {
                this.$refs[form].validate((valid) => {
                    if (valid){
                        const arrowModel = {
                            point: {
                                x: this.form.x,
                                y: this.form.y
                            },
                            _type: 'Arrow',
                            code: this.form.code,
                            orientation: this.form.orientation,
                            fill: this.form.fillColor,
                            width: this.form .arrowWidth,
                            length: this.form.arrowLength,
                        };
                        this.$emit('createArrow', arrowModel);
                        this.initPage();
                    }else {
                        return false;
                    }
                });

            },
            deleteDevice() {
                const arrowModel = {
                    point: {
                        x: this.form.x,
                        y: this.form.y
                    },
                    _type: 'Arrow',
                    code: this.form.code,
                    orientation: this.form.orientation,
                    fill: this.form.fillColor,
                    width: this.form .arrowWidth,
                    length: this.form.arrowLength,
                };
                this.$emit('deleteDataModel',arrowModel);
                this.initPage();
            },
            initPage() {
                this.isUpdate = false;
                this.buttonText = this.$t('ibp.createNow');
                this.showDeleteButton = false;
                this.form = {
                    code: '',
                    orientation: 'left',
                    arrowWidth: '',
                    arrowLength: '',
                    fillColor: '',
                    x: 10,
                    y: 10
                };
            },
            generateCode() {
                const mydate = new Date();
                this.form.code =  "arrow_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
