<template>
  <div>
    <xy-dialog ref="dialog" :width="50" :is-show.sync="isShow" :type="'form'" title="查看课程" :form="form">
      <template v-slot:settings>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold;width:0;display: none;">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style="flex-grow: 1;">
            <div class="content">
              <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item :span="2">
                  <template slot="label">
                    课程名称
                  </template>
                  {{showform.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    课程体系
                  </template>
                  {{showform.type_detail?showform.type_detail.name:''}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    开课日期
                  </template>
                  {{formatVal(showform.start_date)}}至{{formatVal(showform.end_date)}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    报名日期
                  </template>
                  {{formatVal(showform.sign_start_date)}}至{{formatVal(showform.sign_end_date)}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    课程状态
                  </template>
                  <div v-for="item in course_date">
                    <el-tag :type="item.type" v-if="showform.date_status===item.value">{{item.value}}</el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    发布状态
                  </template>
                  <div v-for="item in course_status">
                    <el-tag :type="item.type" v-if="showform.status===item.id">{{item.value}}</el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    开课人数
                  </template>
                  {{showform.total}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    是否排课
                  </template>
                  <div v-for="item in false_or_true">
                    <el-tag :type="item.type" v-if="showform.is_arrange===item.id">{{item.value}}</el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    是否缴费
                  </template>
                  <div v-for="item in false_or_true">
                    <el-tag :type="item.type" v-if="showform.is_fee===item.id">{{item.value}}</el-tag>
                  </div>
                </el-descriptions-item>

                <el-descriptions-item :span="2">
                  <template slot="label">
                    课程封面
                  </template>
                  <div v-if="showform.image_id">
                    <el-image style="width: 100px; " :src="showform.image.url"></el-image>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item :span="2">
                  <template slot="label">
                    课程宣传页
                  </template>
                    <el-image v-for="item in showform.publicize" style="width: 100px;" :src="item.url"></el-image>
                </el-descriptions-item>
                <el-descriptions-item :span="2">
                  <template slot="label">
                    课程简介
                  </template>
                  <div v-html="showform.content?showform.content:''"></div>
                </el-descriptions-item>

              </el-descriptions>
            </div>
          </div>
        </div>
      </template>


      <template v-slot:footerContent>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;' @click="isShow=false">关闭</el-button>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    show
  } from "@/api/course/index.js"
  import myMixins from "@/mixin/selectMixin.js";
  export default {
    mixins: [myMixins],
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'show',
        id: '',
        form: {
          settings: '',
        },
        showform: {}
      }
    },
    created() {},
    methods: {

      getDetail() {
        show({
          id: this.id,
          show_relation: ['type_detail', 'image']
        }).then(res => {
          this.showform = res
        })
      },
      formatVal(val) {
        if (val) {
          return val
        } else {
          return ''
        }
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'show') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.showform = {}
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .settings {
    flex-basis: 100%;
  }

  ::v-deep .el-descriptions-item__label {
    width: 15%;
  }

  .content {
    // &>div {
    //   display: flex;
    //   font-size: 18px;

    //   >div:first-child {
    //     width: 180px;
    //     text-align: right;
    //     font-weight: bold;
    //   }
    // }

    .pic {
      width: 150px;
      height: 150px;
    }

    .top_bottom {
      flex-direction: column;
    }
  }
</style>
