<template>
  <div class="u-page">
      <div style="padding: 2px 0px 10px 0px;">
           <el-row :gutter="10">
          <!-- <el-col :span="6">
              <el-cascader placeholder="资源归属" clearable v-model="resOwner" :props="defaultProps" :options="resOwnerListMap"></el-cascader>
          </el-col> -->
           <el-col :span="6">
            <el-cascader placeholder="内容分类" clearable v-model="sysTypeList" :props="defaultTypeProps" :options="sysTypeListMap"></el-cascader>
          </el-col>
          <el-col :span="4">
              <el-input placeholder="创建人" v-model="params.createUser" clearable></el-input>
          </el-col>
          <el-col :span="4">
             <el-input placeholder="名称" v-model="params.keyword" clearable></el-input>
          </el-col>
          <!--
          <el-col :span="4">
              <el-select v-model="params.publish" placeholder="是否发布" clearable>
                <el-option label="全部" :value="null"></el-option>
                <el-option label="已发布" :value="true"></el-option>
                <el-option label="未发布" :value="false"></el-option>
              </el-select>
          </el-col>
          -->
           <el-col  :span="8">
              <el-button type="primary"  @click="getseatch();"  icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button>
          </el-col>
        </el-row>

    </div>
    <!-- <div style="padding-left">

    </div> -->
    <el-table :data="pageData" border stripe>
     <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="名称" prop="name" show-overflow-tooltip width="200px">
        <template slot-scope="scope">
           <span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容分类" prop="sysType" sortable width="240px">
        <template slot-scope="scope">
          <span v-if="scope.row.sysType1 != ''">{{sysTypeName(scope.row.sysType1)}}</span>
          <span v-if="scope.row.sysType2 != ''">/{{sysTypeName(scope.row.sysType2)}}</span>
          <span v-if="scope.row.sysType3 != ''">/{{sysTypeName(scope.row.sysType3)}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="资源归属" sortable prop="author" width="240px">
        <template slot-scope="scope">
          <span>{{resOwnerName(scope.row.resOwner1)}}</span>
          <span v-if="scope.row.resOwner2 != ''">/{{resOwnerName(scope.row.resOwner2)}}</span>
          <span v-if="scope.row.resOwner3 != ''">/{{resOwnerName(scope.row.resOwner3)}}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="授课方式" prop="type" width="120px">
        <template slot-scope="scope">
          {{ courseType(scope.row.type)}}
        </template>
      </el-table-column> -->
      <el-table-column label="状态" prop="status" width="120px">
        <template slot-scope="scope">
          <!-- 1，未提交 2.已提交 = 未审核 5 已审核 3.不通过-->
          <span v-if="scope.row.status == 1">未提交</span>
          <span v-if="scope.row.status == 2">待审核</span>
          <span v-if="scope.row.status == 5">已审核</span>
          <span v-if="scope.row.status == 3">审核未通过</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="sysCreateBy"></el-table-column>
      <el-table-column label="创建时间" prop="sysCreateTime" width="200px" show-overflow-tooltip></el-table-column>
      <el-table-column label="邀请审核" prop="auditInfo" width="150px">
        <template slot-scope="scope">{{scope.row.auditInfo}}</template>
      </el-table-column>
      <el-table-column label="操作" width="100px" fixed="right">
        <template slot-scope="scope">
          <el-button @click="toExamine(scope.row)" type="text" >审核</el-button>
          <el-button @click="toPreview(scope.row)" type="text" >预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pageData.length > 0" style="text-align: center;margin-top:70px">
        <el-pagination
         background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.count"
      ></el-pagination>
    </div>
    <div style="height: 100px;"></div>
    <!-- 审核 -->
    <el-dialog title="审核" :visible.sync="dialogVisible" width="900px" custom-class="g-dialog" @close="examin={}">
      <div v-show="expandDetails">
        <div v-if="examin.detailType == 10"><auditCourse1 :showTest="true" :isDetails="false" :id="examin.examineId"></auditCourse1></div>
        <div v-if="examin.detailType == 20"><auditCourse2 :showTest="true" :isDetails="false" :id="examin.examineId"></auditCourse2></div>
      </div>
      <div style="border-top: 1px solid #eee; background-color: #eee; padding: 5px;">
        <div style="text-align: center;margin-bottom: 10px;">
          <el-button @click="expandDetails = !expandDetails">{{expandDetails? '详情折叠':'详情展开'}}</el-button>
          <!-- <el-button @click="isExamine = 1">直接审核</el-button> -->
          <!-- <el-button @click="isExamine = 2">邀请审核</el-button> -->
        </div>

        <el-form label-width="80px" v-if="isExamine === 1">
          <el-form-item label="审核">
            <el-radio-group v-model="auditInfo.pass">
              <el-radio :label="true">通过</el-radio>
              <el-radio :label="false">不通过</el-radio>
            </el-radio-group>
            <span v-if="auditInfo.pass" style="margin-left: 50px; color: #1381e8; ">审核通过提交后同时会发布课程</span>
          </el-form-item>
          <el-form-item label="审核意见"><el-input v-model="auditInfo.remark" type="textarea" rows="3"></el-input></el-form-item>
        </el-form>
        <div v-if="isExamine === 2">
          <div style="display: flex;justify-content:flex-start;padding-bottom: 10px;">
            <div style="padding: 0px 5px;"><el-input placeholder="姓名" v-model="inviteTeacher.params.name"></el-input></div>
            <div style="padding: 0px 5px;"><el-button @click="findTeachers()" icon="el-icon-search" type="primary" >搜索</el-button></div>
          </div>
          <div>
             <el-table v-if="inviteTeacher.list.length !== 0" max-height="500" border :data="inviteTeacher.list" style="width: 100%;margin-bottom: 10px;">
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="code" label="工号"></el-table-column>
              <el-table-column prop="orgInfo" label="组织"></el-table-column>
              <el-table-column prop="orgInfo" label="选择">
                <template slot-scope="scope">
                  <el-radio v-model="scope.row.checked">选择</el-radio>
                </template>
              </el-table-column>
            </el-table>
            <div>审核记录：</div>
            <el-table max-height="500" border :data="inviteTeacher.list" style="width: 100%;">
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="code" label="工号"></el-table-column>
              <el-table-column prop="orgInfo" label="组织"></el-table-column>
               <el-table-column prop="type" label="审核状态"></el-table-column>
              <el-table-column prop="text" label="备注"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div v-if="audit.length > 0" style="border-top: 1px solid #eee; background-color: #eee; padding: 10px 20px;margin-top: 10px;">
        <div style="line-height: 36px;">
          <div style="display:flex;">
            <div style="flex:1;"><span class="audit-text">邀请人：</span>{{audit.sysCreateBy}}</div>
            <div style="flex:1;"><span class="audit-text">邀请时间：</span>{{audit.sysCreateTime}}</div>
          </div>
          <p><span class="audit-text">邀请说明：</span>{{audit.auditRemark}}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;examin={}">取 消</el-button>
        <el-button :loading="btnLoading" type="primary" @click="examineData(true)">提交</el-button>
        <!-- <el-button type="primary" @click="examineData(true)">提交并发布</el-button> -->
      </span>
    </el-dialog>
    <el-dialog title="课程详情" :visible.sync="showDetails" @close="examin = {};" width="900px" custom-class="g-dialog">
      <!-- <div v-show="expandDetails"> -->
        <div v-if="examin.detailType == 10"><auditCourse1 :showTest="true" :isDetails="false" :isShow="false" :id="examin.examineId"></auditCourse1></div>
        <div v-if="examin.detailType == 20"><auditCourse2 :showTest="true" :isDetails="false" :isShow="false" :id="examin.examineId"></auditCourse2></div>
      <!-- </div> -->

      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetails = false;examin = {};">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import courseForm from '@/components/Course/courseForm.vue';
import manager from '@/components/Study/manager.vue';
import QRCode from 'qrcodejs2';
import auditCourse1 from '@/components/Course/auditCourse1.vue';
import auditCourse2 from '@/components/Course/auditCourse2.vue';
import adminPage from '@/components/Administration/adminPage.vue';
import {courseType} from '../../utils/tools.js';
import apiType from '../../api/modules/type.js';
import apiCourse from '../../api/modules/course.js';
import { mapGetters,mapActions} from 'vuex';
export default {
  name: 'manageCourse',
  components: {courseForm, manager, auditCourse1, auditCourse2,adminPage },
  computed: {
       ...mapGetters(['resOwnerMap','sysTypeMap']),
  },
  data() {
    return {
      loading: true,
      btnLoading:false,
      sysTypeList: [],
      sysTypeListMap:[],
      resOwnerListMap:[],
      showDetails:false,
      audit:{},
      examin:{
       detailType: '',
       examineId: '',
       auditId:'',
       examineName: '',
      },
      paperJson:{items:[]},
      courseType: courseType,
      page: {
        pageIndex: 1,//第几页
        pageSize: 10, // 每页多少条
        count: 0
      },
      resOwner: [],
      defaultProps:{
        value: 'code',
        label: 'name',
      },
      defaultTypeProps:{
        value: 'id',
        label: 'name',
      },
      manageStudyData: {},
      expandDetails: false,
      qrcode: '',
      isExamine: 1,
      auditInfo: {
        pass: true,
        remark: ''
      },
      detailType: 1,
      dialogVisible: false,
      qrcodeShow: false,
      currentPage4: 4,
      inviteTeacher: {
        //邀请
        dlgShow: false,
        params: { name: '' },
        list: []
      },
      manageStudy: {
        dlgShow: false
      },
      params: {},
      pageData:[],
      courseChooseShow: false,
      courseChooseId: '',
      weike: {
        onlyRequired: false,
        dlgShow: false,
        fileType: '',
        info: {
          shebei: ''
        }
      },
      biaoke: {
        dlgShow: false
      },
      recommend: {
        dlgShow: false,
      },
      catalogs: {
        addNewZhang: false,
        addNewCell: false,
      }
    };
  },
  mounted() {
    this.searchData();
    this.getResOwnerTree().then(rs=>{
      this.resOwnerListMap=rs;
    });
    this.getSysTypeTree().then(rs=>{
      this.sysTypeListMap=rs;
    })
    this.loadResOwners();
    this.loadSysTypes();
  },
  methods: {

   getseatch(){
     this.params.pageIndex= 1;
     this.searchData();
   },
    reset(){
      this.resOwner = ''
      this.params.sysType = ''
      this.params.createUser = ''
      this.params.keyword = ''
      this.params.type = ''
      this.params.publish = ''
      this.sysTypeList = [];
      this.params.sysType1 = '';
      this.params.sysType2 = '';
      this.params.sysType3 = '';
      this.params.pageIndex= 1;
	    this.searchData();
    },
    ...mapActions({
      getResOwnerTree:'resOwner/getResOwnerTree',
      loadResOwners:'resOwner/loadResOwners',
      getSysTypeTree:'sysType/getSysTypeTree',
      loadSysTypes:'sysType/loadSysTypes'
    }),
    resOwnerName(code){
      if(code==''){return '';}
      return this.resOwnerMap.get(code);
    },
    sysTypeName(code){
      if(code==''){return '';}
      return this.sysTypeMap.get(code);
    },
    //预览跳转页面
    toPreview(row) {
     if(row.type == 10) {

        window.open(`${this.webBaseUrl}/course/microPreview?id=${row.id}`);
     } else{
        window.open(`${this.webBaseUrl}/course/rePreview?id=${row.id}`);
     }

    },
     // 直接审核
    examineData(flag) {
      if(this.isExamine == 1) {
         let params = {
          auditId:this.examin.auditId,
          from:2,
          courseId:this.examin.examineId,//课程id,
          title:this.examin.examineName,//课程的名称,
          pass: this.auditInfo.pass,//Boolean 是否通过,
          remark: this.auditInfo.remark// 备注
        }
        this.btnLoading=true;
        if(flag){
          apiCourse.auditAndPublish(params).then(res=>{
            if(res.status === 200) {
              this.$message.success('操作成功！');
              this.dialogVisible = false;
              this.searchData();
              this.$store.dispatch('refrashReviewed');
             }else{
                 this.$message.error(res.message);
             }
             this.btnLoading=false;
          })
        }else{
          apiCourse.audit(params).then(res=>{
            if(res.status === 200) {
              this.$message.success('操作成功！');
              this.dialogVisible = false;
              this.searchData();
              this.$store.dispatch('refrashReviewed');
             }else{
                 this.$message.error(res.message);
             }
             this.btnLoading=false;
          })
        }

      } else {
        this.$message.warning('暂未开放！');
      }

    },
      // 课程查询
   async searchData() {

     this.params.resOwner1 = this.resOwner[0];
     this.params.resOwner2 = this.resOwner[1];
     this.params.resOwner3 = this.resOwner[2];
     this.params.status = 2;
     this.params.pageIndex = this.page.pageIndex;
     this.params.pageSize = this.page.pageSize;
     this.params.sysType1 = this.sysTypeList[0];
     this.params.sysType2 = this.sysTypeList[1];
     this.params.sysType3 = this.sysTypeList[2];
      try {
        this.loading = true;
        const {result, status,message} = await apiCourse.teacherAuditList(this.params);
        if(status === 200) {

          this.pageData = result.list;
          this.page.count = result.count;
        } else {
          this.$message.error(message)
        }
         this.loading = false;
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
     viewTopic(row) {
      this.examin.detailType = row.type;
      this.examin.examineId = row.id;
      this.examin.examineName = row.name;
      this.showDetails = true;
    },
    editCurriculum(row) {
      this.editData = row;
    },
    jumpDetails() {
      // 跳转打开新页面
       let routeData = this.$router.resolve({ path: '/course/micro'});
       window.open(this.webBaseUrl+routeData.href, '_blank');
    },
    toExamine(row) {
      this.audit = {};
      this.examin.auditId=row.auditId;
      this.examin.detailType = row.type;
      this.examin.examineId = row.id;
      this.examin.examineName = row.name;
      this.auditInfo.remark = '';
      this.dialogVisible = true;
      apiCourse.getAuditInfo({courseId:row.id}).then(res=>{
         if(res.status == 200) {
           if(res.result.length > 0) {
             this.audit = res.result[0];
           }
         } else {
           this.$message.error(res.message);
         }
      })
    },
    enSure() {
      // 确认事件
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
      this.searchData();
    },
    handleCurrentChange(val) {
     this.page.pageIndex = val;
      this.searchData();
    },
    chooseInvite(row) {
      //邀请老师审核
      this.inviteTeacher.dlgShow = true;
    },
    findTeachers() {
      this.inviteTeacher.list = [];
    },
    showQrimage() {
      this.qrcodeShow = true;
      // 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
      this.qrcode = 'https://yuchengkai.cn/docs/frontend/#typeof';
      // 使用$nextTick确保数据渲染
      this.$nextTick(() => {
        this.crateQrcode();
      });
    },
    //    creatQrCode() {

    // },
    // 生成二维码
    crateQrcode() {
      this.qr = new QRCode('qrcode', {
        width: 150,
        height: 150, // 高度
        text: this.qrcode // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode() {
      this.$refs.qrcode.innerHTML = '';
    },
    showManageStudy(row) {
      this.manageStudyData = row;
      this.manageStudy.dlgShow = true;
    },
    releaseData(row) {
      this.$confirm('正在发布考试, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.pageData.list.forEach((item, index) => {
            if (item.id === row.id) {
              item.collectNumber = 1;
            }
          });
          this.$message({
            type: 'success',
            message: '发布成功!'
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    showChooseCourse() {
      this.courseChooseShow = true;
    },
    chooseCourseType(item, idx) {
      this.courseChooseId = item.id;
    },
    toInputCourse() {
      if (this.courseChooseId == '1') {
        this.showWeike();
      } else if (this.courseChooseId == '2') {
        this.showBiaoke();
      }
      this.courseChooseShow = false;
    },
    newHandleClick() {},
    showRecords(item) {
      this.recommend.dlgShow = true;
    },
    showWeike() {
      this.weike.dlgShow = true;
    },
    showBiaoke() {
      this.biaoke.dlgShow = true;
    },
    setTop(item, idx) {
      let msg = '已设置置顶';
      if (item.isTop) {
        item.isTop = false;
        msg = '已取消置顶';
      } else {
        item.isTop = true;
      }
      this.$message({ message: msg, type: 'success', offset: 50 });
    },
    delItem(item, idx) {
      this.$confirm('您确定要删除所选课程吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.items.splice(idx, 1);
          this.$message({ type: 'success', message: '删除成功!', offset: 50 });
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除', offset: 50 });
        });
    },
    showAddCatalogZhang(bal) {
      this.catalogs.addNewZhang = bal;
    },
    saveNewCatalogZhang() {
      this.catalogs.addNewZhang = false;
    },
    filterType(value, row) {
      return row.type === value;
    },
    filterStatus(value, row) {
      return row.status === value;
    }
  }
};
</script>

<style lang="scss" scoped>
.audit-text{
    font-size: 14px;
    color: #606266;
    font-weight: 700;
}
.course-types {
  display: flex;
  justify-content: center;
  padding: 15px;

  .course-type {
    margin: 10px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    img {
      width: 110px;
      height: 110px;
    }
    .info {
      padding-top: 10px;
    }
  }
  .choose {
    border: 2px solid #008000;
  }
}

.el-aside {
  padding: 5px 10px;
}
.cctree {
  .cctree-chapter {
    .cctree-chapter-name {
      border-bottom: 1px solid #dddddd;
    }
    .cctree-chapter-cells {
      margin: 0px;
      list-style-type: circle;
      padding: 0px;
      .cctree-chapter-cell {
        line-height: 30px;
        list-style-type: circle;
        padding-left: 25px;
      }
    }
  }
}
</style>
