<template>
  <a-space direction="vertical" class="container">
    <!-- 操作按钮 -->
    <a-button type="primary" size="small" @click="addUser">
      <template #icon><PlusOutlined /></template>
      添加接收人
    </a-button>

    <!-- 接收人表格 -->
    <a-table
      :data-source="users"
      :columns="columns"
      size="small"
      :scroll="{ y: 180 }"
      bordered
    >
      <template #bodyCell="{ column, index }">
        <template v-if="column.key === 'operation'">
          <a-button type="link" danger @click="removeUser(index)">
            <DeleteOutlined />
            删除
          </a-button>
        </template>
      </template>
    </a-table>

    <!-- 主题输入 -->
    <a-input v-model:value="theme" placeholder="请输入主题" allow-clear />

    <!-- 正文输入 -->
    <a-textarea
      v-model:value="content"
      placeholder="请输入正文内容"
      :auto-size="{ minRows: 3, maxRows: 5 }"
    />

    <!-- 用户选择模态框 -->
    <a-modal
      v-model:open="modal"
      title="用户查询"
      width="80%"
      :footer="null"
    >
      <InfoWindow
        ref="info"
        :info-window-no="userinfoWindowNo"
        :where-clause-source="whereClauseSource"
        :is-search-widget="true"
        @data-selected="dataSelected"
      />
    </a-modal>
  </a-space>
</template>

<script>
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import Common from '../common/Common.js';
import UserStorageResource from '../api/base/UserStorageResource.js';

export default {
  components: {
    PlusOutlined,
    DeleteOutlined,
  },
  data() {
    return {
      columns: [
        { title: '名称', dataIndex: ['data', 'name', 'displayValue', 0] },
        { title: '编号', dataIndex: ['data', 'no', 'displayValue', 0] },
        { title: '操作', key: 'operation', width: 120 },
      ],
      userinfoWindowNo: '11531',
      whereClauseSource: {
        customerDataDimensions: [
          {
            fieldName: 'client.id',
            dataDimensionTypeNo: '202201191757',
            defaultDataDimensionTypeValueNo: '1',
          },
        ],
      },
      users: [],
      theme: '',
      content: '',
      modal: false,
    };
  },
  methods: {
    // 添加消息接收人
    addUser: function () {
      var _self = this;
      _self.modal = true;
    },
    // 删除用户
    removeUser: function (index) {
      this.users.splice(index, 1);
      this.restoreUsers();
    },
    // 接收人用户选择后
    dataSelected: function (modelData) {
      var _self = this;
      this.modal = false;
      var flag = true;
      _self.users.forEach(function (item) {
        if (item.id == modelData.id) {
          flag = false;
        }
      });
      if (flag) {
        _self.users.push(modelData);
        _self.restoreUsers();
      }
    },
    // 缓存用户数据到localStorage
    async restoreUsers() {
      try {
        await UserStorageResource.uploadUserStorage([
          { key: 'notification-users', value: JSON.stringify(this.users) },
        ]);
      } catch (error) {
        Common.processException(error);
      }
    },
    getNotification: function () {
      var _self = this;
      var userIds = [];
      _self.users.forEach(function (item) {
        userIds.push(item.id);
      });
      var notification = {
        userIds: userIds,
        theme: _self.theme,
        content: _self.content,
      };
      return notification;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 12px;
}

:deep(.ant-table-small) {
  font-size: 12px;
}

:deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  text-align: center !important;
}

:deep(.ant-table-tbody > tr > td) {
  text-align: center !important;
}
</style>