<template>
  <div id="detail" style="background-color: #F5F5F54f;">
    <div class="w_0100">
      <div class="w_1200">
        <div class="detailmain">
          <div class="detailtop">
            <span>{{ detailinfo.title }}</span>
          </div>
          <div class="detailtopleft">
            <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
          </div>

          <div class="detailimage" v-if="detailinfo.picture">
            <img :src="detailinfo.picture" class="detailimg" />
          </div>
          <div class="detailcontext">
            <p v-html="detailinfo.content"></p>
          </div>
          <div class="development" v-if="detailinfo.column_name == '专家问诊'">
            <p>功能开发中</p>
            <p>功能实现流程：<span>问诊记录展示</span>-<span>在线咨询</span>-<span>专家在线问诊</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
// const { mapActions: news } = createNamespacedHelpers('news');
export default {
  name: 'detail',
  props: {},
  components: {},
  data: () => {
    return {
      img: {
        top_bg: require('@/assets/222.png'),
        logo: require('@/assets/222.png'),
        img1: require('@/assets/222.png'),
      },

      detailinfo: {
        title: '标题',
        publish_time: '2020-03-04',
        orgin: '计算中心',
        picture: require('@/assets/222.png'),
        content: 'context',
      },
    };
  },
  created() {
    // this.search();
  },
  methods: {
    // ...news(['fetch']),
    // async search() {
    //   const res = await this.fetch(this.newsid);
    //   this.$set(this, `detailinfo`, res.data);
    //   console.log(res.data);
    // },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 95%;
  margin: 0 auto;
}
.detailmain {
  min-height: 500px;
}

.detailtop {
  padding: 20px 0px;
  font-size: 18px;
  line-height: 40px;
  font-weight: normal;
  text-align: left;
  margin: 0;
  text-align: center;
  color: #005293;
}

.detailtopleft {
  text-align: center;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  color: #666666;
}

.detailimage {
  text-align: center;
  padding: 20px 0 0 0;
}

.detailimg {
  width: 300px;
  height: 300px;
}

.detailcontext {
  padding: 20px 0;
  min-height: 370px;
}
.development {
  height: 50px;
  border: 1px dashed red;
  padding: 0 30px;
  p:first-child {
    text-align: center;
    font-size: 18px;
    color: red;
    font-weight: bold;
  }
  p:last-child {
    text-align: center;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
