<template>
    <div>
        <el-form :inline="true" class="demo-form-inline form">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item label="干扰源类型:">
                <el-select v-model="formData.loadType" clearable collapse-tags placeholder="请选择">
                    <el-option
                        v-for="item in interferenceType"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="干扰源用户名称:">
                <el-input v-model="formData.userName" clearable placeholder="请输入关键字"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="onsubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="text" @click="closeHandle">
                    条件筛选
                    <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                </el-button>
            </el-form-item>
        </el-form>

        <div class="container" id="container">
            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
            <el-form :inline="true" style="margin-top: 10px" label-width="120px" class="">
                <el-form-item label="关联干扰源用户:">
                    <el-input
                        v-model="formData.relationUserName"
                        clearable
                        placeholder="请输入联干扰源用户名称"
                    ></el-input>
                </el-form-item>

                <el-form-item label="是否已上传实测报告:" class="box">
                    <el-select v-model="upload" clearable placeholder="请选择">
                        <el-option
                            v-for="item in uploadData"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <el-row>
            <el-col :span="24">
                <div class="button mb10">
                    <el-button type="primary" icon="el-icon-upload" @click="sc">上传</el-button>

                    <el-button type="primary" icon="el-icon-share" @click="dc">导出</el-button>
                </div>
                <el-table
                    stripe
                    :data="undocumentednonlinearData"
                    :height="height"
                    border
                    style="width: 100%"
                    v-loading="isLoading"
                    header-cell-class-name="table_header"
                    @selection-change="handleSelectionChange"
                    :cell-style="cellStyle"
                    ref="multipleTable"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="orgName" label="所属单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="loadType" label="干扰源类型" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column
                        prop="userName"
                        label="干扰源用户名称"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="relationUserName"
                        label="关联干扰源用户名称"
                        :show-overflow-tooltip="true"
                    ></el-table-column>

                    <el-table-column prop="istatus" label="实测报告状态" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.istatus == rwzt[1].id"
                                type="primary"
                                size="small"
                                style="color: #da70d6"
                            >
                                新建
                            </span>
                            <span
                                v-else-if="scope.row.istatus == rwzt[2].id"
                                type="primary"
                                size="small"
                                style="color: #48d1cc"
                            >
                                待审核
                            </span>
                            <span
                                v-else-if="scope.row.istatus == rwzt[3].id"
                                type="primary"
                                size="small"
                                style="color: #dc143c; text-decoration: underline"
                                @click="failed = true"
                            >
                                未通过
                            </span>
                            <span
                                v-else-if="scope.row.istatus == rwzt[4].id"
                                type="primary"
                                size="small"
                                style="color: #9acd32"
                            >
                                已发布
                            </span>
                            <span v-else type="primary" size="small">{{ scope.row.status }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="plandetails" label="详情">
                        <template slot-scope="scope">
                            <!-- <span  type="primary" size="small" style="color:blue;text-decoration:underline" @click="userDetails=true">查看</span> -->
                            <el-button size="mini" @click="ck(scope.row)" type="primary">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    align="right"
                    class="mt10"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </el-col>
        </el-row>

        <!-- 未通过弹窗 -->
        <el-dialog :close-on-click-modal="false" title="未通过审批意见查看" :visible.sync="failed" width="50%">
            <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">审核意见</el-divider>
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
        </el-dialog>

        <!-- 上传 -->
        <el-dialog
            :close-on-click-modal="false"
            title="未建档干扰源用户入网报告结论填报"
            :visible.sync="uploadConclusions"
            width="1700px"
        >
            <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">基本信息</el-divider>
            <el-form>
                <el-form-item label="所属单位:">
                    <el-input v-model="addData.orgNo" clearable placeholder="请输入" disabled></el-input>
                </el-form-item>
                <el-form-item label="干扰源类型:">
                    <el-select v-model="addData.loadType" clearable collapse-tags placeholder="请选择" disabled>
                        <el-option
                            v-for="item in interferenceType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="干扰源用户名称:">
                    <el-input v-model="addData.userName" clearable placeholder="请输入关键字" disabled></el-input>
                </el-form-item>
                <el-form-item label="建档时间">
                    <!-- <el-date-picker
                        v-model.trim="addData.recordTime"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    >
                    </el-date-picker> -->
                    <el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="addData.recordTime"
                        disabled
                        type="datetime"
                        placeholder="选择日期时间"
                    ></el-date-picker>
                </el-form-item>

                <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">
                    入网评估报告上传
                </el-divider>
                <el-form-item class="item" label="文件名称:">
                    <el-input v-model="documentName" clearable placeholder="请输入填报名称" disabled></el-input>
                </el-form-item>
                <el-form-item>
                    <!-- <upload/> -->
                    <el-upload
                        ref="upload"
                        class="upload-files"
                        action=""
                        accept=".doc,.docx,.xls,.xlsx,.pdf,.txt"
                        :headers="headers"
                        name="file"
                        multiple
                        :auto-upload="false"
                        :file-list="fileList"
                        :on-change="handleChange"
                        :limit="1"
                        :on-exceed="handleExceed"
                    >
                    <el-button slot="trigger" size="mini" icon="el-icon-upload" type="primary">上传本地评估报告</el-button>
                    </el-upload>
                </el-form-item>
                <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">
                    入网评估结论填报
                </el-divider>
                <el-form-item label="是否超标:" style="margin-top: 20px">
                    <el-radio v-model="radio" label="0">是</el-radio>
                    <el-radio v-model="radio" label="1">否</el-radio>
                </el-form-item>
                <el-form-item label="超标指标:" style="margin-top: 20px">
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">
                            {{ city.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="计划采取措施:" style="margin-top: 20px">
                    <el-select v-model="measures" placeholder="请选择">
                        <el-option
                            v-for="item in takeMeasures"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <br/>
                <el-form-item label="入网详情:" style="margin-top: 20px">
                    <el-input
                        v-model="rwxq"
                        placeholder="请输入入网详情"
                        type="textarea"
                        style="width: 500px"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex; justify-content: center; margin-top: 30px">
                <el-button type="primary" class="ml20" @click="tj">提交</el-button>
                <el-button type="primary" class="ml20" @click="bc">保存</el-button>
                <el-button type="primary" class="ml20" @click="uploadConclusions = false">取消</el-button>
            </div>
        </el-dialog>

        <!-- 查看详情 -->
        <el-dialog :close-on-click-modal="false" title="未建档干扰源用户详情" :visible.sync="userDetails" width="1700px">
            <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">基本信息</el-divider>
            <el-form :inline="true">
                <el-form-item label="所属单位:">
                    <el-input v-model="addData.orgNo" clearable placeholder="请输入" disabled></el-input>
                </el-form-item>
                <el-form-item label="干扰源类型:">
                    <el-select v-model="addData.loadType" clearable collapse-tags placeholder="请选择" disabled>
                        <el-option
                            v-for="item in interferenceType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="干扰源用户名称:">
                    <el-input v-model="addData.userName" clearable placeholder="请输入关键字" disabled></el-input>
                </el-form-item>

                <el-form-item label="建档时间">
                    <!-- <el-date-picker
                        v-model.trim="addData.recordTime"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                    >
                    </el-date-picker> -->
                    <el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="addData.recordTime"
                        disabled
                        type="datetime"
                        placeholder="选择日期时间"
                    ></el-date-picker>
                </el-form-item>

                <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">
                    入网评估报告上传
                </el-divider>
                <el-form-item class="item" label="文件名称:">
                    <el-input v-model="documentName1" clearable placeholder="请输入填报名称" disabled></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <el-upload
                        :headers="headers"
                        class="upload-demo"
                        action=""
                        :on-remove="handleRemove1"
                        :before-remove="beforeRemove1"
                        multiple
                        :limit="6"
                        :on-exceed="handleExceed1"
                        :on-change="handleChange1"
                        :file-list="fileList1"
                    >
                        <el-button size="small" type="primary" icon="el-icon-view">预览</el-button>
                    </el-upload>
                </el-form-item> -->
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-download" @click="xz">下载</el-button>
                </el-form-item>
                <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">
                    入网评估结论填报
                </el-divider>
                <el-form-item label="是否超标:" style="margin-top: 20px">
                    <el-radio v-model="radio" label="0" disabled>是</el-radio>
                    <el-radio v-model="radio" label="1" disabled>否</el-radio>
                </el-form-item>
                <el-form-item label="超标指标:" style="margin-top: 20px">
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" disabled>
                        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">
                            {{ city.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="计划采取措施:" style="margin-top: 20px">
                    <el-select v-model="measures" placeholder="请选择" disabled>
                        <el-option
                            v-for="item in takeMeasures"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <br/>
                <el-form-item label="入网详情:" style="margin-top: 20px">
                    <el-input
                        v-model="rwxq"
                        placeholder="请输入入网详情"
                        type="textarea"
                        style="width: 500px"
                        disabled
                    ></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex; justify-content: center; margin-top: 30px">
                <el-button type="primary" class="ml20" @click="userDetails = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import {
    getLoadTypeRelationList,
    uploadLoadTypeUserA,
    exportLoadTypeRelationList,
    getLoadTypeUserById,
    exportLoadTypeUserList
} from '@/api/Process-supervision/interferencemanagement/interferencemanagement'
export default {
    components: { Area },
    data() {
        return {
            checkedCities: [],
            cities: [],
            rwxq: '',
            headers: {
                Authorization: window.sessionStorage.getItem('cntoken')
            },
            undocumentednonlinearData1: [],
            op: '发电用户',
            op1: [
                {
                    value: '发电用户'
                },
                {
                    value: '用电用户'
                }
            ],
            url: '',
            total: 0,
            pageSize: 20,
            pageNum: 1,
            vh: '',
            height: null,
            isLoading: false,
            failed: false,
            userAdd: false,
            uploadConclusions: false,
            userDetails: false,
            marketingUsers: false,
            confirm: false,
            checkList: ['0'],
            radio: '0',
            textarea: '评估入网报告缺少XX指标,请整改后提交。',
            upload: '',
            formData: {
                loadType: '',
                userName: '',
                relationUserName: ''
            },
            addData: {
                orgNo: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                loadType: '',
                userName: '',
                recordTime: ''
            },
            measures: '',
            documentName: '',
            documentName1: '',
            userNumber: '',
            //是否上传
            uploadData: [
                {
                    id: 1,

                    label: '是'
                },
                {
                    id: 0,

                    label: '否'
                }
            ],
            //干扰源类型
            interferenceType: [],
            //计划采取措施
            takeMeasures: [],
            undocumentednonlinearData: [],
            multipleSelection: [],
            multipleSelection1: [],
            fileList: [],
            fileList1: [],
            device: '',
            rwzt: [],
            view: false
        }
    },
    created() {
        this.rwzt = dicData('On-network_Status', [], 1)
        this.cities = dicData('Steady_Statis', [], 1)
        this.takeMeasures = dicData('Plan_Take', [], 1)
        this.takeMeasures.shift()
        // console.log(
        //   this.rwzt,
        //   "   console.log(this.rwzt)   console.log(this.rwzt)"
        // );
        this.cities.shift()
        this.interferenceType = dicData('Interference_Source', [], 0)
    },
    mounted() {
        this.onsubmit()
        this.device = window.devicePixelRatio
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 215
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        dc() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '请选择一条数据',
                    type: 'warning'
                })
            } else {
                let a = []
                this.multipleSelection.forEach(res => {
                    a.push(res.id)
                })
                exportLoadTypeRelationList(a).then(res => {
                    let blob = new Blob([res], {
                        type: 'application/vnd.ms-excel'
                    })
                    const url = window.URL.createObjectURL(blob)
                    const link = document.createElement('a') // 创建a标签
                    link.href = url // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
                    link.download = '干扰源用户长态化管理信息.xls' // 设置下载的文件名
                    document.body.appendChild(link)
                    link.click() //执行下载
                    document.body.removeChild(link)
                })
            }
        },
        bc() {
            const formData = new FormData()
            this.fileList.forEach(item => {
                if (item.raw == '') {
                } else {
                    formData.append('file', item.raw)
                }
            })
            formData.append('status', '0')
            formData.append('id', this.multipleSelection[0].id)
            formData.append('ADescription', this.rwxq)
            formData.append('AIsOverLimit', this.radio)
            formData.append('APlanStep', this.measures)
            formData.append('AOverLimitTarget', this.checkedCities.toString())
            uploadLoadTypeUserA(formData) //后端上传接口
                .then(res => {
                    this.uploadConclusions = false
                    // this.onsubmit()
                })
                .catch(err => {
                    // console.log(err);
                })
        },
        xz() {
            window.open(this.url)
        },

        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
                    files.length + fileList.length
                } 个文件`
            )
        },
        ck(val) {
            getLoadTypeUserById({
                id: val.id
            }).then(res => {
                this.url = res.data.ifile == null ? '' : res.data.ifile
                // this.addData.orgNo = val.orgName == null ? '' : val.orgName
                this.addData.loadType = res.data.loadType == null ? '' : res.data.loadType
                this.addData.userName = res.data.userName == null ? '' : res.data.userName
                this.addData.recordTime = res.data.recordTime == null ? '' : res.data.recordTime
                this.documentName1 = res.data.afilePath == null ? '' : res.data.afilePath
                this.radio = res.data.iisOverLimit == null ? '' : res.data.iisOverLimit.toString()
                this.checkedCities = res.data.ioverLimitTarget == null ? '' : res.data.ioverLimitTarget.split(',')
                this.measures = res.data.iplanStep == null ? '' : res.data.iplanStep
                this.rwxq = res.data.idescription == null ? '' : res.data.idescription
                this.userDetails = true
            })
        },
        tj() {
            const formData = new FormData()
            this.fileList.forEach(item => {
                if (item.raw == '') {
                } else {
                    formData.append('file', item.raw)
                }
            })
            formData.append('status', '1')
            formData.append('id', this.multipleSelection[0].id)
            formData.append('ADescription', this.rwxq)
            formData.append('AIsOverLimit', this.radio)
            formData.append('APlanStep', this.measures)
            formData.append('AOverLimitTarget', this.checkedCities.toString())
            uploadLoadTypeUserA(formData) //后端上传接口
                .then(res => {
                    this.uploadConclusions = false
                    // this.onsubmit()
                })
                .catch(err => {
                    // console.log(err);
                })
        },
        sc() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '请选择一条数据',
                    type: 'warning'
                })
            }

            if (this.multipleSelection.length > 1) {
                this.$message({
                    message: '只能选择一条数据',
                    type: 'warning'
                })
            } else {
                this.fileList=[]
                getLoadTypeUserById({
                    id: this.multipleSelection[0].id
                }).then(res => {
                    this.fileList.push({
                        name: res.data.afilePath,
                        url: res.data.ifile,
                        raw: ''
                    })
                    this.documentName = res.data.afilePath == null ? '' : res.data.afilePath
                    this.radio = res.data.iisOverLimit == null ? '' : res.data.iisOverLimit.toString()
                    this.checkedCities = res.data.ioverLimitTarget == null ? '' : res.data.ioverLimitTarget.split(',')
                    this.measures = res.data.iplanStep == null ? '' : res.data.iplanStep
                    this.rwxq = res.data.idescription == null ? '' : res.data.idescription
                    this.uploadConclusions = true
                })
                // this.addData.orgNo = this.multipleSelection[0].orgName == null ? '' : this.multipleSelection[0].orgName
                // this.addData.loadType =
                //     this.multipleSelection[0].loadType == null ? '' : this.multipleSelection[0].loadType
                // this.addData.userName =
                //     this.multipleSelection[0].userName == null ? '' : this.multipleSelection[0].userName
                // this.addData.recordTime =
                //     this.multipleSelection[0].recordTime == null ? '' : this.multipleSelection[0].recordTime
            }
        },

        handleSizeChange(val) {
            this.pageSize = val
            this.onsubmit()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.onsubmit()
        },

        //上传本地评估报告
        handleRemove(file, fileList) {
            // console.log(file, fileList,'111111');
        },
        handleChange(file, fileList) {
            // console.log(file, fileList);
            this.fileList = fileList
            this.documentName=fileList[0].name
        },

        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}?`)
        },
        //预览
        handleRemove1(file, fileList1) {
            // console.log(file, fileList,'111111');
        },
        handleChange1(file, fileList) {
            // console.log(file, fileList);

            this.fileList = fileList
        },
        handleExceed1(files, fileList1) {
            this.$message.warning(
                `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
                    files.length + fileList1.length
                } 个文件`
            )
        },
        beforeRemove1(file, fileList1) {
            return this.$confirm(`确定移除 ${file.name}?`)
        },
        //查询
        onsubmit() {
            this.isLoading = true
            getLoadTypeRelationList({
                loadType: this.formData.loadType,
                orgNo: this.addData.orgNo,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                relationUserName: this.formData.relationUserName,
                userName: this.formData.userName,
                aisFileUpload: this.upload
            }).then(res => {
                this.isLoading = false
                res.data.records.forEach(i => {
                    this.interferenceType.forEach(o => {
                        if (i.loadType == o.id) {
                            i.loadType = o.name
                        }
                    })
                })
                this.undocumentednonlinearData = res.data.records
                this.total = res.data.total
            })
        },
        //   新增确定
        // determineFn(){
        //     this.userAdd=false;
        // },
        //   新增取消
        // cancelFn(){
        //     this.userAdd=false;
        // },

        //上传
        //   uploadFn(){
        //     this.uploadConclusions=true
        //   },

        //关联

        // 切换选项
        handleNodeClick(data) {
            this.addData.orgNo = data.id
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row)
                })
            } else {
                this.$refs.multipleTable.clearSelection()
            }
        },
        toggleSelection1(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable1.toggleRowSelection(row)
                })
            } else {
                this.$refs.multipleTable1.clearSelection()
            }
        },
        //勾选
        handleSelectionChange(val) {
            this.multipleSelection = val
            // console.log(
            //   this.multipleSelection,
            //   "this.multipleSelectionthis.multipleSelection"
            // );
        },
        selectAll() {
            this.$refs.multipleTable.clearSelection()
        },

        handleSelectionChange1(val) {
            // console.log(val, "valll");
            if (val.length > 1) {
                this.toggleSelection1([val[0]])
                this.multipleSelection1 = val
            } else {
                this.multipleSelection1 = val
            }
        },
        //重置
        Reset() {
            this.$refs.area.form.value = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            this.upload = ''
            this.formData.loadType = this.interferenceType[0].id
            this.formData.userName = ''
        },
        ResetFn() {
            this.userNumber = ''
        },
        //判断颜色
        cellStyle(row) {
            // if(row.row.upload==1){
            //     // if(row.columnIndex==6 ){
            //         row.row.status='--'
            //     // }else if(row.columnIndex==7){
            //         row.row.plandetails='--'
            //     // }
            // }
            if (row.columnIndex == 6) {
                if (row.row.upload == 1) {
                    row.row.status = '--'
                }
            }
            if (row.columnIndex == 7) {
                if (row.row.upload == 1) {
                    row.row.plandetails = '--'
                }
            }
        },

        handleCheckedCitiesChange(value) {
            // console.log(value, "value");
            // console.log(this.checkedCities, "this.checkedCities");
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
::v-deep .form {
    .el-form-item {
        margin-bottom: 5px;
    }
}
::v-deep .el-form-item {
    margin-bottom: 15px;
}
.button {
    float: right;
    margin-right: 5px;
}
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*height:600px;*/
    max-height: calc(100% - 200px);
    max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 43%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }
    to {
        height: auto;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 20%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
