<template>
    <div id="jczc">
        <el-tabs type="border-card">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-s-claim"></i> 决策支持</span>
                <div class="left-jczc">
                    <ul>
                        <li v-for="(item, index) in jczcStep" v-text="item" :class="index == choiceIndex ? 'active' : ''"
                            @click="choiceStep(item, index)"></li>
                    </ul>
                </div>
                <div class="right-jczc">
                    <!-- 情况导入 -->
                    <div class="jczc-qkdr" v-if="choiceIndex == 0">
                        <div class="qkdr-content">
                            <div class="left-content">
                                <el-input type="textarea" autosize="" v-model="importText"></el-input>
                            </div>
                            <!-- <div class="right-content">
                        <el-upload class="upload-demo" action="" :on-change="handleChange">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                        <div class="button-import">导入</div>
                    </div> -->
                        </div>
                        <div class="qkdr-result">
                            <div class="left-result">
                                <div class="cardResult" v-for="(item, index) in resultList">
                                    <el-input v-model="resultList[index]" :style="{ width: getTextWidth(item, 13) }"></el-input>
                                    <span class="el-icon-error" @click="deleteCard(item, index)"></span>
                                </div>
                                <span class="el-icon-circle-plus" @click="addCard"></span>
                            </div>
                            <!-- <div class="right-result">
                        <div class="button-edit">编辑</div>
                    </div> -->
                        </div>
                        <div class="button-create" @click="createFxyp">生成</div>
                    </div>
                    <!-- 分析研判 -->
                    <div class="jczc-fxyp" v-else-if="choiceIndex == 1">
                        <div class="fxyp-content">
                            <div class="left-content">
                                <el-form ref="form" :model="form" label-width="120px">
                                    <el-form-item label="消息来源">
                                        <el-radio v-for="item in fxypFormList.xxlyRadio" v-model="form.xxlyRadio"
                                            :label="item" :key="item"></el-radio>
                                    </el-form-item>
                                    <el-form-item label="对手情况">
                                        <el-select v-model="form.dsqkSelect" multiple placeholder="请选择" clearable>
                                            <el-option v-for="item in dsqkOption" :key="item" :label="item" :value="item">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="对手目的">
                                        <el-radio v-for="item in fxypFormList.dsmdRadio" v-model="form.dsmdRadio"
                                            :label="item" :key="item"></el-radio>
                                    </el-form-item>
                                    <el-form-item label="法理属性">
                                        <el-radio v-for="item in fxypFormList.flsxRadio" v-model="form.flsxRadio"
                                            :label="item" :key="item"></el-radio>
                                    </el-form-item>
                                    <el-form-item label="当前态势">
                                        <el-radio v-for="item in fxypFormList.dqtsRadio" v-model="form.dqtsRadio"
                                            :label="item" :key="item"></el-radio>
                                    </el-form-item>
                                    <el-form-item label="下步影响">
                                        <el-radio v-for="item in fxypFormList.xbyxRadio" v-model="form.xbyxRadio"
                                            :label="item" :key="item"></el-radio>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="right-content">
                                <div class="button-create" @click="getFxypResult">生成结果</div>
                            </div>
                        </div>
                        <div class="fxyp-result">
                            <div class="left-result">
                                <div class="cardResult" v-for="(item, index) in resultListFxyp">
                                    <el-input v-model="resultListFxyp[index]"
                                        :style="{ width: getTextWidth(item, 13) }"></el-input>
                                    <span class="el-icon-error" @click="deleteCardFxyp(item, index)"></span>
                                </div>
                                <span class="el-icon-circle-plus" @click="addCardFxyp"></span>
                            </div>
                            <!-- <div class="right-result">
                        <div class="button-edit">编辑</div>
                    </div> -->
                        </div>
                        <div class="button-nextStep" @click="nextStep">下一步</div>
                    </div>
                    <!-- 处置原则 -->
                    <div class="jczc-czyz" v-else-if="choiceIndex == 2">
                        <div class="czyz-content">
                            <el-tabs type="border-card">
                                <el-tab-pane v-for="(item1, index1) in objectList" :key="index1">
                                    <span slot="label"><i class="el-icon-message-solid"></i>{{ item1.object }}</span>
                                    <el-form ref="form" label-width="120px">
                                        <el-form-item label="应对策略">
                                            <el-radio-group v-model="item1.copingStrategies">
                                                <el-radio v-for="(item, index) in QfdxList.ydcl" :label="item"
                                                    :key="index">{{ item }}</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="应对强度">
                                            <el-radio-group v-model="item1.copingStrength">
                                                <el-radio v-for="(item, index) in QfdxList.ydqd" :label="item"
                                                    :key="index">{{ item }}</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="应对渠道">
                                            <el-radio-group v-model="item1.copingChannel">
                                                <el-radio v-for="(item, index) in QfdxList.ydqd1" :label="item"
                                                    :key="index">{{ item }}</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-form>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                        <div class="czyz-result">
                            <div class="title" @click="visibleFhcs">防护措施</div>
                            <div class="result-content" v-show="visibleForm">
                                <el-form ref="form" :model="formFhcs" label-width="120px">
                                    <el-form-item label="舆论管控">
                                        <el-radio-group v-model="formFhcs.ylgkRadio">
                                            <el-radio v-for="(item, index) in FhcsList.ylgk" :label="item"
                                                :key="index">{{ item }}</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="法理应对">
                                        <el-radio-group v-model="formFhcs.flydRadio">
                                            <el-radio v-for="(item, index) in FhcsList.flyd" :label="item"
                                                :key="index">{{ item }}</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="心理防护">
                                        <el-radio-group v-model="formFhcs.xlfhRadio">
                                            <el-radio v-for="(item, index) in FhcsList.xlfh" :label="item"
                                                :key="index">{{ item }}</el-radio>
                                        </el-radio-group>

                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="button-create" @click="createCzyj">生成</div>
                        </div>
                    </div>
                    <!-- 处置预警 -->
                    <div class="jczc-czyj" v-else-if="choiceIndex == 3 || choiceIndex == 4">
                        <div class="czyj-content">
                            <div class="title">措施建议</div>
                            <div class="content-result">
                                <ul>
                                    <li v-for="(item, index) in csjyList">
                                        <el-tag type="danger" effect="dark" size="mini">{{ item.country }}</el-tag>
                                        <!-- <span v-for="item1 in item.data">{{item1.content}}</span> -->
                                        <ul>
                                            <li v-for="(item1, index1) in item.data">
                                                <el-input v-model="item1.content"></el-input>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="czyj-result">
                            <div class="result-cpjy">
                                <div class="title">产品建议</div>
                                <div class="cpjy-content">
                                    <div class="content-content" v-for="(item, index) in cpjyObjList">
                                        <div class="country">{{ item.country }}</div>
                                        <div class="content-result">
                                            <div class="content-title">议题设置</div>
                                            <ul>
                                                <li v-for="(item1, index1) in item.data">
                                                    <!-- <span v-text="item1.issues"></span> -->
                                                    <el-input v-model="item1.issues"></el-input>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="content-result">
                                            <div class="content-title">发布口径</div>
                                            <ul>
                                                <li v-for="(item1, index1) in item.data">
                                                    <!-- <span v-text="item1.cal"></span> -->
                                                    <el-input v-model="item1.cal"></el-input>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="content-result">
                                            <div class="content-title">产品推送</div>
                                            <ul>
                                                <li v-for="(item1, index1) in item.data">
                                                    <!-- <span v-text="item1.productDelivery"></span> -->
                                                    <el-input v-model="item1.productDelivery"></el-input>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-create" @click="createYa">预览</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-s-claim"></i> 预案列表</span>
                <div class="search">
                    <el-input v-model="yaName"></el-input>
                    <div class="button-delete" v-if="multipleSelection.length > 0" @click="deleteYa()">删除</div>
                    <div class="button-search" @click="search()">搜索</div>
                </div>
                <div class="searchResult">
                    <el-table :data="yaList" ref="multipleTable" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="content" label="内容" show-overflow-tooltip>
                        </el-table-column>
                        <!-- <el-table-column prop="result" label="结果" show-overflow-tooltip>
                        </el-table-column> -->
                        <el-table-column prop="createTime" label="生成时间" width="200">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="exportResult(scope.row)" type="primary">导出</el-button>
                                <el-button size="mini" @click="viewResult(scope.row)">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-div">
                        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                            @size-change="handleSizeChange" :page-size="yaObj.everySize" :current-page="yaObj.currentPage"
                            :total="yaObj.total" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog class="yaxq" title="详情" center :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <div class="czjy">
                <div class="czjy-title">分析研判</div>
                <div class="czjy-result">
                    <ul>
                        <li v-for="(item, index) in yaxqObj.fxyp">
                            <span>{{ item }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="czjy" style="margin-top:20px;">
                <div class="czjy-title">措施建议</div>
                <div class="czjy-result">
                    <ul>
                        <li v-for="(item, index) in yaxqObj.csjy">
                            <el-tag type="danger" effect="dark" size="mini">{{ item.country }}</el-tag>
                            <ul>
                                <li v-for="item1 in item.data">
                                    <span>{{ item1.content }}</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="cpjy">
                <div class="cpjy-title">产品建议</div>
                <div class="cpjy-result">
                    <div class="result-content" v-for="(item, index) in yaxqObj.cpjy">
                        <div class="country">{{ item.country }}</div>
                        <div class="content-result">
                            <div class="content-title">议题设置</div>
                            <ul>
                                <li v-for="(item1, index1) in item.data">
                                    <span v-text="item1.issues"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="content-result">
                            <div class="content-title">发布口径</div>
                            <ul>
                                <li v-for="(item1, index1) in item.data">
                                    <span v-text="item1.cal"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="content-result">
                            <div class="content-title">产品推送</div>
                            <ul>
                                <li v-for="(item1, index1) in item.data">
                                    <span v-text="item1.productDelivery"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="scya" v-show="type_show">生成预案</el-button>
                <!-- <el-button size="mini" type="primary" @click="dialogVisible = false" v-show="type_show">导出Word</el-button> -->
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { post, fileDownload } from '../../util/http_util';
import {
    queryMeasuresSuggested,
    queryDecisionSituationAnalysisJudgment,
    queryDecisionInformationProduct,
    queryCountry,
    saveResult,
    queryResult,
    removeResult
} from "../../api/decision"
export default {
    data() {
        return {
            jczcStep: ['情况导入', '分析研判', '处置原则', '处置预警'],//,'一键生成'
            choiceIndex: 0,
            resultList: [],
            importText: '',
            //分析研判
            dsqkOption: [],
            fxypFormList: {
                xxlyRadio: ['白色', '灰色', '黑色'],
                dsqkSelect: [],
                dsmdRadio: ['挑衅', '搅局', '干预'],
                flsxRadio: ['合法', '模糊', '非法'],
                dqtsRadio: ['有利', '对峙', '不利'],
                xbyxRadio: ['非常严重', '严重', '一般']
            },
            form: {
                xxlyRadio: '',
                dsqkSelect: [],
                dsmdRadio: '',
                flsxRadio: '',
                dqtsRadio: '',
                xbyxRadio: ''
            },
            resultListFxyp: [],
            //处置原则
            objectList: [],
            qfdxIndex: 0,
            formQfdx: {
                ydclRadio: '不做回应',
                ydqdRadio: '原则表态',
                ydqd1Radio: '网络传播'
            },
            QfdxList: {
                ydcl: ['直接面对', '不做回应', '转换议题'],
                ydqd: ['强势坚决', '原则表态', '表达善意'],
                ydqd1: ['权威发声', '媒体报道', '网络传播', '内部传递']
            },
            formFhcs: {
                ylgkRadio: '引导',
                flydRadio: '解读',
                xlfhRadio: '疏导'
            },
            FhcsList: {
                ylgk: ['监控', '封堵', '引导'],
                flyd: ['阐释', '解读', '补救'],
                xlfh: ['疏导', '干预', '救治']
            },
            czyzList: {},
            visibleForm: true,
            //处置预警
            csjyList: [],
            cpjyObjList: [],
            yaObj: {
                everySize: 10,
                currentPage: 1,
                total: 0
            },
            yaList: [],
            yaName: '',
            multipleSelection: [],
            dialogVisible: false,
            yaxqObj: {
                csjy: [],
                cpjy: []
            },
            obj_scya: {},
            type_show: true,
        }
    },
    methods: {
        choiceStep(item, index) {
            if (index == 0 || index == 1) {
                this.choiceIndex = index;
            } else if ((index == 2 || index == 3) && this.objectList.length > 0) {
                this.choiceIndex = index;
            } else {
                this.$message.warning('未选择对手国家！');
            }

        },
        // handleChange(file) {
        //     let reader = new FileReader()

        //     reader.onload = (e) => {
        //         try {
        //             let document = JSON.parse(e.target.result)
        //             console.log(document)
        //         } catch (err) {
        //             console.log(`load JSON document from file error: ${err.message}`)
        //         }
        //     }
        //     reader.readAsText(file.raw, 'utf-8');
        // },
        //删除导入卡片
        deleteCard(item, index) {
            this.resultList.splice(index, 1);
        },
        //新增导入卡片
        addCard() {
            this.resultList.push('');
        },
        //获取字符串长度
        getTextWidth(str, fontSize) {
            let result = 10;
            let ele = document.createElement('span')
            //字符串中带有换行符时，会被自动转换成<br/>标签，若需要考虑这种情况，可以替换成空格，以获取正确的宽度
            //str = str.replace(/\\n/g,' ').replace(/\\r/g,' ');
            ele.innerText = str;
            //不同的大小和不同的字体都会导致渲染出来的字符串宽度变化，可以传入尽可能完备的样式信息
            ele.style.fontSize = fontSize;
            //由于父节点的样式会影响子节点，这里可按需添加到指定节点上
            document.documentElement.append(ele);
            result = ele.offsetWidth;
            document.documentElement.removeChild(ele);
            return result + 40;
        },
        //生成分析研判
        createFxyp() {
            let tmp = [];
            this.resultList.forEach(item => {
                if (this.dsqkOption.indexOf(item) > -1) {
                    tmp.push(item);
                }
            });
            this.form.dsqkSelect = tmp;
            //随机生成分析研判radio数据
            // for(let i in this.fxypFormList){
            //     if(i!='dsqkSelect'){
            //         this.form[i] = this.fxypFormList[i][Math.floor(Math.random() * 3)];
            //     }
            // }
            this.choiceIndex = 1;
        },
        //#region ========================================分析研判========================================
        //新增分析研判卡片
        addCardFxyp() {
            this.resultListFxyp.push('');
        },
        //删除分析研判卡片
        deleteCardFxyp(item, index) {
            this.resultListFxyp.splice(index, 1);
        },
        choiceCountry(index) {
            this.qfdxIndex = index;
        },
        getFxypResult() {
            if (this.form.dsqkSelect.length > 0 && this.form.xxlyRadio != '' && this.form.dsmdRadio != '' && this.form.flsxRadio != '' && this.form.dqtsRadio != '' && this.form.xbyxRadio != '') {
                let object = JSON.parse(JSON.stringify(this.form.dsqkSelect.join(',')));
                queryDecisionSituationAnalysisJudgment(1, 20, {
                    "source": this.form.xxlyRadio,
                    "competitorsSituation": object,
                    "competitorsPurpose": this.form.dsmdRadio,
                    "legalIllegal": this.form.flsxRadio,
                    "currentSituations": this.form.dqtsRadio,
                    "nextImpact": this.form.xbyxRadio
                }).then(res => {
                    this.resultListFxyp = [];
                    res.list.forEach(item => {
                        this.resultListFxyp.push(item.content);
                    });
                });
            } else {
                this.$message.warning('条件不能为空！');
            }
        },
        //下一步
        nextStep() {
            let list = [];
            this.form.dsqkSelect.forEach((item, index) => {
                list[index] = {};
                list[index]['object'] = item;
                list[index]['copingStrategies'] = '';
                list[index]['copingStrength'] = '';
                list[index]['copingChannel'] = '';
            });
            this.$nextTick(() => {
                this.objectList = list;
                this.choiceIndex = 2;
                this.qfdxIndex = 0;
            });

        },
        //#endregion

        //#region ========================================处置原则========================================
        createCzyj() {
            let tmpList = [];
            if (this.objectList.length > 0) {
                this.objectList.forEach(item => {
                    for (let i in item) {
                        if (item[i] == '') {
                            tmpList.push(i);
                        }
                    }
                });
                this.$nextTick(() => {
                    if (tmpList.length > 0) {
                        this.$message.warning('有未选择的条件！');
                        return false;
                    }
                    let listMs = [], listPd = [];
                    for (let i = 0; i < this.objectList.length; i++) {
                        let objMs = {}, objPd = {};
                        queryMeasuresSuggested(1, 10, this.objectList[i]).then(res => {
                            objMs['country'] = this.objectList[i].object;
                            objMs['data'] = res.list;
                            listMs.push(objMs);
                        });
                        queryDecisionInformationProduct(1, 10, this.objectList[i]).then(res => {
                            objPd['country'] = this.objectList[i].object;
                            objPd['data'] = res.list;
                            listPd.push(objPd);
                        })
                    };
                    Promise.all(listMs).then(() => {
                        this.csjyList = listMs;
                    });
                    Promise.all(listPd).then(() => {
                        this.cpjyObjList = listPd;
                    });
                    this.choiceIndex = 3;
                });
            } else {
                this.$message.warning('未选择对手国家！');
            }
        },
        visibleFhcs() {
            this.visibleForm = this.visibleForm == false ? true : false;
        },
        scya() {
            saveResult(this.obj_scya).then(res => {
                if (res == 1) {
                    this.$message.success('生成成功！');
                    this.dialogVisible = false;
                }
            }).catch(err => {
                this.$message.error(err.message);
            });
        },
        //生成预案
        createYa() {
            this.type_show = true;
            let obj = { content: this.importText, result: JSON.stringify({ csjy: this.csjyList, cpjy: this.cpjyObjList, fxyp: this.resultListFxyp }) };
            this.obj_scya = obj;
            this.dialogVisible = true;
            this.yaxqObj = JSON.parse(obj.result);

            // saveResult(obj).then(res => {
            //     if (res == 1) {
            //         this.$message.success('生成成功！');
            //     }
            // }).catch(err => {
            //     this.$message.error(err.message);
            // });
        },
        search() {
            //查询上传简报
            queryResult(this.yaObj.currentPage, this.yaObj.everySize, [this.yaName]).then(res => {
                this.yaList = res.list;
                this.yaObj.total = res.totals;
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = [];
            val.forEach(item => {
                this.multipleSelection.push(item.id);
            });
        },
        handleSizeChange(size) {
            this.yaObj.everySize = size;
            this.search();
        },
        handleCurrentChange(pageNum) {
            this.yaObj.currentPage = pageNum;
            this.search();
        },
        deleteYa() {
            this.$confirm('此操作将永久删除简报, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeResult(this.multipleSelection).then(res => {
                    if (this.multipleSelection.length == res) {
                        this.$message.success('删除成功！');
                        this.search();
                    }
                }).catch(err => {
                    this.$message.error(err.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        viewResult(row) {
            this.type_show = false;
            this.dialogVisible = true;
            this.yaxqObj = JSON.parse(row.result);
        },
        exportResult(item) {
            fileDownload("api/rest/decision/exportResult?id=" + item.id, '决策支持', 'doc');
        },
        handleClose(done) {
            done();
        }
    },
    watch: {
        importText(val) {
            post('api/rest/fulltext/querySearchTerms', [val]).then(res => {
                this.resultList = res;
            });
        }
    },
    activated() {
        //查询国家
        queryCountry().then(res => {
            this.dsqkOption = res;
        }).then((res) => {
            this.search();
        })
            .catch((err) => {
                this.$message.warning(err.message);
            })
        if (this.$route.params.selectText) {
            this.importText = this.$route.params.selectText
        } else {
            this.importText = "";
        }
    }
}
</script>

<style lang="scss">
#jczc {
    width: 99%;
    height: 96%;
    padding: 20px 30px 10px 30px;
    box-sizing: border-box;
    overflow-y: auto;
    color: white;
    .el-tabs--border-card {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border: 2px solid #125473;
        border-radius: 5px;
        box-sizing: border-box;
        background: #ffffff00;

        .el-tabs__header {
            background-color: unset;
            border-bottom: 2px solid #125473;

            .el-tabs__item {
                color: #dedede;
            }

            .el-tabs__item.is-active {
                color: #ffe000;
                background-color: #116791;
                border-right-color: #116791;
                border-left-color: #116791;
            }

            .el-tabs__item:not(.is-disabled):hover {
                color: #ffe000;
            }
        }

        .el-tabs__content {
            height: calc(100% - 42px);
            box-sizing: border-box;
        }
    }

    .left-jczc {
        width: 230px;
        height: 100%;
        padding: 10px 10px;
        float: left;
        box-sizing: border-box;

        ul {
            padding: 0px;
            list-style: none;

            li {
                height: 35px;
                line-height: 30px;
                margin-bottom: 20px;
                font-size: 14px;
                text-align: center;
                background-image: url(../../assets/img/fzjc/1.png);
                background-size: 100% 100%;

                &:hover {
                    color: #0dada7;
                    cursor: pointer;
                }
            }

            .active {
                color: #0dada7;
                background-image: url(../../assets/img/fzjc/2.png);
                background-size: 100% 100%;
            }
        }
    }

    .right-jczc {
        width: calc(100% - 230px);
        height: 100%;
        float: left;
        border: 1px solid #146a80 !important;
        box-shadow: 0 0 10px #1b6097;
        box-sizing: border-box;

        //情况导入
        .jczc-qkdr {
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;

            .qkdr-content {
                width: 100%;
                height: 60%;

                .left-content {
                    width: 90%;
                    height: 100%;
                    float: left;

                    .el-textarea {
                        width: 100%;
                        height: 100% !important;

                        textarea {
                            height: 100% !important;
                            color: white !important;
                            background: none !important;
                            border: 1px solid #146a80 !important;
                            box-shadow: 0 0 10px #1b6097;
                        }
                    }
                }

                .right-content {
                    width: 10%;
                    float: left;

                    .button-import {
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/fzjc/4.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        &:hover {
                            color: #146a80;
                        }
                    }
                }
            }

            .qkdr-result {
                width: 100%;
                height: calc(40% - 70px);
                margin-top: 20px;

                .left-result {
                    width: 90%;
                    height: 100%;
                    float: left;
                    padding: 10px;
                    border: 1px solid #146a80 !important;
                    border-radius: 5px;
                    box-sizing: border-box;
                    overflow-y: auto;

                    .cardResult {
                        // min-width: 100px;
                        font-size: 13px;
                        float: left;
                        margin-top: 20px;
                        margin-left: 20px;
                        padding: 5px 15px;
                        display: list-item;
                        list-style: none;
                        color: black;
                        // text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/fzjc/5.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        .el-input {

                            // width: 60%;
                            // width: 100px;
                            input {
                                height: 20px;
                                color: black;
                                background: transparent;
                                border: none;
                            }
                        }

                        .el-icon-error {
                            float: right;

                            &:hover {
                                color: red;
                                cursor: pointer;
                            }
                        }
                    }

                    .el-icon-circle-plus {
                        float: left;
                        margin-top: 25px;
                        margin-left: 20px;
                        color: green;
                        cursor: pointer;

                        &:hover {
                            color: #146a80;
                        }
                    }
                }

                .right-result {
                    width: 10%;
                    float: left;

                    .button-edit {
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/fzjc/4.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        &:hover {
                            color: #146a80;
                        }
                    }
                }
            }

            .button-create {
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                float: right;
                margin-top: 10px;
                margin-right: 10%;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/fzjc/6.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                &:hover {
                    color: #146a80;
                }
            }
        }

        //分析研判
        .jczc-fxyp {
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;

            .fxyp-content {
                width: 100%;
                height: 60%;

                .left-content {
                    width: 90%;
                    height: 100%;
                    float: left;
                    border: 1px solid #146a80 !important;
                    border-radius: 5px;
                    box-sizing: border-box;

                    .el-form {
                        width: 80%;
                        height: 96%;
                        margin-left: 10%;
                        position: relative;
                        top: 2%;

                        .el-form-item {
                            width: 100%;
                            height: calc(100% / 6 - 20px);
                            float: left;
                            margin-top: 20px;
                            margin-bottom: 0px !important;

                            .el-form-item__label {
                                height: 100%;
                                padding: 0px 12px !important;
                                color: white;
                                text-align: center;
                                box-sizing: border-box;
                                background-image: url(../../assets/img/fzjc/7.png);
                                background-size: 100% 100%;
                            }

                            .el-form-item__content {
                                height: 100%;
                                padding:0px 30px;
                                color: white;
                                box-sizing: border-box;
                                background-image: url(../../assets/img/fzjc/8.png);
                                background-size: 100% 100%;

                                .el-radio {
                                    width: calc(100% / 3 - 50px);
                                    margin-top: 1.7%;
                                    margin-left: 30px;
                                    margin-right: 0px !important;
                                    // position: relative;
                                    // top: calc(50% - 7.6px);
                                    color: white;
                                    text-align: center;

                                    .el-radio__input {
                                        vertical-align: bottom;
                                    }
                                }

                                .el-select {
                                    width: 100%;

                                    input {
                                        border: none;
                                        background: none;
                                    }
                                }
                            }
                        }
                    }
                }

                .right-content {
                    width: 10%;
                    float: left;

                    .button-create {
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/fzjc/4.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        &:hover {
                            color: #146a80;
                        }
                    }
                }
            }

            .fxyp-result {
                width: 100%;
                height: calc(40% - 70px);
                margin-top: 20px;

                .left-result {
                    width: 90%;
                    height: 100%;
                    float: left;
                    padding: 10px;
                    border: 1px solid #146a80 !important;
                    border-radius: 5px;
                    box-sizing: border-box;
                    overflow-y: auto;

                    .cardResult {
                        // min-width: 100px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                        float: left;
                        margin-top: 20px;
                        margin-left: 20px;
                        // padding: 5px 15px;
                        padding-right: 5px;
                        box-sizing: border-box;
                        display: list-item;
                        list-style: none;
                        color: white;
                        // text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/fzjc/9.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        .el-input {

                            // width: 60%;
                            // width: 100px;
                            input {
                                height: 20px;
                                color: white;
                                background: transparent;
                                border: none;
                            }
                        }

                        .el-icon-error {

                            // float: right;
                            &:hover {
                                color: red;
                                cursor: pointer;
                            }
                        }
                    }

                    .el-icon-circle-plus {
                        float: left;
                        margin-top: 25px;
                        margin-left: 20px;
                        color: green;
                        cursor: pointer;

                        &:hover {
                            color: #146a80;
                        }
                    }
                }

                .right-result {
                    width: 10%;
                    float: left;

                    .button-edit {
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                        float: left;
                        margin-left: 10px;
                        text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/fzjc/4.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                        &:hover {
                            color: #146a80;
                        }
                    }
                }
            }

            .button-nextStep {
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                float: right;
                margin-top: 20px;
                margin-right: 10%;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/fzjc/4.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                &:hover {
                    color: #146a80;
                }
            }
        }

        //处置原则
        .jczc-czyz {
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;

            .czyz-content {
                width: 100%;
                height: 60%;
                padding: 20px 30px;
                border: 1px solid #146a80 !important;
                border-radius: 5px;
                box-sizing: border-box;

                .content-top {
                    width: 80%;
                    height: 40px;
                    margin: auto;

                    span {
                        width: 120px;
                        float: left;
                        font-size: 24px;
                        font-weight: 500;
                        color: white;
                        background: none;
                    }

                    div {
                        cursor: pointer;

                        &:first-child {
                            margin-left: 50px;
                        }
                    }

                    .choice {
                        width: 100px;
                        height: 30px;
                        line-height: 28px;
                        text-align: center;
                        float: left;
                        margin-top: 5px;
                        margin-left: 20px;
                        background-image: url(../../assets/img/fzjc/10.png);
                        background-size: 100% 100%;
                    }

                    .choiceBg {
                        width: 100px;
                        height: 40px;
                        line-height: 30px;
                        text-align: center;
                        float: left;
                        margin-top: 5px;
                        margin-left: 20px;
                        background-image: url(../../assets/img/fzjc/11.png);
                        background-size: 100% 100%;
                    }
                }

                .content-bottom {
                    width: 80%;
                    height: calc(100% - 80px);
                    margin: auto;
                    margin-top: 20px;
                    border: 3px dotted #146a80;
                    border-radius: 10px;
                    box-sizing: border-box;

                    .el-form {
                        width: 80%;
                        height: 96%;
                        margin-left: 10%;
                        position: relative;
                        top: 2%;

                        .el-form-item {
                            width: 100%;
                            float: left;
                            // margin-top: 20px;
                            margin-bottom: 0px !important;

                            .el-form-item__label {
                                color: white;
                                text-align: center;
                                box-sizing: border-box;
                                background-image: url(../../assets/img/fzjc/12.png);
                                background-size: 100% 100%;
                            }

                            .el-form-item__content {
                                padding: 10px 30px;
                                color: white;
                                box-sizing: border-box;

                                .el-radio-group {
                                    width: 100%;

                                    .el-radio {
                                        width: calc(100% / 3 - 50px);
                                        height: 40px;
                                        margin-left: 30px;
                                        margin-right: 0px !important;
                                        color: white;
                                        text-align: center;

                                        .el-radio__input {
                                            vertical-align: baseline;
                                        }

                                        .el-radio__label {
                                            font-size: 16px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .el-tabs--border-card {
                    height: calc(100% - 37px);
                    margin-top: 18px;
                    border: 2px solid #125473;
                    border-radius: 5px;
                    background: #ffffff00;

                    >.el-tabs__header {
                        background-color: unset;
                        border-bottom: 2px solid #125473;

                        .el-tabs__item {
                            color: #dedede;
                        }

                        .el-tabs__item.is-active {
                            color: #ffe000;
                            background-color: #116791;
                            border-right-color: #116791;
                            border-left-color: #116791;
                        }

                        .el-tabs__item:not(.is-disabled):hover {
                            color: #ffe000;
                        }
                    }

                    .el-tab-pane {
                        .el-form {
                            width: 80%;
                            height: calc(100% - 70px);
                            margin-left: 10%;
                            position: relative;

                            .el-form-item {
                                width: 100%;
                                float: left;
                                margin-top: 20px;
                                margin-bottom: 0px !important;

                                .el-form-item__label {
                                    color: white;
                                    text-align: center;
                                    box-sizing: border-box;
                                    background-image: url(../../assets/img/fzjc/12.png);
                                    background-size: 100% 100%;
                                }

                                .el-form-item__content {
                                    padding: 10px 30px;
                                    color: white;
                                    box-sizing: border-box;

                                    .el-radio-group {
                                        width: 100%;

                                        .el-radio {
                                            width: calc(100% / 3 - 50px);
                                            height: 40px;
                                            margin-left: 30px;
                                            margin-right: 0px !important;
                                            color: white;
                                            text-align: center;

                                            .el-radio__input {
                                                vertical-align: bottom;
                                            }

                                            .el-radio__label {
                                                font-size: 16px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .czyz-result {
                width: 100%;
                height: calc(40% - 20px);
                margin-top: 20px;

                .title {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    margin-left: 10px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/fzjc/4.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .result-content {
                    width: 80%;
                    height: calc(100% - 100px);
                    margin-top: 20px;
                    margin-left: 10%;
                    border: 3px dotted #146a80;
                    border-radius: 10px;
                    box-sizing: border-box;

                    .el-form {
                        width: 80%;
                        height: 100%;
                        margin-left: 10%;
                        position: relative;

                        .el-form-item {
                            width: 100%;
                            height: calc(100% / 3 - 10px);
                            float: left;
                            margin-top: 10px;
                            margin-bottom: 0px !important;

                            .el-form-item__label {
                                color: white;
                                text-align: center;
                                box-sizing: border-box;
                                background-image: url(../../assets/img/fzjc/12.png);
                                background-size: 100% 100%;
                            }

                            .el-form-item__content {
                                padding: 10px 30px;
                                color: white;
                                box-sizing: border-box;

                                .el-radio-group {
                                    width: 100%;

                                    .el-radio {
                                        width: calc(100% / 3 - 50px);
                                        margin-left: 30px;
                                        margin-right: 0px !important;
                                        color: white;
                                        text-align: center;

                                        .el-radio__input {
                                            vertical-align: baseline;
                                        }

                                        .el-radio__label {
                                            font-size: 16px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .button-create {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    float: right;
                    margin-top: 20px;
                    margin-right: 10%;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/fzjc/4.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;

                    &:hover {
                        color: #146a80;
                    }
                }
            }
        }

        //处置预警
        .jczc-czyj {
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;

            .czyj-content {
                width: 100%;
                height: 40%;
                border: 1px solid #146a80 !important;
                border-radius: 10px;
                box-sizing: border-box;

                .title {
                    width: 150px;
                    height: 40px;
                    line-height: 35px;
                    font-size: 13px;
                    float: left;
                    margin-top: 10px;
                    margin-left: 20px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/fzjc/4.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .content-result {
                    width: 96%;
                    height: calc(100% - 60px);
                    float: left;
                    margin-top: 10px;
                    margin-left: 2%;
                    overflow-y: auto;

                    ul {
                        li {
                            width: 100%;
                            line-height: 30px;
                            margin-bottom: 10px;
                            // padding-left: 20px;
                            font-size: 16px;
                            border-bottom: 1px solid #146a80;
                            box-sizing: border-box;
                            list-style: none;

                            .el-tag {
                                margin-right: 20px;
                            }

                            input {
                                background: none;
                                border: 0px;
                                color: white;
                            }

                            li {
                                border-bottom: none;
                            }
                        }
                    }
                }
            }

            .czyj-result {
                width: 100%;
                height: calc(60% - 70px);
                margin-top: 20px;
                border: 1px solid #146a80 !important;
                border-radius: 10px;
                box-sizing: border-box;

                .result-cpjy {
                    width: 100%;
                    height: 100%;

                    .title {
                        width: 150px;
                        height: 40px;
                        line-height: 35px;
                        font-size: 13px;
                        margin-top: 10px;
                        margin-left: 20px;
                        text-align: center;
                        cursor: pointer;
                        background-image: url(../../assets/img/fzjc/4.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .cpjy-content {
                        width: 100%;
                        height: calc(100% - 70px);
                        margin-top: 20px;
                        overflow-y: auto;

                        .content-content {
                            width: 100%;
                            height: 100%;
                            margin-bottom: 20px;

                            .country {
                                width: 98%;
                                height: 30px;
                                margin-left: 1%;
                                margin-bottom: 10px;
                                line-height: 30px;
                                text-align: center;
                                background: #274b71;
                            }

                            .content-title {
                                width: 150px;
                                height: 30px;
                                line-height: 30px;
                                margin-left: 20px;
                                background-color: #146a80;
                                border-radius: 10px;
                                text-align: center;
                            }

                            ul {
                                li {
                                    width: 100%;
                                    // height: 35px;
                                    line-height: 30px;
                                    margin-bottom: 10px;
                                    padding-left: 20px;
                                    font-size: 16px;
                                    border-bottom: 1px solid #146a80;
                                    box-sizing: border-box;
                                    list-style: none;

                                    input {
                                        background: none;
                                        border: 0px;
                                        color: white;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .button-create {
                width: 100px;
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                float: right;
                margin-top: 10px;
                margin-right: 10%;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/fzjc/4.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                &:hover {
                    color: #146a80;
                }
            }
        }
    }

    .search {
        width: 100%;
        height: 50px;
        text-align: right;

        .el-input {
            width: 200px;
            margin-right: 15px;

            input {
                height: 30px;
                color: white;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-input__icon {
                line-height: 30px;
            }
        }

        .button-search {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-delete {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .searchResult {
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;

        .el-table--enable-row-hover {
            .el-table__body tr {
                &:hover>td {
                    background-color: #82848a78 !important;
                }
            }
        }

        .el-table {
            width: 100%;
            height: calc(100% - 60px);
        }

        .el-table tr {
            background-color: transparent !important;
            color: #ffffffc7;
        }

        .el-table thead tr {
            height: 40px;
            background: url(../../assets/img/setting/tr1.png) no-repeat;
            background-size: 100% 100%;
        }

        .el-table th {
            background-color: transparent;
        }

        tbody tr {
            border-bottom: 1px solid #252631;
        }

        .el-table td {
            border-bottom: 1px solid #252631;
            border-right: unset;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #82848a78;
        }

        .el-table th {
            border: unset;
            // background-color: #263b5d !important;
        }

        .el-table--fit {
            background: none !important;
            border: unset;
        }

        .el-icon-delete-solid {
            color: red;
            cursor: pointer;
            font-size: 18px;
        }

        .el-icon-edit {
            color: #1172d8;
            cursor: pointer;
            font-size: 20px;
        }

        .el-icon-view {
            color: #00ffff;
            font-size: 20px;
            cursor: pointer;
        }

        .el-table--group::after,
        .el-table--border::after,
        .el-table::before {
            background-color: unset;
        }

        .pagination-div {
            width: 100%;
            height: 50px;

            .el-pagination {
                margin-top: 9px;
                text-align: right;

                .el-pagination__total {
                    color: white;
                }

                .el-pagination__jump {
                    color: white;
                }
            }

            .myPagination.is-background .el-pager li:not(.disabled).active {
                color: #fff;
                border: 1px solid #146a80;
                box-shadow: 0 0 10px #1b6097;
                background-color: #1d2d46;
            }
        }
    }

    .yaxq {
        width: 100%;
        height: 100%;

        .czjy {
            width: 100%;
            max-height: 30%;
            float: left;
            border: 1px solid #146a80 !important;
            border-radius: 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .czjy-title {
                width: 150px;
                height: 40px;
                line-height: 35px;
                font-size: 13px;
                float: left;
                margin-top: 10px;
                margin-left: 20px;
                color: white;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/fzjc/4.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .czjy-result {
                width: 96%;
                float: left;
                margin-top: 10px;
                margin-left: 2%;
                overflow-y: auto;

                ul {
                    li {
                        width: 100%;
                        line-height: 30px;
                        margin-bottom: 10px;
                        padding-left: 20px;
                        font-size: 16px;
                        border-bottom: none;
                        color: white;
                        box-sizing: border-box;
                        list-style: none;

                        .el-tag {
                            margin-right: 20px;
                        }

                        li {
                            border-bottom: none;
                        }
                    }
                }
            }
        }

        .cpjy {
            width: 100%;
            height: calc(60% - 70px);
            float: left;
            margin-top: 20px;
            margin-bottom: 10px;
            border: 1px solid #146a80 !important;
            border-radius: 10px;
            box-sizing: border-box;

            .cpjy-title {
                width: 150px;
                height: 40px;
                line-height: 35px;
                font-size: 13px;
                margin-top: 10px;
                margin-left: 20px;
                color: white;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/fzjc/4.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .cpjy-result {
                width: 100%;
                height: calc(100% - 80px);
                margin-top: 20px;
                overflow-y: auto;

                .result-content {
                    width: 100%;
                    margin-bottom: 20px;

                    .country {
                        width: 98%;
                        height: 30px;
                        margin-left: 1%;
                        margin-bottom: 10px;
                        line-height: 30px;
                        color: white;
                        text-align: center;
                        background: #274b71;
                    }

                    .content-title {
                        width: 150px;
                        height: 30px;
                        line-height: 30px;
                        margin-left: 20px;
                        color: white;
                        background-color: #146a80;
                        border-radius: 10px;
                        text-align: center;
                    }

                    ul {
                        li {
                            width: 100%;
                            line-height: 30px;
                            margin-bottom: 10px;
                            padding-left: 20px;
                            font-size: 16px;
                            border-bottom: 1px solid #146a80;
                            color: white;
                            box-sizing: border-box;
                            list-style: none;
                        }
                    }
                }
            }
        }
    }
}</style>