let unitC = Vue.component('unit', {
    template: '#unit-template',
    props: ['unit', 'mode', 'filterData'],
    data: function () {
        return {
            isOn: false,
            isFiltered: false
        }
    },
    computed:{
        fio: function () {
            if (this.unit.short_fio!=null && this.unit.short_fio.length > 0) {
                return this.unit.short_fio.split(' ')[0];
            }

            return '007';
        }
    },
    methods: {
        unitClick: function () {
            if (this.$().activeTalkingService.talking[this.mode].some(unitID=>unitID == this.unit.id)) {
                this.$().activeTalkingService.talking[this.mode] =
                    this.$().activeTalkingService.talking[this.mode].filter(unitID=>unitID != this.unit.id);
                this.isOn = false;
            }
            else {
                this.$().activeTalkingService.talking[this.mode].push(this.unit.id);
                this.isOn = true;
            }

            this.$emit('flagChanged');
        },
        modeChanges: function () {

            if (!this.mode)
                return;

            let newValue = this.$().activeTalkingService.talking[this.mode].some(unitID=>unitID == this.unit.id);

            if (this.isOn != newValue) {
                this.isOn = newValue;
                this.$emit('flagChanged');
            }
        },
        checkSelected: function () {

            if (this.filterData == '') {
                this.isFiltered = false;
                return;
            }

            this.isFiltered = this.unit.fio.toLowerCase().indexOf(this.filterData.toLowerCase()) > -1;

        }
    },
    created: function () {
        let self = this;
        this.filterData = '';
        self.modeChanges();

        this.$watch(function () { return this.filterData }, function () {
            self.checkSelected();
        });

        this.$watch(function () { return this.mode }, function () {
            self.modeChanges();
        });
    }
})

 <div v-bind:class="[{'quoteContainer':isQuote},'md-list-text-container']">

                    <message v-if="hasQuote" v-bind:message="this.message.quote" v-bind:isQuote="true"></message>

                    <div v-if="isImage">
                        <img style="box-shadow:17px 16px 20px 0px rgba(0, 0, 0, 0.28)" v-bind:src="filePath" />
                        <p class="phoneHide">{{filename}}</p>
                    </div>

                    <span v-if="isText" v-href-seeker="{isQuote:isQuote}"
                          v-bind:class="[{'mainMessage': hasQuote && !isQuote},{'quotedMessage':isQuote},'message-text']">

                        <md-icon class="quoteIcon" v-if="isQuote">format_quote</md-icon>{{message.body}}
                    </span>
                    <span v-bind:class="[{'quotedSign':isQuote},'message-sign']">{{userName}}   {{message.createdAtText}}</span>


                    <file v-if="isBlob" v-bind:name="filename" v-bind:id="secureFilename">

                    </file>


                </div>