<template>
  <a-skeleton v-if="loading" :paragraph="{ rows: 5 }" />
  <div v-else>
    <a-timeline :class="$style.process">
      <a-timeline-item
        v-for="(item, index) in innerProcessLogInfo"
        :key="item.index"
        :class="$style.done"
      >
        <div :class="$style.record">
          <div class="sd-process-info-data"
            >{{ item.finishDate | sdDateFormat }} ({{
              item.stepName || (item.props && item.props.stepNameOfSubmit)
            }})
            <span
              v-if="
                item.subFlowLogInfo &&
                  item.subFlowLogInfo.length &&
                  item.actionId !== 'addSubflowOperator' &&
                  item.actionId !== 'removeSubflowOperator'
              "
              :class="$style.subflowlog"
            >
              <a
                :class="$style.childflowBtn"
                @click="openChildInfo(item, index, 'innerProcessLogInfo')"
                >{{ item.childInfoShow ? '收起' : '展开' }}流程跟踪</a
              >&nbsp;
              <!-- 有subInstId且为不0时显示 -->
              <a
                v-if="item.subInstId"
                :class="$style.childflowBtn"
                :href="`#/sd-webflow/done-pages/${item.subInstId}`"
                target="_blank"
                rel="opener"
                >查看文档</a
              >
              <div v-if="item.childInfoShow" :class="$style.printChildflow">
                <sd-process-info
                  :process-log-info="item.subFlowLogInfo"
                  :process-active-log-info="item.subFlowActiveLogInfos || []"
                ></sd-process-info>
              </div>
            </span>
          </div>
          <div class="sd-process-info-operator"
            ><span v-if="item.operator"
              >处理人：
              <template v-if="item.props && item.props._operatorType === 'User'">
                <sd-user-item
                  :users="[
                    {
                      code: item.trustor || item.operatorAccount,
                      name: item.trustorName || item.operator,
                    },
                  ]"
                />
                <span v-if="item.trustor" :class="$style.trustor">
                  <sd-user-item :users="[{ code: item.operatorAccount, name: item.operator }]"
                /></span>
              </template>
              <span v-else>{{ item.operator }}</span></span
            ></div
          >
          <div class="sd-process-info-action">
            <span v-if="item.actionName">操作：</span> {{ item.actionName }}
          </div>
          <div
            v-if="
              item.processTime &&
                ![
                  'addOperator',
                  'addSubflowOperator',
                  'removeOperator',
                  'removeSubflowOperator',
                ].includes(item.actionId)
            "
            class="sd-process-info-time"
            ><span>用时：{{ parseProcessTime(item.processTime) }}</span>
          </div>
          <div class="sd-process-info-status"
            >状态: <a-badge status="success" /><span :class="$style.state">已处理</span></div
          >
        </div>
      </a-timeline-item>
      <a-timeline-item
        v-for="(item, index) in innerProcessActiveLogInfo"
        :key="item.finishDate"
        :class="$style.active"
      >
        <div :class="$style.record">
          <div
            >{{ item.finishDate | sdDateFormat }} ({{ item.stepName }})
            <span v-if="item.subFlowLogInfo && item.subFlowLogInfo.length">
              <a
                :class="$style.childflowBtn"
                @click="openChildInfo(item, index, 'innerProcessActiveLogInfo')"
                >{{ item.childInfoShow ? '收起' : '展开' }}流程跟踪</a
              >&nbsp;
              <a
                v-if="item.subFlowinstId"
                :class="$style.childflowBtn"
                :href="`#/sd-webflow/done-pages/${item.subFlowinstId}`"
                target="_blank"
                rel="opener"
                >查看文档</a
              >
              <div v-if="item.childInfoShow" :class="$style.printChildflow">
                <sd-process-info
                  :process-log-info="item.subFlowLogInfo"
                  :process-active-log-info="item.subFlowActiveLogInfos || []"
                ></sd-process-info>
              </div>
            </span>
          </div>
          <div v-if="item.operatorType === 'User'"
            >处理人：
            <sd-user-item
              :users="
                item.users.length
                  ? item.users.map((user) => {
                      return { code: user.account, name: user.name }
                    })
                  : [{ code: item.operatorCode, name: item.operator }]
              "
            ></sd-user-item>
          </div>
          <div v-else
            >处理人：
            {{ item.operator }}
            <span v-if="item.users.length">
              (
              <sd-user-item
                :users="
                  item.users.map((user) => {
                    return { code: user.account, name: user.name }
                  })
                "
              ></sd-user-item
              >)
            </span>
          </div>
          <div
            >状态: <a-badge status="processing" /><span :class="$style.state">{{
              item.status || item.actionName
            }}</span></div
          >
        </div>
        <div>{{ item.opinion }}</div>
      </a-timeline-item>
    </a-timeline>
    <a-empty v-if="innerProcessLogInfo.length === 0 && innerProcessActiveLogInfo.length === 0" />
  </div>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import components from './_import-components/sd-process-info-print-import'
export default {
  name: 'SdProcessInfoPrint',
  components,
  mixins: [storeMixin],
  props: {
    processLogInfo: {
      type: Array,
      default: undefined,
    },
    processActiveLogInfo: {
      type: Array,
      default: undefined,
    },
  },
  data() {
    return {
      loading: true,
      innerProcessLogInfo: [],
      innerProcessActiveLogInfo: [],
    }
  },
  inject: {
    webflow: { default: () => {} },
  },
  mounted() {
    this.webflow.getLog('process').then(() => {
      const processLogInfo = this.processLogInfo || this.webflow.FlowData.processLogInfo || []
      if (processLogInfo.length) {
        processLogInfo.forEach((item) => {
          item.childInfoShow = true
        })
      }
      this.innerProcessLogInfo = processLogInfo
      const processActiveLogInfo =
        this.processActiveLogInfo || this.webflow.FlowData.processActiveLogInfo || []
      if (processActiveLogInfo.length) {
        processActiveLogInfo.forEach((item) => {
          item.childInfoShow = true
        })
      }
      this.innerProcessActiveLogInfo = processActiveLogInfo
      this.loading = false
    })
  },
  methods: {
    parseProcessTime(processTime) {
      processTime = JSON.parse(processTime)
      const day = processTime.day
      const hour = processTime.hour
      const minute = processTime.minute
      if (day === 0 && hour === 0 && minute === 0) {
        return '小于1分钟'
      }
      return (
        (day === 0 ? '' : day + '天') +
        (hour === 0 ? '' : hour + '小时') +
        (minute === 0 ? '' : minute + '分钟')
      )
    },
    openChildInfo(item, index, name) {
      item.childInfoShow = !item.childInfoShow
      this.$set(this[name], index, item)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@use '@/common/components/sd-web-print.scss' as print;
@include print.wrapper {
  ul.process {
    .record {
      > div:first-child {
        min-width: 205px;
      }
    }
  }
}
ul.process {
  padding: $padding-lg;
  li:not(:first-child) {
    :global(.ant-timeline-item-content::before) {
      position: relative;
      top: -6px;
      display: block;
      width: 100%;
      height: 1px;
      content: '';
      background: $border-color-base;
    }
  }
  .record {
    display: flex;
    margin-bottom: $padding-sm;
    > div {
      width: 18%;
      min-width: 118px;
      white-space: wrap;
    }
    > div:last-child {
      flex: 1;
      min-width: 120px;
      text-align: right;
    }
    > div:first-child {
      min-width: 350px;
    }

    > div:nth-child(2) {
      margin-right: 10px;
      white-space: normal;
    }
    .subflowlog {
      display: inline-block;
    }
  }
  .record + div {
    margin-bottom: $padding-sm;
  }
  .done {
    :global(.ant-timeline-item-head) {
      color: $success-color;
      background-color: $success-color;
      border-color: $success-color;
    }
    :global(.ant-timeline-item-head::after) {
      position: absolute;
      left: 3px;
      display: block;
      width: 1px;
      height: 7px;
      content: '';
      background: white;
      transform: rotate(45deg);
    }
    :global(.ant-timeline-item-head::before) {
      position: absolute;
      top: 2px;
      display: block;
      width: 1px;
      height: 4px;
      content: '';
      background: white;
      transform: rotate(-45deg);
    }
    .state {
      color: $success-color;
    }
  }

  .active {
    :global(.ant-timeline-item-head) {
      background-color: $processing-color;
    }
    .state {
      color: $processing-color;
    }
  }
}
.trustor::before {
  content: ' (';
}
.trustor::after {
  content: '代录)';
}
// 子流程查看主流程的流转跟踪处理
:global(.ant-modal-body) {
  ul.process {
    .record {
      > div:first-child {
        min-width: 300px;
      }
    }
  }
}
.print-childflow {
  margin-top: 15px;
  border-radius: 8px;
  zoom: 0.9;
  box-shadow: 0px 0px 5px #ddd;
}
@media print {
  .childflow-btn {
    display: none;
  }
}
</style>
