<template>
  <div class="fullHeight">
    
    <div class="fullHeight" v-if="pageType == 'list'" style="position:relative">
      <!--courseManagement 课程管理 -->
      <el-page-header style="margin-bottom:15px" v-if="$route.path.indexOf('/project/')==-1"
        @back="goBack2"
        :content="parentName+' /' + $t('message.safetyEducation.courseManagement') "
        class="backText"
      ></el-page-header>
       <!-- <el-tabs v-model="activeName" @tab-click="getList" v-if="$route.path.indexOf('/project/')!=-1">
        <el-tab-pane label="企业课程" name="company"></el-tab-pane>
        <el-tab-pane label="项目课程" name="project"></el-tab-pane>
      </el-tabs> -->
       <!-- v-if="$route.path.indexOf('/project/')==-1" -->
      <div class="classificationBox" v-else>
        <span :class="{'active':parentId==''}" @click="parentId='';getList()">
          <!-- 全部 -->
          {{ $t('message.safetyEducation.whole') }}
          </span>
        <span :class="{'active':parentId==item.id}" v-for="(item,index) in classifyList" :key="index" @click="parentId=item.id;getList()">{{item.classifyName}}
          <i class="el-icon-error" v-if="activeName=='project'" @click.stop="deleteClassifyFn(item)"></i>
        </span>
        <span class="addTypeBtn" @click="addClassifyFn" v-if="$route.path.indexOf('/project/')==-1||activeName=='project'"> <i class="el-icon-plus"></i>
        <!-- 新增类型 -->
        {{ $t('message.safetyEducation.newType') }}
        </span>
      </div>
      <div v-show="activeName=='project'||$route.path.indexOf('/project/')==-1" style="margin: 10px 15px;position:absolute;right:20px;top:-10px">
        <el-button type="primary" size="medium" @click="addFn"
          >
          <!-- 新增课程 -->
          {{ $t('message.safetyEducation.newCourses') }}
          </el-button
        >
        <el-button type="warning" plain size="medium" @click="refresh">{{
          $t("message.alarmValueSet.refresh")
        }}</el-button>
      </div>
      <div class="table_wrap">
        <div class="listContent">
          <vue-scroll>
            <div
              class="listBox"
              v-for="(item, index) in workerList"
              :key="index"
            >
              <div class="inner whiteBlock">
                <div class="videoBox">
                  <video
                    class=""
                    :src="$store.state.FILEURL + item.eduVideo"
                    controls
                  ></video>
                  <div class="desc">
                    <!-- <span class="time">30分钟</span> -->
                    <span v-if="item.eduWorkerNum">{{ item.eduWorkerNum }}
                      {{$t("message.safetyEducation.humanLearning")}}
                      <!-- 人学习 -->
                      </span>
                  </div>
                  <div class="mask" @click.stop="editBefore(item)">
                    <!-- 进入题库 -->
                    {{$t("message.safetyEducation.enterQuestionBank")}}
                    </div>
                </div>
                <div class="title" @click="editBefore(item)">{{ item.eduCourseName }}</div>
                <div @click.stop="deleteBefore(item)" class="deleteBtn" v-show="activeName=='project'">
                    <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                    <!-- <span>{{$t('message.workType.delete')}}</span> -->
                </div>
              </div>
            </div>
          </vue-scroll>
        </div>
        <div class="placeholderBox" v-if="workerList.length == 0">
          <img src="@/assets/images/noData.png" alt="" />
          <p>
            <!-- 暂无课程 -->
            {{$t("message.safetyEducation.noCourses")}}
          </p>
        </div>
        <el-pagination
          class="pagerBox"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pageInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="pageInfo.total"
          background
        ></el-pagination>
      </div>
    </div>
    <div class="fullHeight" v-else>
      <!-- '新增课程' : '课程详细' -->
      <el-page-header
        @back="goBack"
        :content="(itemId == '' ? $t('message.safetyEducation.newType') : $t('message.safetyEducation.courseDetails'))"
        class="backText"
      ></el-page-header>
      <addCourse :eduId="itemId" :classifyId="parentId" @showList="goBack"></addCourse>
    </div>
    <!-- 添加分类 -->
    <el-dialog
          :modal-append-to-body="false"
          :title="$t('message.safetyEducation.addCategory')"
          :visible.sync="dialogVisible"
          width="667px">
      <div class="dialog_content">
          <el-form label-width="120px" size="medium" class="dialogFormBox" ref="addEditForm" :model="classifyForm">
            <!-- 分类名称 -->
              <el-form-item :label="$t('message.safetyEducation.classificationName')" prop="classifyName" :rules="[
                      { required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }
                  ]">
                  <el-input v-model="classifyForm.classifyName"
                            :placeholder="$t('message.workType.placeholder')"></el-input>
              </el-form-item>
              <div class="dialog-footer">
                  <el-button
                          class="cancleBtn"
                          @click="dialogVisible = false"
                          icon="el-icon-circle-close"
                          size="medium"
                  >{{$t('message.personnelPosition.cancel')}}
                  </el-button>
                  <el-button
                          type="primary"
                          icon="el-icon-circle-check"
                          @click="saveClassifyFn"
                          size="medium"
                  >{{$t('message.personnelPosition.determine')}}
                  </el-button>
              </div>
          </el-form>
      </div>

  </el-dialog>
  </div>
</template>
<script>
import {
  safeEducationQuestionListApi,
  workerSafeEducationDeleteApi,selectCompanyEducationCoursePageApi
} from "@/assets/js/api/laborPerson";
import {educationClassifyAddApi, educationClassifyEditApi, educationClassifyDeleteApi, educationClassifyListApi} from '@/assets/js/api/laborPerson'
import addCourse from "./addCourse";
export default {
  components: { addCourse },
  data() {
    return {
      pageType: "list",
      workerList: [],
      pageInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      itemId: "",
      parentId:'',
      parentName:'',
      activeName:'company',
      classifyList:[],
      dialogVisible:false,
      classifyForm:{
        classifyName:''
      },
      dataSn:''
    };
  },
  mounted() {
    if(this.$route.params.type){
      this.activeName=this.$route.params.type
    }else{
      this.parentId=this.$route.query.id
    }
    if(this.activeName=='company'){
      this.dataSn=this.$store.state.userInfo.headquartersSn
    }else{
      this.dataSn=this.$store.state.projectSn
    }
    this.parentName=this.$route.query.name
    this.getClassifyList()
    this.getList();
  },
  watch: {
    $route(to, from) {
      if(this.$route.params.type){
        this.activeName=this.$route.params.type
        if(this.activeName=='company'){
          this.dataSn=this.$store.state.userInfo.headquartersSn
        }else{
          this.dataSn=this.$store.state.projectSn
        }
        this.parentId=''
        this.pageType='list'
      }
      this.getClassifyList()
      this.getList();
    },
  },
  methods: {
    goBack2(){
      this.$router.back()
    },
    refresh() {
      this.getList();
    },
    getList() {
      let sn = this.$store.state.projectSn
      let type =1  // 2总企业，1项目
      if(this.activeName=='company'){
        sn=this.$store.state.userInfo.headquartersSn
        type=2
        selectCompanyEducationCoursePageApi({
          sn: sn,type:type,classifyId:this.parentId,pageNo:this.pageInfo.pageNo,pageSize:this.pageInfo.pageSize
        }).then((res) => {
          this.workerList = res.result.records;
          this.pageInfo.total = res.result.total;
        });
      }else{
        safeEducationQuestionListApi({
          projectSn: sn,type:type,classifyId:this.parentId,pageNo:this.pageInfo.pageNo,pageSize:this.pageInfo.pageSize
        }).then((res) => {
          this.workerList = res.result.records;
          this.pageInfo.total = res.result.total;
        });
      }
      
    },
    goBack() {
      this.pageType = "list";
      this.getList();
    },
    addFn() {
      this.itemId = "";
      this.pageType = "add";
    },
    editBefore(item) {
      this.itemId = item.id;
      this.pageType = "detail";
    },
    deleteBefore(item) {
      // 此操作将永久删除该课程, 是否继续?
      this.$confirm(this.$t("message.safetyEducation.permanentlyDelete"), this.$t("message.safetyEducation.tips"), {
        confirmButtonText: this.$t("message.safetyEducation.determine"), // determine
        cancelButtonText: this.$t("message.safetyEducation.cancel"), // 取消
        type: "warning",
      })
        .then(() => {
          workerSafeEducationDeleteApi({ id: item.id }).then((res) => {
            this.$message({
              type: "success",
              message: this.$t("message.safetyEducation.deleteSuccess"), // 删除成功!
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("message.safetyEducation.deletionCancelled"), // 已取消删除
          });
        });
    },
    SizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getList();
    },
    CurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.getList();
    },
    getClassifyList() {
        educationClassifyListApi({sn: this.dataSn}).then(result => {
            this.classifyList = result.result;
        })
    },
    addClassifyFn(){
      this.dialogVisible=true;
      this.classifyForm.classifyName=''
    },
    editClassifyFn(){},
    deleteClassifyFn(item){
      this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "【" + item.classifyName + "】?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
            confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
            cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
            type: "warning",
        }).then(() => {
            educationClassifyDeleteApi({id: item.id}).then(result => {
                if (result.success) {
                    this.$message.success(result.message);
                    if(item.id==this.parentId){
                      this.parentId=''
                      this.getList();
                    }
                    this.getClassifyList();
                }
            })
        })
    },
    saveClassifyFn(){
      this.$refs['addEditForm'].validate((valid) => {
          if (valid) {
              educationClassifyAddApi({
                  sn: this.dataSn,
                  classifyName: this.classifyForm.classifyName,
                  type:this.activeName=='company'?1:2
              }).then(result => {
                this.dialogVisible = false;
                this.$message.success(result.message);
                this.getClassifyList();
              })
          } else {
              console.log('error submit!!');
              return false;
          }
      });
    }
  },
};
</script>
<style lang="less" scoped>

.backText {
  margin: -10px 0 0 0;
}
.jyjzPage .backText{
  margin: 15px 15px 0;
  /deep/.el-page-header__content{
    color: white;
  }
}
.listContent {
  overflow: hidden;
  height: calc(100% - 120px);
}
.listBox {
  float: left;
  width: 20%;
  height: 250px;
    margin-bottom: 20px;
  .inner {
    margin: 0 10px;
    box-shadow: 0px 2px 16px 0px rgba(131, 183, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }
  .mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.5s;
    transform: translateY(100%);
  }
  .videoBox {
    position: relative;
    overflow: hidden;
    &:hover{
      .mask{
        transform: translateY(0);
      }
    }
    video {
      width: 100%;
      height: 200px;
    }
    .desc {
      background-color: rgba(0, 0, 0, 0.5);
      padding: 5px 10px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% - 20px);
      color: white;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }
  }
  .title {
    padding: 10px 10px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    &:hover{
        color: @--color-primary;
    }
  }
  &:hover{
      .deleteBtn{
        display: block;
    }
  }
  .deleteBtn{
      display: none;
      position: absolute;
      right: 10px;
      bottom: 10px;
      cursor: pointer;
  }
}
.pagerBox {
  margin: 20px;
}
.table_wrap{ 
  position: relative;
  height: calc(100% - 98px - 50px);
}
.classificationBox{
  margin: 20px;
  span{
    margin-right: 30px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    border-radius: 3px;
    padding: 3px 10px;
    position: relative;
    &.active,&:hover{
      background-color: @--color-primary-deep;
      color: white;
    }
    &:hover{
      .el-icon-error{
        display: block;
      }
    }
    .el-icon-error{
      color: salmon;
      position: absolute;
      right: -8px;
      top: -8px;
      font-size: 16px;
      display: none;
    }
  }
  .addTypeBtn{
    border: 1px solid @--color-primary-deep;
    color: @--color-primary-deep;
    i{
      margin-right: 8px;
    }
  }
}
</style>
