<template>
  <div class="plan-form" :class="{'dark': styleType == 2}">
            <div style="height: 100%">
            <vue-scroll>
            <div class="wrap">
            <div class="left">
                <div class="info">
                    <div class="box-title">
                        基本信息
                    </div>
                    <el-form class="form-box" :model="addForm">
                        <el-form-item label="危大工程名称：" required :label-width="formLabelWidth">
                            <el-input v-model="addForm.engineeringName"  placeholder="请输入危大工程名称" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="危大工程类别：" required :label-width="formLabelWidth">
                            <el-select v-model="addForm.engineeringTypeId"  @change="changeType" placeholder="请选择危大工程类别">
                                <el-option v-for="item in typeOptions"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id"
                                    >
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="危大工程概况："  :label-width="formLabelWidth">
                            <el-input v-model="addForm.engineeringSurvey" :disabled="isDisabled" placeholder="请输入危大工程概况" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="类别描述：" required :label-width="formLabelWidth">
                            <!-- <el-select v-model="addForm.typeDescribeId"  @change="changeDescribe"  placeholder="请选择类别描述">
                                <el-option v-for="item in describeOptions"
                                    :key="item.id"
                                    :label="item.describeName"
                                    :value="item.id">
                                </el-option>
                            </el-select> -->
                             <el-cascader
                                :disabled="isDisabled"
                                v-model="addForm.typeDescribeId"
                                @change="changeDescribe"
                                placeholder="请选择类别描述"
                                :options="describeOptions"
                                :props="props2"
                                clearable>
                            </el-cascader>
                        </el-form-item>

                        <el-form-item label="施工部位：" :label-width="formLabelWidth" required>
                            <el-input v-model="addForm.constructionLocation" :disabled="isDisabled" placeholder="请输入施工部位" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="施工时间：" required :label-width="formLabelWidth">
                            <el-date-picker
                                :disabled="isDisabled"
                                v-model="addForm.buildTime"
                                type="daterange"
                                range-separator="至"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>

                        <!-- <el-form-item label="施工计划" :label-width="formLabelWidth">
                            <el-input v-model="addForm.people" :disabled="isDisabled" placeholder="请输入施工计划" autocomplete="off"></el-input>
                        </el-form-item> -->

                        <el-form-item label="计划时间：" :label-width="formLabelWidth">
                            <el-date-picker
                                :disabled="isDisabled"
                                v-model="addForm.planTime"
                                type="daterange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                value-format="yyyy-MM-dd"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="责任人：" :label-width="formLabelWidth">
                            <el-input v-model="addForm.personLiable" :disabled="isDisabled" placeholder="请输入责任人" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="责任分包单位：" :label-width="formLabelWidth">
                            <el-cascader
                                :disabled="isDisabled"
                                v-model="addForm.responsibilityCompany"
                                placeholder="请选择责任分包单位"
                                :options="options"
                                :props="props"
                                clearable>
                            </el-cascader>
                        </el-form-item>

                    </el-form>
                </div>
                <div class="control-point" v-if="company != 'longguang'">
                    <div class="box-title">
                        管控要点
                    </div>
                    <div style="height: calc(100% - 50px);">
                        <!-- <vue-scroll> -->
                            <!-- <el-checkbox-group class="checkbox-list" v-model="checkList">
                                <div class="checkbox-item" v-for="(item,index) in contentList" :key="index">
                                    <el-checkbox :label="item.id"><a>{{item.controlTypeName}}</a></el-checkbox>
                                    <div class="checkbox-children" v-for="(itm,idx) in item.children" :key="idx">
                                        <el-checkbox :label="itm.id">{{itm.controlContent}}</el-checkbox>
                                    </div>
                                </div>
                            </el-checkbox-group> -->
                            <div class="checkbox-list">
                                <div class="checkbox-item" v-for="(item,index) in contentList" :key="index">
                                    <el-checkbox v-model="item.allCheck" @change="allChildrenCheck(item)"><a>{{item.controlTypeName}}</a></el-checkbox>
                                    <el-checkbox-group v-model="checkList">
                                        <div class="checkbox-children" v-for="(itm,idx) in item.children" :key="idx">
                                            <el-checkbox :label="itm.id" @change="checkChidren(item)">{{itm.controlContent}}</el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        <!-- </vue-scroll> -->
                    </div>
                </div>
            </div>
            <div v-if="company != 'longguang'" :class="{'line': styleType == 2}"></div>
            <div v-if="company != 'longguang'" class="right">
                <div class="box-title">
                    工程资料
                </div>
                <div class="file-form">
                    <!-- <vue-scroll> -->
                    <div class="form-item">
                        <div class="switch-lable">安全技术交底</div>
                        <div class="form-right">
                            <div class="switch-box">
                                <el-switch
                                    v-model="addForm.technicalDisclosureType"
                                    active-color="#13ce66"
                                    inactive-color="#efefef">
                                </el-switch>
                                <div>{{addForm.technicalDisclosureType ? '已完成':'未完成'}}</div>
                            </div>
                            <el-upload
                               class="avatar-uploader"
                                :action="$store.state.UPLOADURL"
                                :show-file-list="false"

                                :on-success="handleUploadSuccess"
                                name="files">
                                <div class="upload-btn">点击上传</div>
                            </el-upload>

                            <div class="file-list" v-if="fileList && fileList.length > 0">
                                <div class="list-head">资料列表</div>
                                <div class="item-box">
                                    <vue-scroll>
                                        <div class="list-item" v-for="(item,index) in fileList" :key="index">
                                            <div class="file-icon">
                                                <img v-if="item.iconType == 'word'" src="@/assets/images/icon-word.png" />
                                                <img v-if="item.iconType == 'image'" src="@/assets/images/icon-image.png" />
                                                <img v-if="item.iconType == 'excel'" src="@/assets/images/icon-excel.png" />
                                                <img v-if="item.iconType == 'ppt'" src="@/assets/images/icon-ppt.png" />
                                                <img v-if="item.iconType == 'pdf'" src="@/assets/images/icon-pdf.png" />
                                            </div>
                                            <div class="file-name">
                                                {{item.name}}
                                                <span @click="downLoadFile(item.url)">下载</span>
                                            </div>
                                            <i class="el-icon-close" @click="removeFile(index, 1)"></i>
                                        </div>
                                    </vue-scroll>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="switch-lable">专项施工方案交底</div>
                        <div class="form-right">
                            <div class="switch-box">
                                <el-switch
                                    v-model="addForm.specialConstructionSchemeType"
                                    active-color="#13ce66"
                                    inactive-color="#efefef">
                                </el-switch>
                                <div>{{addForm.specialConstructionSchemeType ? '已完成':'未完成'}}</div>
                            </div>
                            <el-upload
                               class="avatar-uploader"
                                :action="$store.state.UPLOADURL"
                                :show-file-list="false"

                                :on-success="handleUploadSuccess2"
                                name="files">
                                <div class="upload-btn">点击上传</div>
                            </el-upload>

                            <div class="file-list" v-if="fileList2 && fileList2.length > 0">
                                <div class="list-head">资料列表</div>
                                <div class="item-box">
                                    <vue-scroll>
                                        <div class="list-item" v-for="(item,index) in fileList2" :key="index">
                                            <div class="file-icon">
                                                <img v-if="item.iconType == 'word'" src="@/assets/images/icon-word.png" />
                                                <img v-if="item.iconType == 'image'" src="@/assets/images/icon-image.png" />
                                                <img v-if="item.iconType == 'excel'" src="@/assets/images/icon-excel.png" />
                                                <img v-if="item.iconType == 'ppt'" src="@/assets/images/icon-ppt.png" />
                                                <img v-if="item.iconType == 'pdf'" src="@/assets/images/icon-pdf.png" />
                                            </div>
                                            <div class="file-name">
                                                {{item.name}}
                                                <span @click="downLoadFile(item.url)">下载</span>
                                            </div>
                                            <i class="el-icon-close" @click="removeFile(index, 2)"></i>
                                        </div>
                                    </vue-scroll>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="switch-lable">安全专项施工方案及附件</div>
                        <div class="form-right">
                            <div class="switch-box">
                                <el-switch
                                    v-model="addForm.securityConstructionSchemeType"
                                    active-color="#13ce66"
                                    inactive-color="#efefef">
                                </el-switch>
                                <div>{{addForm.securityConstructionSchemeType ? '已完成':'未完成'}}</div>
                            </div>
                            <el-upload
                               class="avatar-uploader"
                                :action="$store.state.UPLOADURL"
                                :show-file-list="false"

                                :on-success="handleUploadSuccess3"
                                name="files">
                                <div class="upload-btn">点击上传</div>
                            </el-upload>

                            <div class="file-list" v-if="fileList3 && fileList3.length > 0">
                                <div class="list-head">资料列表</div>
                                <div class="item-box">
                                    <vue-scroll>
                                        <div class="list-item" v-for="(item,index) in fileList3" :key="index">
                                            <div class="file-icon">
                                                <img v-if="item.iconType == 'word'" src="@/assets/images/icon-word.png" />
                                                <img v-if="item.iconType == 'image'" src="@/assets/images/icon-image.png" />
                                                <img v-if="item.iconType == 'excel'" src="@/assets/images/icon-excel.png" />
                                                <img v-if="item.iconType == 'ppt'" src="@/assets/images/icon-ppt.png" />
                                                <img v-if="item.iconType == 'pdf'" src="@/assets/images/icon-pdf.png" />
                                            </div>
                                            <div class="file-name">
                                                {{item.name}}
                                                <span @click="downLoadFile(item.url)">下载</span>
                                            </div>
                                            <i class="el-icon-close"  @click="removeFile(index, 3)"></i>
                                        </div>
                                    </vue-scroll>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- </vue-scroll> -->
                </div>
            </div>
        </div>
         <div class="button-box" :class="{'button-box2': company == 'longguang'}">
            <el-button class="cancle-btn" icon="el-icon-circle-close" size="small" @click="cancle">取消</el-button>
            <el-button type="primary" icon="el-icon-circle-check" size="small" @click="submit">保存</el-button>
        </div>
        </vue-scroll>
        </div>
  </div>
</template>

<script>
import {
    selectDangerousEngineeringRecordApi,
    addDangerousEngineeringRecordApi,
    deleteDangerousEngineeringRecordApi,
    selectDangerousEngineeringTypeApi,
    selectdangerousEngineeringTypeDescribeApi,
    selectControlContentListApi,
    editDangerousEngineeringRecordApi
} from "@/assets/js/api/dangerousBigProject"
import { getCooperatorListApi } from "@/assets/js/api/cooperationUnit";
export default {
    data(){
        return{
            styleType: 1,
            addForm: {
                engineeringName: "",
                engineeringSurvey: "",
                engineeringTypeId: "",
                engineeringTypeName: "",
                personLiable: "",
                typeDescribeId: [],
                planTime: "",
                buildTime: "",
                constructionLocation: "",
                responsibilityCompany: [],
                securityConstructionSchemeType: false,
                specialConstructionSchemeType: false,
                technicalDisclosureType: false,
                typeDescribeList: []
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            options2:[],
            checkList:[],
            formLabelWidth: "136px",
            isDisabled: false,
            value: false,
            headquartersSn: "",
            typeOptions:[],
            contentList: [],
            describeOptions:[],
            enterpriseTypeId: 1,
            pageSize: 1000,
            pageNo: 1,
            projectSn: "",
            options:[],
            props: {
                multiple: true
            },
            props2:{
                multiple: true,
                value: 'id',
                label: 'describeName'
            },
            cooperatorList:[],
            fileList:[],
            fileList2:[],
            fileList3:[],
            fileUrl: "",
            company: ""
        }
    },
    created(){
        this.company = COMPANY
        this.headquartersSn = JSON.parse(window.sessionStorage.getItem("vuex")).userInfo.headquartersSn
        this.projectSn = JSON.parse(window.sessionStorage.getItem("vuex")).userInfo.sn
        this.styleType = this.styleType = this.$store.state.userInfo.styleType;
        this.fileUrl = this.$store.state.FILEURL;
        this.queryTypeList()
        this.getCooperatorList()
    },
    methods:{
        queryTypeList(){
            selectDangerousEngineeringTypeApi({sn: this.headquartersSn}).then(res=>{
                console.log(res)
                if(res.code == 200 && res.result){
                    this.typeOptions = res.result
                }
            })
        },
        queryDescribe(typeId){
            selectdangerousEngineeringTypeDescribeApi({typeId}).then(res=>{
                console.log(res)
                if(res.code == 200 && res.result){
                    this.describeOptions = res.result
                }
            })
        },
        changeType(val){
            console.log(val)
            this.typeOptions.forEach(item=>{
                if(item.id == val){
                    this.addForm.engineeringTypeName = item.typeName
                }
            })
            this.addForm.typeDescribeId = []
            this.contentList = []
            this.typeOptions.forEach(item=>{
                if(item.id == val){
                    // this.describeOptions = item.describeList
                    this.queryDescribe(val)
                }
            })
        },
        changeDescribe(val){
            this.addForm.typeDescribeList = []
            val.join(',').split(',').forEach(item=>{
                let id = item
                this.describeOptions.forEach(itm=>{
                    if(itm.id == id){
                        let obj = {
                            describeld: itm.id,
                            describeName: itm.describeName
                        }
                        this.addForm.typeDescribeList.push(obj)
                    }
                })
            })
            console.log(val,this.describeOptions)
            selectControlContentListApi({describeId: val.join(',')}).then(res=>{
                console.log(res.result)
                if(res.code == 200 && res.result){
                    this.contentList = res.result
                }
            })
        //    this.describeOptions.forEach(item=>{
        //         if(item.id == val){
        //             this.contentList = item.contentList
        //         }
        //     })
        },
        allChildrenCheck(val){
            console.log(val)
            if(val.allCheck){
                val.children.forEach(item=>{
                    this.checkList.push(item.id)
                })
               this.checkList = Array.from(new Set(this.checkList));
            } else {
                val.children.forEach(item=>{
                    let id = item.id
                    this.checkList.forEach((itm,idx)=>{
                        if(itm == id){
                            this.checkList.splice(idx, 1)
                        }
                    })
                })
            }
            console.log(this.checkList)
        },
        checkChidren(val){
            let arr = [],
                arr2 = [],
                allCheck = true
            val.children.forEach(item=>{
                arr.push(item.id)
            })
            arr.forEach(item=>{
                let id = item
                let flag = this.checkList.findIndex((itm,idx)=>{
                    return itm == id
                })
                if(flag != -1){
                    arr2.push(true)
                } else{
                    arr2.push(false)
                }
            })

            arr2.forEach(item=>{
                if(!item){
                    allCheck = false;
                    return;
                }
            })
            val.allCheck = allCheck
            console.log(val,arr,arr2,allCheck)
        },
         //获取责任分包单位
        getCooperatorList() {
            let data = {
                projectSn: this.projectSn,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                enterpriseTypeId: this.enterpriseTypeId,
                enterpriseName: "",
            };
            getCooperatorListApi(data).then((res) => {
                if (res.code == 200) {

                    if (res.result.records.length > 0) {
                        this.cooperatorList = JSON.parse(JSON.stringify(res.result.records));
                        this.cooperatorList.forEach((item)=>{
                            item.value = item.enterpriseName
                            item.label = item.enterpriseName
                        })
                        this.options = this.cooperatorList
                        console.log(res.result.records)
                    }
                }
            });
        },
        handleUploadSuccess(res,file) {
            console.log(res,file);
            this.fileList.push({
                name: file.name,
                url: file.response.data[0].imageUrl,
                iconType: this.getFileType(file.name)
            })
            // this.addProjectForm.layoutImage = this.$store.state.FILEURL + res.data[0].imageUrl;
        },
        handleUploadSuccess2(res,file){
            console.log(res,file);
            this.fileList2.push({
                name: file.name,
                url: file.response.data[0].imageUrl,
                iconType: this.getFileType(file.name)
            })
        },
        handleUploadSuccess3(res,file){
            console.log(res,file);
            this.fileList3.push({
                name: file.name,
                url: file.response.data[0].imageUrl,
                iconType: this.getFileType(file.name)
            })
        },
        downLoadFile(url){
            window.open(this.fileUrl + url)
        },
        removeFile(index, type){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    if(type == 1){
                        this.fileList.splice(index,1)
                    } else if(type == 2){
                        this.fileList2.splice(index,1)
                    } else if(type == 3){
                        this.fileList3.splice(index,1)
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 判断文件类型
        getFileType(fileName) {
            // 后缀获取
            let suffix = '';
            // 获取类型结果
            let result = '';
            try {
            const flieArr = fileName.split('.');
            suffix = flieArr[flieArr.length - 1];
            } catch (err) {
            suffix = '';
            }
            // fileName无后缀返回 false
            if (!suffix) { return false; }
            suffix = suffix.toLocaleLowerCase();
            // 图片格式
            const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
            // 进行图片匹配
            result = imglist.find(item => item === suffix);
            if (result) {
            return 'image';
            }
            // 匹配txt
            const txtlist = ['txt'];
            result = txtlist.find(item => item === suffix);
            if (result) {
            return 'txt';
            }
            // 匹配 excel
            const excelist = ['xls', 'xlsx'];
            result = excelist.find(item => item === suffix);
            if (result) {
            return 'excel';
            }
            // 匹配 word
            const wordlist = ['doc', 'docx'];
            result = wordlist.find(item => item === suffix);
            if (result) {
            return 'word';
            }
            // 匹配 pdf
            const pdflist = ['pdf'];
            result = pdflist.find(item => item === suffix);
            if (result) {
            return 'pdf';
            }
            // 匹配 ppt
            const pptlist = ['ppt', 'pptx'];
            result = pptlist.find(item => item === suffix);
            if (result) {
            return 'ppt';
            }
            // 匹配 视频
            const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
            result = videolist.find(item => item === suffix);
            if (result) {
            return 'video';
            }
            // 匹配 音频
            const radiolist = ['mp3', 'wav', 'wmv'];
            result = radiolist.find(item => item === suffix);
            if (result) {
            return 'radio';
            }
            // 其他 文件类型
            return 'other';
        },
        cancle(){
            this.$emit('cancleSave')
        },
        submit(){
            if(this.addForm.engineeringName == ''){
                this.$message.error('请输入危大工程名称！')
                return;
            }
            if(this.addForm.engineeringTypeId == ''){
                this.$message.error('请选择危大工程类别！')
                return;
            }
            if(this.addForm.typeDescribeId.length == 0){
                this.$message.error('请选择类别描述！')
                return;
            }
            if(this.addForm.constructionLocation == ''){
                this.$message.error('请输入施工部位！')
                return;
            }
            if(!this.addForm.buildTime){
                this.$message.error('请选择施工时间！')
                return;
            }
            console.log(this.addForm)
            let {constructionLocation,typeDescribeList,engineeringTypeName, engineeringName, engineeringSurvey, personLiable, engineeringTypeId} = this.addForm,
                data = {
                    constructionLocation,
                    engineeringName,
                    engineeringSurvey,
                    personLiable,
                    engineeringTypeId,
                    engineeringTypeName,
                    buildStartTime: this.addForm.buildTime[0],
                    buildEndTime: this.addForm.buildTime[1],
                    planStartTime: this.addForm.planTime[0] ? this.addForm.planTime[0]:'',
                    planEndTime: this.addForm.planTime[1] ? this.addForm.planTime[0]:'',
                    // typeDescribeId: this.addForm.typeDescribeId.join(','),
                    responsibilityCompany: this.addForm.responsibilityCompany.join(','),
                    securityConstructionSchemeType: this.addForm.securityConstructionSchemeType ? 2:1,
                    specialConstructionSchemeType: this.addForm.specialConstructionSchemeType ? 2:1,
                    technicalDisclosureType: this.addForm.specialConstructionSchemeType ? 2:1,
                    typeDescribeList,
                    controlItemList: this.checkList,
                    technicalDisclosureFile: JSON.stringify(this.fileList),
                    securityConstructionSchemeFile: JSON.stringify(this.fileList3),
                    specialConstructionSchemeFile: JSON.stringify(this.fileList2)
                };
            data.projectSn = this.projectSn
            addDangerousEngineeringRecordApi(data).then(res=>{
                console.log(res)
                if(res.code == 200){
                    this.$message.success("添加成功！")
                    this.$emit('cancleSave')
                }
            })
            console.log(data,this.fileList)
        }
    }
}
</script>

<style lang="less" scoped>
.plan-form{
    height: calc(100% - 56px);
    width: 100%;
    box-sizing: border-box;

    .box-title{
        height: 30px;
        padding-top: 10px;
        line-height: 30px;
        position: relative;
        padding-left: 20px;
        box-sizing: border-box;
        margin-bottom:20px;
        display: flex;
        justify-content: space-between;
    }
    .box-title::before{
        content: "";
        background: #4181FE;
        height: 30px;
        width: 2px;
        position: absolute;
        left: 0;
        top: 10px;
    }
    .wrap{
        display: flex;
        width: 100%;
        // height: 100%;

    }
    .left{
        height: 100%;
        width: 65%;

        .info{

            padding-bottom: 8px;
            .form-box{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                /deep/.el-form-item{
                    width: 50%;
                    padding-right: 10px;
                    box-sizing: border-box;
                }
                // /deep/.el-col-12{
                //     padding-left: 20px;
                // }
                /deep/.el-input__inner{
                    width: 100%;
                }
                /deep/.el-select{
                    width: 100%;
                }
                /deep/.el-cascader{
                    width: 100%;
                }
            }
        }
        .control-point{
            // height: 350px;
            min-height: 330px;
            overflow: hidden;
           .checkbox-list{
               display: flex;
               flex-wrap: wrap;
                /deep/.el-checkbox{
                   width: 100%;
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow:ellipsis;
                   display: flex;
                   align-items: center;
               }
               /deep/.el-checkbox__label{
                   flex: 1;
                   white-space: nowrap;
                   overflow: hidden;
                   text-overflow:ellipsis;
               }
               .checkbox-item{
                   width: 50%;
                   padding-left: 24px;
                   box-sizing: border-box;
                    .checkbox-children{
                        padding-left: 24px;
                    }
               }
               /deep/.el-checkbox{
                   margin-bottom: 6px;
               }
           }
        }
    }
    .line{
        border-left: 1px solid #12294F;
    }
    .right{
        width: 35%;
        .file-form{
            padding-left: 20px;
            // height: 658px;
            .form-item{
                font-size: 14px;
                display: flex;
                // align-items: center;
                // color: rgba(#fff,0.55);
                padding-bottom: 30px;
                .switch-lable{
                    width: 40%;
                    text-align: right;
                    line-height: 20px;
                    margin-right: 20px;
                    // color: rgba(#fff,0.85);
                }
                .el-switch{
                    margin-right: 12px;
                    transform: scale(0.9);
                }
                .form-right{
                    flex: 1;
                    padding-right: 12px;
                    .switch-box{
                        display: flex;
                        align-items: center;
                        margin-bottom: 25px;
                    }

                }
            }
        }
        .upload-btn{
            display: block;
            width: 86px;
            height: 26px;
            border: 1px solid #0080F3;
            background: #0080F3;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 26px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        .file-list{
            width: 100%;
            background: #f5f5f5;
            .list-head{
                height: 32px;
                line-height: 32px;
                background: #ccc;

                padding-left: 10px;
            }
            .item-box{
                // height: 300px;
                .list-item{
                    display: flex;
                    width: 100%;
                    align-items: center;
                    padding: 8px 0;
                    padding-left: 20px;
                    box-sizing: border-box;
                    margin: 10px 0;
                    .file-icon{
                        margin-right: 10px;
                        img{
                            width: 32px;
                            height: 38px;
                        }
                    }
                    .file-name{
                        flex: 1;
                        font-size: 12px;
                        display: flex;
                        flex-direction: column;
                        span{
                            display: inherit;
                            margin-top: 6px;
                            color: #0080F3;
                            cursor: pointer;
                        }
                    }
                    .el-icon-close{
                        color: #FE6565;
                        width: 20px;
                        cursor: pointer;
                    }
                }
                .list-item:hover{
                    background: #ccc;
                }
                // .active{
                //     background: #132C55;
                // }
            }
        }
    }
    .button-box{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        // padding-top: 8px;
        height: 60px;
        padding-right: 20px;
        .cancle-btn{
            margin-right: 30px;
        }
    }
    .button-box2{
        position: absolute;
        bottom: 0;
        right: 20px;
    }

}
.dark{
    border-top: 1px solid #12294F;
    .wrap{
        border-bottom: 1px solid #12294F;
    }
    .left{
        .info{
            border-bottom: 1px solid #12294F;
        }
    }

    .box-title{
        color: #88E7F0;
    }
   .box-title::before{
        background: linear-gradient(to bottom,#88E7F0,#15315F);
    }
    .button-box{
        .cancle-btn{
            background: transparent;
            color: #fff;
        }
    }
    .right{
        /deep/.el-switch__core:after{
            background: #0D1A34;
        }
        .upload-btn{
            border: 1px solid #0080F3;
            background: #0D1A34;
            // color: rgba(#fff,0.85);
        }
        .file-list{
            background: #0A1429;
        }
        .list-head{
            background: #1F283B;
        }
        .item-box{
            .list-item:hover{
                background: #132C55;
            }
            .file-name{
                span{
                    color: #7CD3DE;
                }
            }
        }
    }
}
</style>
