<template>
  <div class="detail_contain">
    <p class="now_page_title" v-if="now_user==2">权限管理 / 组织用户 / <span>用户管理</span></p>
    <div class="info_contain">
      <service-header
        v-if="service_header_arr.name"
        :data="service_header_arr"
      ></service-header>
    </div>
    <div class="organtable">
      <p class="setwidth">
        <span></span>组织用户管理
        <el-input
          class="elinput"
          v-model="input"
          prefix-icon="el-icon-search"
          placeholder="请输入关键字"
        ></el-input>
      </p>
      <apass-table :header="header_arr" :data="datas"></apass-table>
      <list-pagination
        :total="listTotal"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      ></list-pagination>
    </div>
    <dialog-action
      ref="myConfirm"
      :confirmOptions="tipsOptions"
    ></dialog-action>
  </div>
</template>

<script>
import serviceHeader from "@/components/service-header";
import apassTable from "@/components/apass-table";
import dialogAction from "@/components/dialog-action";
import ListPagination from "@/components/comments-pagination";
import { mapGetters,mapState } from 'vuex'
export default {
  props: [],
  components: {
    serviceHeader,
    apassTable,
    dialogAction,
    ListPagination,
  },
  data() {
    return {
      table_url: "",
      listTotal: 0,
      currentPage: 1,
      now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
      pageSize: 10,
      pageSizes: [10, 50, 100],
      service_header_arr: {
        name: "",
        url: "",
        first: [
          {
            name: "业务系统数",
            text: "",
          },
          {
            name: "组织管理员",
            text: "",
          },
        ],
        second: [
          {
            name: "组织创建时间",
            text: "",
          },
        ],
        fixed: true,
      },
      input: "",
      tipsOptions: {
        title: "",
        message: "",
        btnSubmitText: "",
        btnCancelText: "",
        position: "",
      },
      datas: [],
      header_arr: [],
      now_timeout: "",
      admin_arr: ["", "超管", "组织管理员", "普通用户", "开发者"],
    };
  },
  watch: {
    input(n, o) {
      clearTimeout(this.now_timeout);
      this.now_timeout = setTimeout(() => {
        console.log(n);
        this.get_list();
      }, 1000);
    },
  },
  computed: {
    ...mapGetters([
      'level',
    ]),
    ...mapState(['userInfo']),
  },
  created() {
    this.get_user();
    this.get_list();
    if(this.userInfo){
      this.now_user = this.level
    }else{
      this.getCurrentUser()
    }
  },
  mounted() {},
  methods: {
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          console.log("--- user info ---");
          console.log(data.data);
          console.log("--- user info ---");
          this.$store.commit("userInfofun", data.data);
          this.now_user = this.level
        } else {
          console.log(data.errMsg);
        }
      });
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.get_list();
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      this.get_list();
    },
    get_user() {
      this.$http
        .get(
          `/apaas/backmgt/department/detail?department_id=${this.$route.params.id}`
        )
        .then((response) => {
          console.log(response);
          if(!response.data.success){
            this.$message.error(response.data.errMsg)
            return
          }
          let data = response.data.data;
          this.service_header_arr = {
            name: data.department_name,
            first: [
              {
                name: "业务系统数",
                text: data.systemUser,
              },
              {
                name: "组织管理员",
                text: data.orgAdmin + "人",
              },
            ],
            second: [
              {
                name: "组织创建时间",
                text: data.create_date,
              },
            ],
            fixed: true,
            url: data.picture_path,
            fixedurl: "/authority/organization/edit/" + this.$route.params.id,
          };
        })
        .catch((response) => {
          this.$message.error('请求失败')
        });
    },
    get_list() {
      this.$http
        .get(
          `/apaas/backmgt/user/list?limit=${this.pageSize}&page=${this.currentPage}&department_id=${this.$route.params.id}&search=${this.input}`
        )
        .then((response) => {
          // console.log(response);
          if(!response.data.success){
            this.$message.error(response.data.errMsg)
            return
          }
          let data = response.data.data;
          this.listTotal = response.data.total;
          this.datas = data;
          var _this = this;
          setTimeout(() => {
            this.header_arr = [
              {
                prop: "user_id",
                label: "账号",
                minWidth: "25%",
                align: "left",
                type: "button",
                callback(item) {
                  _this.$router.push(`/authority/users/detail/${item.user_id}`);
                },
              },
              {
                prop: "system_name",
                label: "业务系统名称",
                minWidth: "25%",
                align: "left",
              },
              {
                prop: "is_admin",
                label: "用户类型",
                minWidth: "25%",
                align: "center",
                getText(item) {
                  return _this.admin_arr[item.is_admin || 0];
                },
              },
              {
                prop: "operat_time",
                label: "上次操作修改时间",
                minWidth: "25%",
                align: "center",
              },
              {
                label: "操作",
                type: "buttons",
                width: "120px",
                align: "center",
                width: 140,
                actionList: [
                  {
                    label: "删除",
                    callback: this.adelete,
                  },
                ],
              },
            ];
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    adelete(val) {
      this.tipsOptions = {
        title: "",
        message: "",
        btnSubmitText: "",
        btnCancelText: "",
        position: "",
      };
      this.tipsOptions.message = "是否移除该用户？";
      this.tipsOptions.confirmSubmit = () => {
        console.log("deleteItem - " + JSON.stringify(val));
        this.delete_data(val);
        this.$refs.myConfirm.hideModel();
      };
      this.$refs.myConfirm.showModel();
    },
    delete_data(val) {
      this.$http
        .post(`/apaas/backmgt/user/delete`, {
          id: [val.user_id],
        })
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message({
              message: `删除${val.user_name}成功`,
              type: "success",
            });
            this.get_list();
          } else {
            this.$message({
              message: `删除${val.user_name}失败`,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          this.$message({
            message: `删除${val.user_name}失败`,
            type: "warning",
          });
        });
    },
  },
};
</script>

<style>
.setwidth .el-input__inner {
  width: 240px;
}
.setwidth .el-input {
  width: 240px;
}
</style>
<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 84px);
  margin-bottom: 20px;
}
.info_contain {
  padding: 25px 20px;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.organtable {
  margin-top: 20px;
  width: 100%;
  height: calc(100% - 210px);
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  padding: 20px;
}
.organtable p {
  font-size: 16px;
  color: #58617a;
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid #f4f7fc;
  margin-bottom: 10px;
}
.organtable p span {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  margin-right: 15px;
  vertical-align: -3px;
}
.organtable .elinput {
  float: right;
}
</style>
