<template>
  <div class="moduleManagement">
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <div class="con">
      <div class="btnHandle">
        <el-button type="primary" style="background: #41b883;" @click="handleAddSort">
          <i class="iconfont icon-fenlei"></i>增加分类</el-button>
        <el-button type="primary" style="background: rgb(104, 179, 200);" @click="handleAddLayer">
          <i class="iconfont icon-tuceng" style="font-size: 20px;"></i>增加图层</el-button>
        <el-button type="primary" style="background: #f3bb45;margin-left: 40px;" @click="handleEdit">
          <i class="el-icon-edit el-icon--left"></i>
          修改</el-button>
        <el-button type="primary" style="background: #eb5e28;" @click="handleDelete">
          <i class="el-icon-delete2 el-icon--left"></i>删除</el-button>
      </div>

      <div class="treeTable">
        <el-tree 
          class="radioTree"
          :data="treeData" 
          :props="defaultProps" 
          :expand-on-click-node="false" 
          :highlight-current="true"
          :current-node-key='currentNodeKey'
          :default-expanded-keys='expandedKeys'
          node-key="id"
          @node-click="radioTreeClick">
        </el-tree>
        <div class="conIn">
          <table class="mapDetailTable" border="1" style="border-collapse:collapse;">
            <tr v-for="item in tableData" :key="item.name">
              <td style="width: 300px;">{{ item.name }}</td>
              <td><input class="readIpt" type="text" v-model="item.text" readonly></td>
            </tr>
          </table>
        </div>
      </div>  
    </div>

    <!-- 增加分类，修改分类 -->
    <el-dialog class="addSort" title="新增分类" :visible.sync="dialogAddSort" v-if="dialogAddSort" size="tiny">
      <el-form :model="sortList" :rules="sortRules" ref="sortList">
        <el-form-item label="图层标识">
          <el-input v-model="sortList.layerCode" prop="layerCode"></el-input>
        </el-form-item>
        <el-form-item label="图层名称">
          <el-input v-model="sortList.layerName" prop="layerName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddSort = false">取 消</el-button>
        <el-button type="primary" @click="sureAddEditSort('sortList')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 增加图层，修改图层 -->
    <el-dialog class="addLayer" title="新增图层" :visible.sync="dialogAddLayer" v-if="dialogAddLayer">
      <el-form :model="layerList" :rules="rules" ref="layerList">
        <el-form-item label="图层标识" prop="layerCode">
          <el-input v-model="layerList.layerCode"></el-input>
        </el-form-item>
        <el-form-item label="图层名称" prop="layerName">
          <el-input v-model="layerList.layerName"></el-input>
        </el-form-item>
        <el-form-item label="URL地址">
          <el-input v-model="layerList.layerUrl"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select class="typeSelect" v-model="layerList.layerType" 
              @change="selectChange" placeholder="请选择类型">
            <el-option
              v-for="item in layerList.layerTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图层过滤条件" prop="layerDefinitions">
          <el-input v-model="layerList.layerDefinitions"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddLayer = false">取 消</el-button>
        <el-button type="primary" @click="sureAddEditLayer('layerList')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      title="信息"
      :visible.sync="deleteDialogVisible"
      v-if="deleteDialogVisible"
      size="tiny">
      <span>是否删除所选分类或图层</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureDeleteDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import BreadCrumb from '@/components/BreadCrumb.vue'

  import Api from '@/api/index.js'

  export default { 
    name: 'ModuleManagement',
    components: { 
      BreadCrumb
    },
    data () { 
      return { 
        breadCrumbList: [],
        tableData: [{
          name: '图层标识',
          text: ''
        }, {
          name: '图层名称',
          text: ''
        }, {
          name: 'url地址',
          text: ''
        }, {
          name: '类型',
          text: ''
        }, {
          name: '图层过滤条件',
          text: ''
        }],

        treeData: [],
        defaultProps: {
          children: 'childrens',
          label: 'layerName'
        },
        id: '',
        currentNodeKey: '',
        expandedKeys: [],
        nodeData: {},
       
        sortList: {
          layerCode: '',
          layerName: ''
        },
        sortRules: {
          layerCode: [
            { required: true, message: '请输入图层标识', trigger: 'blur' }
          ],
          layerName: [
            { required: true, message: '请输入图层名称', trigger: 'blur' }
          ]
        },
        dialogAddSort: false,
        sortType: '1',
        addEditOnoff: true, // 判断是新增还是修改

        layerList: {
          layerCode: '',
          layerName: '',
          layerUrl: '',
          layerType: '1',
          layerTypeOptions: [{ // 类型选择列表
              value: '1',
              label: '切片'
            }, {
              value: '2',
              label: '底图'
            }, {
              value: '3',
              label: 'basemap'
            }, {
              value: '4',
              label: '动态服务'
            }, {
              value: '5',
              label: '影像'
            }, {
              value: '6',
              label: 'wms'
            }
          ],
          layerDefinitions: ''
        },
        rules: {
          layerCode: [
            { required: true, message: '请输入图层标识', trigger: 'blur' }
          ],
          layerName: [
            { required: true, message: '请输入图层名称', trigger: 'blur' }
          ],
          layerDefinitions: [
            { required: true, message: '请输入图层过滤条件', trigger: 'blur' }
          ]
        },
        typeId: '1',
        dialogAddLayer: false,

        deleteDialogVisible: false // 删除
      }
    },
    watch: {
      $route (newVal) {
        // this.init()
      }
    },
    mounted () { 
      // this.init()
    },
    methods: { 
      init () { 
        // 初始化目录树
        this.getAllZtree()
        // 初始化面包屑
        this.breadCrumbList = [
          { title: '系统安全' },
          { title: '图层管理' },
          { title: 'root' }
        ]
      },
      // 选择树节点
      radioTreeClick (val) { 
        this.nodeData = val

        // 修改表格内容
        this.tableData[0].text = val.layerCode // 图层标识
        this.tableData[1].text = val.layerName // 图层名称
        this.tableData[2].text = val.layerUrl // url地址
        this.tableData[3].text = val.layerType // 类型
        this.tableData[4].text = val.layerDefinitions // 过滤条件

        this.breadCrumbList[this.breadCrumbList.length - 1].title = val.layerName
      },
      // 目录树1
      getAllZtree () { 
        Api.getAllZtree()
          .then(data => {
            if (data.status === 0) {
              this.treeData = data.results
              this.nodeData = data.results[0]
              this.currentNodeKey = data.results[0].id
              this.expandedKeys.push(data.results[0].id)
              
              this.tableData[0].text = data.results[0].layerCode // 图层标识
              this.tableData[1].text = data.results[0].layerName // 图层名称
              this.tableData[2].text = data.results[0].layerUrl // url地址
              this.tableData[3].text = data.results[0].layerType // 类型
              this.tableData[4].text = data.results[0].layerDefinitions // 过滤条件
            } else {
              this.$message({
                type: 'error',
                message: '获取数据失败'
              })
            }
          }).catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
      },
      // 目录树
      getDirectoryTree () { 
        Api.getAllZtree()
          .then(data => {
            if (data.status === 0) {
              this.treeData = data.results
              this.currentNodeKey = this.nodeData.id
            } else {
              this.$message({
                type: 'error',
                message: '获取数据失败'
              })
            }
          }).catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
      },
      // 增加分类
      handleAddSort () { 
        if (this.nodeData.layerType === 'catalog') { 
          this.sortList.layerCode = '' // 图层标识
          this.sortList.layerName = '' // 图层名称

          this.dialogAddSort = true
          this.addEditOnoff = true
        } else { 
          this.$message({
            type: 'warning',
            message: '不能在图层上新建数据'
          })
        }
      },
      // 增加分层
      handleAddLayer () { 
        if (this.nodeData.layerType === 'catalog') { 
          this.layerList.layerCode = '' // 图层标识
          this.layerList.layerName = '' // 图层名称
          this.layerList.layerUrl = '' // url地址
          this.layerList.layerType = '1' // 类型
          this.layerList.layerDefinitions = '' // 过滤条件

          this.dialogAddLayer = true
          this.addEditOnoff = true         
        } else { 
          this.$message({
            type: 'warning',
            message: '不能在图层上新建数据'
          })
        }
      },
      // 选择
      selectChange (val) { 
        this.typeId = val
      },
      // 编辑
      handleEdit () { 
        if (this.nodeData.layerType === 'catalog') { // 修改图层
          this.dialogAddSort = true
          this.addEditOnoff = false

          this.sortList.layerCode = this.nodeData.layerCode // 图层标识
          this.sortList.layerName = this.nodeData.layerName // 图层名称
        } else { // 修改分类
          this.dialogAddLayer = true
          this.addEditOnoff = false

          this.layerList.layerCode = this.nodeData.layerCode // 图层标识
          this.layerList.layerName = this.nodeData.layerName // 图层名称
          this.layerList.layerUrl = this.nodeData.layerUrl // url地址
          this.layerList.layerType = this.nodeData.layerType // 类型
          this.layerList.layerDefinitions = this.nodeData.layerDefinitions // 过滤条件
        }
      },
      // 删除
      handleDelete () { 
        this.deleteDialogVisible = true
      },
      // 确定增加分类或者修改分类
      sureAddEditSort (sortList) { 
        this.$refs[sortList].validate((valid) => {
          if (valid) {
            if (this.addEditOnoff) {  // 增加分类
              Api.saveLayerInfo(this.nodeData.id, '1', this.sortList.layerCode, this.sortList.layerName, '', '', '')
              .then(data => { 
                if (data.status === 0) { 
                  this.$message({
                    type: 'success',
                    message: '增加分类成功'
                  })
                  this.getDirectoryTree()

                  this.tableData[0].text = this.sortList.layerCode // 图层标识
                  this.tableData[1].text = this.sortList.layerName // 图层名称
                } else { 
                  this.$message({
                    type: 'warning',
                    message: '增加分类失败'
                  })
                }
              }).catch(res => {
                this.$message({
                  type: 'error',
                  message: '请求数据失败'
                })
              })
            } else { // 修改分类
              Api.updateLayerInfo(this.nodeData.id, this.sortList.layerCode, this.sortList.layerName, '', '', '')
              .then(data => { 
                if (data.status === 0) { 
                  this.$message({
                    type: 'success',
                    message: '修改分类成功'
                  })
                  this.getDirectoryTree()

                  this.tableData[0].text = this.sortList.layerCode // 图层标识
                  this.tableData[1].text = this.sortList.layerName // 图层名称
                } else { 
                  this.$message({
                    type: 'warning',
                    message: '修改分类失败'
                  })
                }
              }).catch(res => {
                this.$message({
                  type: 'error',
                  message: '请求数据失败'
                })
              })
            }
            this.dialogAddSort = false
          } else { 
            return false
          }
        })
      },
      // 确定增加图层或者修改图层
      sureAddEditLayer (layerList) {
        this.$refs[layerList].validate((valid) => {
          if (valid) {
            if (this.addEditOnoff) { // 增加图层
              Api.saveLayerInfo(this.nodeData.id, '0', this.layerList.layerCode, this.layerList.layerName, this.layerList.layerUrl, this.typeId, this.layerList.layerDefinitions)
              .then(data => { 
                if (data.status === 0) { 
                  this.$message({
                    type: 'success',
                    message: '增加图层成功'
                  })
                  this.getDirectoryTree()

                  this.tableData[0].text = this.layerList.layerCode // 图层标识
                  this.tableData[1].text = this.layerList.layerName // 图层名称
                  this.tableData[2].text = this.layerList.layerUrl // url地址
                  this.tableData[3].text = this.layerList.layerType // 类型
                  this.tableData[4].text = this.layerList.layerDefinitions // 过滤条件
                } else { 
                  this.$message({
                    type: 'warning',
                    message: '增加图层失败'
                  })
                }
              }).catch(res => {
                this.$message({
                  type: 'error',
                  message: '请求数据失败'
                })
              })
            } else { // 修改图层 layerId,layerCode,layerName,layerUrl,layerType,layerDefinitions
              Api.updateLayerInfo(this.nodeData.id, this.layerList.layerCode, this.layerList.layerName, this.layerList.layerUrl, this.typeId, this.layerList.layerDefinitions)
              .then(data => { 
                if (data.status === 0) { 
                  this.$message({
                    type: 'success',
                    message: '修改图层成功'
                  })
                  this.getDirectoryTree()

                  this.tableData[0].text = this.layerList.layerCode // 图层标识
                  this.tableData[1].text = this.layerList.layerName // 图层名称
                  this.tableData[2].text = this.layerList.layerUrl // url地址
                  this.tableData[3].text = this.layerList.layerType // 类型
                  this.tableData[4].text = this.layerList.layerDefinitions // 过滤条件
                } else { 
                  this.$message({
                    type: 'warning',
                    message: '修改图层失败'
                  })
                }
              }).catch(res => {
                this.$message({
                  type: 'error',
                  message: '请求数据失败'
                })
              })
            }
            this.dialogAddLayer = false
          } else {
            return false
          }
        })
      },
      // 确定删除
      sureDeleteDialog () { 
        Api.delLayer(this.nodeData.id)
          .then(data => { 
            if (data.status === 0) { 
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.init()
            } else { 
              this.$message({
                type: 'warning',
                message: '删除失败'
              })
            }
          }).catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
        this.deleteDialogVisible = false
      },
      // 关闭弹窗
      closeDialog (attr) { 
        this[attr] = false
      }
    }
  }
</script>

<style lang="scss">
  $borderColor: rgba(8, 139, 134, 0.3);
  $topicColor: rgba(8, 139, 134, 1);

  .moduleManagement{ 
    width: 100%;
    position: relative;
    
    .con{ 
      width: 100%;
      height: 100%;
      padding: 0 20px;

      .btnHandle { 
        width: 100%;
        padding: 20px 0;
        .el-button{ 
          border: none;
        }
        .iconfont {
          font-size: 18px;
          line-height: 0;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }
      }

      .treeTable {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .radioTree{ 
        width: 230px;
        position: absolute;
        left: 0;
        top: 0;
        max-height: 450px;
        overflow-y: auto;
      }

      .conIn{ 
        width: 100%;
        padding-left: 250px;
      }
  
      .buttonList{ 
        padding-top: 20px;
        display: flex;

        .el-button{ 
          margin-right: 30px;
        }
        .save{ 
          margin-left: 230px;
        }
      }

      /* .el-button--primary{ 
        background: #088b86;
        border-color: #088b86;
        margin-right: 20px;
        &:active{
          color: #fff;
        }
        &:hover{ 
          color: #fff;
        }
      } */
      
      tr{ 
        height: 40px;
        text-align: center;
      }

      .readIpt{ 
        width: 90%;
        height:30px;
        display: block;
        margin: auto; 
        text-align: center;
        outline: none;
        border: none;
      }

      .mapDetailTable{ 
        width: 100%;
        border-color: $borderColor;
      }
    }

    .addSort,.addLayer{ 
      .el-dialog__body{ 
        padding: 30px 30px 10px 15px;
      }
      .el-form-item__label{ 
        width: 80px;
      }
      .el-form-item__content{ 
        display: flex;
      }
      .el-form-item{ 
        margin-bottom: 18px;
      }
    }
    .addLayer {
      .el-form-item__label{ 
        width: 120px;
      }
    }
  }
</style>
