<template>
  <!-- 搜索结果展示 -->
  <div :class="$style['search-list']">
    <a-list :data-source="searchList" item-layout="vertical">
      <a-list-item slot="renderItem" slot-scope="item">
        <template>
          <div :class="$style.title">
            <a v-if="item.title" href="javascript:;" @click="click(item)">
              <span
                v-for="(s, key) in item.title"
                :key="key"
                :class="{ [$style.searchColor]: s[0] === '1' }"
                >{{ s[1] }}</span
              >
            </a>
            <a-tag v-if="item.isAdjunct[0][1] === 'true'" color="blue">
              兼
            </a-tag>
          </div>
          <div v-if="item.docName" :class="$style.content" :title="item.docName"
            >正文：
            <span
              v-for="(s, key) in item.docName"
              :key="key"
              :class="{ [$style.searchColor]: s[0] === '1' }"
              >{{ s[1] }}</span
            >
          </div>
          <div
            v-if="item.attachmentName.length > 0"
            :class="$style.content"
            :title="item.attachmentName"
            >附件：
            <div v-for="(i, key) in item.attachmentName" :key="key" :class="$style.attt">
              <span
                v-for="(s, keys) in i"
                :key="keys"
                :class="{ [$style.searchColor]: s[0] === '1' }"
                >{{ s[1] }}</span
              >
            </div>
          </div>
          <div v-if="item.tags" :class="$style.tags">
            <span
              v-for="(s, key) in item.tags.belong"
              :key="key"
              :class="[$style.value, { [$style.searchColor]: s[0] === '1' }]"
              >{{ s[1] }}</span
            >
            <span :class="$style.name"> 发起人：</span>
            <span
              v-for="(s, key) in item.tags.sender"
              :key="`s${key}`"
              :class="[$style.value, { [$style.searchColor]: s[0] === '1' }]"
              >{{ s[1] }}</span
            >
            <span :class="$style.name"> 发起部门：</span>
            <span
              v-for="(s, key) in item.tags.department"
              :key="`d${key}`"
              :class="[$style.value, { [$style.searchColor]: s[0] === '1' }]"
              >{{ s[1] }}</span
            >
            <span :class="$style.name"> 创建时间：</span>
            <span
              v-for="(s, key) in item.tags.creationtime"
              :key="`c${key}`"
              :class="[$style.value, { [$style.searchColor]: s[0] === '1' }]"
              >{{ s[1] | sdDateFormat }}</span
            >
            <span :class="$style.name"> 流转状态：</span>
            <span
              v-for="(s, key) in item.tags.status"
              :key="`st${key}`"
              :class="[$style.value, { [$style.searchColor]: s[0] === '1' }]"
              >{{ s[1] }}</span
            >
          </div>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import openAsTrustId from '@/common/services/open-as-trust-id'
import components from './_import-components/oa-search-list-import'
export default {
  name: 'OaSearchList',
  components,
  props: {
    searchList: {
      type: Array,
      default: () => [],
    },
    searchVal: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  watch: {
    searchVal(val) {},
  },
  methods: {
    click(record) {
      const url = `/sd-webflow/done-pages/${record.instId[0][1]}`
      openAsTrustId(url, record.srcTrustId[0][1])
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$tag-color: #666;
.search-list {
  padding: 0;
  padding-left: 1.5rem;
  list-style: none;
  .search-color {
    background: #fbcecb;
  }
  li {
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      color: $primary-color;
      a {
        margin-right: 5px;
      }
    }
    .content {
      padding: $padding-xs 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .tags {
      .name {
        color: $tag-color;
      }
      .value {
        margin-right: 0.8rem;
        color: $black;
      }
    }
  }
}
.attt {
  display: inline-block;
}
</style>
