<template>
  <a-modal
    :title="$t('选择用户')"
    :visible="visible"
    :destroy-on-close="true"
    width="60%"
    wrapClassName="select_user_container"
    @ok="submit"
    @cancel="visible = false"
    :ok-text="$t('保存')"
    :cancel-text="$t('取消')"
  >
    <a-row class="user_tool">
      <a-col
        class="label_title"
        :span="16"
      >
        <a-input-search
          allowClear
          :placeholder="$t('请输入用户账号')"
          class="user_input"
          v-model="pager.queryParams.F_userName_like"
          @search="searchUserList"
        />
        <a-input-search
          allowClear
          :placeholder="$t('请输入用户昵称')"
          class="user_input"
          v-model="pager.queryParams.F_nickName_like"
          @search="searchUserList"
        />
      </a-col>
      <a-col
        :span="8"
        align="right"
      >
        <a-button
          type="primary"
          @click="searchUserList"
          >{{ $t('查询') }}</a-button
        >
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <div class="table-list">
        <vxe-table
          ref="userTable"
          show-overflow
          show-header-overflow
          border
          resizable
          :row-config="{ isHover: true }"
          :data="userList"
          height="auto"
          @checkbox-all="selectChange"
          @checkbox-change="selectChange"
        >
          <vxe-column
            type="checkbox"
            width="60"
          ></vxe-column>
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="50"
            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>
          <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="getUserList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
  </a-modal>
</template>
<script>
  const $appService = require('w-vue-middle/api/appService');
  const $userService = require('w-vue-middle/api/userService');
  const user_avatar = require('w-vue-middle/assets/images/bg_header.png');

  export default {
    props: {
      show: [Boolean],
      deptId: [String],
      roleId: [String],
    },
    computed: {
      visible: {
        get() {
          return this.show;
        },
        set(val) {
          this.$emit('update:show', val);
        },
      },
    },
    watch: {
      visible(val) {
        if (val) {
          this.selectUser = [];
          this.pager.queryParams.F_deptId_eq = this.deptId;
          if (this.$versionCompare('6.0.2406')) {
            //06版本才会支持此功能
            this.pager.queryParams.F_roleId_eq = this.roleId;
          }
          this.getUserList();
        }
      },
    },
    data() {
      return {
        defaultimg: `this.src='${user_avatar}'`,
        user_avatar: user_avatar,
        loading: false,
        pager: {
          pageNum: 1,
          pageSize: 10,
          queryParams: {
            F_userName_like: undefined,
            F_nickName_like: undefined,
            F_deptId_eq: undefined,
          },
        },
        total: 1,
        userList: [],
        selectUser: [],
      };
    },
    created() {},
    methods: {
      /**
       * @Author: y_zp
       * @description: 用户列表
       */
      getUserList() {
        this.loading = true;
        $userService
          .getUserList({ ...this.pager })
          .then((req) => {
            this.total = Number(req.count);
            this.userList = req.data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /**
       * @Author: y_zp
       * @description: 查询
       */
      searchUserList() {
        this.pager.pageNum = 1;
        this.getUserList();
      },
      /**
       * @Author: y_zp
       * @description: 批量绑定角色
       */
      submit() {
        if (this.selectUser.length > 0) {
          $appService.saveUserRole(this.selectUser).then((req) => {
            this.visible = false;
            this.$message.success($t('添加用户成功'));
            this.$emit('callBack');
          });
        } else {
          this.$message.warning($t('请选择需要添加的用户'));
        }
      },
      /**
       * @Author: y_zp
       * @description: 选中
       */
      selectChange({ checked }) {
        const records = this.$refs.userTable.getCheckboxRecords();
        this.selectUser = records.map((item) => {
          return {
            roleId: this.roleId,
            userId: item.userId,
          };
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .select_user_container {
    .user_tool {
      font-size: 14px;
      font-weight: 400;
      color: #000000;
      line-height: 32px;

      .user_input {
        width: 180px;
        margin-right: 16px;
      }
    }
    .table-list {
      margin-top: 12px;
      height: 300px;
      .user_list_icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        box-shadow: 0px 1px 2px 0px #d0d6e4;
      }
    }
  }
</style>
