<template>
    <div class="saga-config-point">
        <div style="line-height:34px;padding-left:10px">
            <span style="display:inline-block;height: 35px;line-height:34px;">此项目包括<i style="color:#409EFF;">{{list.length}}</i>个数据源</span>
            <div style="float:right;height:34px;line-height:34px;padding-bottom: 1px;">
                <el-button @click="sameData">同步配置文件到云端</el-button>
                <el-button style="width:140px;" @click="addItem">添加数据源</el-button>
            </div>
        </div>
        <div class="saga-origin-list" v-loading="isLoading">
            <!-- <el-scrollbar> -->
                <div class="disIne border-hover saga-list-item margin5" v-for="(item,index) in list" :key="index">
                    <data-origin :id="'origin' + index" :renderData="item">
                        <div class="center">
                            <el-button @click="maintenance(item)" type="text">维护点位</el-button>
                            <el-button @click="goEdit(item)" type="text">编辑数据源</el-button>
                        </div>
                    </data-origin>
                </div>
                <div v-if="!list.length" class="center" style="margin-top: 260px;">
                    <i class="iconwushuju iconfont"></i>
                    暂无数据
                </div>
                <!-- <div class="disIne saga-list-item margin5 center pointer" @click="addItem">
                    <i class="add-icon margin50">+</i>
                </div> -->
            <!-- </el-scrollbar> -->
        </div>
    </div>
</template>
<script>
    import "@/assets/scss/point/point_config/common.scss"
    import "@/assets/scss/point/point_config/reset.scss"
    import dataOrigin from "@/components/config_point/data_origin"
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import { queryDataSourceCount,synchronizeProj } from "@/fetch/point_http"
    export default {
        components: {
            dataOrigin
        },
        data() {
            return {
                projectName: "项目名称",
                list: [],
                isLoading: false
            }
        },
        computed: {
            ...mapGetters("layout", [
                "projectId"
            ])
        },
        created() {},
        mounted() {
            console.log(this.projectId)
            this.getList()
        },
        methods: {
            //同步数据
            sameData(){
                this.$confirm("确定要同步数据？").then( _ => {
                    synchronizeProj(res => {
                        this.$message.success("同步成功")
                    })
                }).catch(_ => {
                    this.$message("取消同步")
                })
            },
            getList(){
                this.isLoading = true
                queryDataSourceCount({},res => {
                    this.isLoading = false
                    console.log(res)
                    this.list = res.Content
                })
            },
            addItem() {
                this.$router.push({
                    path: "editDataSouce"
                })
            },
            goEdit(item) {
                console.log(item)
                this.$router.push({
                    path: "editDataSouce",
                    query: {
                        key: item.Id
                    }
                })
            },
            maintenance(item) {
                console.log(item)
                this.$store.commit("project/set_datasource", item.Id);
                this.$store.commit("project/set_protocol_type", item.ProtocolType);
                this.$store.commit("project/set_datasource_name", item.Name);
                this.$router.push({
                    path: "pointSteps",
                })
            }
        },
        watch: {
            projectId(){
                this.getList()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .saga-config-point {
        display: flex;
        flex-flow: column;
        .add-icon {
            font-size: 40px;
        }
        .margin50 {
            display: block;
            height: 100%;
            line-height: 8;
        }
        .saga-origin-list {
            flex: 1;
            // display: flex;
            // flex-wrap: wrap;  
            // justify-content: space-around;
            .saga-list-item {
                background-color: #fff;
                width: 345px;
                height: 294px;
                border-radius: 5px;
                border: 1px solid #ddd;
            }
        }
    }
</style>
