/* eslint-disable no-param-reassign */
import { defineComponent, PropType, watch, Ref, ref } from 'vue';
import { useNamespace } from '@ibiz-template/vue-util';
import dayjs from 'dayjs';
import { clone } from 'ramda';
import '@ibiz-template/theme/style/components/common/extend-action-grid/extend-action-grid.scss';

/**
 * 办理人员名称显示去重
 *
 * @param tag 需要去重的名称标识
 * @param dataS 需要去重数据集
 */
const acceptingOfficerNoDup = (tag: string, dataS: IData[]) => {
  const tempData: IData[] = [];
  if (dataS?.length > 0 && tag) {
    dataS.forEach((data: IData) => {
      tempData.push(data[tag]);
    });
  }
  const noDup = [...new Set(tempData)];
  return noDup;
};

/**
 * 绘制人员
 */
const renderAuthorName = (task: IData) => {
  let authorNames: IData[] = [];
  if (task.comments.length > 0) {
    authorNames = acceptingOfficerNoDup('authorName', task.comments);
  } else {
    authorNames = acceptingOfficerNoDup('displayname', task.identitylinks);
  }
  const disabled = !(authorNames.length > 1);
  const content = authorNames.map(item => item).toString();
  return (
    <i-tooltip
      placement='bottom'
      content={content}
      theme='light'
      disabled={disabled}
    >
      {content}
    </i-tooltip>
  );
};

/**
 * 绘制单位
 */
const renderAuthorOrgName = (task: IData) => {
  let authorOrgNames: IData[] = [];
  if (task.comments.length > 0) {
    authorOrgNames = acceptingOfficerNoDup('authorOrgName', task.comments);
  }
  const disabled = !(authorOrgNames.length > 1);
  const content = authorOrgNames.map(item => item).toString();
  return (
    <i-tooltip
      placement='bottom'
      content={content}
      theme='light'
      disabled={disabled}
    >
      {content}
    </i-tooltip>
  );
};

/**
 * 绘制部门
 */
const renderAuthorDeptName = (task: IData) => {
  let authorDeptNames: IData[] = [];
  if (task.comments.length > 0) {
    authorDeptNames = acceptingOfficerNoDup('authorDeptName', task.comments);
  }
  const disabled = !(authorDeptNames.length > 1);
  const content = authorDeptNames.map(item => item).toString();
  return (
    <i-tooltip
      placement='bottom'
      content={content}
      theme='light'
      disabled={disabled}
    >
      {content}
    </i-tooltip>
  );
};

export const ExtendActionGrid = defineComponent({
  name: 'ExtendActionGrid',
  props: {
    data: {
      type: Object as PropType<IData>,
    },
  },
  setup(props) {
    const ns = useNamespace('extend-action-grid');

    const UIData: Ref<IData | null> = ref(null);

    watch(
      () => props.data,
      (newVal, oldVal) => {
        if (newVal !== oldVal && newVal) {
          const copyData = clone(newVal);
          if (copyData.usertasks.length > 0) {
            copyData.usertasks.forEach((task: IData) => {
              task.isShow = false;
            });
            copyData.usertasks = copyData.usertasks.reverse();
            UIData.value = copyData;
          }
        }
      },
      { immediate: true },
    );

    /**
     * 时间转换
     *
     *  @memberof ExtendActionTimeline
     */
    const formatDate = (date: string, format: string) => {
      return dayjs(date).format(format);
    };

    /**
     * 点击事件
     *
     *  @memberof ExtendActionTimeline
     */
    const changeExpand = (userTask: IData) => {
      userTask.isShow = !userTask.isShow;
    };

    return { ns, formatDate, changeExpand, UIData };
  },
  render() {
    return (
      <div class={this.ns.b()}>
        <div class={this.ns.b('header')}>
          <div class={this.ns.be('header', 'index')}>序号</div>
          <div class={this.ns.be('header', 'user-task-name')}>节点</div>
          <div class={this.ns.be('header', 'author-name')}>办理人员</div>
          <div class={this.ns.be('header', 'author-org-name')}>单位</div>
          <div class={this.ns.be('header', 'author-dept-name')}>部门</div>
          <div class={this.ns.be('header', 'type')}>操作</div>
          <div class={this.ns.be('header', 'last-time')}>完成时间</div>
          <div class={this.ns.be('header', 'full-message')}>审批意见</div>
        </div>
        <div class={this.ns.b('content')}>
          {this.UIData &&
            this.UIData.usertasks.map((task: IData, index: number) => {
              return [
                <div class={this.ns.b('task')}>
                  <div class={this.ns.be('task', 'index')}>
                    <span>{index + 1}</span>
                  </div>
                  <div class={this.ns.be('task', 'user-task-name')}>
                    <i-tooltip
                      placement='bottom'
                      content={task.userTaskName}
                      theme='light'
                    >
                      {task.userTaskName}
                    </i-tooltip>
                  </div>
                  <div class={this.ns.be('task', 'author-name')}>
                    {renderAuthorName(task)}
                  </div>
                  <div class={this.ns.be('task', 'author-org-name')}>
                    {renderAuthorOrgName(task)}
                  </div>
                  <div class={this.ns.be('task', 'author-dept-name')}>
                    {renderAuthorDeptName(task)}
                  </div>
                  <div class={this.ns.be('task', 'type')}>
                    {task.comments[task.comments.length - 1] &&
                      task.comments[task.comments.length - 1].type}
                  </div>
                  <div class={this.ns.be('task', 'last-time')}>
                    {task.comments[task.comments.length - 1] &&
                      this.formatDate(
                        task.comments[task.comments.length - 1].time,
                        'MM月DD日 HH:mm:ss',
                      )}
                  </div>
                  <div class={this.ns.be('task', 'full-message')}>
                    {task.comments[task.comments.length - 1] &&
                      task.comments[task.comments.length - 1].fullMessage}
                  </div>
                  {(task.comments.length > 1 ||
                    task.identitylinks.length > 1) && (
                    <div
                      class={this.ns.be('task', 'arrow')}
                      on-click={() => {
                        this.changeExpand(task);
                      }}
                    >
                      <i-icon type={task.isShow ? 'md-remove' : 'md-add'} />
                    </div>
                  )}
                </div>,
                task.isShow && [
                  task.comments.map((comment: IData) => {
                    return (
                      <div class={this.ns.b('comment')}>
                        <div class={this.ns.be('comment', 'index')}></div>
                        <div
                          class={this.ns.be('comment', 'user-task-name')}
                        ></div>
                        <div class={this.ns.be('comment', 'author-name')}>
                          {comment.authorName}
                        </div>
                        <div class={this.ns.be('comment', 'author-org-name')}>
                          {comment.authorOrgName}
                        </div>
                        <div class={this.ns.be('comment', 'author-dept-name')}>
                          {comment.authorDeptName}
                        </div>
                        <div class={this.ns.be('comment', 'type')}>
                          {comment.type}
                        </div>
                        <div class={this.ns.be('comment', 'last-time')}>
                          {this.formatDate(comment.time, 'MM月DD日 HH:mm:ss')}
                        </div>
                        <div class={this.ns.be('comment', 'full-message')}>
                          {comment.fullMessage}
                        </div>
                      </div>
                    );
                  }),
                  task.identitylinks.length > 0 && (
                    <div class={this.ns.b('identity-link')}>
                      <div class={this.ns.be('identity-link', 'index')}></div>
                      <div
                        class={this.ns.be('identity-link', 'user-task-name')}
                      >
                        <i-tooltip
                          placement='bottom'
                          content='待办理'
                          theme='light'
                        >
                          待办理
                        </i-tooltip>
                      </div>
                      <div class={this.ns.be('identity-link', 'author-name')}>
                        <i-tooltip
                          placement='bottom'
                          content={task.identitylinks
                            .map((item: IData) => item.displayname)
                            .toString()}
                          theme='light'
                        >
                          {task.identitylinks
                            .map((item: IData) => item.displayname)
                            .toString()}
                        </i-tooltip>
                      </div>
                    </div>
                  ),
                ],
              ];
            })}
        </div>
      </div>
    );
  },
});