<template>
  <div class="classification">
    <div class="header">
      <el-button type="primary" class="add-item" @click="handleAddClass">图层新增</el-button>
    </div>
    <el-container>
      <el-tree class="item-tree" :data="menuList" node-key="id" :props="defaultProps" default-expand-all>
        <span class="operations" slot-scope="{ node, data }">
          <span class="node-label">
            <i v-if="data.isLeaf" class="el-icon-s-flag leaf-icon"></i>
            {{ node.label }}
          </span>
          <span>
            <template v-if="data.isLeaf">
              <el-button type="text" icon="el-icon-warning-outline" @click.stop="handleLook(data)" title="查看">
              </el-button>
              <el-button type="text" icon="el-icon-edit iconfont" @click.stop="handleEdit(data)" title="编辑"></el-button>
              <el-button type="text" icon="el-icon-delete iconfont" @click.stop="handleDelete(data)" title="删除">
              </el-button>
            </template>
          </span>
        </span>
      </el-tree>
    </el-container>
    <!--添加栏目弹窗-->
    <ModelDetail v-bind="{
      isShow: isShowAddModelDetailDialog,
      edit: edit,
      title: title,
      beforeClose: beforeCloseAddDetailDialog,
      updateData: getMenu,
      formData: modelDeatailData,
      operationType: operationType, // 0 增加，1 查看，2 编辑
    }"></ModelDetail>
  </div>
</template>

<script>
import api from "@/api/model";

export default {
  // props: {
  //   params: {
  //     type: Object,
  //     default: null,
  //   }
  // },
  components: {
    ModelDetail: () => import("@/components/ModelManagement/ModelDetail.vue"),
  },
  data() {
    return {
      title: "图层新增", // 图层修改
      isShowAddModelDetailDialog: false,
      edit: false,
      menuList: [],
      defaultProps: {
        children: "models",
        label: "title",
      },
      modelDeatailData: null,
      operationType: 0,
    };
  },
  created() { },
  methods: {
    // 增加图层
    handleAddClass() {
      this.edit = true;
      this.title = "图层新增";
      this.operationType = 0;
      this.modelDeatailData = {
        alpha: "",
        content: "",
        createDate: "",
        fillColor: "#FF0000",
        geometryType: "Point",
        iconUrl: "",
        id: "",
        jsonStr: "",
        lineWidth: "",
        tableName: "",
        threeId: "",
        title: "",
        type: 0,
        updateDate: "",
      };
      this.isShowAddModelDetailDialog = true;
    },

    // 目录
    getMenu() {
      let that = this;
      api
        .getMenu()
        .then(function (result) {
          if (result.code == 200) {
            that.$store.commit("setMenuDataList", result.content);
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 渲染列表前数据整理
    handleMenuDataBeforeRenderUI(data) {
      if (data)
        return data.map(function (item) {
          item.title = item.name;
          item.models = item.models.map(function (params) {
            params.isLeaf = true;
            return params;
          });
          return item;
        });
    },

    // 模型窗体关闭前
    beforeCloseAddDetailDialog(judge) {
      this.isShowAddModelDetailDialog = false;
      if (judge) this.getMenu();
    },

    // 查看模型
    handleLook(data) {
      let that = this;
      api
        .getDetailModelInfo({
          id: data.id,
        })
        .then((result) => {
          if (result.code == 200) {
            that.modelDeatailData = result.content;
            that.title = "图层详情";
            this.operationType = 1;
            that.edit = false;
            that.isShowAddModelDetailDialog = true;
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 编辑模型
    handleEdit(data) {
      let that = this;
      api
        .getDetailModelInfo({
          id: data.id,
        })
        .then((result) => {
          if (result.code == 200) {
            that.modelDeatailData = result.content;
            that.title = "图层编辑";
            this.operationType = 2;
            that.edit = true;
            that.isShowAddModelDetailDialog = true;
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 删除模型
    handleDelete(data) {
      this.$confirm("此操作将删除图层和其中数据，不可恢复，是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let that = this;
          api
            .delModel({
              id: data.id,
            })
            .then(function (response) {
              if (response.code == 200) {
                that.$message({ type: "success", message: "删除成功!" });
              } else {
                checkRequestCode(result);
              }
              that.getMenu();
            })
            .catch((err) => {
              that.$message({
                type: "error",
                message: err
              })
              that.getMenu();
            });
        })
        .catch(() => {
          that.$message({
            type: "waring",
            message: "服务器异常，请稍后重试！",
          });
          that.getMenu();
        });
    },
  },
  computed: {
    menuData() {
      return this.$store.state.menuDataList;
    },
  },
  watch: {
    menuData: {
      immediate: true,
      handler(newVal, oldName) {
        if (newVal) this.menuList = this.handleMenuDataBeforeRenderUI(newVal);
      },
    },
    // params(newVal, oldVal) {
    // }
  },
};
</script>

<style lang="less" scoped>
.classification {
  height: 100%;

  .header {
    height: @breadcrumb_height;
    width: 100%;
    margin-bottom: @breadcrumb_marginBottom;
    background: #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;

    .add-item {
      margin-left: 30px;
    }
  }

  .el-container {
    height: calc(100% - @breadcrumb_height - @breadcrumb_marginBottom);
    flex-direction: column;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 50px;

    .item-tree {

      // margin: 30px 50px;
      .operations {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;

        .single {
          margin-right: 28px;
        }
      }

      .node-label {
        font-size: 14px;

        .empty-icon {
          color: #c0c4cc;
          width: 12px;
          height: 12px;
          padding: 6px;
          margin-left: -24px;
        }

        .leaf-icon {
          margin-right: 5px;
          margin-left: -15px;
        }
      }

      /deep/ .el-tree-node__content {
        height: 40px;
        cursor: default;

        .el-icon-caret-right {
          padding: 20px;
        }
      }
    }
  }
}
</style>
