<template>
    <div class="Task">
        <div class="other-people">
            <div class="other-people-title">
                <div class="image-border image-border1"></div>
                <div class="image-border image-border2"></div>
                <div class="image-border image-border3"></div>
                <div class="image-border image-border4"></div>
                扫描控制
            </div>
        </div>
        <div class="regionList">
            <el-row>
                <el-col :span="24">
                    <el-col :span="6"><em class="label">扫描策略</em></el-col>
                    <el-col :span="18">
                        <el-select v-model="scan.tactics" placeholder="请选择">
                            <el-option
                                    v-for="item in tactics_options"
                                    :key="item.Id"
                                    :label="item.Name"
                                    :value="item.Id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="6"><em class="label">无线协议</em></el-col>
                    <el-col :span="18">
                        <el-select v-model="scan.agreement" multiple placeholder="请选择">
                            <el-option
                                    v-for="item in agreement_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col :span="24" v-if="scopeState">
                    <el-col :span="6"><em class="label">起始频率</em></el-col>
                    <el-col :span="18">
                        <el-input v-model="scan.begin" type="number" placeholder="单位100K"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="24" v-if="scopeState">
                    <el-col :span="6"><em class="label">截止频率</em></el-col>
                    <el-col :span="18">
                        <el-input v-model="scan.end" placeholder="单位100K"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="6"><em class="label">扫描距离</em></el-col>
                    <el-col :span="18">
                        <el-select v-model="scan.distance" placeholder="请选择">
                            <el-option
                                    v-for="item in distance_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="6"><em class="label_checked">
                        <el-checkbox v-model="isRecording">信号录制</el-checkbox>
                    </em></el-col>
                    <el-col :span="18">
                        <el-button type="primary" plain size="small" @click="startScan">开始扫描</el-button>
                    </el-col>
                </el-col>
                <ul class="scan_detail">
                    <li>
                        <em>运行状态: </em>
                        <span>{{taskText.IsStop |filterIsStop }}</span>
                    </li>
                    <li>
                        <em>开始时间: </em>
                        <span>{{taskText.BeginAt|filterBeginAt }}</span>
                    </li>
                    <li>
                        <em>持续时间: </em>
                        <span>{{taskText.Duration |filterDuration}}</span>
                    </li>
                    <li>
                        <em>数据大小: </em>
                        <span>{{parseFloat(taskText.DataSize /1024).toFixed(2)}} MB</span>
                    </li>
                </ul>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Global from "../Global"

    let qs = require('qs');
    export default {
        data() {
            return {
                scopeState: false,
                isRecording: true,
                scan: {
                    tactics: 0,
                    agreement: [],
                    begin: 0,
                    end: 0,
                    distance: 1,
                    cycle: 0,

                },
                tactics_options: [
                    {
                        Id: 0,
                        Name: '自定义扫描'
                    }
                ],
                taskText:{
                    BeginAt:'',
                    DataSize:'0',
                    Duration:'',
                    IsStop:false,
                },
                agreement_options: WirelessType(),
                distance_options: WirelessRange(),
                value: ''
            }
        },
        props: ['taskInfo','taskResult'],
        watch: {
            taskResult: {
                handler(newName, oldName) {
                    this.taskText.BeginAt = newName.BeginAt;
                    this.taskText.DataSize = newName.DataSize;
                    this.taskText.Duration = newName.Duration;
                    this.taskText.IsStop = newName.IsStop;
                },
                deep: true,
                immediate: true
            },
            taskInfo: {
                handler(newName, oldName) {
                    if(!newName.length) return false;
                    this.tactics_options = newName;
                },
                deep: true,
                immediate: true
            },
            scan: {
                handler(newName, oldName) {
                    if (parseInt(newName.begin) > 6000) {
                        this.$notify.error({
                            title: '错误',
                            message: '起始频率不能大于6000'
                        });
                        return false
                    }
                    if (parseInt(newName.begin) < 0) {
                        this.$notify.error({
                            title: '错误',
                            message: '起始频率不能小于0'
                        });
                        return false
                    }
                    if (parseInt(newName.end) > 6000) {
                        this.$notify.error({
                            title: '错误',
                            message: '截止频率不能大于6000'
                        });
                        return false
                    }
                    if (parseInt(newName.end) < 0) {
                        this.$notify.error({
                            title: '错误',
                            message: '截止频率不能小于0'
                        });
                        return false
                    }
                    if (parseInt(newName.end) < parseInt(newName.begin)) {
                        this.$notify.error({
                            title: '错误',
                            message: '截止频率不能小于起始频率'
                        });
                        return false
                    }

                    // 0-6G现实范围
                    if (newName.agreement.indexOf(13) > -1) {
                        this.scopeState = true
                    } else {
                        this.scopeState = false
                    }

                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            // 扫描开始
            startScan() {
                let that = this;
                let freq06G =[];
                let signalList =[];
                let token = localStorage.token;
                if(that.scan.begin > 0){
                    freq06G = [
                        {
                            begin:parseInt(that.scan.begin),
                            end: parseInt(that.scan.end)
                        }
                    ]
                }
                if(that.scan.agreement.length == 0){
                    that.$message({
                        showClose: true,
                        message: '无线协议不能为空！',
                        type: 'error'
                    });
                    return false
                }
                for(var i = 0; i < that.scan.agreement.length; i++) {
                    signalList[i] = {
                        "range": that.scan.distance,
                        "type": that.scan.agreement[i]
                    }
                }

                let Rs = {
                    freq06G:freq06G,
                    isRecording:this.isRecording,
                    signalList:signalList,
                    token: token
                };
                this.$emit('GetScanClick', Rs);//触发事件
            },
        },
        filters: {
            filterIsStop: function (value) {
                if (value) {
                    return "扫描中"
                } else {
                    return "已停止";
                }
            },
            filterBeginAt: function (value) {
                if (!value) {
                    return "未开始"
                } else {
                    return filterTimeToString(value);
                }
            },
            filterDuration: function (value) {
                if (!value) {
                    return "未开始"
                } else {
                    return filterTimeToShortString(value);
                }
            },
        }
    }
</script>

<style scoped>
    .Task {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
    }

    .regionList {
        width: 100%;
        height: 433px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        color: #6DC1FF;
    }

    .regionList .label {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        line-height: 40px;
        text-align: right;
        color: #fff;
        font-size: 14px;
    }

    .regionList /deep/ .el-input__inner {
        background-color: rgba(0, 130, 255, 0.05);
        border: 1px solid #6DC1FF;
        color: #fff;
    }

    /deep/ .el-col {
        margin-bottom: 6px;

    }

    .label_checked {
        margin-left: 45px;
        line-height: 40px;
    }

    .regionList button {
        float: right;
        margin-right: 25px;
    }

    .label_text {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        line-height: 40px;
        text-align: left;
        text-indent: 10px;
    }

    /deep/ .el-input {
        border-radius: 0;
        width: 180px;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
    }

    /deep/ .el-button {
        background-color: rgba(0, 130, 255, 0.05);
        border: 1px solid #6DC1FF;
        margin-right: 45px !important;
    }

    /deep/ .label_checked {
        margin-left: 35px;
    }

    .scan_detail {
        width: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 14px;
    }

    .scan_detail li {
        text-align: left;
        color: #fff;
        margin-bottom: 3px;
    }
</style>
