<template>
  <div :class="[$style.common, { [$style.single]: $attrs.single }]">
    <div :class="$attrs.single ? $style.singleBtn : $style.settingBtn">
      <a-button icon="setting" title="设置" type="link" @click="delVisible = true" />
    </div>
    <sd-picker-source-list
      v-if="commonShow"
      :class="$style.listContent"
      title="常用的"
      icon="user"
      :load-list-data="() => recentUser()"
      v-bind="$attrs"
      :show-search="false"
      v-on="$listeners"
    />
    <a-modal
      title="请选择"
      :visible="delVisible"
      :class="$style.delcommonModal"
      :width="500"
      :footer="null"
      destroy-on-close
      @ok="delVisible = false"
      @cancel="delVisible = false"
    >
      <a-button
        :class="$style.delAll"
        icon="sd-trash2"
        title="批量删除"
        type="link"
        @click="delCommonUser(delSelectKeys)"
      />
      <a-transfer
        :lazy="{ height: 35 }"
        :class="$style.delTransfer"
        :data-source="recentsList"
        :render="renderItem"
        @selectChange="handleSelectChange"
      />
    </a-modal>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
import sdUserinfoCard from '@/common/components/sd-user-item/sd-userinfo-card'
import axios from '@/common/services/axios-instance'
import { sdLocalStorage } from '@/common/services/storage-service'
import components from './_import-components/sd-picker-users-by-common-import'

export default {
  name: 'SdPickerUsersByCommon',
  metaInfo: {
    title: 'SdPickerUsersByCommon',
  },
  components,
  props: {
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      recentsList: [],
      delVisible: false,
      commonShow: true,
      delSelectKeys: [],
    }
  },
  created() {
    this.recentUser().then((res) => {
      this.recentsList = res.map((item) => {
        return {
          key: item.code,
          title: item.title,
          code: item.code,
        }
      })
    })
  },
  methods: {
    recentUser() {
      const recents = JSON.parse(sdLocalStorage.getItem('recentUser') || '[]')
      // 有密级且有常用人时，调用接口按密级过滤
      if (this.secretLevel && recents.length > 0) {
        return axios
          .post(`api/framework/v1/user-manager/filter_user_by_securityl`, {
            sourceSecurityL: this.secretLevel,
            targetUser: recents.map((item) => item.code),
          })
          .then((res) => recents.filter((item) => (res.data || []).includes(item.code)))
          .catch(() => [])
      } else {
        return Promise.resolve(recents)
      }
    },
    renderItem(item) {
      const customLabel = [
        <span class={this.$style.label}>{item.title}</span>,
        <sdUserinfoCard account={item.code} />,
        <a
          class={this.$style.delBtn}
          vOn:click_stop_prevent={() => this.delCommonUser([item.code])}
        >
          <a-icon type='sd-trash2' title='删除' />
        </a>,
      ]
      return {
        label: customLabel,
        value: item.key,
      }
    },
    delCommonUser(codeList) {
      if (!codeList.length) return
      Modal.confirm({
        content: '确认删除选中的联系人？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.commonShow = false
          this.recentsList = this.recentsList.filter((item) => !codeList.includes(item.code))
          const newRecentUser = JSON.parse(sdLocalStorage.getItem('recentUser')).filter(
            (item) => !codeList.includes(item.code)
          )
          sdLocalStorage.setItem('recentUser', JSON.stringify(newRecentUser))
          this.$nextTick(() => {
            this.delSelectKeys = this.delSelectKeys.filter((item) => !codeList.includes(item))
            this.commonShow = true
          })
        },
      })
    },
    handleSelectChange(keys) {
      this.delSelectKeys = keys
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.common {
  overflow: hidden;
  .list-content {
    overflow: auto;
  }
  .setting-btn {
    position: absolute;
    top: -38px;
    right: 32px;
  }
  &.single {
    display: flex;
    flex-direction: column;
    .single-btn {
      width: 100%;
      border-bottom: 1px solid #d9d9d9;
      :global .ant-btn {
        float: right;
        margin-right: 15px;
      }
    }
  }
}
.del-transfer {
  :global .ant-transfer-operation,
  :global .ant-transfer-list:last-child {
    display: none;
  }
  :global .ant-transfer-list:first-child {
    width: 100%;
    height: 500px;
  }
  .label {
    display: inline-block;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    width: calc(100% - 70px);
  }
  .del-btn {
    margin-left: 13px;
  }
  a {
    display: none;
  }
  :global(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover) {
    a {
      display: inline;
    }
  }
}
.delcommon-modal {
  :global .ant-modal-body {
    position: relative;
  }
  .del-all {
    position: absolute;
    top: 27px;
    right: 32px;
    z-index: 1;
  }
}
</style>
