<template>
  <div class="manage">
    <!-- -------------------------------------------------应用列表----------------------------------------------------------- -->
    <div class="yingyonglist">
      <el-button type="primary" @click="yybtn">创建应用</el-button>
      <el-table
        :data="yytableData"
        border
        :cell-style="{ color: '#fff' }"
        :header-cell-style="{ color: '#fff' }"
        style="width: 100%; margin-top: 0.625rem"
        height="50rem"
      >
        <el-table-column prop="applicationName" label="应用名称" align="center">
        </el-table-column>
        <el-table-column prop="spaceType" label="坐标系" align="center">
        </el-table-column>
        <el-table-column prop="mapFrame" label="地图框架" align="center">
        </el-table-column>
        <el-table-column prop="underlay" label="默认底图" align="center">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="{ row }">
            <el-button size="mini" type="success" @click="yytuceng(row)"
              >图层
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 1.25rem"
        background
        layout="prev, pager, next"
        :page-size="yypage.size"
        :total="yypage.total"
        :current-page="yypage.current"
        @size-change="yySizechange"
        @current-change="yyCurrentchange"
      >
      </el-pagination>
    </div>
    <!-- ----------------------------------- 图层列表-------------------------------------------------------------- -->
    <div class="showtuceng">
      <el-dialog
        :visible.sync="showtable"
        destroy-on-close
        width="100%"
        top="90px"
      >
        <div>
          <el-row>
            <el-col :span="24">
              <el-form
                ref="form"
                :inline="true"
                :model="tableform"
                label-width="5.625rem"
              >
                <!-- <el-form-item label="服务类型">
                  <el-input
                    size="small"
                    style="width: 18.75rem"
                    v-model="tableform.severType"
                  ></el-input>
                </el-form-item> -->
                <el-form-item label="空间参考">
                  <el-input
                    :disabled="true"
                    size="small"
                    style="width: 18.75rem"
                    v-model="tableform.spaceType"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="关键词">
                  <el-input
                    placeholder="请输入关键词"
                    size="small"
                    style="width: 18.75rem"
                    v-model="tableform.keyword"
                  ></el-input>
                </el-form-item> -->
                <el-form-item size="large">
                  <el-button size="small" type="primary" @click="searchbtn"
                    >查询</el-button
                  >
                  <el-button type="info" size="small">清除</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="19"
              ><div class="bg-purple1">
                <el-table
                  :data="tableData"
                  border
                  :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#fff' }"
                  style="width: 100%"
                  height="43.75rem"
                >
                  <el-table-column
                    prop="id"
                    label="ID"
                    width="50"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="severName"
                    label="服务名称"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="spaceType"
                    label="空间参考"
                    width="180"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="severType"
                    label="服务类型"
                    width="180"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="{ row }">
                      <el-button size="mini" type="success" @click="editd(row)"
                        >添加到项目
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 1.25rem"
                  background
                  layout="prev, pager, next"
                  :page-size="page.size"
                  :total="page.total"
                  :current-page="page.current"
                  @size-change="Sizechange"
                  @current-change="Currentchange"
                >
                </el-pagination></div
            ></el-col>
            <el-col :span="5"
              ><div class="bg-purple2">
                <span style="margin-bottom: 20px; font-size: 24px; color: #fff">
                  图层树 
                </span>  
                <el-button type="primary" @click="cucengbtn" >创建图层组</el-button>
                <div class="tucshu">
                  <el-tree
                    :data="treedata"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    ref="menuTree"
                    node-key="serverName"
                  >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>
                        <i v-if="data.children" class="el-icon-folder"></i>
                        <i v-else class="el-icon-collection-tag"></i>
                        <span>{{ node.label }}</span>
                      </span>
                      <span>
                        <el-button
                          v-if="!data.children"
                          type="text"
                          size="mini"
                          icon="el-icon-delete"
                          @click.stop="() => remove(node, data)"
                        >
                          删除
                        </el-button>
                      </span>
                    </span>
                  </el-tree>
                </div>
              </div></el-col
            >
          </el-row>
        </div>
      </el-dialog>
    </div>
    <!-- -------------------------------------- 创建应用------------------------------------------------------- -->
    <div class="showyingyong">
      <el-dialog
        :visible.sync="showyingyong"
        destroy-on-close
        width="50%"
        top="90px"
        :show-close="false"
      >
        <div class="yingyong">
          <div class="yingyong_son">
            <p>创建应用</p>
            <el-form ref="forms" :model="form" label-width="80px">
              <el-form-item label="应用名称">
                <el-input
                  style="width: 300px"
                  v-model="form.applicationName"
                ></el-input>
              </el-form-item>
              <el-form-item label="坐标系">
                <el-select
                  style="width: 18.75rem"
                  v-model="form.spaceType"
                  placeholder="请选择空间参考"
                >
                  <el-option
                    v-for="(item, index) in getDictone"
                    :key="index"
                    :label="item.dictlabel"
                    :value="item.dictlabel"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="地图框架">
                <el-input
                  style="width: 300px"
                  v-model="form.mapFrame"
                ></el-input>
              </el-form-item>
              <el-form-item label="默认底图">
                <el-input
                  style="width: 300px"
                  v-model="form.underlay"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="showyingyong = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- -----------------------------------------图层添加到图层组------------------------------------------------------------------ -->
    <div class="showxiangmu">
      <el-dialog :visible.sync="showxiangmu" width="30%">
        <el-form :model="xiangmuform" label-width="6rem">
          <!-- <el-form-item label="应用ID">
            <el-input
              :disabled="true"
              v-model="xiangmuform.applicationId"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="图层组名称">
            <el-select
              v-if="options.length != 0"
              v-model="xiangmuform.projectTeamName"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务名称">
            <el-input
              :disabled="true"
              v-model="xiangmuform.serverName"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="服务ID">
            <el-input
              :disabled="true"
              v-model="xiangmuform.serverStoreId"
            ></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button @click="showxiangmu = false">取消</el-button>
            <el-button type="primary" @click="xiangmubtn">创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- -------------------------------------------创建图层组------------------------------------------------------------------------------- -->
    <div class="showchuangjian">
         <el-dialog :visible.sync="showchuangjian" width="30%">
        <el-form :model="tucengform" label-width="6rem">
          <!-- <el-form-item label="应用ID">
            <el-input
              :disabled="true"
              v-model="xiangmuform.applicationId"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="图层组名称">
            <el-input
              placeholder="请输入项目名称"
              v-model="tucengform.projectTeamName"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="showchuangjian = false">取消</el-button>
            <el-button type="primary" @click="chuangjianbtn">创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- -------------------------------------编辑弹窗------------------------------------------------------------ -->
    <div class="bianji">
      <el-dialog
        :visible="dialogVisible"
        destroy-on-close
        width="97%"
        top="90px"
        :show-close="false"
      >
        <Edit
          v-if="dialogVisible"
          @EditdialogVisible="EditdialogVisible"
          :row="row"
        ></Edit>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Edit from "./components/edit.vue";
import { getDictone } from "../../api/datamange";
import {
  createApplication,
  getApplicationInfo,
  getServerByType,
  getAllApplication,
  createProject,
  getProjectName,
  applicationdelete,
  addServer
} from "../../api/applymange";
export default {
  components: {
    Edit,
  },
  data() {
    return {
      row: {},
      showyingyong: false,
      dialogVisible: false,
      showtable: false,
      showxiangmu: false,
      showchuangjian:false,
      xiangmuform: {
        applicationId: "",
        projectTeamName: "",
        serverName: "",
        serverStoreId: "",
      },
      tucengform: {
        applicationId: "",
        projectTeamName: "",
      },
      options: [],
      form: {
        applicationName: "",
        spaceType: "",
        mapFrame: "mapbox",
        underlay: "天地图",
      },
      tableform: {
        severType: "",
        spaceType: "",
        keyword: "",
      },
      page: {
        total: 100, //总数量
        size: 10, //每页数量
        current: 1, //当前页
      },
      yypage: {
        total: 100, //总数量
        size: 10, //每页数量
        current: 1, //当前页
      },
      yytableData: [],
      tableData: [],
      treedata: [],
      defaultProps: {
        children: "children",
        label: "serverName",
        id:'ids'
      },
      getDictone: [], //空间参考字典
      yyid: "",
      yingyongid:''
    };
  },
  created() {
    getDictone().then((res) => {
      this.getDictone = res.data.data;
    });
    this.onLoad();
  },
  methods: {
    // 关闭修改弹窗
    EditdialogVisible() {
      this.dialogVisible = false;
    },
    // 获取应用列表
    onLoad() {
      getAllApplication({
        pageNum: this.yypage.current,
        pageSize: this.yypage.size,
      }).then((res) => {
        // console.log("获取应用列表", res);
        if (res.data.code == 200) {
          this.yytableData = res.data.data.list;
          this.yypage.total = res.data.data.total;
        } else {
          this.$message.error("数据为空或请求失败");
        }
      });
    },
    // 图层按钮
    yytuceng(row) {
      this.showtable = true;
      // console.log(row);
      this.xiangmuform.applicationId = row.id;
      this.tucengform.applicationId = row.id;
      this.tableform.spaceType = row.spaceType;
      this.yingyongid = row.id
      this.getServerByType(row);
      this.getApplicationInfo(row.id);
      this.getProjectName(row.id);
    },
    // 获取图层列表
    getServerByType(row) {
      getServerByType({
        pageNum: this.page.current,
        pageSize: this.page.size,
        spaceType: row.spaceType,
      }).then((res) => {
        // console.log("获取图层列表", res);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.page.total = res.data.data.total;
        }
      });
    },
    //获取树
    getApplicationInfo(id) {
      getApplicationInfo(id).then((ele) => {
        // console.log("应用树", ele);
        // console.log(1);
        if (ele.data.code == 200) {
          this.treedata = ele.data.data;
        } else {
          // console.log(1);
          this.treedata = [];
        }
      });
    },
    // 树
    handleNodeClick(data) {
      // console.log(data);
      const a = this.$refs.menuTree.getNode(data.serverName);
      if (a.childNodes) {
        // console.log("子节点");
        this.dialogVisible = true;
        this.row = data;
      }
    },
    // 删除树
    remove(node, data) {
      this.$confirm("确认删除？")
        .then((_) => {
          applicationdelete(data.projectDataRelationId).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getApplicationInfo(this.xiangmuform.applicationId);
              this.getProjectName(this.yingyongid)
            }
          });
        })
        .catch((_) => {});
    },
    // 获取项目名称
    getProjectName(id) {
      getProjectName(id).then((res) => {
        // console.log("获取项目名称", res);
        if (res.data.code == 200) {
          console.log(res);
          this.options = res.data.data;
        }
      });
    },
    // 添加到应用
    editd(row) {
      console.log(row);
      this.xiangmuform.serverName = row.severName;
      this.xiangmuform.serverStoreId = row.id;
      this.showxiangmu = true;
    },
    // 创建图层组
    cucengbtn(){
      this.showchuangjian = true
    },
    chuangjianbtn(){
      createProject(this.tucengform).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.getApplicationInfo(this.tucengform.applicationId);
          this.getProjectName(this.tucengform.applicationId);
          this.$message.success("创建成功");
          this.showchuangjian = false;
          this.tucengform.projectTeamName = "";
        }
      });
    },
    // 添加图层到图层组
    xiangmubtn() {
      addServer(this.xiangmuform).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.getApplicationInfo(this.xiangmuform.applicationId);
          this.getProjectName(this.xiangmuform.applicationId);
          this.$message.success("创建成功");
          this.showxiangmu = false;
          this.xiangmuform.projectTeamName = "";
        }
      });
    },
    // 创建应用
    yybtn() {
      this.showyingyong = true;
    },
    onSubmit() {
      createApplication(this.form).then((res) => {
        // console.log("创建应用", res);
        if (res.data.code == 200) {
          this.$message.success("创建成功");
          this.showyingyong = false;
          this.onLoad();
        } else {
          this.$message.error("创建失败");
          this.showyingyong = true;
        }
      });
    },
    // 查询
    searchbtn() {},
    // 应用分页
    yySizechange() {
      // console.log("每页数量改变了");
    },
    // 分页切换
    yyCurrentchange(val) {
      this.yypage.current = val;
      this.onLoad();
    },
    // 图层分页
    Sizechange() {

    },
    // 分页切换
    Currentchange(val) {
      this.page.current = val;
      this.getServerByType();
    },
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  padding-right: 0.5rem;
}
.manage {
  width: 100%;
  height: 890px;
  margin-top: 20px;
  padding-left: 30px;
}
/* ------------创建应用页 -------- */
.manage .yingyong {
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  margin: 20px;
  border-color: #1da1f2;
  display: flex; /* 弹性盒子 */
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}
.manage .yingyong .yingyong_son {
  width: 500px;
  height: 400px;
  border: 1px solid #10a2e1;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;
}
.manage .yingyong .yingyong_son > p {
  text-align: center;
  font-size: 32px;
  color: #00b2ff;
  margin-bottom: 20px;
}
.manage .yingyong ::v-deep .yingyong_son .el-input__inner {
  background-color: transparent;
  border: 1px solid #10a2e1;
  color: #fff;
}
.manage .yingyong ::v-deep .yingyong_son .el-form-item__label {
  color: #10a2e1;
}
/* 应用列表页 */
.manage .yingyonglist {
  width: 100%;
  height: 100%;
  padding-top: 0.625rem;
}
/* 创建应用弹窗  */
.manage ::v-deep.showyingyong .el-dialog {
  background: rgb(8, 11, 41) !important;
  border: 0.0625rem solid #10a2e1;
}
/* 添加图层到图层组 */
.manage ::v-deep.showxiangmu .el-dialog {
  background: rgb(8, 11, 41) !important;
  border: 0.0625rem solid #10a2e1;
}
.manage ::v-deep.showxiangmu .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #00b2ff;
  color: #fff;
}
.manage ::v-deep.showxiangmu .el-form-item__label {
  color: #00b2ff;
  line-height: 1.875rem;
}
/* 创建图层组 */
.manage ::v-deep.showchuangjian .el-dialog {
  background: rgb(8, 11, 41) !important;
  border: 0.0625rem solid #10a2e1;
}
.manage ::v-deep.showchuangjian .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #00b2ff;
  color: #fff;
}
.manage ::v-deep.showchuangjian .el-form-item__label {
  color: #00b2ff;
  line-height: 1.875rem;
}

/* 图层弹窗 */
.manage ::v-deep.showtuceng .el-dialog {
  background: rgb(10, 11, 47) !important;
  border: 0.0625rem solid #10a2e1;
}
/* 图层弹窗关闭按钮 */
.manage ::v-deep.showtuceng .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
/* 图层列表页 */
.manage ::v-deep.showtuceng .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #00b2ff;
  color: #fff;
}
.manage ::v-deep.showtuceng .el-form-item__label {
  color: #00b2ff;
  line-height: 1.875rem;
}
.manage ::v-deep.showtuceng .el-button--small {
  padding: 10px 40px;
}

/* 表格 */
.manage ::v-deep .el-table,
.el-table__expanded-cell {
  background: transparent !important;
}
/* “表格内背景颜色“ */
.manage ::v-deep.el-table th,
.manage ::v-deep.el-table tr,
.manage ::v-deep.el-table td {
  background-color: transparent !important;
}
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
.manage ::v-deep.el-table tbody tr:hover > td {
  background-color: black !important;
}
.manage .showtuceng .bg-purple1 {
  width: 100%;
  height: 72%;
  /* background: #00b2ff; */
}
.manage .showtuceng .bg-purple2 {
  width: 100%;
  height: 72%;
  padding: 0 20px;
  /* background: #440a86; */
}
.manage .bg-purple2 .tucshu {
  width: 300px;
  height: 706px;
  border: 1px solid #777777;
  padding: 10px;
}

.manage .bg-purple2 ::v-deep.tucshu .el-tree {
  /* // 白色字体 */
  color: #ffffff;
  /* // 整体背景透明 */
  background: rgba(0, 0, 0, 0);
}
.manage .bg-purple2 ::v-deep.tucshu .el-checkbox__inner {
  /*// checkbox 背景透明  */
  background: rgba(0, 0, 0, 0);
}
.manage .bg-purple2 ::v-deep.tucshu .el-tree-node__content:hover {
  /* // hover 节点背景色，否则是白色 */
  background: rgba(104, 147, 215, 0.4);
}
.manage
  .bg-purple2
  ::v-deep.tucshu
  .el-tree-node:focus
  > .el-tree-node__content {
  /*  // focus 节点背景透明，否则是白色 */
  background-color: rgba(0, 0, 0, 0);
}
/* dialog 修改 */
.manage ::v-deep.bianji .el-dialog {
  background: transparent !important;
  border: 1px solid #797979;
}
.manage ::v-deep.bianji .el-dialog__body {
  padding: 0;
}
.manage ::v-deep.bianji .el-dialog__header {
  padding: 0;
}
</style>