<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.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">无线协议</em></el-col>
                    <el-col :span="18">
                        <el-select v-model="scan.agreement" 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">
                    <el-col :span="6"><em class="label">起始频率</em></el-col>
                    <el-col :span="18">
                        <el-input v-model="scan.begin" type="number" placeholder="请输入内容"></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-input v-model="scan.end" placeholder="请输入内容"></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">检测周期</em></el-col>
                    <el-col :span="18">
                        <el-input v-model="scan.cycle" type="number" placeholder="请输入内容"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="6"><em class="label_checked">
                        <el-checkbox v-model="checked">信号录制</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>{{result.begin}}</span>
                    </li>
                    <li>
                        <em>持续时间: </em>
                        <span>{{result.hold}}</span>
                    </li>
                    <li>
                        <em>数据大小: </em>
                        <span>{{result.date}}</span>
                    </li>
                </ul>
            </el-row>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checked: true,
                scan: {
                    tactics: 0,
                    agreement: 0,
                    begin: 0,
                    end: 0,
                    distance: 0,
                    cycle: 0,
                },
                result: {
                    begin: '',
                    hold: '',
                    date: '',
                },
                tactics_options: [
                    {
                        value: 0,
                        label: '自定义扫描'
                    }
                ],
                agreement_options: [
                    {
                        value: 0,
                        label: '中国移动GSM'
                    }
                ], distance_options: [
                    {
                        value: 0,
                        label: '全覆盖'
                    }, {
                        value: 5,
                        label: '5cm'
                    }, {
                        value: 20,
                        label: '20cm'
                    }, {
                        value: 50,
                        label: '50cm'
                    }, {
                        value: 100,
                        label: '1m'
                    }
                ],
                value: ''
            }
        },
        watch: {
            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
                    }

                    // ...
                },
                deep: true,
                immediate: true
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.writeScanResult();
            },
            // 扫描开始
            startScan() {
                this.$message({
                    message: '扫描已开始',
                    type: 'success'
                });
                this.writeScanResult();
            },
            // 渲染扫描状态
            writeScanResult() {
                this.result.begin = "2021-01-02 09:05:21";
                this.result.hold = "1小时23分21秒";
                this.result.date = "21G";
            }
        }
    }
</script>

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

    .regionList {
        width: 100%;
        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>
