<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: [
        // {
        //   title: '山西维基智汇科技有限公司',
        //   content:
        //     '研究院的介绍包含研究院，公司架构，和各中心的介绍。' +
        //     '各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、' +
        //     '数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、' +
        //     '山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。',
        //   imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
        // },
        // {
        //   title: '',
        //   content:
        //     '各中心介绍包含科创体系与科创能力咨询服务中心、' +
        //     '知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、' +
        //     '科创战略协同研究中心、山西奥依工业设计咨询服务中心',
        //   imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg',
        // },
      ],
      // arr: [
      //   { name: '服务超市', url: '/ServiceMarket/InnovativeService' },
      //   { name: '科技创新服务', url: '/ServiceMarket/InnovativeService' },
      // ],
    };
  },

  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>
