<template>
  <div class="audit-node-container">
    <div class="tag" :style="{ 'background-color': nodeInfo.color }">{{ index }}</div>
    <div class="content">
      <div class="title" style="margin-bottom: 15px;font-size: 15px;">
        <div>
          {{ nodeInfo.i_node_name }}
          <el-icon class="icon-communication"
            v-if="notifiable && nodeData.i_submit_times === latestVersion && [AuditStatus.AUDITING].includes(nodeData.i_node_status)">
            <Communication @click="emit('communicate', nodeData)" />
          </el-icon>
        </div>
      </div>
      <div v-if="nodeData.statusName" class="tag"
        :style="{ 'color': nodeInfo.color, 'border': `1px solid ${nodeInfo.color}` }">
        {{ nodeData.statusName }}
      </div>
      <div v-for="subNode in nodeInfo.subnode">
        <p class="description" v-if="subNode.description">{{ subNode.description }}</p>
        <div class="user" v-for="user in subNode.user">
          <div class="detail">
            <el-icon v-if="user.i_result === AuditStatus.PASSED" class="icon-passed">
              <Select />
            </el-icon>
            <el-icon v-else-if="user.i_result === AuditStatus.REJECTED" class="icon-rejected">
              <Square theme="filled" style="font-size:10px" />
            </el-icon>
            <el-icon v-else class="icon-user">
              <UserFilled />
            </el-icon>
            <span class="name">{{ user.i_user_name }}</span>
            <template v-if="[AuditStatus.PASSED, AuditStatus.REJECTED].includes(user.i_result)">
              <span class="proxy" v-if="user.i_user_operation === '2'">
                {{ `(${user.i_proxy_user_name} ${$t('agentApproval')})` }}
              </span>
              <span class="date">{{ moment(user.i_upd_date).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </div>

          <template v-if="nodeData.i_node_status && [AuditStatus.PASSED, AuditStatus.REJECTED].includes(user.i_result)">
            <el-input type="textarea" :model-value="user.i_comment" readonly class="comment" />
            <el-image class="avatar" :src="getUrl(user)" />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, getCurrentInstance, provide } from 'vue'
// import avatar_empty from '@/assets/images/seal.jpg'
import { AuditStatus } from '@/model/enums';
import { Square, Communication } from '@icon-park/vue-next';
import moment from 'moment'
// const { VITE_BASE_URL } = import.meta.env
const { VITE_APP_BASE_API } = import.meta.env
const $t: any = getCurrentInstance()?.appContext.config.globalProperties.$t

const props = withDefaults(defineProps<{
  nodeData: any,
  index: number,
  latestVersion: string,
  notifiable?: boolean
}>(), {})

const emit = defineEmits<{
  (e: 'communicate', val: any): void
}>();

provide("previewable", false)

const getUrl = ({ i_proxy_sign_image, i_sign_image, i_user_operation }: any) => {
  let url = i_user_operation === '2' ? i_proxy_sign_image : i_sign_image
  // return url ? `${VITE_BASE_URL}/seal_image/${url}` : avatar_empty
  return url ? `${VITE_APP_BASE_API}/profile/IWorkflow/seal_image/${url}` : `${VITE_APP_BASE_API}/profile/IWorkflow/seal_image/seal.jpg`
}

const nodeInfo: any = computed(() => {
  const { nodeData } = props
  switch (nodeData.i_node_status) {
    case AuditStatus.DRAFT:
      nodeData.color = 'rgb(204,204,204)'
      nodeData.statusName = $t('waiting')
      break
    case AuditStatus.AUDITING:
      nodeData.color = 'rgb(255,110,0)'
      nodeData.statusName = $t('auditing')
      break
    case AuditStatus.PASSED:
      nodeData.color = 'rgb(40,168,69)'
      nodeData.statusName = $t('passed')
      break
    case AuditStatus.REJECTED:
      nodeData.color = 'rgb(220,53,69)'
      nodeData.statusName = $t('rejected')
      break
    default:
      nodeData.color = 'rgb(99, 101, 231)'
  }
  return nodeData
})
</script>

<style lang="scss">
.audit-node-container {
  padding: 10px 10px 20px;
  border: 1px solid #ddd !important;
  border-radius: 5px;
  font-size: 14px;

  .tag {
    font-size: 14px;
    border-radius: 3px;
    padding: 3px 8px;
    color: white;
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
  }

  .user {
    margin: 10px 0;
    position: relative;
    width: 100%;
  }

  .title {
    font-size: 20px;
    padding-top: 3px;

    &>div {
      display: inline-flex;
      align-items: center;
    }
  }

  .description {
    margin-top: 10px;
    padding: 5px 0;
    font-weight: 400;
    color: #000000;
  }

  .content {
    display: inline-block;
    height: 20px;
    margin-left: 20px;
    width: calc(100% - 80px);
  }

  .user>.detail {
    display: inline-flex;
    align-items: center;
  }

  .name {
    margin-left: 10px;
    font-size: 14px;
    color: #595959;
  }

  .proxy {
    margin-left: 20px;
    color: grey;
  }

  .comment {
    width: calc(100% - 100px);
    overflow-wrap: break-word;
    display: block;
    margin-top: 10px;
  }

  .date {
    margin-left: 20px;
    font-size: 14px;
    color: rgb(211, 211, 211);
  }

  .avatar {
    width: 52px;
    height: 52px;
    position: absolute;
    top: 36px;
    right: 0px;
  }

  .icon-user,
  .icon-passed,
  .icon-rejected {
    font-size: 22px;
    border-radius: 50%;
    padding: 2px;
  }

  .icon-user {
    color: rgb(221, 221, 221);
    border: 1px solid rgb(221, 221, 221) !important;
  }

  .icon-passed {
    color: rgb(40, 168, 69);
    border: 1px solid rgb(40, 168, 69) !important;
  }

  .icon-rejected {
    color: rgb(220, 53, 69);
    border: 1px solid rgb(220, 53, 69) !important;
  }

  .icon-communication {

    .i-icon-communication {
      color: #6365e7;
      margin-left: 30px;
      cursor: pointer;
      font-size: 20px;
    }
  }
}
</style>