<!-- 专家介绍 -->
<template>
  <div class="experts">
    <!-- 专家介绍 -->
    <van-nav-bar title="专家介绍" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
      <template #left>
        <van-icon name="arrow-left" size="24" style="padding: 0" />
        <span>返回</span>
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="introduce">
        <h3>{{info.name}}</h3>
        <span>{{info.summary}}</span>
        <!-- <p><i>700人次</i>咨询<br />从业<i>30年</i></p> -->
        <p>{{info.seek}}</p>
        <img src="@/assets/optimize/images/3_48.png" alt="" />
      </div>
      <div class="title">
        <van-checkbox-group v-model="result">
          <van-checkbox v-for="(item, index) in info.titles" :key="index" name="1">{{item}}</van-checkbox>
        </van-checkbox-group>
      </div>
      <div class="summary">
        <p>{{ info.introduce }}</p>
      </div>
    </div>
    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar';
import APIOptimize from '@/api/optimize';
import { Checkbox, CheckboxGroup } from 'vant';
export default {
  components: {
    TabBar,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup
  },
  data() {
    return {
      result: ['1'],
      info: {}
    };
  },
  created() {
    this.init(this.$route.query.id);
  },
  mounted() {},
  methods: {
    onNavBack() {
      this.$router.push({
        name: 'Optimize'
      });
    },
    init(id) {
      // 专家详情
      APIOptimize.getExpertList(id)
        .then(res => {
          if ( res.data.data.length != 0 ) {
            this.info = res.data.data[0]
            this.info.titles = this.info.titles.split('|')
          }
        })
        .catch(e => {
          console.log(e);
        })
    }
  }
};
</script>
<style scoped lang="scss">
@import './scss/experts.scss';
</style>
