<template>
  <div class="case-info-box">
    <ul>
      <li @click="goUrl(caseItem)" class="case-info-item" v-for="(caseItem, caseIndex) in caseInfoList" :key="caseIndex">
        <div class="case-info-item-h3">{{ caseItem.anNo }}</div>
        <div><van-tag color="#ffe1e1" text-color="#ad0000">{{ caseItem.executeStatus }}</van-tag></div>
        <div class="case-info-content-box">
          <van-row>
            <van-col span="24" class="mb-10">
              <div>
                <span class="case-info-item-h4">案件日期：</span>
                <span class="case-info-item-info">{{ caseItem.publicDate }}</span>
              </div>
            </van-col>
            <van-col span="24" class="mb-10">
              <div>
                <span class="case-info-item-h4">失信具体行为：</span>
                <span class="case-info-item-info">{{ caseItem.actionremark }}</span>
              </div>
            </van-col>
            <van-col span="24" class="mb-10">
              <div>
                <span class="case-info-item-h4">失信被执行人：</span>
                <span class="case-info-item-info">{{ caseItem.companyName }}</span>
              </div>
            </van-col>
          </van-row>
        </div>
      </li>
    </ul>
  </div>
</template>

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

    }
  },
  methods: {
    goUrl(value) {
      this.$router.push('/dashboard/home/searchDishonesty/result/details');
      sessionStorage.setItem('detailsShowDatas', JSON.stringify(value));
    }
  },
  components: {
    VanTag: Tag,
    VanCol: Col,
    VanRow: Row,
  }
}
</script>

<style scoped>
.case-info-box {
  background: #ffffff;
  padding: 0 1rem;
}

.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;
  margin-bottom: 10px;
}

.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>
