<template>
  <div>
    <!--左侧-->
    <div class="left-container">
      <el-table
        :data="tableData"
        v-loading="listLoading"
        style="width: 100%"
        border
        fit
        highlight-current-row
        @row-click="leftTableRowClick"
      >
        <!-- <el-table-column prop="id" label="id" width="180"> </el-table-column> -->
        <el-table-column prop="name" label="角色名称" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span class="color-success" v-if="scope.row.status === 0"
              >正常</span
            >
            <span class="color-danger" v-else-if="scope.row.status === 1"
              >停用</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--右侧-->
    <div class="right-container">
      <div class="right-header">
        <el-input
          v-model="searchData"
          @change="searchDataHandle()"
          placeholder="请输入内容"
          style="display: inline-block; width: 180px"
        ></el-input>
        <permission-btn
          moduleName="layersmanager"
          size="mini"
          v-on:btn-event="onBtnClicked"
          style="display: inline-block; margin-left: 20px"
        ></permission-btn>
      </div>

      <el-table
        ref="layersTableData"
        :data="layersTableData"
        v-loading="rightLoading"
        style="width: 100%"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
        @select-all="handleSelectAll"
        @select="handleSelect"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="layerTable" label="图层表名称"> </el-table-column>
        <el-table-column prop="id" label="图层ID"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="EditData(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" size="small" @click="DeleteData(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      width="500px"
      class="dialog-mini"
      :title="formTitle"
      :visible.sync="dialogFormVisible"
      v-el-drag-dialog
    >
      <el-form
        ref="dataForm"
        :model="formData"
        label-position="right"
        label-width="100px"
      >
        <el-form-item size="small" :label="'id'" prop="id">
          <el-input v-model="formData.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item size="small" :label="'名称'" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item size="small" :label="'图层表名称'" prop="layerTable">
          <el-input v-model="formData.layerTable"></el-input>
        </el-form-item>
        <el-form-item size="small" :label="'数据类型'" prop="type">
          <el-select v-model="formData.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取消</el-button
        >
        <el-button size="small" type="primary" @click="createData()"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import $ from "jquery";
import waves from '@/directive/waves' // 水波纹指令
import elDragDialog from '@/directive/el-dragDialog'
import * as roleApi from "@/api/roles.js";
import * as layersApi from "@/api/layersmanager.js";
import permissionBtn from "@/components/PermissionBtn";

export default {
  components: {
    permissionBtn,
  },
  directives: {
    waves,
    elDragDialog,
  },
  data() {
    return {
      //第一个表格加载和数据
      listLoading: false,
      tableData: [],
      //右侧表格加载和数据
      rightLoading: false,
      layersTableData: [],
      //复选框的数据
      multipleSelection: [],
      //查询条件的内容
      searchData: "",
      //复选框是否可见
      dialogFormVisible: false,
      //表单的数据
      formData: {},
      //表单的标题
      formTitle: "添加",
      //选中的角色id
      activeRoleId: "",
      options:[{
          value: 'Marker',
          label: '点数据'
        }, {
          value: 'Line',
          label: '线数据'
        }, {
          value: 'Polygon',
          label: '面数据'
        }],
    };
  },
  methods: {
    initFormData(){
      let _formData = {
        "name": "",
        "layerId": "",
        "layerValue": "",
        "layerTable": "",
        "createTime": "",
        "type": "",
        "id": ""
      };
      return _formData;
    },
    //选中数据改变时
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //点击复选框时
    handleSelect(selection, row) {
      //判断选中还是取消
      let selected = selection.length > 0 && selection.indexOf(row) !== -1;
      if (!this.activeRoleId) {
        return;
      }
      let postData = {
        roleId: this.activeRoleId,
        layerId: row.id,
        id: "",
      };
      if (selected) {
        //如果是选中,往关联表添加一条数据
        layersApi.AddRel(postData).then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
        });
      } else {
        //删除关联表中的此数据
        layersApi.DeleteRel(postData).then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
        });
      }
    },
    //全选
    handleSelectAll(section) {},
    //左侧列表点击事件
    leftTableRowClick(row, column, event) {
      //角色id
      let roleid = row.id;
      this.activeRoleId = roleid;
      this.loadDataRel(roleid);
    },
    //加载左侧列表
    loadLeftData() {
      //加载条打开
      this.listLoading = true;
      roleApi.getList({}).then((res) => {
        //加载条关闭
        this.listLoading = false;
        //给左侧表格赋值
        this.tableData = res.result;
      });
    },
    searchDataHandle() {
      //加载右侧列表和权限
      this.loadRightData().then((res) => {
        this.loadDataRel(this.activeRoleId);
      });
    },
    //加载右侧列表
    loadRightData() {
      //加载右侧列表
      this.rightLoading = true;
      return new Promise((resolve, reject) => {
        layersApi.GetList({ name: this.searchData }).then((res) => {
          this.rightLoading = false;
          //给右侧表格赋值
          this.layersTableData = res.result;
          resolve("加载完成");
        });
      });
    },
    //加载权限绑定数据
    loadDataRel(roleid) {
      //图层的所有行
      let rows = this.$refs.layersTableData.tableData;
      //取消选中的数据
      this.$refs.layersTableData.clearSelection();
      //获取需要关联选中的数据
      layersApi.GetListRel({ roleid: roleid }).then((res) => {
        //图层的数组集合
        let layerids = [];
        //遍历关联的数据
        for (let i = 0; i < res.result.length; i++) {
          layerids.push(res.result[i].layerId);
        }
        //遍历选中数据
        rows.forEach((row) => {
          //如果此行是绑定的数据
          if (layerids.indexOf(row.id) > -1) {
            //设置此行选中
            this.$refs.layersTableData.toggleRowSelection(row);
          }
        });
      });
    },
    //右侧头部按钮点击事件
    onBtnClicked(domId) {
      switch (domId) {
        //添加按钮
        case "btnAdd":
          this.formData = this.initFormData();
          this.formTitle = "添加";
          this.dialogFormVisible = true;
          break;
        //绑定所有按钮
        case "bindAll":
          if (!this.activeRoleId) {
            this.$message({
              message: "请先选择角色再绑定",
              type: "error",
            });
            return;
          }
          layersApi.AddRelAll({ roleid: this.activeRoleId }).then((res) => {
            //弹窗消息提示
            this.$message({
              message: res.message,
              type: "success",
            });
            //加载右侧列表和权限
            this.loadRightData().then((res) => {
              this.loadDataRel(this.activeRoleId);
            });
          });
          break;
        //解绑所有按钮
        case "unbindAll":
          if (!this.activeRoleId) {
            this.$message({
              message: "请先选择角色再解除绑定",
              type: "error",
            });
            return;
          }
          layersApi.DeleteAll({ roleid: this.activeRoleId }).then((res) => {
            //弹窗消息提示
            this.$message({
              message: res.message,
              type: "success",
            });
            //加载右侧列表和权限
            this.loadRightData().then((res) => {
              this.loadDataRel(this.activeRoleId);
            });
          });
          break;
      }
    },
    //新增表单数据
    createData() {
      layersApi.AddLayer(this.formData).then((res) => {
        //弹窗消息提示
        this.$message({
          message: res.message,
          type: "success",
        });
        //隐藏弹窗
        this.dialogFormVisible = false;
        //加载右侧列表和权限
        this.loadRightData().then((res) => {
          this.loadDataRel(this.activeRoleId);
        });
      });
    },
    //编辑按钮弹窗
    EditData(row) {
      this.formData = row;
      this.formTitle = "修改";
      this.dialogFormVisible = true;
    },
    //删除按钮点击
    DeleteData(row) {
      let postData = [row.id];
      layersApi.DeleteLayer(postData).then((res) => {
        //弹窗消息提示
        this.$message({
          message: res.message,
          type: "success",
        });
        //加载右侧列表和权限
        this.loadRightData().then((res) => {
          this.loadDataRel(this.activeRoleId);
        });
      });
    },
  },
  mounted() {
    //加载左侧列表
    this.loadLeftData();
    //加载右侧列表
    this.loadRightData();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
//左侧
.left-container {
  position: absolute;
  width: 40%;
  height: calc(100% - 80px);
  padding: 30px;
  left: 10px;
  top: 10px;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
}
//右侧
.right-container {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  left: calc(40% + 20px);
  width: 58%;
  height: calc(100% - 80px);
  padding: 30px;
  top: 10px;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
}
//右侧头部
.right-header {
  height: 50px;
  display: inline-block;
  white-space: nowrap;
}
.el-select{
  width: 100%
}
</style>