<template>
  <div class="case-info-box">
    <template v-if="caseInfoList.length > 0">
      <ul>
        <li @click="goUrl(caseItem)" class="case-info-item" v-for="(caseItem, caseIndex) in caseInfoList"
          :key="caseIndex">
          <div class="case-info-item-h3">{{ caseItem.name }}</div>
          <div><van-tag color="#ffe1e1" text-color="#ad0000">{{ caseItem.status }}</van-tag></div>
          <div class="case-info-content-box">
            <van-row>
              <van-col span="24" class="mb-10">
                <div class="case-info-item-h4">案号：</div>
                <div class="case-info-item-info">{{ caseItem.anNo }}</div>
              </van-col>
              <van-col span="12" class="mb-10">
                <div class="case-info-item-h4">立案时间：</div>
                <div class="case-info-item-info">{{ caseItem.lianDate }}</div>
              </van-col>
              <van-col span="12" class="mb-10" v-if="false">
                <div class="case-info-item-h4">终本时间：</div>
                <div class="case-info-item-info">{{ caseItem.zhongbentime }}</div>
              </van-col>
              <van-col span="12" class="mb-10">
                <div class="case-info-item-h4">执行标的：</div>
                <div class="case-info-item-info">{{ caseItem.biaodi }}</div>
              </van-col>
              <van-col span="12" class="mb-10" v-if="false">
                <div class="case-info-item-h4">案件金额：</div>
                <div class="case-info-item-info">{{ caseItem.anjainjine }}</div>
              </van-col>
              <van-col span="12" class="mb-10">
                <div class="case-info-item-h4">执行法院：</div>
                <div class="case-info-item-info">{{ caseItem.executeGov }}</div>
              </van-col>
              <van-col span="24" class="mb-10">
                <div class="case-info-item-h4">当事企业：</div>
                <div class="case-info-item-info">{{ caseItem.companyName }}</div>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>
    </template>
    <template v-else>
      <van-empty />
    </template>
  </div>
</template>

<script>
import { Tag, Col, Row, Empty } from 'vant';//button组件
export default {
  name: "SearchResultContent",
  props: {
    caseInfoList: Array
  },
  data() {
    return {
      loading: false,

    }
  },
  methods: {
    goUrl(value) {
      this.$router.push('/dashboard/home//searchCase/result/details');
      sessionStorage.setItem('detailsShowDatas', JSON.stringify(value));
    },
  },

  mounted() {

  },

  components: {
    VanTag: Tag,
    VanCol: Col,
    VanRow: Row,
    VanEmpty: Empty,
  }
}
</script>

<style scoped>
.case-info-box {
  background: #ffffff;
  padding: 0 1rem;
  min-height: calc(100vh - 12rem - 16px);
}

.case-info-item {
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.case-info-item:not(:last-child) {
  border-bottom: solid 1px #f2f2f2;
}

.case-info-item-h3 {
  font-size: 1rem;
  font-weight: bold;
}

.case-info-content-box {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.case-info-item-h4 {
  font-size: 0.8rem;
  margin-bottom: 4px;
  color: #333333;
  font-weight: bold;
}

.case-info-item-info {
  font-size: 0.8rem;
  color: #666666;
}
</style>
