<!--
 * @Description: 创业指引
 * @Author: 空白格
 * @Date: 2022-08-12 11:41:14
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-12 13:41:14
 * @FilePath: \veterans_client_web\src\views\WorkGuide\WorkGuideIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main work-guide">
    <BannerBreadcrumb title="创业指引" />
    <div class="app-main-box">
      <div class="app-main-box-content">
        <div
          class="work-guide-list"
          v-if="guideList.length"
          v-loading="loading"
        >
          <el-row :gutter="16">
            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              :xl="12"
              v-for="(item, index) in guideList"
              :key="index"
            >
              <div class="work-guide-list-item">
                <div class="wgli-title">{{ item.title }}</div>
                <div class="wgli-description" v-html="item.description"></div>
                <div class="wgli-footer">
                  <div class="wgli-footer-reply">
                    <template v-if="item.replyStatus === 0">
                      <span class="no-reply">待专家回复</span>
                    </template>
                    <template v-else>
                      <span class="replyed">专家已回复</span>
                    </template>
                  </div>
                  <div class="wgli-footer-date" v-if="item.createTime">
                    {{ parseTime(item.createTime, "{y}-{m}-{d} {h}:{i}") }} 提交
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="pagination" v-if="total">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="queryParams.pageSize"
              :total="total"
              @current-change="currentChange"
            />
          </div>
        </div>
        <el-empty description="列表数据为空" v-else></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getWorkGuideData } from "@/api/WorkGuide";
import { parseTime } from "@/utils/utils";
export default {
  name: "WorkGuideIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false,
      guideList: [],
      parseTime: parseTime,
    };
  },
  created() {
    this.getWorkGuideList();
  },
  methods: {
    /**
     * 获取创业指导列表
     * @date 2022-08-12
     * @returns {any}
     */
    getWorkGuideList() {
      this.loading = true;
      getWorkGuideData(this.queryParams).then((res) => {
        this.guideList = res.rows;
        this.total = Number(res.total);
        this.loading = false;
      });
    },
    /**
     * 分页切换
     * @date 2022-08-12
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.getWorkGuideList();
    },
  },
};
</script>

<style lang="scss" scoped>
.work-guide {
  padding-bottom: 30px;
  &-list {
    &-item {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 3px;
      margin-bottom: 20px;
      .wgli-title {
        font-size: 26px;
        color: #000;
        margin-bottom: 5px;
      }
      .wgli-description {
        width: 100%;
        font-size: 14px;
        margin-bottom: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      .wgli-footer {
        display: flex;
        justify-content: space-between;
        &-reply {
          font-size: 14px;
          .no-reply {
            color: #ef6622;
          }
          .replyed {
            color: #3ca7fe;
          }
        }
        &-date {
          color: #9f9f9f;
          font-size: 14px;
        }
      }
    }
    .pagination {
      text-align: center;
      margin-top: 20px;
      :deep(.el-pager .active) {
        background-color: #ff3939;
      }
      :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
        background-color: #ff3939;
      }
    }
  }
}
</style>
