<template>
    <div>
        <div class="createMisBox" v-if="selects == 1">
            <div>
                <p>新建检测任务</p>
            </div>
            <div class="formBox">
                <el-form :inline="true" label-position="top" :model="newMission" class="demo-form-inline"
                    style="width: 1200px;margin: 0 auto;" :rules="missionRules" require-asterisk-position="right"
                    label-width="500px">
                    <el-form-item label="检测任务名称" prop="misName">
                        <el-input class="bestInput" v-model="newMission.misName" placeholder="Approved by" clearable />
                    </el-form-item>
                    <el-form-item label="任务编号" prop="misNum">
                        <el-input class="bestInput" v-model="newMission.misNum" placeholder="Approved by" clearable />
                    </el-form-item>
                    <el-form-item label="检测变电站" prop="flashId">
                        <el-select style="width: 512px;" v-model="newMission.flashId" placeholder="请选择变电站" clearable
                            @change="flashChange">
                            <template v-for="(item, index) in flashList">
                                <el-option :label="item.label" :value="item.value" />
                            </template>
                        </el-select>
                        <img style="width: 40px;height: 40px;" src="../../../assets/icon/create_misBtn.png" alt="">
                    </el-form-item>
                    <el-form-item label="报告模板" prop="reportNow">
                        <el-select class="bestInput" v-model="newMission.reportNow" placeholder="Activity zone" clearable>
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务说明" prop="misMes">
                        <el-input style="width: 1136px;" v-model="newMission.misMes"></el-input>
                    </el-form-item>
                    <el-form-item label="SCD文件">
                        <el-button style="width: 954px;" @click="chooseScdFile">{{ btnName }}</el-button>
                        <span>正在进行间隔装置分析
                            <el-icon>
                                <Loading />
                            </el-icon>
                        </span>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 间隔、装置列表 -->
            <div class="gapAndUnit">
                <!-- 间隔列表 -->
                <div class="gapBox">

                </div>
                <!-- 装置列表 -->
                <div class="unitBox">
                    <el-button @click="modelOpen">打开测试</el-button>
                </div>
            </div>
            <div>
                <el-button>返回</el-button>
                <el-button>保存</el-button>
            </div>
        </div>
        <!-- 模态框组件 -->
        <div>
            <LookScd v-if="scdLooks" :scdLooks="scdLooks" @nowBack="nowBack"></LookScd>
            <ModelTree v-if="treeMool" :treeMool="treeMool" @treeBack="treeBack"></ModelTree>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import flashPower from '../../../api/flashPower'
import scd from "../../../api/scd"
import LookScd from '../modalComp/LookScd.vue';
import ModelTree from '../modalComp/ModelTree.vue';
export default {
    props: {
        btnSelect: {
            type: Number,
            require: true
        },
        taskList: {
            type: Array,
            require: true
        }
    },
    setup(props, { emit }) {
        let selects = props.btnSelect
        let arrList = props.taskList
        let newMission = ref({
            misName: "",
            misNum: "",
            flashId: "",
            reportNow: "",
            misMes: "",
            scdFolder: "",
        })//创建任务提交表单
        let missionRules = ref({
            misName: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ],
            // misNum:[
            //     {required:true,message:""}
            // ]
            flashId: [
                { required: true, message: "请选择变电站", trigger: "change" }
            ],
            reportNow: [
                { required: true, message: "请选择模板", trigger: "change" }
            ],
            // misMes: [
            //     { required: true, message: "请输入说明", trigger: "blur" }
            // ]
        })//表单验证
        let flashList = ref([])//表单选择的变电站
        let scdLooks = ref(false)//选择scd文件时的显示与否
        let treeMool = ref(false)//选择模型模态框
        let btnName = ref('点击选择scd文件')
        function searchAllFlash() {
            flashPower.getAllArea({}).then(res => {
                flashPower.getAllFlashPower({ pid: res.data[0].pid }).then(res => {
                    flashList.value = res.data.map(item => {
                        return {
                            label: item.area_name,
                            value: item.id
                        }
                    })
                    // console.log(flashList.value, 'value');
                })
            })
        }

        //变电站下拉框change事件
        function flashChange(e) {
            // searchScd(e)
        }
        // 选择scd文件
        function chooseScdFile() {
            scdLooks.value = true
        }
        // lookscd组件传回得数据
        function nowBack(data, names, sid) {
            scdLooks.value = data
            if (names && sid) {
                newMission.value.scdFolder = sid
                btnName.value = names
                scd.getScdMiddle({scd_id:sid}).then(res=>{
                    console.log(res,'sid');
                })
                scd.getIedMiddle({scd_id:sid}).then(res=>{
                    console.log(res,'ied');
                })
            }
        }
        function treeBack(data){
            treeMool.value = data
        }
        function modelOpen(){
            treeMool.value = true
        }
        onMounted(() => {
            searchAllFlash()
        })
        return {
            selects,
            arrList,
            newMission,
            searchAllFlash,//获取变电站
            missionRules,//表单验证
            flashList,//表单选择的变电站
            flashChange,//变电站下拉框change事件
            scdLooks,//选择scd文件时的显示与否
            chooseScdFile,// 选择scd文件
            nowBack, // lookscd组件传回得数据
            btnName,//按钮内修改文字
            treeMool,//选择模型显示与否
            treeBack,//modeltree传回数据
            modelOpen,//选择模型打开模态框
        }
    },
    components: {
        LookScd,
        ModelTree,//选择模型
    }
}
</script>

<style scoped>
.createMisBox {
    width: 100%;
    height: calc(100vh - 150px);
    text-align: center;
    margin-top: 20px;
    /* line-height: calc(100vh - 150px); */
}

.formBox {
    width: 1136px;
    height: 339px;
    margin: 0 auto;
    border-bottom: 1px dashed #dbdbdb;
}

.bestInput {
    width: 550px;
    height: 40px;
    border-radius: 2px 2px 2px 2px;
}

.gapAndUnit {
    width: 1136px;
    height: 150px;
    /* border: 1px solid black; */
    margin: 5px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.gapBox {
    width: 288px;
    height: 142px;
    overflow-y: auto;
    border: 1px solid #5779D7;
}

.unitBox {
    width: 832px;
    height: 142px;
    overflow-y: auto;
    border: 1px solid #5779D7;
}
</style>