<template>
    <div>
        <div class="bigBox">
            <div style="text-align: center;">
                <h2>一次性接线管理</h2>
            </div>
            <div>
                <el-button type="primary" plain @click="createType">
                    <el-icon>
                        <Plus />
                    </el-icon>添加新分类</el-button>
            </div>
            <div>
                <el-table ref="multipleTableRef" :stripe="true" :data="lineList" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="编号" prop="id" width="auto">
                        <!-- <template #default="scope">{{ scope.row.cr }}</template> -->
                    </el-table-column>
                    <el-table-column label="线路名称" prop="name" width="auto" />
                    <el-table-column width="auto" label="线路图" prop="pic">
                        <template #default="scope">
                            <span style="color: blue;border-bottom: 1px solid blue;cursor: pointer;" @click="lookPic(scope.row)">查看</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="接线方式" prop="name" width="auto" />
                    <el-table-column label="上传时间" prop="ct" width="auto" show-overflow-tooltip />
                    <el-table-column label="操作" width="320">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="editLine(scope.row)"><el-icon>
                                    <EditPen />
                                </el-icon>编辑</el-button>
                            <el-button link type="primary" size="small" @click="lookLine(scope.row)"><el-icon>
                                    <View />
                                </el-icon>查看</el-button>
                            <el-button link type="danger" size="small" @click="delLine(scope.row)"><el-icon>
                                    <Delete />
                                </el-icon>删除</el-button>
                            <el-button link type="primary" size="small" @click="moduleLine(scope.row)"><el-icon>
                                    <Coin />
                                </el-icon>间隔模型</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <AddLine v-if="alModal" :alModal="alModal" :search="search" @alBack="alBack"></AddLine>
                <LookLine v-if="lookModal" :lookModal="lookModal" :needList="needList" :search="search" @lookBack="lookBack"
                    :listNum="listNum"></LookLine>
                <DelLine v-if="delModal" :delModal="delModal" :needList="needList" :search="search" @delBack=delBack></DelLine>
                <PicLook v-if="picModal" :picModal="picModal" :needList="needList" @picBack="picBack"></PicLook>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue';
import litLine from "../../../api/litLine"
import AddLine from '../modalComp/AddLine.vue';
import LookLine from '../modalComp/LookLine.vue';
import DelLine from '../modalComp/DelLine.vue';
import PicLook from '../modalComp/PicLook.vue';
import { fn } from 'moment';
export default {
    props: {
        fuckList: {
            type: Array,
            required: true
        }
    },
    setup(props, { emit }) {
        let lineList = ref([])//
        let result = props.fuckList
        let alModal = ref(false)
        let needList = ref([])
        let lookModal = ref(false)
        let delModal = ref(false)
        let picModal = ref(false)
        let listNum = ref(0)//0为查看，1为编辑
        function search() {
            litLine.getAllLine({ pageno: 1, pagesize: 10 }).then(res => {
                lineList.value = res.data
            })
        }
        function handleSelectionChange(val) {
            console.log(val, 'val');
        }
        function createType() {
            alModal.value = true
        }
        function alBack(data) {
            alModal.value = data
        }
        function editLine(row) {
            needList.value = row
            listNum.value = 1
            lookModal.value = true
        }
        function lookLine(row) {
            needList.value = row
            listNum.value = 0
            lookModal.value = true
        }
        function delLine(row) {
            needList.value = row
            delModal.value = true
        }
        function lookPic(row){
            needList.value = row
            picModal.value = true
        }
        function moduleLine(row) {
            needList.value = row
        }
        function lookBack(data) {
            lookModal.value = data
        }
        function delBack(data){
            delModal.value = data
        }
        function picBack(data){
            picModal.value = data
        }
        watch(() => props.fuckList, (newVal) => {
            lineList.value = newVal
        });
        onMounted(() => {
            search()
        })
        return {
            lineList,
            handleSelectionChange,
            alModal,
            createType,
            alBack,
            result,
            search,
            lookLine,
            editLine,
            delLine,
            moduleLine,
            needList,
            lookModal,
            lookBack,
            listNum,
            delModal,
            delBack,
            picModal,
            lookPic,
            picBack,
        }
    },
    components: {
        AddLine,
        LookLine,
        DelLine,
        PicLook,
    }
}
</script>

<style scoped>
.bigBox{
    margin-top: 10px;
}
</style>