<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>
            <el-button @click="del(item)" type="text">删除</el-button>
          </div>
        </data-origin>
      </div>
      <div v-if="!list.length" class="center" style="margin-top: 260px;">
        <i class="icon-wushuju iconfont"></i>
        暂无数据
      </div>
      <!-- <div class="disIne saga-list-item margin5 center pointer" @click="addItem">
          <i class="add-icon margin50">+</i>
      </div> -->
      <!-- </el-scrollbar> -->
    </div>
    <dataSourceDialog ref="dialog"></dataSourceDialog>
  </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} from "vuex";
  import {queryDataSourceCount, synchronizeProj} from "@/fetch/point_http"
  import dataSourceDialog from "./edit_origin/dialog";

  export default {
    components: {
      dataOrigin, dataSourceDialog
    },
    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.$refs.dialog.openDialog()
            },
            goEdit(item) {
              this.$refs.dialog.openDialog(item)
            },
          del(item) {
            this.$confirm('删除后无法恢复，所有点位将丢失，是否需要删除', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message.success('删除成功')
            }).catch(() => {
              this.$message.info('已取消删除')
            })
          },
            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>
