<template>
  <template v-if="syncToApp || syncToLocal">
    <JThirdAppDropdown v-if="enabledTypes.wechatEnterprise" type="wechatEnterprise" name="企微" v-bind="bindAttrs" v-on="bindEvents" />
    <JThirdAppDropdown v-if="enabledTypes.dingtalk" type="dingtalk" name="钉钉" v-bind="bindAttrs" v-on="bindEvents" />
  </template>
  <template v-else>未设置任何同步方向</template>
</template>

<script lang="ts" setup>
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { ref, computed, createVNode, h, resolveComponent } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { backEndUrl, getEnabledTypes, doSyncThirdApp } from './jThirdApp.api';
  import { Modal, Input } from 'ant-design-vue';
  import JThirdAppDropdown from './JThirdAppDropdown.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage, createWarningModal } = useMessage();
  const props = defineProps({
    // 同步类型，可以是 user、depart
    bizType: {
      type: String,
      required: true,
    },
    // 是否允许同步到第三方APP
    syncToApp: Boolean,
    // 是否允许第三方APP同步到本地
    syncToLocal: Boolean,
    // 选择的行
    selectedRowKeys: Array,
  });
  // 声明Emits
  const emit = defineEmits(['sync-ok', 'sync-error', 'sync-finally']);

  const enabledTypes = ref({});
  // 绑定属性
  const bindAttrs = computed(() => {
    return {
      syncToApp: props.syncToApp,
      syncToLocal: props.syncToLocal,
    };
  });
  // 绑定方法
  const bindEvents = computed(() => {
    return {
      'to-app': onToApp,
      'to-local': onToLocal,
    };
  });

  // 同步到第三方App
  function onToApp(e) {
    doSync(e.type, '/toApp');
  }

  // 同步到本地
  function onToLocal(e) {
    doSync(e.type, '/toLocal');
  }

  // 获取启用的第三方App
  async function loadEnabledTypes() {
    enabledTypes.value = await getEnabledTypes();
  }

  // 开始同步第三方App
  function doSync(type, direction) {
    let urls = backEndUrl[type];
    if (!(urls && urls[props.bizType])) {
      console.warn('配置出错');
      return;
    }
    let url = urls[props.bizType] + direction;
    let selectedRowKeys = props.selectedRowKeys;
    let content = '确定要开始同步全部数据吗？可能花费较长时间！';

    if (Array.isArray(selectedRowKeys) && selectedRowKeys.length > 0) {
      content = `确定要开始同步这 ${selectedRowKeys.length} 项吗？`;
    } else {
      selectedRowKeys = [];
    }
    return new Promise((resolve, reject) => {
      const model = Modal.confirm({
        icon: createVNode(ExclamationCircleOutlined),
        title: '同步',
        content,
        onOk: () => {
          model.update({
            keyboard: false,
            okText: '同步中…',
            cancelButtonProps: { disabled: true },
          });
          let params = { ids: selectedRowKeys.join(',') };
          return defHttp
            .get({ url, params }, { isTransformResponse: false })
            .then((res) => {
              let options = {};
              if (res.result) {
                options = {
                  width: 600,
                  title: res.message,
                  content: () => {
                    let nodes;
                    let successInfo = [`成功信息如下：`, renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n'))];
                    if (res.success) {
                      nodes = [...successInfo, h('br'), `无失败信息！`];
                    } else {
                      nodes = [
                        `失败信息如下：`,
                        renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
                        h('br'),
                        ...successInfo,
                      ];
                    }
                    return nodes;
                  },
                };
              }
              if (res.success) {
                if (options != null) {
                  Modal.success(options);
                } else {
                  createMessage.warning(res.message);
                }
                emit('sync-ok');
              } else {
                if (options != null) {
                  Modal.warning(options);
                } else {
                  createMessage.warning(res.message);
                }
                emit('sync-error');
              }
            })
            .catch(() => model.destroy())
            .finally(() => {
              resolve();
              emit('sync-finally', {
                type,
                direction,
                isToApp: direction === '/toApp',
                isToLocal: direction === '/toLocal',
              });
            });
        },
        onCancel() {
          resolve();
        },
      });
    });
  }

  function renderTextarea(h, value) {
    return h(
      'div',
      {
        id: 'box',
        style: {
          minHeight: '100px',
          border: '1px solid #d9d9d9',
          fontSize: '14px',
          maxHeight: '250px',
          whiteSpace: 'pre',
          overflow: 'auto',
          padding: '10px',
        },
      },
      value
    );
  }

  // 获取启用的第三方App
  loadEnabledTypes();
</script>

<style scoped>
  #box:hover {
    border-color: #40a9ff;
  }
</style>