<template>
  <div class="innovate">
    <div class="box conter1000" v-loading="loading">
      <div class="_l">
        <div
          class="_item pointer"
          :class="item.id == state.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="state.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="state.pageNum"
          v-model:limit="state.pageSize"
          :autoScroll="false"
          @pagination="getDataList"
        />
      </div>
    </div>
    <webFooter></webFooter>
  </div>
</template>

<script setup>
import webFooter from "@/components/webFooter/index.vue";
import request from "@/utils/request";
const router = useRouter();
const loading = ref(true);
const listLoading = ref(true);
const state = reactive({
  kind: [],
  kindId: "",
  list: [],
  pageNum: 1,
  total: 1,
  pageSize: 9,
  pageSizes: [9, 9 << 1, 9 << 2, 9 << 3],
  title: "",
});

function kind() {
  return request({
    url: "/v1/service/innovate/kind",
    method: "get",
  });
}

function innovate() {
  return request({
    url: "/v1/service/innovate",
    method: "post",
    data: {
      kind_id: state.kindId,
      page_num: state.pageNum,
      page_size: state.pageSize,
      title: state.title,
    },
  });
}

function getDataList() {
  listLoading.value = true;
  innovate()
    .then((res) => {
      if (200 == res.code) {
        state.total = res.data.count;
        state.list = res.data.data;
        listLoading.value = false;
      }
    })
    .catch(() => {
      listLoading.value = false;
    });
}

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

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

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

function handleActive(id, title) {
  state.kindId = id;
  state.pageNum = 1;
  state.title = "";
  getDataList();
}
function handleQuery() {
  state.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>
