<template>
  <div class="page-data">
    <!--搜素框-->
    <div class="page-filter">
      <page-filter
        :query.sync="groupFilterInfo.query"
        :filter-list="groupFilterInfo.list"
        @handleClick="handleClick"
      />
    </div>
    <div class="page-content">
      <!--表格-->
      <div class="h-100">
        <page-table
          tabIndex
          pagination
          :api-url="groupTableInfo.url"
          :refresh="groupTableInfo.refresh"
          :data.sync="groupTableInfo.data"
          :query="groupFilterInfo.query"
          :init-curpage="groupTableInfo.initCurpage"
          :field-list="groupTableInfo.fieldList"
          :handle="groupTableInfo.handle"
          @handleClick="handleClick"
        />
      </div>
    </div>
    <!--弹窗-->
    <el-dialog
      class="page-data-dialog"
      :width="dialogInfo.width"
      append-to-body
      :title="dialogInfo.title[dialogInfo.type]"
      :visible.sync="dialogInfo.visible"
      :before-close="handleClose"
    >
      <!--关联项目-->
      <template v-if="dialogInfo.type === 'relatePlat'">
        <div class="page-filter">
          <el-form :inline="true" :model="relatePlatQuery" ref="relatePlatQuery" size="medium">
            <el-form-item label="">
              <el-input v-model="relatePlatQuery.searchStr" clearable placeholder="请输入项目名称/编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('platSearch')">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-content">
          <el-row :gutter="20" class="h-100">
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">未关联项目列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="unRelatePlat"
                :api-url="relatePlatTableInfo.url"
                :refresh="relatePlatTableInfo.refresh"
                :data.sync="unRelatePlatTableInfo.data"
                :query="unRelatePlatTableInfo.query"
                :init-curpage="relatePlatTableInfo.initCurpage"
                :field-list="relatePlatTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
            <el-col :span="4" class="h-100">
              <div class="btn-group">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-right"
                  :disabled="isCanInsertPlat"
                  @click="handleClick('insertPlat')"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-left"
                  :disabled="isCanRemovePlat"
                  @click="handleClick('removePlat')"
                  >移除</el-button
                >
              </div>
            </el-col>
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">已关联项目列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="isRelatePlat"
                :api-url="relatePlatTableInfo.url"
                :refresh="relatePlatTableInfo.refresh"
                :data.sync="isRelatePlatTableInfo.data"
                :query="isRelatePlatTableInfo.query"
                :init-curpage="relatePlatTableInfo.initCurpage"
                :field-list="relatePlatTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
          </el-row>
        </div>
      </template>
      <!--添加用户-->
      <template v-if="dialogInfo.type === 'addUser'">
        <page-form
          :ref-obj.sync="userFormInfo.ref"
          size="medium"
          :data="userFormInfo.data"
          :field-list="userFormInfo.fieldList"
          :rules="userFormInfo.rules"
          :list-type-info="listTypeInfo"
          @handleClick="handleClick"
        />
      </template>
      <!--关联用户-->
      <template v-if="dialogInfo.type === 'relateUser'">
        <div class="page-filter">
          <el-form :inline="true" :model="relateUserQuery" ref="relateUserQuery" size="medium">
            <el-form-item label="">
              <el-input v-model="relateUserQuery.searchStr" clearable placeholder="请输入用户名/姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('userSearch')">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-content">
          <el-row :gutter="20" class="h-100">
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">未关联用户列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="unRelateUser"
                :api-url="relateUserTableInfo.url"
                :refresh="relateUserTableInfo.refresh"
                :data.sync="unRelateUserTableInfo.data"
                :query="unRelateUserTableInfo.query"
                :init-curpage="relateUserTableInfo.initCurpage"
                :field-list="relateUserTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
            <el-col :span="4" class="h-100">
              <div class="btn-group">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-right"
                  :disabled="isCanInsertUser"
                  @click="handleClick('insertUser')"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-left"
                  :disabled="isCanRemoveUser"
                  @click="handleClick('removeUser')"
                  >移除</el-button
                >
              </div>
            </el-col>
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">已关联用户列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="isRelateUser"
                :api-url="relateUserTableInfo.url"
                :refresh="relateUserTableInfo.refresh"
                :data.sync="isRelateUserTableInfo.data"
                :query="isRelateUserTableInfo.query"
                :init-curpage="relateUserTableInfo.initCurpage"
                :field-list="relateUserTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
          </el-row>
        </div>
      </template>
      <!--添加/修改用户组-->
      <template v-if="dialogInfo.type === 'addGroup' || dialogInfo.type === 'update'">
        <page-form
          :ref-obj.sync="groupFormInfo.ref"
          :data="groupFormInfo.data"
          :field-list="groupFormInfo.fieldList"
          :rules="groupFormInfo.rules"
          @handleClick="handleClick"
        />
      </template>
      <div class="dialot-footer" slot="footer">
        <template v-if="dialogInfo.type !== 'relatePlat' && dialogInfo.type !== 'relateUser'">
          <el-button type="primary" size="small" @click="handleClick('save')" :loading="btnLoading">保存</el-button>
        </template>
        <el-button size="small" @click="handleClick('close')">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { message } from "./../../util/item";
export default {
  data() {
    // 验证电话
    let checkPhone = (rule, value, callback) => {
      let check = this.$validate({ label: "手机号", value, rules: ["notnull","phone"] });
      if (!check.result) {
        callback(new Error(check.message));
      } else {
        callback();
      }
    };
    return {
      //用户组搜索相关
      groupFilterInfo: {
        query: {
          searchStr: ""
        },
        list: [
          {type: "input", label: "用户组名称", value: "searchStr", hideLabel: true },
          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "searchGroup", show: true},
          {type: "button", label: "添加用户组", btType: "primary", icon: "el-icon-circle-plus-outline", event: "addGroup", show: true, has: "m11-6-1"}
        ]
      },
      //用户组表格相关
      groupTableInfo: {
        url: this.nozzle.allUserGroupList, //接口地址
        refresh: 1,
        initCurpage: 1,
        data: [],
        fieldList: [
          { label: "用户组名称", value: "groupName", minWidth: 100, tooltip: true },
          { label: "用户组描述", value: "description", minWidth: 150, tooltip: true },
          { label: "创建时间", value: "createTime", minWidth: 150, tooltip: true },
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "280",
          btList: [
            { label: "添加用户", size: "small", type: "text", event: "addUser", show: true, has: 'm11-6-4' },
            { label: "关联用户", size: "small", type: "text", event: "relateUser", show: true, has: 'm11-6-4' },
            { label: "关联项目", size: "small", type: "text", event: "relatePlat", show: true, has: 'm11-6-5' },
            { label: "修改", size: "small", type: "text", event: "update", show: true, has: 'm11-6-3' },
            { label: "删除", size: "small", type: "text", event: "delGroup", show: true, has: 'm11-6-2' }
          ]
        }
      },
      //关联项目表格通用相关
      relatePlatTableInfo: {
        url: this.nozzle.groupRelatePlatform, //接口地址
        refresh: 1,
        initCurpage: 1,
        fieldList: [
          { label: "项目编号", value: "platformCode", minWidth: 100, tooltip: true},
          { label: "项目名称", value: "name", minWidth: 150, tooltip: true},
        ]
      },
      //已关联项目表格相关
      isRelatePlatTableInfo: {
        data: [],
        query: {
          sign: ""
        },
        selectList: []
      },
      //未关联项目表格相关
      unRelatePlatTableInfo: {
        data: [],
        query: {
          sign: "unbound"
        },
        selectList: []
      },
      //关联项目搜索相关
      relatePlatQuery: {
        searchStr: "",
        groupId: ""
      },
      //关联用户表格通用相关
      relateUserTableInfo: {
        url: this.nozzle.userGroupUserList, //接口地址
        refresh: 1,
        initCurpage: 1,
        fieldList: [
          { label: "用户名", value: "login", minWidth: 120, tooltip: true },
          { label: "姓名", value: "realName", minWidth: 100, tooltip: true },
          { label: "电话", value: "mobile", minWidth: 120, tooltip: true }
        ]
      },
      //已关联用户表格相关
      isRelateUserTableInfo: {
        data: [],
        query: {
          sign: ""
        },
        selectList: []
      },
      //未关联用户表格相关
      unRelateUserTableInfo: {
        data: [],
        query: {
          sign: "unbound"
        },
        selectList: []
      },
      //关联用户搜索相关
      relateUserQuery: {
        searchStr: "",
        groupId: ""
      },
      //按钮loading
      btnLoading: false,
      //弹窗相关
      dialogInfo: {
        title: {
          update: "编辑用户组",
          addGroup: "添加用户组",
          relatePlat: ""
        },
        type: "",
        visible: false,
        width: "80%"
      },
      //列表相关
      listTypeInfo: {
        deptTree: [],
        userType: [{ key: "普通用户", value: 0 }, { key: "超级管理员", value: 1 }],
        roleList: [],
      },
      //用户弹窗相关
      userDialogInfo: {
        title: {
          addUser: "添加用户",
          addGroup: "添加用户组"
        },
        width: "80%",
        type: "",
        visible: false
      },
      //用户表单相关
      userFormInfo: {
        ref: null,
        data: {
          id: undefined,
          login: "",
          realName: "",
          userType: 0,
          orgId: null,
          groupId: undefined,
          groupName: "",
          roleId: undefined,
          mobile: "",
          roleType: 0,
        },
        fieldList: [
          { label: "用户名", value: "login", type: "input", required: true },
          { label: "姓名", value: "realName", type: "input", required: true },
          { label: "手机号", value: "mobile", type: "input", required: true, validator: checkPhone },
          { label: "用户类型", value: "userType", type: "select", list: "userType", disabled: true },
          { label: "所属部门", value: "orgId", type: "treeselect", list: "deptTree", required: true },
          { label: "所属分组", value: "groupName", type: "input", disabled: true },
          { label: "所属角色", value: "roleId", type: "select", list: "roleList", required: true }
        ],
        rules: {},
        treeOptions: []
      },
      //用户组表单相关
      groupFormInfo: {
        ref: null,
        data: {
          id: undefined,
          groupName: "",
          description: ""
        },
        fieldList: [
          { label: "用户组名称", value: "groupName", type: "input", required: true },
          { label: "用户组描述", value: "description", type: "textarea", limit: true }
        ],
        rules: {}
      }
    };
  },
  watch: {
    "dialogInfo.visible"(val) {
      if (!val) {
        this.isRelatePlatTableInfo.data = [];
        this.unRelatePlatTableInfo.data = [];
        this.isRelateUserTableInfo.data = [];
        this.unRelateUserTableInfo.data = [];
        this.relateUserQuery = {
          searchStr: ""
        };
        this.relatePlatQuery = {
          searchStr: ""
        };
        if (this.userFormInfo.ref) {
          this.userFormInfo.ref.resetFields();
        }
        if (this.groupFormInfo.ref) {
          this.groupFormInfo.ref.resetFields();
        }
        const type = this.dialogInfo.type;
        this.resetForm(type);
      }
    },
    "dialogInfo.type"(val) {
      this.dialogInfo.width = (val === "addUser" || val === "addGroup" || val === "update") ? "500px" : "80%";
    },
    "relatePlatQuery.searchStr"(val) {
      Object.assign(this.isRelatePlatTableInfo.query, this.relatePlatQuery);
      Object.assign(this.unRelatePlatTableInfo.query, this.relatePlatQuery);
    },
    "relateUserQuery.searchStr"(val) {
      Object.assign(this.isRelateUserTableInfo.query, this.relateUserQuery);
      Object.assign(this.unRelateUserTableInfo.query, this.relateUserQuery);
    }
  },
  computed: {
    //移除按钮是否可点击
    isCanRemovePlat() {
      return this.isRelatePlatTableInfo.selectList.length ? false : true;
    },
    //添加按钮是否可点击
    isCanInsertPlat() {
      return this.unRelatePlatTableInfo.selectList.length ? false : true;
    },
    //移除按钮是否可点击
    isCanRemoveUser() {
      return this.isRelateUserTableInfo.selectList.length ? false : true;
    },
    //添加按钮是否可点击
    isCanInsertUser() {
      return this.unRelateUserTableInfo.selectList.length ? false : true;
    },
    ...mapGetters(["allDept"])
  },
  mounted() {
    this.initRules();
    this.groupTableInfo.refresh = Math.random();
    this.initRoles();
  },
  methods: {
    // 初始化验证
    initRules() {
      const userFormInfo = this.userFormInfo;
      const groupFormInfo = this.groupFormInfo;
      userFormInfo.rules = this.$initRules(userFormInfo.fieldList);
      groupFormInfo.rules = this.$initRules(groupFormInfo.fieldList);
    },
    // 初始化角色
    initRoles() {
      this.$http.post(this.nozzle.roleGetRoles, {
        current: 0,
        size: 0,
        data: {
          searchStr: "",
          type: 0
        }
      }).then(res => {
        if(res.data.code === 1) {
          this.listTypeInfo.roleList = res.data.data.map(item => {
            return{
              key: item.roleName,
              value: item.roleId
            }
          })
        }
      })
    },
    //点击事件
    handleClick(event, data) {
      switch (event) {
        //用户组搜索
        case "searchGroup":
          this.groupTableInfo.initCurpage = Math.random();
          this.groupTableInfo.refresh = Math.random();
          break;
        //关联项目按钮
        case "relatePlat":
          this.dialogInfo.type = event;
          this.relatePlatQuery.groupId = data.id;
          this.dialogInfo.visible = true;
          setTimeout(() => {
            Object.assign(this.isRelatePlatTableInfo.query, this.relatePlatQuery);
            Object.assign(this.unRelatePlatTableInfo.query, this.relatePlatQuery);
            this.relatePlatTableInfo.refresh = Math.random();
          }, 0);
          break;
        //关联项目搜索
        case "platSearch":
          this.relatePlatTableInfo.initCurpage = Math.random();
          this.relatePlatTableInfo.refresh = Math.random();
          break;
        //绑定项目与用户组
        case "insertPlat":
          this.handleAjaxPlat("unbound",this.nozzle.bindPlatformToGroup);
          break;
        //解绑项目与用户组
        case "removePlat":
          this.handleAjaxPlat("",this.nozzle.removePlatformFromGroup);
          break;
        //关联用户按钮
        case "relateUser":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          this.relateUserQuery.groupId = data.id;
          setTimeout(() => {
            Object.assign(this.isRelateUserTableInfo.query, this.relateUserQuery);
            Object.assign(this.unRelateUserTableInfo.query, this.relateUserQuery);
            this.relateUserTableInfo.refresh = Math.random();
          }, 0);
          break;
        //关联用户搜索
        case "userSearch":
          this.relateUserTableInfo.initCurpage = Math.random();
          this.relateUserTableInfo.refresh = Math.random();
          break;
        //绑定用户与用户组
        case "insertUser":
          this.handleAjaxUser("unbound",this.nozzle.bindUserToGroup);
          break;
        //解绑用户与用户组
        case "removeUser":
          this.handleAjaxUser("",this.nozzle.removeUserFromGroup);
          break;
        //用户添加按钮
        case "addUser":
          this.dialogInfo.type = event;
          this.userFormInfo.data["groupName"] = data.groupName;
          this.userFormInfo.data["groupId"] = data.id;
          this.listTypeInfo.deptTree = this.allDept;
          this.dialogInfo.visible = true;
          break;
        //用户组添加按钮
        case "addGroup":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          break;
        //用户组编辑按钮
        case "update":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          for (let key in data) {
            if (key in this.groupFormInfo.data) {
              this.groupFormInfo.data[key] = data[key];
            }
          }
          break;
        //用户组删除按钮
        case "delGroup":
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(res =>{
            this.$http.post(this.nozzle.userGroupDelete,{data:{id:data.id}}).then(res =>{
              if(res.data.code === 1) {
                this.groupTableInfo.refresh = Math.random();
                this.groupTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? 'success' : 'error',
                showClose: true,
              })
            }).catch(e =>{
              message(e);
            })
          }).catch(() =>{})
          break;
        //关闭
        case "close":
          this.dialogInfo.visible = false;
          break;
        //保存用户组/用户
        case "save":
          const type = this.dialogInfo.type;
          const formName = (type === "addGroup" || type === "update") ? this.groupFormInfo : this.userFormInfo;
          let params, api;
          formName.ref.validate(valid => {
            if (valid) {
              this.btnLoading = true;
              if (type === "addUser") {
                //添加用户绑定到用户组
                api = this.nozzle.addUserToGroup;
                const data = {...this.userFormInfo.data};
                params = data;
              }else{
                //添加保存用户组
                api = this.nozzle.createOrUpdateGroup;
                const data = {...this.groupFormInfo.data};
                params = { data: data };
              }
              this.$http.post(api, params).then(res => {
                if (res.data.code === 1 || res.data.code === 200) {
                  this.dialogInfo.visible = false;
                  this.groupTableInfo.refresh = Math.random();
                }
                this.$message({
                  message: res.data.msg,
                  type: res.data.code === 1 ? "success" : "error",
                  showClose: true
                });
                this.btnLoading = false;
              })
              .catch(e => {
                console.log(e);
                this.btnLoading = false;
              });
            }
          });
          break;
      }
    },
    //关闭弹窗
    handleClose() {
      this.dialogInfo.visible = false;
    },
    //表格checkbox选择事件
    handleEvent(event, data) {
      switch (event) {
        //关联项目
        case "isRelatePlat":
          this.isRelatePlatTableInfo.selectList = data;
          break;
        //未关联项目
        case "unRelatePlat":
          this.unRelatePlatTableInfo.selectList = data;
          break;
        //关联用户
        case "isRelateUser":
          this.isRelateUserTableInfo.selectList = data;
          break;
        //未关联用户
        case "unRelateUser":
          this.unRelateUserTableInfo.selectList = data;
          break;
      }
    },
    //重置表单
    resetForm(type) {
      switch (type) {
        case "addUser":
          this.userFormInfo.data = {
            id: undefined,
            login: "",
            realName: "",
            userType: 0,
            orgId: null,
            groupId: undefined,
            groupName: "",
            roleId: undefined,
            mobile: ""
          };
          break;
        case "addGroup":
        case "update":
          this.groupFormInfo.data = {
            id: undefined,
            groupName: "",
            description: ""
          };
          break;
      }
    },
    //请求接口处理结果
    handleAjax(url, params) {
      this.$http.post(url, params).then(res => {
        if (res.data.code === 1 || res.data.code === 200) {
          this.dialogInfo.visible = false;
          this.projectTableInfo.refresh = Math.random();
        }
        this.$message({
          message: res.data.msg,
          type: res.data.code === 1 ? "success" : "error",
          showClose: true
        });
        this.btnLoading = false;
      })
      .catch(e => {
        console.log(e);
        this.btnLoading = false;
      });
    },
    //操作用户与用户组之间的绑定与解绑
    handleAjaxUser(type, api) {
      const tableInfo = type === "unbound" ? this.unRelateUserTableInfo : this.isRelateUserTableInfo;
      const userIds = tableInfo.selectList.map( item => item.id);
      const params = {
        groupId: tableInfo.query.groupId,
        userIds: userIds
      };
      this.$http.post(api, { data: params }).then(res => {
        if (res.data.code === 1) {
          this.relateUserQuery.searchStr = "";
          this.relateUserTableInfo.refresh = Math.random();
          this.relateUserTableInfo.initCurpage = Math.random();
        }
        this.$message({
          message: res.data.msg,
          type: res.data.code === 1 ? "success" : "error",
          showClose: true
        });
      })
    },
    //操作项目与用户组之间的绑定与解绑
    handleAjaxPlat(type, api) {
      const tableInfo = type === "unbound" ? this.unRelatePlatTableInfo : this.isRelatePlatTableInfo;
      const platforms = tableInfo.selectList.map( item => parseInt(item.platformCode));
      const params = {
        groupId: tableInfo.query.groupId,
        platforms: platforms
      };
      this.$http.post(api, { data: params }).then(res => {
        if (res.data.code === 1) {
          this.relatePlatQuery.searchStr = "";
          this.relatePlatTableInfo.refresh = Math.random();
          this.relatePlatTableInfo.initCurpage = Math.random();
        }
        this.$message({
          message: res.data.msg,
          type: res.data.code === 1 ? "success" : "error",
          showClose: true
        });
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-group {
  height: 100%;
  @include fdaj(center, center);
  /deep/ .el-button + .el-button {
    margin-left: 0;
    margin-top: 10px;
  }
}
/deep/ .el-dialog {
  @include fd();
  @include wh(80%, 60%);
  max-height: 60%;
  margin-top: 10vh !important;
  .el-dialog__body {
    @include fd();
    flex: 1;
    padding-bottom: 0;
    overflow-y: auto;
  }
}
.table-title{
  @include hl(30px,30px);
  color: #409EFF;
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
}
.userDialog {
  /deep/ .el-form-item {
    .el-form-item__label {
      width: 120px;
      padding-right: 15px;
    }
  }
}
</style>