<template>
    <div id="fzjcJczc">
        <div class="left-fzjcJczc">
            <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-fzjcJczc">
            <div class="jczc-fxyp jczcContent" v-show="choiceIndex == 0">
                <div class="search fxypSearch">
                    <div class="button-delete" @click="removeFxyp">批量删除</div>
                    <div class="button-add" @click="addFxyp">新增分析研判</div>
                    <div class="button-search" @click="queryFxyp">搜索</div>
                    <el-select v-model="valueFxyp.nextImpact" placeholder="请选择下步影响" clearable>
                        <el-option v-for="item in fxyp.xbyx" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueFxyp.currentSituations" placeholder="请选择当前态势" clearable>
                        <el-option v-for="item in fxyp.dqts" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueFxyp.legalIllegal" placeholder="请选择法理属性" clearable>
                        <el-option v-for="item in fxyp.flsx" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueFxyp.competitorsPurpose" placeholder="请选择对手目的" clearable>
                        <el-option v-for="item in fxyp.dsmd" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueFxyp.competitorsSituation" placeholder="请选择对手情况" clearable>
                        <el-option v-for="item in fxyp.dsqk" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueFxyp.source" placeholder="请选择消息来源" clearable>
                        <el-option v-for="item in fxyp.xxly" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="searchResult-fxyp">
                    <el-table ref="multipleTable" :data="fxypData" tooltip-effect="dark" style="width: 100%;"
                        @selection-change="handleSelectionChangeFxyp" height="calc(100% - 60px)">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="source" label="消息来源">
                        </el-table-column>
                        <el-table-column prop="competitorsPurpose" label="对手目的">
                        </el-table-column>
                        <el-table-column prop="competitorsSituation" label="对手情况">
                        </el-table-column>
                        <el-table-column prop="legalIllegal" label="法理属性">
                        </el-table-column>
                        <el-table-column prop="currentSituations" label="当前态势">
                        </el-table-column>
                        <el-table-column prop="nextImpact" label="下步影响">
                        </el-table-column>
                        <el-table-column prop="content" label="内容" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-div">
                        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                            :current-page="fxypPagination.currentPage" :total="fxypPagination.total"
                            @current-change="handleCurrentChangeFxyp" @size-change="handleSizeChangeFxyp"
                            :page-size="fxypPagination.everySize" :page-sizes="[10, 20, 50, 100]">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="jczc-czyz jczcContent" v-show="choiceIndex == 1">
                <div class="search">
                    <div class="button-delete" @click="removeCzyz">批量删除</div>
                    <div class="button-add" @click="addCsjy">新增措施建议</div>
                    <div class="button-search" @click="queryCzyz">搜索</div>
                    <el-select v-model="valueCzyz.object" placeholder="请选择对象" clearable>
                        <el-option v-for="item in csjy.qfdx" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueCzyz.copingChannel" placeholder="请选择应对渠道" clearable>
                        <el-option v-for="item in csjy.ydqd1" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueCzyz.copingStrength" placeholder="请选择应对强度" clearable>
                        <el-option v-for="item in csjy.ydqd" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueCzyz.copingStrategies" placeholder="请选择应对策略" clearable>
                        <el-option v-for="item in csjy.ydcl" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="searchResult-czyz">
                    <el-table ref="multipleTable" :data="czyzData" tooltip-effect="dark"
                        @selection-change="handleSelectionChangeCzyz" style="width: 100%;" height="calc(100% - 60px)"
                        :header-cell-style="{ color: '#ffffffc7', fontSize: '14px', background: '#263b5d' }"
                        :row-style="{ color: '#ffffffc7', fontSize: '14px', background: '#1d2d46' }">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="copingStrategies" label="应对策略">
                        </el-table-column>
                        <el-table-column prop="copingStrength" label="应对强度">
                        </el-table-column>
                        <el-table-column prop="copingChannel" label="应对渠道">
                        </el-table-column>
                        <el-table-column prop="content" label="内容" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-div">
                        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                            :current-page="czyzPagination.currentPage" :total="czyzPagination.total"
                            @current-change="handleCurrentChange" @size-change="handleSizeChange"
                            :page-size="czyzPagination.everySize" :page-sizes="[10, 20, 50, 100]">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div class="jczc-xxzp jczcContent" v-show="choiceIndex == 2">
                <div class="search">
                    <el-select v-model="valueXxzp.object" placeholder="请选择对象" clearable>
                        <el-option v-for="item in xxzp.qfdx" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueXxzp.copingChannel" placeholder="请选择应对渠道" clearable>
                        <el-option v-for="item in xxzp.ydqd1" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueXxzp.copingStrength" placeholder="请选择应对强度" clearable>
                        <el-option v-for="item in xxzp.ydqd" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueXxzp.copingStrategies" placeholder="请选择应对策略" clearable>
                        <el-option v-for="item in xxzp.ydcl" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-input v-model="valueXxzp.cal" placeholder="请输入口径"></el-input>

                </div>
                <div class="search">
                    <el-input v-model="valueXxzp.content" placeholder="请输入内容"></el-input>
                    <el-input v-model="valueXxzp.issues" placeholder="请输入议题"></el-input>
                    <el-input v-model="valueXxzp.productCode" placeholder="请输入制品编号"></el-input>
                    <el-input v-model="valueXxzp.productDelivery" placeholder="请输入产品推送"></el-input>
                    <div class="button-search" @click="queryXxzp">搜索</div>
                    <div class="button-add" @click="addXxzp">新增信息制品</div>
                    <div class="button-delete" @click="removeXxzp">批量删除</div>
                </div>
                <div class="searchResult-xxzp">
                    <el-table ref="multipleTable" :data="xxzpData" tooltip-effect="dark"
                        @selection-change="handleSelectionChangeXxzp" style="width: 100%;" height="calc(100% - 60px)"
                        :header-cell-style="{ color: '#ffffffc7', fontSize: '14px', background: '#263b5d' }"
                        :row-style="{ color: '#ffffffc7', fontSize: '14px', background: '#1d2d46' }">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="object" label="对象">
                        </el-table-column>
                        <el-table-column prop="copingStrategies" label="应对策略">
                        </el-table-column>
                        <el-table-column prop="copingStrength" label="应对强度">
                        </el-table-column>
                        <el-table-column prop="copingChannel" label="应对渠道">
                        </el-table-column>
                        <el-table-column prop="cal" label="口径" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="issues" label="议题" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="productCode" label="制品编号" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="productDelivery" label="产品推送" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="content" label="内容" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-div">
                        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                            :current-page="xxzpPagination.currentPage" :total="xxzpPagination.total"
                            @current-change="handleCurrentChangeXxzp" @size-change="handleSizeChangeXxzp"
                            :page-size="xxzpPagination.everySize" :page-sizes="[10, 20, 50, 100]">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增分析研判 -->
        <el-dialog title="新增分析研判" :visible.sync="dialogVisibleFxyp" :before-close="handleClose" width="30%;">
            <el-form label-width="80px" :model="newFxypObj" ref="numberValidateForm">
                <el-form-item label="消息来源" prop="source" :rules="[
                    { required: true, message: '请选择消息来源', trigger: 'change' }
                ]">
                    <el-select v-model="newFxypObj.source" placeholder="请选择消息来源" clearable style="width:100%;">
                        <el-option v-for="item in fxyp.xxly" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对手情况">
                    <el-tag :key="tag" v-for="tag in tagFxyp" closable :disable-transitions="false"
                        @close="handleCloseFxyp(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisibleFxyp" v-model="inputValueFxyp" ref="saveTagInputFxyp"
                        size="small" @keyup.enter.native="handleInputConfirmFxyp" @blur="handleInputConfirmFxyp">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="mini" type="success" @click="showInputFxyp">+
                        对手</el-button>
                </el-form-item>
                <el-form-item label="对手目的" prop="competitorsPurpose" :rules="[
                    { required: true, message: '请选择对手目的', trigger: 'change' }
                ]">
                    <el-select v-model="newFxypObj.competitorsPurpose" placeholder="请选择对手目的" clearable style="width:100%;">
                        <el-option v-for="item in fxyp.dsmd" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="法理属性" prop="legalIllegal" :rules="[
                    { required: true, message: '请选择法理属性', trigger: 'change' }
                ]">
                    <el-select v-model="newFxypObj.legalIllegal" placeholder="请选择法理属性" clearable style="width:100%;">
                        <el-option v-for="item in fxyp.flsx" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前态势" prop="currentSituations" :rules="[
                    { required: true, message: '请选择当前态势', trigger: 'change' }
                ]">
                    <el-select v-model="newFxypObj.currentSituations" placeholder="请选择当前态势" clearable style="width:100%;">
                        <el-option v-for="item in fxyp.dqts" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下步影响" prop="nextImpact" :rules="[
                    { required: true, message: '请选择下步影响', trigger: 'change' }
                ]">
                    <el-select v-model="newFxypObj.nextImpact" placeholder="请选择下步影响" clearable style="width:100%;">
                        <el-option v-for="item in fxyp.xbyx" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容" prop="content" :rules="[
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ]">
                    <el-input type="textarea" placeholder="请输入内容" v-model="newFxypObj.content" :rows="6">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisibleFxyp = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="defineAddFxyp">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增措施建议 -->
        <el-dialog title="新增措施建议" :visible.sync="dialogVisibleCsjy" :before-close="handleClose" width="30%;">
            <el-form label-width="80px" :model="newCsjyObj" ref="numberValidateForm1">
                <el-form-item label="主体">
                    <!-- <el-input placeholder="多个主体请使用,号隔开" v-model="newCsjyObj.object">
                    </el-input> -->
                    <el-tag :key="tag" v-for="tag in tagCsjy" closable :disable-transitions="false"
                        @close="handleCloseCsjy(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisibleCsjy" v-model="inputValueCsjy" ref="saveTagInputCsjy"
                        size="small" @keyup.enter.native="handleInputConfirmCsjy" @blur="handleInputConfirmCsjy">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="mini" type="success" @click="showInputCsjy">+
                        主体</el-button>
                </el-form-item>
                <el-form-item label="应对策略" prop="copingStrategies" :rules="[
                    { required: true, message: '请选择应对策略', trigger: 'change' }
                ]">
                    <el-select v-model="newCsjyObj.copingStrategies" placeholder="请选择应对策略" clearable style="width:100%;">
                        <el-option v-for="item in csjy.ydcl" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应对强度" prop="copingStrength" :rules="[
                    { required: true, message: '请选择应对强度', trigger: 'change' }
                ]">
                    <el-select v-model="newCsjyObj.copingStrength" placeholder="请选择应对强度" clearable style="width:100%;">
                        <el-option v-for="item in csjy.ydqd" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应对渠道" prop="copingChannel" :rules="[
                    { required: true, message: '请选择应对渠道', trigger: 'change' }
                ]">
                    <el-select v-model="newCsjyObj.copingChannel" placeholder="请选择应对渠道" clearable style="width:100%;">
                        <el-option v-for="item in csjy.ydqd1" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容" prop="content" :rules="[
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ]">
                    <el-input type="textarea" placeholder="请输入内容" v-model="newCsjyObj.content" :rows="6">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisibleCsjy = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="defineAddCsjy">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增信息制品 -->
        <el-dialog title="新增信息制品" :visible.sync="dialogVisibleXxzp" :before-close="handleClose" width="30%;">
            <el-form label-width="80px" :model="newXxzpObj" ref="numberValidateForm2">
                <el-form-item label="主体">
                    <!-- <el-input placeholder="多个主体请使用,号隔开" v-model="newXxzpObj.object">
                    </el-input> -->
                    <el-tag :key="tag" v-for="tag in tagXxzp" closable :disable-transitions="false"
                        @close="handleCloseXxzp(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisibleXxzp" v-model="inputValueXxzp" ref="saveTagInputXxzp"
                        size="small" @keyup.enter.native="handleInputConfirmXxzp" @blur="handleInputConfirmXxzp">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="mini" type="success" @click="showInputXxzp">+
                        主体</el-button>
                </el-form-item>
                <el-form-item label="应对策略" prop="copingStrategies" :rules="[
                    { required: true, message: '请选择应对策略', trigger: 'change' }
                ]">
                    <el-select v-model="newXxzpObj.copingStrategies" placeholder="请选择应对策略" clearable style="width:100%;">
                        <el-option v-for="item in xxzp.ydcl" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应对强度" prop="copingStrength" :rules="[
                    { required: true, message: '请选择应对强度', trigger: 'change' }
                ]">
                    <el-select v-model="newXxzpObj.copingStrength" placeholder="请选择应对强度" clearable style="width:100%;">
                        <el-option v-for="item in xxzp.ydqd" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应对渠道" prop="copingChannel" :rules="[
                    { required: true, message: '请选择应对渠道', trigger: 'change' }
                ]">
                    <el-select v-model="newXxzpObj.copingChannel" placeholder="请选择应对渠道" clearable style="width:100%;">
                        <el-option v-for="item in xxzp.ydqd1" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="口径" prop="cal" :rules="[
                    { required: true, message: '请输入口径', trigger: 'blur' }
                ]">
                    <el-input placeholder="请输入口径" v-model="newXxzpObj.cal">
                    </el-input>
                </el-form-item>
                <el-form-item label="议题" prop="issues" :rules="[
                    { required: true, message: '请输入议题', trigger: 'blur' }
                ]">
                    <el-input placeholder="请输入议题" v-model="newXxzpObj.issues">
                    </el-input>
                </el-form-item>
                <el-form-item label="制品编号" prop="productCode" :rules="[
                    { required: true, message: '请输入制品编号', trigger: 'blur' }
                ]">
                    <el-input placeholder="请输入制品编号" v-model="newXxzpObj.productCode">
                    </el-input>
                </el-form-item>
                <el-form-item label="产品推送" prop="productDelivery" :rules="[
                    { required: true, message: '请输入产品推送', trigger: 'blur' }
                ]">
                    <el-input placeholder="请输入产品推送" v-model="newXxzpObj.productDelivery">
                    </el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content" :rules="[
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ]">
                    <el-input type="textarea" placeholder="请输入内容" v-model="newXxzpObj.content" :rows="6">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisibleXxzp = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="defineAddXxzp">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    queryMeasuresSuggested,
    addMeasuresSuggested,
    removeDecisionSituationAnalysisJudgment,
    queryDecisionSituationAnalysisJudgment,
    addDecisionSituationAnalysisJudgment,
    removeMeasuresSuggested,
    queryDecisionInformationProduct,
    addDecisionInformationProduct,
    removeDecisionInformationProduct,
    queryCountry
} from "../../api/decision"
export default {
    data() {
        return {
            choiceIndex: 0,
            jczcStep: ['分析研判', '处置原则', '处置预警'],
            // ======================================================分析研判======================================================
            fxyp: {
                xxly: ['白色', '灰色', '黑色'],
                dsqk: [],
                dsmd: ['挑衅', '搅局', '干预'],
                flsx: ['合法', '模糊', '非法'],
                dqts: ['有利', '对峙', '不利'],
                xbyx: ['非常严重', '严重', '一般']
            },
            valueFxyp: {
                source: '',
                competitorsSituation: '',
                competitorsPurpose: '',
                legalIllegal: '',
                currentSituations: '',
                nextImpact: ''
            },
            fxypData: [],
            fxypPagination: {
                total: 0,
                currentPage: 1,
                everySize: 10
            },
            newFxypObj: {
                source: '',
                competitorsSituation: '',
                competitorsPurpose: '',
                legalIllegal: '',
                currentSituations: '',
                nextImpact: '',
                content: ''
            },
            dialogVisibleFxyp: false,
            multipleSelectionFxyp: [],
            tagFxyp: [],
            inputVisibleFxyp: false,
            inputValueFxyp: '',
            // ======================================================处置原则======================================================
            csjy: {
                qfdx: [],
                ydcl: ['直接面对', '不做回应', '转换议题'],
                ydqd: ['强势坚决', '原则表态', '表达善意'],
                ydqd1: ['权威发声', '媒体报道', '网络传播', '内部传递']
            },
            valueCzyz: {
                object: '',
                copingStrategies: '',
                copingStrength: '',
                copingChannel: ''
            },
            czyzData: [],
            czyzPagination: {
                total: 0,
                currentPage: 1,
                everySize: 10
            },
            newCsjyObj: {
                content: '',
                copingChannel: '',
                copingStrategies: '',
                copingStrength: '',
                object: ''
            },
            dialogVisibleCsjy: false,
            multipleSelectionCzyz: [],
            tagCsjy: [],
            inputVisibleCsjy: false,
            inputValueCsjy: '',
            // ======================================================信息制品======================================================
            xxzp: {
                qfdx: [],
                ydcl: ['直接面对', '不做回应', '转换议题'],
                ydqd: ['强势坚决', '原则表态', '表达善意'],
                ydqd1: ['权威发声', '媒体报道', '网络传播', '内部传递']
            },
            valueXxzp: {
                cal: '',
                content: '',
                copingChannel: '',
                copingStrategies: '',
                copingStrength: '',
                issues: '',
                object: '',
                productCode: '',
                productDelivery: ''
            },
            xxzpData: [],
            xxzpPagination: {
                total: 0,
                currentPage: 1,
                everySize: 10
            },
            newXxzpObj: {
                cal: '',
                content: '',
                copingChannel: '',
                copingStrategies: '',
                copingStrength: '',
                issues: '',
                object: '',
                productCode: '',
                productDelivery: '',
            },
            dialogVisibleXxzp: false,
            multipleSelectionXxzp: [],
            tagXxzp: [],
            inputVisibleXxzp: false,
            inputValueXxzp: '',
        }
    },
    methods: {
        choiceStep(item, index) {
            this.choiceIndex = index;
            if (index == 0) {
                this.queryFxyp();
            } else if (index == 1) {
                this.queryCzyz();
            } else if (index == 2) {
                this.queryXxzp();
            }
        },
        //#region ============================== 分析研判 ==============================
        queryFxyp() {
            queryDecisionSituationAnalysisJudgment(this.fxypPagination.currentPage, this.fxypPagination.everySize, {
                "source": this.valueFxyp.source != '' ? this.valueFxyp.source : null,
                "competitorsSituation": this.valueFxyp.competitorsSituation != '' ? this.valueFxyp.competitorsSituation : null,
                "competitorsPurpose": this.valueFxyp.competitorsPurpose != '' ? this.valueFxyp.competitorsPurpose : null,
                "legalIllegal": this.valueFxyp.legalIllegal != '' ? this.valueFxyp.legalIllegal : null,
                "currentSituations": this.valueFxyp.currentSituations != '' ? this.valueFxyp.currentSituations : null,
                "nextImpact": this.valueFxyp.nextImpact != '' ? this.valueFxyp.nextImpact : null
            }).then(res => {
                this.fxypData = res.list;
                this.fxypPagination.total = res.totals;
                this.fxypPagination.currentPage = res.pageNum;
            })
                .catch((err) => {
                    this.$message.warning(err.message);
                })
        },
        handleCurrentChangeFxyp(pageNum) {
            this.fxypPagination.currentPage = pageNum;
            this.queryFxyp();
        },
        handleSizeChangeFxyp(size) {
            this.fxypPagination.everySize = size;
            this.fxypPagination.currentPage = 1;
            this.queryFxyp();
        },
        //新增措施建议弹框
        addFxyp() {
            let _this = this;
            _this.dialogVisibleFxyp = true;
            for (let i in _this.newFxypObj) {
                _this.newFxypObj[i] = '';
            }
            setTimeout(function () {
                _this.$refs.numberValidateForm.resetFields();
            }, 200)
        },
        defineAddFxyp() {
            this.$refs['numberValidateForm'].validate((valid) => {
                if (valid) {
                    let obj = JSON.parse(JSON.stringify(this.newFxypObj));
                    obj.competitorsSituation = this.tagFxyp.join(',');
                    addDecisionSituationAnalysisJudgment(obj).then(res => {
                        if (res == 1) {
                            this.$message.success('新增成功！');
                            this.dialogVisibleFxyp = false;
                            this.choiceIndex = 0;
                            this.queryFxyp();
                        } else {
                            this.$message.error('新增失败！');
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                    });
                }
            });
        },
        //批量删除
        handleSelectionChangeFxyp(val) {
            this.multipleSelectionFxyp = [];
            val.forEach(item => {
                this.multipleSelectionFxyp.push(item.id);
            });
        },
        removeFxyp() {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeDecisionSituationAnalysisJudgment(this.multipleSelectionFxyp).then(res => {
                    if (res == this.multipleSelectionFxyp.length) {
                        this.$message.success('删除成功！');
                        this.choiceIndex = 0;
                        this.queryFxyp();
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleCloseFxyp(tag) {
            this.tagFxyp.splice(this.tagFxyp.indexOf(tag), 1);
        },
        showInputFxyp() {
            this.inputVisibleFxyp = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInputFxyp.$refs.input.focus();
            });
        },

        handleInputConfirmFxyp() {
            let inputValue = this.inputValueFxyp;
            if (inputValue) {
                this.tagFxyp.push(inputValue);
            }
            this.inputVisibleFxyp = false;
            this.inputValueFxyp = '';
        },
        //#endregion
        //#region ============================== 处置原则 ==============================
        queryCzyz() {
            queryMeasuresSuggested(this.czyzPagination.currentPage, this.czyzPagination.everySize, {
                "copingChannel": this.valueCzyz.copingChannel != '' ? this.valueCzyz.copingChannel : null,
                "copingStrategies": this.valueCzyz.copingStrategies != '' ? this.valueCzyz.copingStrategies : null,
                "copingStrength": this.valueCzyz.copingStrength != '' ? this.valueCzyz.copingStrength : null,
                "object": this.valueCzyz.object != '' ? this.valueCzyz.object : null,
            }).then(res => {
                this.czyzData = res.list;
                this.czyzPagination.total = res.totals;
                this.czyzPagination.currentPage = res.pageNum;
            })
                .catch((err) => {
                    this.$message.warning(err.message);
                })
        },
        handleCurrentChange(pageNum) {
            this.czyzPagination.currentPage = pageNum;
            this.queryCzyz();
        },
        handleSizeChange(size) {
            this.czyzPagination.everySize = size;
            this.czyzPagination.currentPage = 1;
            this.queryCzyz();
        },
        handleClose(done) {
            done()
        },
        //新增措施建议弹框
        addCsjy() {
            let _this = this;
            _this.dialogVisibleCsjy = true;
            for (let i in _this.newCsjyObj) {
                _this.newCsjyObj[i] = '';
            }
            setTimeout(function () {
                _this.$refs.numberValidateForm1.resetFields();
            }, 200)
        },
        defineAddCsjy() {
            this.$refs['numberValidateForm1'].validate((valid) => {
                if (valid) {
                    let obj = JSON.parse(JSON.stringify(this.newCsjyObj));
                    obj.object = this.tagCsjy.join(',');
                    addMeasuresSuggested(obj).then(res => {
                        if (res == 1) {
                            this.$message.success('新增成功！');
                            this.dialogVisibleCsjy = false;
                            this.choiceIndex = 1;
                            this.queryCzyz();
                        } else {
                            this.$message.error('新增失败！');
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                    });
                }
            });
        },
        //批量删除
        handleSelectionChangeCzyz(val) {
            this.multipleSelectionCzyz = [];
            val.forEach(item => {
                this.multipleSelectionCzyz.push(item.id);
            });
        },
        removeCzyz() {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeMeasuresSuggested(this.multipleSelectionCzyz).then(res => {
                    if (res == this.multipleSelectionCzyz.length) {
                        this.$message.success('删除成功！');
                        this.choiceIndex = 1;
                        this.queryCzyz();
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleCloseCsjy(tag) {
            this.tagCsjy.splice(this.tagCsjy.indexOf(tag), 1);
        },
        showInputCsjy() {
            this.inputVisibleCsjy = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInputCsjy.$refs.input.focus();
            });
        },

        handleInputConfirmCsjy() {
            let inputValue = this.inputValueCsjy;
            if (inputValue) {
                this.tagCsjy.push(inputValue);
            }
            this.inputVisibleCsjy = false;
            this.inputValueCsjy = '';
        },
        //#endregion
        //#region ============================== 信息制品 ==============================
        queryXxzp() {
            queryDecisionInformationProduct(this.xxzpPagination.currentPage, this.xxzpPagination.everySize, {
                "copingChannel": this.valueXxzp.copingChannel != '' ? this.valueXxzp.copingChannel : null,
                "copingStrategies": this.valueXxzp.copingStrategies != '' ? this.valueXxzp.copingStrategies : null,
                "copingStrength": this.valueXxzp.copingStrength != '' ? this.valueXxzp.copingStrength : null,
                "object": this.valueXxzp.object != '' ? this.valueXxzp.object : null,
                "cal": this.valueXxzp.cal != '' ? this.valueXxzp.cal : null,
                "content": this.valueXxzp.content != '' ? this.valueXxzp.content : null,
                "issues": this.valueXxzp.issues != '' ? this.valueXxzp.issues : null,
                "productCode": this.valueXxzp.productCode != '' ? this.valueXxzp.productCode : null,
                "productDelivery": this.valueXxzp.productDelivery != '' ? this.valueXxzp.productDelivery : null,
            }).then(res => {
                this.xxzpData = res.list;
                this.xxzpPagination.total = res.totals;
                this.xxzpPagination.currentPage = res.pageNum;
            })
                .catch((err) => {
                    this.$message.warning(err.message);
                });
        },
        handleCurrentChangeXxzp(pageNum) {
            this.xxzpPagination.currentPage = pageNum;
            this.queryXxzp();
        },
        handleSizeChangeXxzp(size) {
            this.xxzpPagination.everySize = size;
            this.xxzpPagination.currentPage = 1;
            this.queryXxzp();
        },
        addXxzp() {
            let _this = this;
            _this.dialogVisibleXxzp = true;
            for (let i in _this.newXxzpObj) {
                _this.newXxzpObj[i] = '';
            }
            setTimeout(function () {
                _this.$refs.numberValidateForm2.resetFields();
            }, 200)
        },
        defineAddXxzp() {
            this.$refs['numberValidateForm2'].validate((valid) => {
                if (valid) {
                    let obj = JSON.parse(JSON.stringify(this.newXxzpObj));
                    obj.object = this.tagXxzp.join(',');
                    addDecisionInformationProduct(obj).then(res => {
                        if (res == 1) {
                            this.$message.success('新增成功！');
                            this.dialogVisibleXxzp = false;
                            this.choiceIndex = 2;
                            this.queryXxzp();
                        } else {
                            this.$message.error('新增失败！');
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                    });
                }
            });
        },
        //批量删除
        handleSelectionChangeXxzp(val) {
            this.multipleSelectionXxzp = [];
            val.forEach(item => {
                this.multipleSelectionXxzp.push(item.id);
            });
        },
        removeXxzp() {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeDecisionInformationProduct(this.multipleSelectionXxzp).then(res => {
                    if (res == this.multipleSelectionXxzp.length) {
                        this.$message.success('删除成功！');
                        this.choiceIndex = 2;
                        this.queryXxzp();
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleCloseXxzp(tag) {
            this.tagXxzp.splice(this.tagXxzp.indexOf(tag), 1);
        },
        showInputXxzp() {
            this.inputVisibleXxzp = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInputXxzp.$refs.input.focus();
            });
        },

        handleInputConfirmXxzp() {
            let inputValue = this.inputValueXxzp;
            if (inputValue) {
                this.tagXxzp.push(inputValue);
            }
            this.inputVisibleXxzp = false;
            this.inputValueXxzp = '';
        },
        //#endregion
    },
    activated() {
        this.choiceIndex = 0;
        queryCountry().then(res => {
            this.fxyp.dsqk = res;
            this.csjy.qfdx = res;
            this.xxzp.qfdx = res;
        })
            .then((res) => {
                this.queryFxyp();
            })
            .catch((err) => {
                this.$message.warning(err.message);
            })
    }
}
</script>

<style lang="scss">
#fzjcJczc {
    width: calc(100% - 0px);
    height: calc(100% - 0px);

    .left-fzjcJczc {
        width: 200px;
        height: 100%;
        box-sizing: border-box;
        float: left;

        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-fzjcJczc {
        width: calc(100% - 210px);
        height: 100%;
        float: left;
        margin-left: 10px;
        background: url('../../assets/img/yqjc/02.png') no-repeat;
        background-size: 100% 100%;

        .jczcContent {
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }

        .jczc-fxyp,
        .jczc-czyz {
            .search {
                width: 100%;
                height: 50px;
                text-align: right;

                .el-select {
                    float: 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-add {
                    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: 50px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }

            .fxypSearch {
                .el-select {
                    float: right;

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

            .searchResult-czyz,
            .searchResult-fxyp {
                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 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;
                    }
                }
            }
        }

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

                .el-select {
                    float: left;

                    .el-input {
                        width: 250px;
                        margin-left: 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;
                        }
                    }
                }

                .el-input {
                    width: 250px;
                    float: left;
                    margin-left: 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: left;
                    margin-left: 10px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .button-add {
                    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/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .button-delete {
                    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/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }

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

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

                .el-table {
                    background-color: transparent !important;

                    .el-table__header-wrapper {
                        width: 100%;
                        height: 48px;
                    }

                    .el-table__body-wrapper {
                        width: 100%;
                        height: calc(100% - 48px);
                    }

                    th.is-leaf {
                        border-bottom: 1px solid #185066;
                    }

                    .gutter {
                        background-color: #263b5d;
                    }

                    &::before {
                        display: none;
                    }

                    td {
                        font-size: 14px;
                        border-bottom: 1px solid #185066;
                    }
                }

                .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;
                    }
                }
            }
        }
    }

    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .el-tag--light {
        background: none !important;
        border: 1px solid #146a80 !important;
        box-shadow: 0 0 10px #1b6097;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
}</style>