<template>
  <div class="d-flex flex-nowrap inner">
    <left-nav />
    <div class="flex-1">
      <div class="content-box fill-width pa-3">
        <div
          :key="index"
          style="margin-bottom: 50px; cursor: pointer"
          v-for="(item, index) in list"
        >
          <div
            @click="jump(item.id)"
            class="pointer d-flex flex-nowrap justify-space-between mb-10"
          >
            <img :src="item.picUrl" style="width: 330px;height:173px" />
            <div class="flex-1 flex-column pa-3">
              <p class="font-bold-22">{{ item.name }}</p>
              <p>{{ item.intro }}</p>
            </div>
          </div>
          <a-divider v-if="index !== (list.length - 1)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { selService } from 'config/api';
import LeftNav from './../components/LeftNav.vue';

export default {
  name: 'InnovativeService',
  components: { LeftNav },
  data() {
    return {
      title: '服务超市-科技创新服务',
      list: [],
    };
  },

  created() {
    this.getService();
  },

  methods: {
    ...mapMutations('home', ['setServiceArr']),
    // 获取服务列表
    async getService() {
      try {
        const params = { param: { serviceType: 1 } };
        const res = await selService(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.list = data;
        }
      } catch (error) {
        console.log(data);
      }
    },
    // 查看 服务 详情
    jump(id) {
      this.$router.push({
        path: '/NewPlatform/ServiceDet',
        name: 'ServiceDet',
        params: { id },
      });
    },
  },
};
</script>

<style lang="stylus" scoped></style>
