<template>
  <a-drawer :title="title" :mask-closable="true" :width="1000" placement="right" :closable="true" @close="handleCancel" v-model:open="visible">
    <a-table
      ref="table"
      size="middle"
      rowKey="id"
      :scroll="{ x: true }"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
    >
      <template #avatarslot="text, record, index">
        <div class="anty-img-wrap" style="margin-bottom: 5px">
          <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
        </div>
      </template>
      <template #action="text, record">
        <span>
          <div style="padding: 8px">
            <a-tag color="purple" @click="handleFrozen(record.id, 1)" style="cursor: pointer">恢复</a-tag>
            <a-popconfirm title="确定删除吗(同时删除wp中的账户，账户下的产品会转移至主账户)?" @confirm="() => handleDelete(record.id)">
              <a-tag color="red" style="cursor: pointer">删除</a-tag>
            </a-popconfirm>
          </div>
        </span>
      </template>
      <template #countSlot="text, record, index">
        <span style="margin-left: 20px">{{ text }} 个</span>
      </template>
    </a-table>
  </a-drawer>
</template>

<script>
  import { putAction, getFileAccessHttpUrl, deleteAction } from '@/api/manage/manage';

  export default {
    name: 'EnterpriseUserRecycleBinModal',

    data() {
      return {
        title: '用户回收站',
        loading: false,
        visible: false,
        selectedRowKeys: [],
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            },
          },
          {
            title: '用户名',
            align: 'left',
            dataIndex: 'realname',
          },
          {
            title: '登录账号',
            align: 'left',
            dataIndex: 'username',
          },
          {
            title: '头像',
            align: 'left',
            dataIndex: 'avatar',
            width: 80,
            scopedSlots: { customRender: 'avatarslot' },
          },
          {
            title: '类型',
            align: 'left',
            width: 80,
            dataIndex: 'primaryAccount',
            customRender: function (text) {
              return text ? '主账户' : '子账户';
            },
          },
          // {
          //   title: '分配的询盘数',
          //   align: "left",
          //   dataIndex: 'enquiryNum',
          //   scopedSlots: {customRender: "countSlot"}
          // },
          // {
          //   title: '负责的产品数',
          //   align: "left",
          //   dataIndex: 'productNum',
          //   scopedSlots: {customRender: "countSlot"}
          // },
          {
            title: '手机号码',
            align: 'left',
            dataIndex: 'phone',
            customRender: function (text) {
              return text === null ? '--' : text;
            },
          },
          {
            title: '邮箱',
            align: 'left',
            dataIndex: 'email',
            customRender: function (text) {
              return text === null ? '--' : text;
            },
          },
          {
            title: '更新时间',
            align: 'left',
            dataIndex: 'updateTime',
            customRender: function (text) {
              return text === null ? '--' : text;
            },
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            scopedSlots: { customRender: 'action' },
            align: 'center',
          },
        ],
        url: {
          getAvatar: (path) => getFileAccessHttpUrl(`${path}`),
          list: '/enterprise/user/recycleBin',
          delete: '/sys/user/delete',
        },
      };
    },
    methods: {
      show() {
        this.visible = true;
        this.loadData(1);
      },
      handleCancel() {
        this.visible = false;
      },
      handleFrozen: function (id, status) {
        let that = this;
        putAction('/enterprise/user/frozen', { ids: id, status: status }).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
            that.$emit('ok');
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar);
      },
    },
  };
</script>

<style lang="less" scoped></style>
