<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <a-list :loading="loading" :grid="{ gutter: 14, column: 4 }" :data-source="list">
              <template #renderItem="{ item }">
                <el-col :span="24" class="list">
                  <el-col :span="24" v-for="(i, f) in fields" :key="f">
                    <el-col :span="24" class="name textOver" v-if="i.type == 'name'">
                      <el-tooltip effect="dark" :content="item[i.model]" placement="top">
                        {{ item[i.model] || '暂无' }}
                      </el-tooltip>
                    </el-col>
                    <el-col :span="24" class="other_1" v-else-if="i.type == 'dict'">
                      <span>{{ i.label }}</span>
                      {{ getDict(item[i.model], i.model) }}
                    </el-col>
                    <el-col :span="24" class="other_1" v-else-if="i.type == 'area'">
                      <span>{{ i.label }}</span>
                      {{ getArea(item[i.model]) }}
                    </el-col>
                    <el-col :span="24" class="other_1" v-else-if="i.type == 'time'">
                      <span>{{ i.label }}</span>
                      {{ getTime(item[i.model]) }}
                    </el-col>
                    <el-col :span="24" v-else class="other_1 textOver">
                      <span>{{ i.label }}</span>
                      {{ item[i.model] || '暂无' }}
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="bottom">
                    <el-button @click.stop="toView(item)" type="primary" size="small"
                      >查看详情</el-button
                    >
                  </el-col>
                </el-col>
              </template>
            </a-list>
          </el-col>
          <el-col :span="24" class="two">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :page-sizes="[10, 20, 50, 100, 200]"
              :total="total"
              :page-size="limit"
              v-model:current-page="currentPage"
              @current-change="changePage"
              @size-change="sizeChange"
            >
            </el-pagination>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const fields = inject('fields')
const list = inject('list')
const total = inject('total')
const limit = inject('limit')
const getDict = inject('getDict')
const getArea = inject('getArea')
const getTime = inject('getTime')
const toView = inject('toView')
const currentPage = inject('currentPage')
const changePage = inject('changePage')
const sizeChange = inject('sizeChange')
</script>
<style scoped lang="scss">
.main {
  .one {
    min-height: 36vh;
    .list {
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
      border-radius: 2px;
      width: 285px;
      height: 180px;
      margin-bottom: 15px;
      cursor: pointer;
      transition: all 0.3s;
      padding: 20px;

      .name {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #121834;
        font-weight: 500;
        margin: 5px 0 0 0;
        .tags {
          grid-gap: 0.5rem;
          gap: 0.5rem;
          display: flex;
          margin: 0 0 0 10px;
        }
      }

      .name:hover {
        color: #2374ff;
      }

      .other_1 {
        font-size: 12px;
        text-align: justify;
        line-height: 12px;
        font-weight: 400;
        letter-spacing: 0;
        color: #8f97a3;
        margin-top: 10px;

        span:last-child {
          color: #525a68;
        }
      }

      .bottom {
        margin: 10px;
        text-align: right;
        .button {
          font-size: 12px;
          color: #fff;
          text-align: center;
          line-height: 12px;
          font-weight: 500;
          padding: 5px 12px;
          background: #2374ff;
          box-shadow: 0 3px 6px 0 rgba(35, 116, 255, 0.1);
          border-radius: 2px;
        }
      }
    }

    .list:hover {
      background: #f0f7ff;
      box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
    }
  }
  .two {
    display: flex;
    flex-direction: row-reverse;
    padding: 20px;
  }
}
</style>
