<template>
  <a-skeleton v-if="loading" :paragraph="{ rows: 5 }" />
  <a-card v-else>
    <!-- 为避免选择环节过多或环节名称过长导致下拉框显示多行，设置最多显示3个tag，每个tag最大显示8个字 -->
    <sd-log-filter
      v-if="filterSteps"
      v-model="selectedSteps"
      :options="stepOptions"
      mode="multiple"
      :class="$style.logFilter"
      :max-tag-count="3"
      :max-tag-text-length="8"
      :get-popup-container="(triggerNode) => triggerNode.parentNode"
      placeholder="请选择处理环节"
      v-bind="$attrs"
    />
    <a-table
      ref="opinionTable"
      :row-key="(record, index) => record.dispindex"
      size="middle"
      :columns="showColumns"
      :data-source="dataView"
      :expanded-row-keys="logExpandedRowKeys"
      :pagination="false"
      :class="[$style.loginfo, hasChildren ? $style.hasSub : '']"
      children-column-name="subFlowLogInfo"
      :indent-size="10"
      @expandedRowsChange="(keys) => (logExpandedRowKeys = keys)"
    >
      <template slot="operator" slot-scope="text, record">
        <span v-if="record.props && record.props._operatorType === 'User'">
          <!-- 签名图/名字 -->
          <img
            v-if="record.opininonProps && record.opininonProps.signature"
            :class="$style.signimage"
            :src="
              (`api/framework/v1/user-signature/download/` + record.opininonProps.signature)
                | sdResource({ ajax: false })
            "
          />
          <span v-else>
            <sd-user-item
              :users="[
                {
                  code: record.operatorAccount,
                  name: record.operator,
                },
              ]"
            />
            <span v-if="record.trustor">
              (代<sd-user-item
                :users="[
                  {
                    code: record.trustor ? record.trustor : record.operatorAccount,
                    name: record.trustorName ? record.trustorName : record.operator,
                  },
                ]"
              />)
            </span>
          </span>
        </span>
        <span v-else>{{ record.operator }}</span>
      </template>
      <sd-user-item
        slot="senterName"
        slot-scope="text, record"
        :users="[{ code: record.senterAccount, name: record.senterName }]"
      ></sd-user-item>
      <sd-user-item
        slot="name"
        slot-scope="text, record"
        :users="[{ code: record.account, name: record.name }]"
      ></sd-user-item>
      <span slot="finishDate" slot-scope="finishDate">{{
        finishDate | sdDateFormat('YYYY-MM-DD HH:mm')
      }}</span>
      <span slot="sentDate" slot-scope="sentDate">{{
        sentDate | sdDateFormat('YYYY-MM-DD HH:mm')
      }}</span>
      <span slot="createdTime" slot-scope="createdTime">{{
        createdTime | sdDateFormat('YYYY-MM-DD HH:mm')
      }}</span>
      <template slot="opinion" slot-scope="text, record, index">
        <span>{{ record.opinion }}</span>
        <sd-picture-card
          v-if="record.processLogAttachments && record.processLogAttachments.length"
          :picture-arr="record.processLogAttachments"
        ></sd-picture-card>
        <sd-attachment
          v-if="
            record.processLogAttachments &&
              record.processLogAttachments.length &&
              record.processLogAttachments[0].groupCode
          "
          :ref="`${getRowKey(record, index)}_attach`"
          :group-id="record.processLogAttachments[0].groupCode"
          :inst-id="record.instId"
          :read-only="true"
          :cat-num-to-hide="[-2]"
        ></sd-attachment>
        <span v-if="record.secretaryAccount">
          （<sd-user-item
            :users="[{ code: record.secretaryAccount, name: record.secretaryName }]"
          ></sd-user-item
          >代录）
        </span>
      </template>
      <span slot="action" slot-scope="text, record, index" :class="$style.actionspan">
        <a-icon
          v-if="record.mode && record.mode.includes('DELETE')"
          :title="record.delButtonDesc"
          :class="$style.actionicon"
          type="delete"
          theme="twoTone"
          @click="deleteSign(record)"
        />
        <a-icon
          v-if="record.mode && record.mode.includes('EDIT')"
          type="sd-form"
          theme="twoTone"
          @click="openModal(text, record, index)"
        />
      </span>
    </a-table>

    <sdModifySubmit
      v-if="showOption"
      :show-option="showOption"
      :option-recode="optionRecode"
      @attachmentChange="attachmentChange"
      @signStatusVerdict="signStatusVerdict"
      @optionCancle="optionCancle"
    />
  </a-card>
</template>

<script>
import sdModifySubmit from '@/flow-manager/sd-modify-submit'
import SdOpinionLogMixins from './sd-opinion-log-mixins'
import components from './_import-components/sd-opinion-log-import'

export default {
  name: 'SdOpinionLog',
  components: { sdModifySubmit, ...components },
  mixins: [SdOpinionLogMixins],
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.loginfo {
  :global(.ant-list-split .ant-list-item) {
    border-bottom: none;
  }
  :global(.ant-table-tbody) {
    td:last-child {
      max-width: 400px;
    }
  }
  .actionicon {
    margin-right: 10px;
  }
  .actionspan {
    min-width: 50px;
  }
  :global(.ant-table-row-cell-break-word) {
    span {
      white-space: pre-wrap;
    }
  }
  &.has-sub {
    th:first-child {
      :global(.ant-table-header-column) {
        margin-left: 25px;
      }
    }
  }
  .signimage {
    width: 100px;
  }
}
:global(.browser-ie) {
  .log-filter {
    /* stylelint-disable-next-line  */
    :global(.ant-select-selection__rendered) {
      display: flex;
      ul {
        display: flex;
        /* stylelint-disable-next-line  */
        :global(.ant-select-selection__choice__content) {
          text-overflow: clip;
        }
      }
    }
  }
}
</style>
