<template>
  <a-drawer
    width="50%"
    :visible="visible"
    @close="visible = false"
    :after-visible-change="openDrawer"
    :destroy-on-close="true"
    class="assign_user_container"
  >
    <template slot="title"
      >{{ $t("分配用户")
      }}<a-button class="addBtn" type="primary" @click="addUser">{{
        $t("添加用户")
      }}</a-button>
    </template>
    <a-spin :spinning="loading">
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :row-config="{ isHover: true }"
          :data="lists"
          height="auto"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="60"
            align="center"
          ></vxe-column>
          <vxe-column :title="$t('头像')" width="80" align="center">
            <template #default="{ row }">
              <div class="table_center">
                <img
                  class="user_list_icon"
                  :src="row.avatar || user_avatar"
                  :onerror="defaultimg"
                  alt="avatar"
                />
              </div>
            </template>
          </vxe-column>
          <vxe-column field="userName" :title="$t('账号')"> </vxe-column>
          <vxe-column field="nickName" :title="$t('昵称')"> </vxe-column>
          <vxe-column field="phonenumber" :title="$t('联系电话')"> </vxe-column>
          <vxe-column field="email" :title="$t('邮箱')"> </vxe-column>

          <vxe-column :title="$t('操作')" width="160" align="center">
            <template #default="{ row }">
              <div class="operate">
                <a-popconfirm
                  :title="`${$t('确认取消授权吗')}?`"
                  :ok-text="$t('确定')"
                  :cancel-text="$t('取消')"
                  @confirm="removeFlow(row)"
                >
                  <a-button class="btn" type="link">{{ $t("移除授权") }}</a-button>
                </a-popconfirm>
              </div>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description">{{ $t("暂无数据") }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="pager.pageNum"
        :page-size.sync="pager.pageSize"
        :total="total"
        @page-change="getFlowList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
    <selectUser
      :show.sync="selectShow"
      :role-id="info.roleId"
      :dept-id="info.deptId"
      @callBack="getFlowList"
    ></selectUser>
  </a-drawer>
</template>
<script>
const selectUser = require("./selectUser.vue").default;
const $appService = require("w-vue-middle/api/appService");
const user_avatar = require("w-vue-middle/assets/images/bg_header.png");

export default {
  components: { selectUser },
  props: {
    show: [Boolean],
    info: [Object],
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  data() {
    return {
      defaultimg: `this.src='${user_avatar}'`,
      user_avatar: user_avatar,
      loading: false,
      total: 0,
      lists: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
        queryParams: {
          F_roleId_eq: undefined,
          F_isDel_eq: 0,
        },
      },
      selectShow: false,
    };
  },
  created() {},
  methods: {
    /**
     * @Author: y_zp
     * @description: 初始化
     */
    openDrawer(val) {
      if (val) {
        this.pager.queryParams.F_roleId_eq = this.info.roleId;
        this.getFlowList();
      }
    },
    /**
     * @Author: y_zp
     * @description: 获取列表
     */
    getFlowList() {
      this.loading = false;
      $appService
        .userByrole({ ...this.pager })
        .then((req) => {
          this.total = Number(req.count);
          this.lists = req.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     *
     * @Author: y_zp
     * @description: 角色下移除用户
     */
    removeFlow(row) {
      $appService.delUserRole(this.info.roleId, row.userId).then((req) => {
        this.$message.success($t("取消授权成功"));
        this.getFlowList();
      });
    },
    /**
     *
     * @Author: y_zp
     * @description: 添加用户
     */
    addUser() {
      this.selectShow = true;
    },
  },
};
</script>
<style lang="less" scoped>
.assign_user_container {
  .addBtn {
    cursor: pointer;
    float: right;
    margin-right: 30px;
  }
  .table_list {
    width: 100%;
    height: calc(100vh - 150px);
    display: inline-block;
    margin-top: 12px;
    .user_list_icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      box-shadow: 0px 1px 2px 0px #d0d6e4;
    }
  }
}
</style>
