<template>
  <div class="sys-container">
    <form ref="form" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="3.5">
          <div class="sys-form-item bg-purple">
            <div class="sys-form-item-text">用户编码：</div>
            <div class="sys-form-item-input">
              <el-input v-model="paramsQuery.queryConfig.UserCode" placeholder="请输入用户编码" />
            </div>
          </div>
        </el-col>
        <el-col :span="3.5">
          <div class="sys-form-item bg-purple">
            <div class="sys-form-item-text">用户名称：</div>
            <div class="sys-form-item-input">
              <el-input v-model="paramsQuery.queryConfig.UserName" placeholder="请输入用户名称" />
            </div>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="sys-form-item bg-purple">
            <el-button icon="el-icon-search" @click="btnAction(1)" type="primary">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="btnAction(0)">重置</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="sys-pb-5">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="userEditOrAddOpen(null, 'add')">
          新增
        </el-button>
      </div>
    </form>

    <!-- table -->
    <div class="sys-table-border">
      <el-table :data="tableData" ref="multipleTable" border :header-cell-style="{ color: '#000000' }"
        highlight-current-row style="width: 100%" height="520">
        <el-table-column label="序号" width="60" type="index" :index="(index) =>
          (paramsQuery.PageNumber - 1) * paramsQuery.PerPageCount + index + 1" />
        <el-table-column prop="id" label="id" v-if="false"></el-table-column>
        <el-table-column prop="userCode" label="用户编码"> </el-table-column>
        <el-table-column prop="userName" label="用户名称"> </el-table-column>
        <el-table-column prop="department" label="部门" width="150"> </el-table-column>
        <el-table-column prop="phone" label="电话" width="150"> </el-table-column>
        <el-table-column prop="disable" label="是否启用"  :formatter="(row) => row.disable ? '是' : '否'" width="90"> </el-table-column>
        <el-table-column prop="address" label="地址" width="200"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>

        <el-table-column prop="created" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="createdBy" label="创建人"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="userEditOrAddOpen(scope.row, 'edit')">编辑</el-button>
            <el-button style="color: red" type="text" @click="userDelete(scope.row, 'edit')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="sys-pagination-container">
        <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
          :current-page="paramsQuery.PageNumber" :page-size="paramsQuery.PerPageCount" :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper" :total="paramsQuery.PageTotal" />
      </div>
    </div>

    <!-- dialog 用户新增和编辑 -->
    <el-dialog :title="userDialog.title" :close-on-click-modal="false" :visible.sync="userDialog.visible" width="60%">
      <el-form :model="userDialog.form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编码">
              <el-input v-model="userDialog.form.userCode" ref="userCode" maxlength="20" show-word-limit
                autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input v-model="userDialog.form.userName" ref="userName" maxlength="20" show-word-limit
                autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行：密码 + 部门 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="密码">
              <el-input v-model="userDialog.form.password" type="password" maxlength="20" ref="password"
                autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input v-model="userDialog.form.department" maxlength="20" show-word-limit
                autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行：电话 + 地址 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电话">
              <el-input v-model="userDialog.form.phone" maxlength="20" show-word-limit autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址">
              <el-input v-model="userDialog.form.address" maxlength="40" show-word-limit autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="权限">
              <el-select v-model="roleSelectOpt.selectVal" multiple placeholder="请选择权限">
                <el-option v-for="item in roleSelectOpt.data" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="禁用">
              <el-switch v-model="userDialog.form.disable" active-color="#ff4949" inactive-color="#13ce66"
                active-text="(绿色启用/红色禁用)">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 单列：备注 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="userDialog.form.remark" type="textarea" :rows="2" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userAddOrEditSave">确 定</el-button>
        <el-button @click="userDialog.visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as userApi from "@/api/systemPermission/userPermission";
export default {
  data() {
    const defaultData = {
      PageNumber: 1,
      PerPageCount: 20,
      queryConfig: {
        UserCode: "",
        UserName: "",
      },
      PageTotal: 0,
    };
    const userData = {
      userCode: "",
      userName: "",
      password: "",
      department: null,
      phone: null,
      remark: null,
      address: "",
      disable: false,

      //权限数据
      Roles: [],

      Created: null,
      CreatedBy: null,
      Updated: null,
      UpdatedBy: null,
      Id: 0,
    };
    return {
      tableData: [],
      paramsQuery: { ...defaultData },
      defaultData: JSON.parse(JSON.stringify(defaultData)),

      userDialog: {
        visible: false,
        flag: "add",
        title: "新增",
        form: { ...userData },
        formDefaultData: JSON.parse(JSON.stringify(userData)),
      },
      //临时存储的数据
      roleSelectOpt: {
        data: [], // 处理后的数据（展示用）
        originData: [], // 原始数据
        selectVal: null,
      },
    };
  },
  methods: {
    /**
     * 查询或者搜索
     */
    btnAction(flag) {
      if (flag == 0) {
        this.paramsQuery = JSON.parse(JSON.stringify(this.defaultData));
      }
      this.getData();
    },

    getData() {
      userApi.getUserData(this.paramsQuery).then((response) => {
        this.paramsQuery.PageTotal = response.data.totalCount;
        this.tableData = response.data.data;
      });
    },

    /**
     * 获取用户权限数据
     */
    getUserRoleList() {
      userApi.getUserRole().then((res) => {
        if (res.code !== "Success") return;
        this.roleSelectOpt.data = this.getUserRoleDataHandle(res.data);
        this.roleSelectOpt.originData = res.data;
      });
    },
    /**
     * 用户选项数据转换给组件格式数据
     */
    getUserRoleDataHandle(data) {
      var roleOptions = [];
      data.forEach((element) => {
        roleOptions.push({
          value: element.id,
          label: element.roleName,
        });
      });
      return roleOptions;
    },

    /**
     * 新增或者编辑弹出框
     */
    async userEditOrAddOpen(row, flag) {
      debugger;
      if (this.roleSelectOpt.data.length == 0) {
        this.$message.error(
          "权限数据加载中...请稍后在操作,反复出现请联系管理员!"
        );
        return;
      }
      this.roleSelectOpt.selectVal = [];
      this.userDialog.flag = flag;
      if (flag == "add") {
        this.userDialog.form = JSON.parse(
          JSON.stringify(this.userDialog.formDefaultData)
        );
        this.userDialog.title = "新增";
      } else {
        this.userDialog.title = `编辑,用户名【${row.userName}】`;
        var result = await userApi.getUserWithRoles({ UserCode: row.userCode });
        const keys = result.data.roles.map((x) => x.id);
        this.roleSelectOpt.selectVal = keys;
        this.userDialog.form = row;
      }
      this.userDialog.visible = true;
    },

    /**
     * 用户新增或者编辑 保存操作
     */
    userAddOrEditSave() {
      debugger;
      if (
        this.userDialog.form.userCode == "" ||
        this.userDialog.form.userCode == null
      ) {
        this.$message.error("用户编码不能为!");
        this.$refs.userCode.focus();
        return;
      }
      if (
        this.userDialog.form.userName == "" ||
        this.userDialog.form.userName == null
      ) {
        this.$message.error("用户名称不能为!");
        this.$refs.userName.focus();
        return;
      }
      if (
        this.userDialog.form.password == "" ||
        this.userDialog.form.password == null
      ) {
        this.$message.error("用户密码不能为!");
        this.$refs.password.focus();
        return;
      }
      var roleData = this.getSelectRoleVal();
      if (roleData.length == 0) return;
      this.userDialog.form.Roles = roleData;
      if (this.userDialog.flag == "edit") {
        userApi.editUser(this.userDialog.form).then((res) => {
          userApi.ajaxSuccessBefore(
            res,
            (res) => {
              this.userDialog.visible = false;
              this.getData();
            },
            this
          );
        });
        return;
      }
      userApi.addUser(this.userDialog.form).then((res) => {
        userApi.ajaxSuccessBefore(
          res,
          (res) => {
            this.userDialog.visible = false;
            this.getData();
          },
          this
        );
      });
    },

    //用户删除
    userDelete(row) {
      var title = `此操作将永久删除该数据,用户名【${row.userName}】，是否继续？`;
      this.$confirm(title, "提示", { type: "warning" })
        .then(() => {
          userApi.deleteUser(row).then((res) => {
            userApi.ajaxSuccessBefore(
              res,
              (res) => {
                this.userDialog.visible = false;
                this.getData();
              },
              this
            );
          });
        })
        .catch();
    },

    setCurrent(row) {
      this.$refs.multipleTable.setCurrentRow(row);
    },

    //获取选中的权限，处理好符合后台提交数据格式
    getSelectRoleVal() {
      if (this.roleSelectOpt.selectVal.length == 0) {
        this.$message.error("请选择权限数据!");
        return [];
      }
      var result = [];
      this.roleSelectOpt.selectVal.forEach((x) => {
        var tempVal = this.roleSelectOpt.originData.find((y) => y.id == x);
        result.push(tempVal);
      });
      return result;
    },
    //下一页
    handleCurrentChange(page) {
      debugger;
      this.paramsQuery.PageNumber = page;
      this.getData();
    },
    handleSizeChange(val) {
      this.paramsQuery.PerPageCount = val;
      this.paramsQuery.PageNumber = 1;
      this.getData();
    },
  },
  mounted() {
    this.getUserRoleList();
    this.getData();
  },
};
</script>
<style scoped lang="scss">
.sys-container {
  width: 100%;
}

.sys-pb-5 {
  padding-bottom: 5px !important;
}

.sys-form-item {
  display: flex;
  border-radius: 4px;
  min-height: 46px;
  margin-bottom: 10px;
  align-items: center;
}

.sys-table-border {
  border: 1px solid #e5e9f2;
}

.sys-pagination-container {
  text-align: center;
}

.current-row {
  background-color: #ecf5ff;
}
</style>