<template>
  <div class="detail_contain">
    <p class="now_page_title">权限管理 / 组织用户 / <span>用户管理</span></p>
    <div class="info_contain">
      <service-header
        v-if="service_header_arr.url"
        :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";
export default {
  props: [],
  components: {
    serviceHeader,
    apassTable,
    dialogAction,
    ListPagination,
  },
  data() {
    return {
      table_url: "",
      listTotal: 0,
      currentPage: 1,
      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: {},
  created() {
    this.get_user();
    this.get_list();
  },
  mounted() {},
  methods: {
    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);
          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) => {});
    },
    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);
          let data = response.data.data;
          this.listTotal = response.data.total;
          this.datas = data;
          var _this = this
          setTimeout(()=>{
              this.header_arr = [
                {
                  prop: "user_name",
                  label: "账号",
                  minWidth: "25%",
                  align: "left",
                },
                {
                  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((response) => {});
    },
    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((response) => {
          console.log(response);
          this.get_list()
        })
        .catch((response) => {});
    },
  },
};
</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>
