<template>
  <div class="innovate">
    <div class="box conter1000" v-loading="loading">
      <div class="_l">
        <div
          class="_item pointer"
          :class="item.id == queryParams.kindId ? 'x_fff x_bg_blue' : ''"
          v-for="item in state.kind"
          :key="item.id"
          @click="handleActive(item.id, item.title)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="_r">
        <div style="width: 70%">
          <el-input v-model.trim="queryParams.title" placeholder="请输入关键词">
            <template #append>
              <el-button @click="handleQuery">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="_list" v-loading="listLoading">
          <div class="item pointer" v-for="item in state.list" :key="item.id">
            <div class="_info">
              <p class="text_hidden">{{ item.title }}</p>
              <div class="_tags">
                <el-tooltip :content="item.description" placement="top">
                  <el-tag class="x_fff x_bg_blue">{{
                    item.description
                  }}</el-tag>
                </el-tooltip>
              </div>
            </div>
            <div class="_detail" @click="handleDetail(item.id)">查看详情</div>
          </div>
        </div>
        <pagination
          class="pagination"
          :total="state.total"
          :pageSizes="state.pageSizes"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :autoScroll="false"
          @pagination="getDataList"
        />
      </div>
    </div>
    <webFooter></webFooter>
  </div>
</template>

<script setup name="Innovate">
import webFooter from "@/components/webFooter/index.vue";
import request from "@/utils/request";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { getKinds, getInovateList } from "../../../api/website/innovate";

const router = useRouter();
const loading = ref(true);
const listLoading = ref(true);
const state = reactive({
  kind: [],
  list: [],
  pageSizes: [5, 10, 20, 30],
  title: "",
});
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  kindId: "",
});

function getDataList() {
  listLoading.value = true;
  getInovateList(queryParams).then((resp) => {
    state.total = resp.total;
    state.list = resp.rows;
    listLoading.value = false;
  });
}

onMounted(() => {
  init();
});

function init() {
  loading.value = true;
  getKinds().then((resp) => {
    state.kind = resp.data;
    if (resp.data.length > 0) {
      queryParams.kindId = resp.data[0].id;
      getDataList();
    }
    loading.value = false;
  });
  // kind()
  //   .then((res) => {
  //     if (200 == res.code) {
  //   }
  // })
  // .catch(() => {
  //   loading.value = false;
  // });
}

function handleDetail(id) {
  let routeData = router.resolve({ path: `/innovate/detail/${id}` });
  window.open(routeData.href, "_blank");
}

function handleActive(id, title) {
  queryParams.kindId = id;
  queryParams.pageNum = 1;
  queryParams.title = "";
  getDataList();
}
function handleQuery() {
  queryParams.pageNum = 1;
  getDataList();
}
</script>

<style lang="scss" scoped>
.innovate {
  background-color: #f2f6ff;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .box {
    padding: 30px 0 20px 0;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    position: relative;

    ._l {
      width: 230px;
      margin-right: 14px;
      ._item {
        text-align: center;
        height: 53px;
        line-height: 53px;
        font-size: 16px;
        color: #333;
        background-color: #fff;
      }
    }
    ._r {
      position: relative;
      flex: 1;
      box-sizing: border-box;
      padding-bottom: 50px;

      .pagination {
        position: absolute;
        bottom: 0;
        right: 20px;
      }
      .el-input {
        ::v-deep(.el-input__inner) {
          border-right: 0;
        }
        ::v-deep(.el-input-group__append) {
          overflow: hidden;
          font-size: 16px;
          color: #fff;
          border-top-color: #0054ff;
          border-right-color: #0054ff;
          border-bottom-color: #0054ff;
          background-color: #0054ff;
        }
      }
      ._list {
        display: flex;
        flex-wrap: wrap;
        .item {
          width: 31%;
          margin-top: 14px;
          margin-right: 14px;
          background-color: #fff;
          &:nth-child(-n + 3) {
            margin-top: 10px;
          }
          ._info {
            padding: 30px 14px 0;
            p {
              margin: 0;
              font-size: 16px;
              font-weight: 400;
              color: #333333;
              line-height: 24px;
            }
            ._tags {
              margin: 10px 0 0;
              .el-tag {
                font-size: 14px;
                width: 100%;
                overflow: hidden;
              }
            }
          }
          ._detail {
            height: 54px;
            line-height: 54px;
            margin-top: 30px;
            text-align: center;
            color: #333;
            font-weight: bold;
            font-size: 14px;
          }
          &:hover ._detail {
            color: #fff;
            background: #9bbcff;
          }
        }
      }
    }
  }
}
</style>
