<template>
  <div>
    <sort
      @handleCommand="handleCommand"
      @handleTime="handleTime"
      @handleClear="handleClear"
    />
    <div class="item" v-for="(item, index) in data" :key="index">
      <!-- 项目类型 -->
      <el-card class="box-card" shadow="hover" v-if="item.archivesType == 1">
        <div class="clearfix" slot="header">
          <span class="span-tag" v-if="item.functionName">{{
            item.functionName
          }}</span>
          <a
            class="title"
            type="primary"
            href="#"
            ref="link"
            @click="handleDetial(item)"
            v-html="heightLight(item.projectName + ' ( 项目 )')"
          >
          </a>
        </div>
        <div>
          <el-descriptions class="margin-top" :column="2">
            <el-descriptions-item label="批复文号">
              {{ item.documentNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="批复单位">
              {{ item.documentUnit }}
            </el-descriptions-item>
            <el-descriptions-item label="证书编号">
              {{ item.certificateNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="发证单位">
              {{ item.certificateUnit }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <!-- 文件类型 -->
      <el-card class="box-card" shadow="hover" v-if="item.archivesType == 2">
        <div class="clearfix" slot="header">
          <span class="span-tag" v-if="item.functionName"> 项目文件 </span>
          <a
            class="title"
            type="primary"
            href="#"
            ref="link"
             @click="handleDetial(item)"
            v-html="heightLight(item.projectName + ' ( 文件 )')"
          ></a>
        </div>
        <div>
          <el-descriptions class="margin-top" :column="2">
            <el-descriptions-item label="文件名称">
              <el-link
                type="primary"
                :href="item.fileUrl"
                ref="link"
                v-html="heightLight(item.fileName)"
                >{{ item.fileName }}</el-link
              >
            </el-descriptions-item>
            <el-descriptions-item label="文件大小">
              {{ item.fileSize }}
            </el-descriptions-item>
            <el-descriptions-item label="文件类型">
              <span v-if="item.fileType == 1">图片</span>
              <span v-if="item.fileType == 2">文档</span>
              <span v-if="item.fileType == 3">压缩文件</span>
              <span v-if="item.fileType == 4">视频</span>
              <span v-if="item.fileType == 5">其它</span>
            </el-descriptions-item>
            <!-- <el-descriptions-item>
              <template slot="label"> 附件下载地址 </template>
              <el-link
                class="title"
                type="primary"
                :href="item.fileUrl"
                ref="link"
                >{{ item.fileUrl }}</el-link
              >
            </el-descriptions-item> -->
          </el-descriptions>
        </div>
      </el-card>
      <div class="bottom">
        <div class="bottom-div">
          <span>负责人: {{ item.personCharge }}</span>
          <span>创建时间: {{ item.createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sort from '@/views/searchPage/sort.vue'
export default {
  name: 'All',
  components: {
    sort,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    data: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {}
  },
  methods: {
    heightLight(item) {
      const heightLightStr = `<span class='heightLightActive'>${this.value}</span>`
      const reg = new RegExp(this.value, 'g')
      return item.replace(reg, heightLightStr)
    },
    handleCommand(val) {
      this.$emit('handleCommand', val)
    },
    handleTime(val) {
      this.$emit('handleTime', val)
    },
    handleClear() {
      this.$emit('handleClear')
    },
    handleDetial(data) {
      this.$emit('handleDetial', data)
    },
  },
}
</script>
<style lang="scss" scoped>
a:hover {
  color: #f40;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
  margin-top: 5px;
  .bottom-div {
    display: flex;
    flex-direction: column;
  }
  span {
    margin-right: 10px;
    // color: #0679e5;
    color: #33333385;
  }
}
.span-tag {
  background-color: #0679e5;
  border-radius: 20px;
  color: #f6f6f6;
  font-size: 14px;
  padding: 5px 10px;
  font-weight: bold;
  margin-right: 10px;
  vertical-align: middle;
}
.title,
title > span {
  font-size: 16px;
  color: #0679e9;
  font-weight: bold;
  vertical-align: middle
}
/deep/ .el-card__header .el-link,
/deep/ .el-card__header .el-link > span {
  font-size: 16px;
  color: #0679e9;
  font-weight: bold;
}
/deep/ .el-descriptions__table span,
.el-descriptions__table span a {
  font-size: 14px;
}
</style>
