<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      文章详情
    </div>
    <div class="content" >
      <div class="desct">
        文章信息
      </div>
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="文章ID"  >
            <span v-if="item!=null">{{item.articleId}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="封面图" >
          <el-popover v-if="item!=null"
            placement="right"
            title=""
            trigger="hover">
            <img slot="reference" :src="item.imageUrl" width="50px">
            <img :src="item.imageUrl" style="max-width: 150px;">
          </el-popover>
        </el-descriptions-item>
        <el-descriptions-item label="分类" >
            <dict-tag v-if="item!=null" :options="cateStatus" :value="item.cateId"/>
        </el-descriptions-item>
        <el-descriptions-item label="标题" >
            <span v-if="item!=null">{{item.title}}</span>
        </el-descriptions-item>

        <el-descriptions-item label="浏览量" >
            <span v-if="item!=null">{{item.views}}</span>
        </el-descriptions-item>

        <el-descriptions-item label="状态" >
        <span v-if="item!=null">
              <dict-tag :options="articleStatus" :value="item.status"/>
        </span>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" >
            <span v-if="item!=null">{{item.createTime}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="更新时间" >
            <span v-if="item!=null">{{item.updateTime}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="内容" >
            <span v-if="item!=null" v-html="item.content"></span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="content" v-if="item!=null">
      <div class="desct">
        视频内容
      </div>
      <div style="display: flex; justify-content: center; align-items: center;">
          <div style="display: grid; place-items: center;">
             <video  :src="item.videoUrl" controls style="max-width: 400px; max-height: 400px;"></video>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getArticle} from "@/api/hisStore/doctorArticle";
  export default {
    name: "articledetails",
    props:["data"],
    data() {
      return {
        cateStatus: [],
        articleStatus: [],
        statusOptions: [],
        item:null,
      }
    },
    created() {
      this.getDicts("sys_doctor_article_cate").then(response => {
        this.cateStatus = response.data;
      });
      this.getDicts("sys_doctor_article_status").then(response => {
        this.articleStatus = response.data;
      });
      this.getDicts("sys_company_status").then(response => {
        this.statusOptions = response.data;
      });
    },
    methods: {
      getDetails(orderId) {
          this.item=null;
          getArticle(orderId).then(response => {
              this.item = response.data;
          });
      },
    }
  }
</script>
<style>

  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .content{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;

      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>
