<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>
                  <template slot="label">
                    课程名称
                  </template>
                  {{showform.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    开课日期
                  </template>
                  {{showform.start_date}}至{{showform.end_date}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    类别
                  </template>
                  <div v-for="item in course_type">
                    <div v-if="showform.type===item.id">{{item.value}}</div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    状态
                  </template>
                </el-descriptions-item>
                <el-descriptions-item :span="2">
                  <template slot="label">
                    课程封面
                  </template>
                  <!-- <img class="pic" src="../../../assets/logo-mini.png"></img> -->
                </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-item>
                  <template slot="label">
                    开课人数
                  </template>
                  {{showform.total}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    所在班级
                  </template>
                  {{showform.class}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    面向学员的企业性质
                  </template>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    所属行业
                  </template>
                </el-descriptions-item>

                <el-descriptions-item :span="2">
                  <template slot="label">
                    课程设置
                  </template>
                </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: ['image']
        }).then(res => {
          this.showform = res
        })
      }
    },
    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>
