<template>
  <div class="bg-F5">
    <div class="container">
      <el-row class="mt2rem" :gutter="20">
        <el-col :span="4">
          <category />
        </el-col>
        <el-col :span="20">
          <div class="tab">
            <tab
              :titles="$t('page.views.info.index.titles')"
              :currIndex.sync="currIndex"
            />
            <div class="btnDiv">
              <router-link to="/info/add">
                <el-button class="buyBtn" size="mini">{{
                  $t("route.infoAdd")
                }}</el-button>
              </router-link>
              <a :href="managerUrl" target="_blank">
                <el-button class="buyBtn" size="mini">{{
                  $t("page.views.info.index.sell")
                }}</el-button>
              </a>
            </div>
          </div>

          <load-more
            v-for="(url, index) in urls"
            :key="url"
            :url="url"
            class="list"
            v-show="currIndex === index"
            v-slot="{ item: { id, purchaseTitle, supplyTitle, releaseTime } }"
          >
            <router-link
              class="info"
              :to="`/info/${index ? 'sell' : 'buy'}/${id}`"
            >
              <div class="name">{{ purchaseTitle || supplyTitle }}</div>
              <div class="date">
                {{ (releaseTime + "").split(" ")[0]
                }}{{ $t("page.views.info.index.public") }}
              </div>
            </router-link>
          </load-more>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({ name: "infoList" })
export default class extends Vue {
  @Prop(String)
  private index!: string;
  private currIndex = 0;
  @Watch("index", { immediate: true })
  indexChange() {
    this.currIndex = Number(this.index) | 0;
  }
  private urls = [
    "/demand/info/getDemandInfoAllList",
    "/supply/info/getSupplyInfoAllList"
  ];
  get managerUrl() {
    return process.env.VUE_APP_MANAGER_URL;
  }
}
</script>
<style lang="scss" scoped>
.tab {
  background: #fff;
  position: relative;
  .btnDiv {
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    .buyBtn {
      background: #fd5522;
      color: #fff;
      margin-left: 2rem;
      border: 0;
      border-radius: 0.4rem;
    }
  }
}
.list {
  margin-top: 2px;
  .info {
    height: 3.6rem;
    line-height: 3.6rem;
    overflow: hidden;
    font-size: 1.4rem;
    background: #fff;
    display: block;
    padding: 0 1.6rem;
    .name {
      width: 80%;
      float: left;
      overflow: hidden;
      color: #333;
    }
    .date {
      width: 20%;
      float: left;
      text-align: right;
      color: #666;
      white-space: nowrap;
    }
  }
}
</style>
