<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      短视频详情
    </div>
    <div class="contentx" >
      <div class="desct">
        视频信息
      </div>
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="视频ID"  >
          <span v-if="item!=null">{{item.videoId}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="视频标题" >
          <span v-if="item!=null">{{item.title}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="封面图" >
          <el-popover v-if="item!=null"
            placement="right"
            title=""
            trigger="hover">
            <img slot="reference" :src="item.thumbnail" width="50px">
            <img :src="item.thumbnail" style="max-width: 150px;">
          </el-popover>
        </el-descriptions-item>
        <el-descriptions-item label="所属达人" >
          <span v-if="item!=null">{{item.talentName}}#{{ item.talentId }}</span>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="分类" >
            <dict-tag :options="cateStatus" :value="item.cateId"/>
        </el-descriptions-item> -->
        <el-descriptions-item label="时长" >
            <span v-if="item!=null">{{item.duration}}</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">{{item.likes}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="收藏数" >
            <span v-if="item!=null">{{item.favoriteNum}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="评论数" >
            <span v-if="item!=null">{{item.comments}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="分享数" >
            <span v-if="item!=null">{{item.shares}}</span>
        </el-descriptions-item>

        <el-descriptions-item label="来源" >
          <span v-if="item!=null">
            <dict-tag :options="sourceOptions" :value="item.source"/>
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="状态" >
          <span v-if="item!=null">
            <dict-tag :options="specShowOptions" :value="item.status"/>
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="审核状态" >
          <span v-if="item!=null">
            <dict-tag :options="isAuditOptions" :value="item.isAudit"/>
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="审核人" >
            <span v-if="item!=null">{{item.auditByName}}</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.auditTime}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注" >
            <span v-if="item!=null">{{item.remark}}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="contentx" v-if="item">
      <div class="desct">
        视频内容
      </div>
      <div style="display: flex; justify-content: center; align-items: center;">
          <div style="display: grid; place-items: center;" v-if="item.url!=null">
             <video  :src="item.url" controls style="max-width: 400px; max-height: 400px;"></video>
          </div>
      </div>
    </div>
    <div class="contentx" v-if="packageItem!=null">
      <div class="desct">
        疗法详情
      </div>
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="套餐包ID" >
          <span v-if="packageItem!=null">{{packageItem.packageId}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="套餐包名称" >
          <span v-if="packageItem!=null">{{packageItem.packageName}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="套餐包别名" >
          <span v-if="packageItem!=null">{{packageItem.secondName}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="套餐医生" >
            <span v-if="packageItem!=null">{{packageItem.doctors}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="总价 元/天" >
            <span v-if="packageItem!=null">{{packageItem.price}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="套餐价" >
            <span v-if="packageItem!=null">{{packageItem.totalPrice}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="周期" >
            <span v-if="packageItem!=null">{{packageItem.cycle}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="签约时长" >
            <span v-if="packageItem!=null">{{packageItem.duration}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="类型" >
          <span v-if="packageItem!=null">
            <dict-tag :options="packageTypeOptions" :value="packageItem.packageType"/>
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="子类型" >
          <span v-if="packageItem!=null">
            <dict-tag :options="packageSubTypeOptions" :value="packageItem.packageSubType"/>
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="疾病类型" >
          <span v-if="packageItem!=null">
            <dict-tag :options="diseaseTypeOptions" :value="packageItem.diseaseType"/>
          </span>
        </el-descriptions-item>
        
        <el-descriptions-item label="创建时间" >
            <span v-if="packageItem!=null">{{packageItem.createTime}}</span>
        </el-descriptions-item>

        <el-descriptions-item label="修改时间" >
            <span v-if="packageItem!=null">{{packageItem.updateTime}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="封面图" >
          
          <el-image 
            style="width: 100px"
            :src="packageItem.imgUrl"
            :preview-src-list="[packageItem.imgUrl]">
          </el-image>
          
        </el-descriptions-item>
      </el-descriptions>
      <div class="desct">
        商品内容
      </div>
      <el-table border width="100%" style="margin-top:5px;"  :data="productJson">
        <el-table-column label="商品图片" align="center" width="100">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              title=""
              trigger="hover">
              <img slot="reference" :src="scope.row.image" width="50">
              <img :src="scope.row.image" style="max-width: 50px;">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
        <el-table-column label="数量" align="center"  prop="count" width="150px" />
        <el-table-column label="服用方法" align="center"  prop="usageMethod" width="150px" />
        <el-table-column label="一日几次" align="center"  prop="usageFrequencyUnit" width="150px" />
        <el-table-column label="商品编号" align="center" prop="barCode" />
        <el-table-column label="商品规格" align="center" prop="sku" />
        <el-table-column label="售价" align="center"  prop="price"  >
            <template slot-scope="scope">
            <div v-if="scope.row.price!=null">
                {{scope.row.price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
          <el-table-column label="小计" align="center"  prop="money"  >
            <template slot-scope="scope">
            <div v-if="scope.row.money!=null">
                {{scope.row.money.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {getUserVideoItem} from "@/api/course/userVideo";
  export default {
    name: "userVideoDetails",
    data() {
      return {
        packageTypeOptions: [],
        diseaseTypeOptions: [],
        packageSubTypeOptions:[],
        item:null,
        packageItem:null,
        productJson:[],
        courseIdOptions: [],
        // 视频状态 1：草稿，2：待审核，3：发布字典
        statusOptions: [],
        // 是否展示字典
        orOptions: [],
        // 来源 1 用户 2 后台字典
        sourceOptions: [],
        // 删除标志字典
        isDelOptions: [],
        isAuditOptions:[],
        specShowOptions:[]
      }
    },
    created() {
      this.getDicts("sys_spec_show").then(response => {
        this.specShowOptions = response.data;
      });
      this.getDicts("sys_user_video_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("sys_company_or").then(response => {
        this.orOptions = response.data;
      });
      this.getDicts("sys_user_video_cate").then(response => {
        this.cateOptions = response.data;
      });
      this.getDicts("sys_video_source").then(response => {
        this.sourceOptions = response.data;
      });
      this.getDicts("sys_company_isaudit").then(response => {
        this.isAuditOptions = response.data;
      });
      this.getDicts("sys_company_or").then(response => {
        this.isDelOptions = response.data;
      });
      this.getDicts("sys_package_type").then(response => {
        this.packageTypeOptions = response.data;
      });
      this.getDicts("sys_package_sub_type").then(response => {
        this.packageSubTypeOptions = response.data;
      });
      this.getDicts("sys_prescribe_disease_type").then(response => {
        this.diseaseTypeOptions = response.data;
      });
    },
    methods: {
      getDetails(videoId) {
          console.log(videoId);
          this.item=null;
          this.packageItem=null;
          getUserVideoItem(videoId).then(response => {
            this.item = response.data;
            if(response.data.url!=null&&response.data.url!=''){
                this.item.url = response.data.url;
            }
            if(response.package!=null&&response.package!=''){
                this.packageItem = response.package;
                this.productJson=JSON.parse(response.package.productJson);
            }
            
          });
      },
    }
  }
</script>

<style>
  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }

</style>
