<div id="app">
        <div class="row">
            <div class="col-md-3">
                <div v-if="screenShotUrl">
                    <img :src="screenShotUrl" style="width:100%; height: auto;" />
                </div>
                <div v-else>
                    <img src="/ui/plugin/iOS/static/images/iPhone_default.png" style="width:100%; height: auto;" />
                </div>
            </div>
    
            <div class="col-md-9">
                <div class="box box-solid">
                    <div class="box-body">
                        <div v-if="currentDevice" class="span15 col-md-20 columns twelve large-15">
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab_device_info" data-toggle="tab">Device info</a></li>
                                    <li><a href="#tab_app_info" data-toggle="tab">Application management</a></li>
                                </ul>
    
                                <div class="tab-content">
                                    <!--tab_device_info-->
                                    <div class="tab-pane active" id="tab_device_info">
                                        <div id="device-info">
                                                <div>
                                                    <table class="table table-responsive">
                                                        <tr>
                                                            <td>
                                                                <label>Device Name</label>
                                                            </td>
                                                            <td>
                                                                <span>{{currentDevice.device_name}}</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <label>Model</label>
                                                            </td>
                                                            <td>
                                                                <span>{{currentDevice.model}}</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <label>OS Version</label>
                                                            </td>
                                                            <td>
                                                                <span>{{currentDevice.os_version}}</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <label>Phone Number</label>
                                                            </td>
                                                            <td>
                                                                <span>{{currentDevice.phone_number}}</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <label>SN</label>
                                                            </td>
                                                            <td>
                                                                <span>{{currentDevice.sn}}</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <label>UniqueDeviceID</label>
                                                            </td>
                                                            <td>
                                                                <span>{{currentDevice.device_id}}</span>
                                                            </td>
                                                        </tr>
                                                </table>
    
                                                <button class="btn btn-primary" data-toggle="modal"
                                                        data-target="#device-detail-modal">More details</button>
                                                <button class="btn btn-primary" v-on:click="takeScreenShot" :disabled="isTakingScreen">Take screenshot</button>
                                                <button class="btn btn-primary" v-on:click="startApp" :disabled="isStartingApp">Start app</button>
                                                <button class="btn btn-primary" v-on:click="stopApp">Stop app</button>
                                                <br><p><b><font color="#FF0000" v-html="user_msg"></font></b></p>
                                                <hr style="height: 1px">
    
                                                </div>
                                        </div>
                                    </div>
                                    <!--tab_app_info-->
                                    <div class="tab-pane" id="tab_app_info">
                                        <h3>Bundle ID or APP Name</h3>
                                        <i-select v-model="currentApp" placeholder="input..." filterable>
                                            <i-option v-for="item in allApps" :value="item.bundle_id" :key="item.bundle_id" :label="item.bundle_id">
                                                <span>{{ item.bundle_id }}</span>
                                                <span style="float:right;color:#ccc">{{ item.app_name }}</span>
                                            </i-option>
                                        </i-select>
                                        <table class="table table-responsive" style="position: relative">
                                            <tr>
                                                <td><label>BuildNumber</label></td>
                                                <td>
                                                    <span v-if="currentappInfo">
                                                        {{currentappInfo.BuildNumber}}
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label>AppName</label></td>
                                                <td>
                                                    <span v-if="currentappInfo">
                                                        {{currentappInfo.AppName}}
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><label>VersionNumber</label></td>
                                                <td>
                                                    <span v-if="currentappInfo">
                                                        {{currentappInfo.VersionNumber}}
                                                    </span>
                                                    <Spin size="large" fix v-if="isLoadingAppInfo"></Spin>
                                                </td>
                                            </tr>
                                        </table>
                                    </div><!-- /.tab-content -->
                                </div><!-- /.tab-pane -->
                            </div>
                        </div>
    
    
                        <div v-else>
                            <div class="box-box" v-if="Object.keys(devices).length>0">
                                <h1>Device found.</h1><br>
                                <hr style="height: 3px">
                                <p v-for="(device, id) in devices">
                                    <button type="button" class="btn bg-navy btn-flat margin" v-on:click="showDeviceInfo(id)"> {{ device.device_name }} </button>
                                </p>
                            </div>
                            <div v-else>
                                <h1>No device found, is it plugged in?</h1><br>
                                <hr style="height: 3px">
                                <br>
                                <div v-show="showError">
                                    <h3>If the device is already connected 👇</h3>
                                    <span style="color: #FF0000;" v-html="userMsg"></span>
                                </div>
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
         <!-- Detail MODAL -->
        <div class="modal fade" id="device-detail-modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><i class="fa fa-edit"></i>Detail</h4>
                    </div>
                    <div class="modal-body">
                        <div v-if="currentDeviceDetail">
                            <pre>{{currentDeviceDetail}}</pre>
                        </div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    
<script>
    var sio = io('/iOS-plugin');
    var apiUrl = '/ui/plugin/iOS/api';
    
    new Vue({
        el: '#app',
        data: {
            showError: false,
            userMsg: null,
            currentApp: null,
            currentappInfo: null,
            devices: {},
            currentDevice: null,
            currentDeviceDetail: null,
            logs: [],
            screenShotUrl: null,
            isTakingScreen: false,
            isStartingApp: false,
            isWdaReady: false,
            isLoadingAppInfo: false,
            allApps: null,
            user_msg: null,
        },
        created: function () {
            this.getDefaultApp();
            this.getDevices();
            this.get_ready();
            
            var getDevices = this.getDevices;
            sio.on('device', function (data) {
                getDevices();
            });
        },
        watch: {
            currentApp: function() {
                if (this.currentApp  && this.currentDevice){
                    this.getAppInfo();
                }
            }
        },
        methods: {
            get_ready() {
                fetch(apiUrl + '/check-env')
                    .then(res => res.json())
                    .then(json => {
                        this.showError = json.show_error;
                        this.userMsg = json.user_message;
                    })
                    .catch(err => console.warn(err));
            },
            getDefaultApp: function() {
                this.$http.get(apiUrl + '/conf')
                    .then(function (response) {
                        if(response.data.bundleId){
                            this.currentApp = response.data.bundleId;
                        }
                    });
            },
            getAllApps: function() {
                this.$http.get(apiUrl + '/apps/' + this.currentDevice.device_id)
                    .then(function (response){
                        this.allApps = response.data;
                    });
            },
            getAppInfo() {
                this.isLoadingAppInfo = true;
                this.$http.get(apiUrl + '/apps/' + this.currentDevice.device_id + '/' + this.currentApp)
                    .then(function (response){
                        this.currentappInfo = response.data;
                        this.isLoadingAppInfo = false;
                    });
            },
            startApp: function () {
                this.isStartingApp = true;
                this.user_msg = 'Keep screen unlocked';
                this.$http.get(apiUrl + '/start_app/'+this.currentDevice.device_id + '/' + this.currentApp)
                    .then(function (response) {
                        if (response.data.code === 3000) {
                            this.user_msg = response.data.message
                        } else {
                            this.isStartingApp = false;
                            this.takeScreenShot();
                            this.user_msg = null
                        }
                    });
            },
            stopApp: function () {
                this.$http.get(apiUrl + '/stop_app/'+this.currentDevice.device_id + '/' + this.currentApp)
                    .then(function (response) {
                        if (response.data.code === 3000) {
                            this.user_msg = response.data.message
                        } else {
                            this.user_msg = null;
                        }
                    });
            },
            getDevices: function () {
                this.$http.get(apiUrl + '/devices').then(function (response) {
                    this.devices = response.data;
                });
            },
            getDeviceDetail: function () {
                this.$http.get(apiUrl + '/device/' + this.currentDevice.device_id)
                    .then(function (response) {
                        this.currentDeviceDetail = response.data;
                        this.takeScreenShot();
                        this.getAllApps();
                    });
                if (this.currentApp){
                    this.getAppInfo();
                }
            },
            takeScreenShot: function () {
                this.isTakingScreen = true;
                this.$http.get(apiUrl + '/screenshot/'+this.currentDevice.device_id)
                    .then(function (response) {
                        this.isTakingScreen = false;
                        if (response.data.code === 3000) {
                            this.user_msg = response.data.message
                        } else {
                            this.screenShotUrl = response.data.imgUrl;
                            this.user_msg = null
                        }
                    });
            },
            showDeviceInfo: function (device_id) {
                if (this.currentDevice !== this.devices[device_id]) {
                    this.currentDevice = this.devices[device_id];
                }
                this.getDeviceDetail();
            }
        }
    })
</script>
