<template>
  <div class="content-max-width">
    <breadcrumb class="content-max-width crumb" :data="crumbData" />
    <div class="train-detail-box content-max-width">
      <div class="content-left">
        <div class="title">{{ detail.title }}</div>
        <div class="item-box">
          <img :src="detail.imgUri" />
          <div class="right-content">
            <div class="des-box">
              <p>活动类型：技能培训</p>
              <p>培训形式：{{ detail.form || '线上直播' }}</p>
              <p>培训地点：{{ detail.addr }}</p>
              <p>培训时间：{{ detail.time }}</p>
            </div>
            <router-link :to="{ path: '/train/form', query: { id: detail.id } }">
              <div class="detail-btn">立即报名</div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="content-card" v-if="detail.excerpt != null">
        <div class="tit">最新会议</div>
        <div class="text" v-html="detail.excerpt"></div>
      </div>
    </div>
    <div class="new-contents content-max-width">
      <div class="p">
        <div class="name">会议简介：</div>
        <div class="cont">
          <template v-if="detail.desc"><div v-html="detail.desc"></div></template>
          <template v-else>
            通过对本证书试点院校的教师和企业师资进行集中培训、考核认证，旨在培养一支实践技能和专业知识搭配合理的“双师型”教师队伍，成绩优异的校企师资可列入本证书师资库，具备本证书实践教学、培训、考核评价资质，承担全国证书的考培工作。
          </template>
        </div>
      </div>
      <div class="p" v-if="detail.payment">
        <div class="name">培训费用：</div>
        <div class="cont">{{ detail.payment }}</div>
      </div>
      <div class="p" v-if="detail.address">
        <div class="name">培训地点：</div>
        <div class="cont">{{ detail.address }}</div>
      </div>
      <div class="p">
        <div class="name">日程安排：</div>
        <div class="cont" v-html="detail.content"></div>
      </div>
      <div class="p">
        <div class="name">培训QQ群：</div>
        <div class="cont">{{ detail.qq }}</div>
      </div>
      <div class="p">
        <div class="name">联系人：</div>
        <div class="cont">{{ detail.contact }}</div>
      </div>
      <div class="p">
        <div class="name">联系电话：</div>
        <div class="cont">{{ detail.contact_number }}</div>
      </div>
      <!-- <div class="pdf">《金融产品数字化营销中级》 </div> -->
      <!-- <div class="pdf">《金融产品数字化营销中级》 </div> -->
    </div>
  </div>
</template>
<script>
import breadcrumb from '@/components/breadcrumb.vue'
import datalist from '@/assets/data.js'

export default {
  components: { breadcrumb },
  data() {
    return {
      datalist,
      crumbData: [{ path: '/', name: '首页' }, { name: '技能培训' }],
    }
  },
  computed: {
    detail() {
      const id = this.$route.query.id
      return this.datalist.find((item) => item.id === id) || {}
    },
  },
}
</script>
<style lang="scss" scoped>
.content-max-width {
  width: 1112px;
  margin: 0 auto;
}
.train-detail-box {
  padding-top: 12px;
  .title {
    line-height: 50px;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    font-weight: bold;
    color: #c01540;
  }
}

.item-box {
  padding: 24px 0 0;
  // border-bottom: 1px solid #eee;
  display: flex;
  img {
    width: 200px;
    height: 100px;
    display: block;
  }
  .right-content {
    margin-left: 24px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #c01540;
      line-height: 25px;
    }
    .des-box {
      // margin-top: 24px;
      p {
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        margin-bottom: 8px;
        &.ind {
          text-indent: 2em;
        }
      }
    }
    .detail-btn {
      color: #fff;
      text-align: center;
      line-height: 36px;
      width: 96px;
      height: 36px;
      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
      border-radius: 4px;
      margin-top: 8px;
    }
  }
}
.content-card {
  margin-top: 20px;
  margin-left: auto;
  width: 336px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
  height: auto;
  height: max-content;
  .tit {
    height: 58px;
    line-height: 58px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #222222;
    line-height: 58pxpx;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .text {
    padding: 10px 20px 20px;
    font-size: 16px;
    color: #c01540;
    line-height: 22px;
  }
  .btn-boxs {
    height: 56px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    .btns {
      line-height: 36px;
      text-align: center;
      width: 62px;
      height: 36px;
      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
      border-radius: 4px;
      margin-left: auto;
      margin-right: 24px;
      color: #fff;
    }
  }
}
.crumb {
  padding-top: 24px;
}
.new-contents {
  padding-bottom: 36px;
  .p {
    display: flex;
    margin-top: 16px;
    .name {
      width: 98px;
      height: 20px;
      font-size: 14px;
      font-weight: bold;
      color: #262626;
      line-height: 20px;
      text-align: right;
    }
    .cont {
      flex: 1;
      font-size: 14px;
      color: #7d7d7d;
      line-height: 20px;
    }
  }
  .pdf {
    margin-top: 16px;
    font-size: 14px;
    color: #0053c6;
    line-height: 20px;
    text-indent: 1.5em;
  }
  ::v-deep table {
    color: #7d7d7d !important;
    border-color: #7d7d7d !important;
    td {
      padding: 10px;
      line-height: 24px;
    }
  }
}
</style>
