<script setup lang="ts">
import { checkPermission } from '@/utils/permission'
import { ElMessage } from 'element-plus'
import { setDownload } from '../api'
const props: any = defineProps({
  data: {
    type: Object
  },
  id: {
    type: String
  }
})
const form: any = ref({})
watch(
  () => props.data,
  value => {
    form.value = value
  }
)

const add0 = (m: number) => {
  return m < 10 ? '0' + m : m
}
const format = (n: number) => {
  const time = new Date(n)
  const y = time.getFullYear()
  const m = time.getMonth() + 1
  const d = time.getDate()
  const h = time.getHours()
  const mm = time.getMinutes()
  const s = time.getSeconds()
  return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s)
}
const listOptions = computed(() => {
  return {
    data: props.data.examinations,
    columns: [
      {
        label: '试卷名称',
        prop: 'paper_title',
        align: 'center'
      },
      {
        label: '组卷模式',
        prop: 'paper_type',
        computed: (row: any) => {
          return row.row.paper_type === 1 ? '选题组卷' : '自动组卷'
        },
        align: 'center'
      },
      {
        label: '试卷用途',
        prop: 'paper_uses',
        computed: (row: any) => {
          if (row.row.paper_type === 1) {
            return '考试'
          } else if (row.row.paper_type === 2) {
            return '课后作业'
          } else if (row.row.paper_type === 3) {
            return '课程测试'
          }
        },
        align: 'center'
      },
      { label: '总分', prop: 'paper_total_score', align: 'center' },
      { label: '及格分数', prop: 'pass_score', align: 'center' }
    ]
  }
})
const liveOptions = computed(() => {
  return {
    data: props.data.meetings,
    columns: [
      { label: '会议code', prop: 'meeting_code', align: 'center' },
      { label: '主题', prop: 'subject', align: 'center' },
      {
        label: '开始时间',
        prop: 'start_time',
        align: 'center',
        computed({ row }: any) {
          if (row.start_time === undefined) {
            return '-'
          } else {
            return format(parseInt(row.start_time) * 1000)
          }
        }
      },
      {
        label: '结束时间',
        prop: 'end_time',
        align: 'center',
        computed({ row }: any) {
          if (row.end_time === undefined) {
            return '-'
          } else {
            return format(parseInt(row.end_time) * 1000)
          }
        }
      }
    ]
  }
})
const courseDataOptions = computed(() => {
  return {
    data: props.data.information,
    columns: [
      { label: '资料名称', prop: 'name', slots: 'table-name' },
      { label: '能否下载', prop: 'can_download', slots: 'table-status' },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
    ]
  }
})
const imgUrl = (val: any) => {
  if (val.type === 'zip') {
    return '/center_resource/zip_img.png'
  } else if (val.type === 'pdf') {
    return '/center_resource/pdf_img.png'
  } else if (val.type === 'png' || val.type === 'jpeg' || val.type === 'jpg') {
    return '/center_resource/jpg_img.png'
  } else if (val.type === 'xls' || val.type === 'xlsx') {
    return '/center_resource/xls_img.png'
  } else if (val.type === 'docx' || val.type === 'doc') {
    return '/center_resource/docx_img.png'
  } else if (val.type === 'mp4') {
    return '/center_resource/mp4_img.png'
  } else if (val.type === 'mp3') {
    return '/center_resource/mp3_img.png'
  } else if (val.type === 'rar') {
    return '/center_resource/rar_img.png'
  } else if (val.type === 'pptx' || val.type === 'ppt') {
    return '/center_resource/pptx_img.png'
  }
}
const handleChangeStatus = (row: any) => {
  if (row.id !== undefined) {
    const params: any = {
      course_id: props.id,
      information_id: row.id,
      can_download: row.can_download
    }
    setDownload(params).then(() => {
      ElMessage.success('设置课程资料能否下载成功')
    })
  }
}
const handleDetail = (row: any) => {
  window.open(row.url)
}
</script>
<template>
  <div class="info-box">
    <div class="info_title">课程授权信息</div>

    <div class="bottom-info">
      <div class="other-info">
        <div class="item">
          <img src="/center_resource/course-view-icon11.png" />
          <div>
            <div class="label">课程所属部门</div>
            <div class="value">{{ props.data.organ_id_name }}</div>
          </div>
        </div>
        <div class="item">
          <img src="/center_resource/course-view-icon12.png" />
          <div>
            <div class="label">课程公开信息</div>
            <div class="value">
              <p>
                {{ props.data.department_public_name }}
              </p>
              <p>
                {{ props.data.platform_public_name }}
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="/center_resource/course-view-icon15.png" />
          <div>
            <div class="label">课程授权信息</div>
            <div class="value_list" v-if="props.data.auth_departments && props.data.auth_departments.length > 0">
              <el-popover trigger="hover" placement="right">
                <template #reference>
                  <div class="value">
                    <p>{{ props.data.auth_departments[0].department_name }}</p>
                    <p v-if="props.data.auth_departments.length > 1">
                      {{ props.data.auth_departments[1].department_name }}
                      <span v-if="props.data.auth_departments.length > 2">...</span>
                    </p>
                  </div>
                </template>
                <div class="value" v-for="(item, index) in props.data.auth_departments" :key="index">
                  {{ item.department_name }}
                </div>
              </el-popover>
            </div>
            <div class="value" v-else>暂无</div>
          </div>
        </div>
      </div>
    </div>
    <el-form ref="ruleFormRef" label-position="top" :model="form" style="width: 100%; margin-top: 30px">
      <el-form-item label="课程简介与描述：">
        <div class="editor" v-html="form.represent || '暂无'"></div>
      </el-form-item>
      <el-form-item label="课程小论文：">
        <div v-html="form.essay || '暂无'" class="editor"></div>
      </el-form-item>
      <el-form-item label="前期准备与预备知识：">
        <div v-html="form.previous_preparation || '暂无'" class="editor"></div>
      </el-form-item>
      <el-form-item label="授课目标：">
        <div v-html="form.target || '暂无'" class="editor"></div>
      </el-form-item>
      <el-form-item label="课程考试：">
        <AppList v-bind="listOptions" style="width: 100%"> </AppList>
      </el-form-item>
      <el-form-item label="周期性直播：">
        <AppList v-bind="liveOptions" style="width: 100%"> </AppList>
      </el-form-item>
      <el-form-item label="课程资料：">
        <AppList v-bind="courseDataOptions" style="width: 100%">
          <template #table-name="{ row }">
            <img :src="imgUrl(row)" alt="" style="width: 13px; height: 100%; margin-right: 13px" />
            <span class="node_type">资料</span>
            <span class="node_title">{{ row.name }}</span>
          </template>
          <template #table-status="{ row }">
            <el-switch
              size="large"
              v-model="row.can_download"
              active-value="1"
              inactive-value="0"
              inline-prompt
              style="--el-switch-on-color: #aa1941"
              @click="handleChangeStatus(row)"
              :disabled="!checkPermission('v1-course-set-course-information-can-download')">
            </el-switch>
          </template>
          <template #table-operate="{ row }">
            <el-button plain @click="handleDetail(row)">查阅</el-button>
          </template>
        </AppList>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.info-box {
  // background: #f7f7f7;
  background: #fff;
  border-radius: 10px;
  padding: 25px 17px;
}
.info_title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  opacity: 1;
}
.bottom-info {
  display: flex;
  padding-top: 20px;
  .other-info {
    width: 100%;
    height: 140px;
    background: rgba(244, 244, 244, 0.39);
    border-radius: 6px;
    display: flex;
    justify-content: space-around;
    padding: 27px 55px 24px 32px;
    box-sizing: border-box;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px dashed #ddb67c;
      width: 33%;

      &:last-child {
        border: none;
      }
      img {
        width: 52px;
        height: 52px;
        display: block;
      }
      .label {
        padding-top: 10px;
        padding-bottom: 13px;
        text-align: left;
        margin-left: 15px;
        font-size: 14px;
        line-height: 100%;
        color: #999999;
      }

      .value {
        font-size: 14px;
        line-height: 1.5;
        color: #333333;
        margin-bottom: 10px;
        text-align: left;
        margin-left: 15px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
      }
    }
  }
  .lecturer-list {
    width: 230px;
    display: flex;
    flex-wrap: wrap;
    // justify-content: center;
    .item {
      padding-top: 25px;
      width: 115px;
      .avatar {
        width: 56px;
        height: 56px;
        background-size: cover;
        border-radius: 50%;
        margin: 0 auto;
      }
      .name {
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 100%;
        color: #333333;
        margin-top: 10px;
      }
    }
  }
}
.editor {
  width: 100%;
  min-height: 50px;
  max-height: 100px;
  background: rgb(239, 239, 239);
  overflow-y: auto;
  text-indent: 2em;
  line-height: 1.5;
  padding: 20px 20px;
  color: #333;
}
</style>
