 <template>
  <!-- 项目组件列表项 -->
  <section>
    <div
      class="cell-detail"
      v-for="(component , index) in projectComponent"
      :key="index">
      <van-collapse v-model="activeNames" @change="changeCollapse">
        <van-collapse-item
          v-for="(portalModule, index) in component.portalModuleDTOS"
          :key="index"
          :title="portalModule.moduleName | shortName(19)"
          :name="portalModule.expandKey"
          :value="portalModule.value"
          @click.native="chooseItem(portalModule)"
        >
          <!-- :disabled="portalModule.disabled" -->
          <article @click.stop="deleteFlow()" class="cell-container">
            <span class="" v-for="(item, index) in portalModule.contentList" :key="index">
              <div v-if="index > 0 && portalModule.contentList[index].templetId!= portalModule.contentList[index-1].templetId" class="bottom-line"></div>
              <div class="cell-container-item" >
                <div class="name">
                  <div class="name-img">
                    <img v-if="item.type == 1 && item.useFlag == 1" class="img-icon" src="../../images/exam.png">
                    <img v-if="item.type == 1 && item.useFlag == 2" class="img-icon" src="../../images/exam-dark.png">
                    <img v-if="item.type == 2 && item.useFlag == 1" class="img-icon" src="../../images/learn.png">
                    <img v-if="item.type == 2 && item.useFlag == 2" class="img-icon" src="../../images/learn-dark.png">
                  </div>
                  <p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
                </div>
                <span
                  v-if="!item.id"
                  class="text-action text-action-no"
                  @click="toastToBuy('敬请期待')"
                >
                  更新中
                </span>
                <img class="key" v-else-if="!hasBindCard && item.trySeeFlag == 1 && !item.trySeeTime" @click="toastToBuy('激活/购买后可学习课程')" src="../../images/cme/phrase2/key.png" alt="">
                <span
                  v-else-if="!hasBindCard && item.trySeeFlag == 1"
                  @click="gotoExamOrCourse(item, portalModule.contentList, index, true)"
                  class="text-action"
                >
                  去试看
                </span>
                <span
                  v-else
                  @click="gotoExamOrCourse(item, portalModule.contentList, index)"
                  class="text-action"
                  :class="{'text-action-no': item.useFlag == 2}"
                >
                  {{getActionText(item.status, item.type)}}
                </span>
                <div class="foot-line"
                  v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId">
                </div>
              </div>
            </span>
          </article>
        </van-collapse-item>
      </van-collapse>
    </div>
  </section>
</template>

<script>
import MergeTitle from "@/components/business/merge-title";
import NoMoreContent from "@/components/business/no-more-content";
import { Collapse, CollapseItem, Dialog, Toast  } from 'vant';
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
import vueFilters from '@/utils/filter';
const actionMap = {
  11: "去考试",
  12: "再考一次",
  13: "已通过",
  14: "已完成",
  15: "已通过",
  16: "未通过",
  21: "去学习",
  22: "继续学习",
  23: "去复习"
};
const sendBuriedDataMap = {
  // 11: "8824",
  // 12: "211013",
  21: "8821",
  22: "8822",
  23: "8823"
}
export default {
  name: "cell-list-item",
  data() {
    return {
      appVersion: "200",
      hocImg: require("../../images/has-owner-cert.png"),
      activeNames: [1],
      projectId: 1
    };
  },
  props: {
    hasBindCard: {
      type: Boolean,
      default: false
    },
    projectComponent: {
      type: Array,
      default: () => []
    },
    actionList: {
      type: Array,
      default: () => []
    },
    detailNum: {
      type: Number | String,
      default: 0
    },
    courseRequire: {
      type: Number | String,
      default: 0,
    },
    limitTimes: {
      type: Number | String,
      default: 0,
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: {
    MergeTitle,
    NoMoreContent,
    Dialog,
  },
  watch:{
    actionList: {
      immediate: true,
      handler (val) {
        this.activeNames = val;
      }
    }
  },
  mounted() {
  },
  created() {
    this.projectId = this.$route.query.id;
  },
  methods: {
    // 跳转到考试或课程 type 1: 考试;  2: 课程
    // 如果是考试，将根据appVersion判断是新考试还是老考试，如果是301或之前的，都是老考试
    gotoExamOrCourse(item, contentList, index, trySee) {
      this.$parent.$refs.tcPlayerRef && this.$parent.$refs.tcPlayerRef.pause();
      // 埋点：去学习、继续学习、复习、去考试、重考
      // let actionCode = sendBuriedDataMap[item.status];
      // if(actionCode) {
      //   this.$sendBuriedData({
      //     component_tag: `882#${actionCode}#${this.projectId}`
      //   });
      // }
      // this.gotoCourse(item, contentList, index, trySee);
      let logId = null;
      let appVersion = getAppVersion(this.userInfo.appVersion);
      if (item.useFlag == 2) {
        if(item.type == 1) {
          Toast('尚未完成所有课程学习');
        } else if(item.type == 2){
          Toast('尚未完成相关考试');
        }
        return;
      };
      if (item.type == 1) {
        if (appVersion <= 300) {
          Toast('请您下载新版本App');
          return;
        } else {
          this.gotoExam(item.id);
        }
        logId = '882#88206';
      } else if (item.type == 2) {
        this.gotoCourse(item, contentList, index, trySee);
        logId = '882#88205';
      }
      if (trySee) {
        logId = '882#88204';
      }
      logId && this.$sendBuriedData({
        component_tag: logId
      });
    },

    // 如果此模块中没有考试，则直接退出；否则
    // 查看课程是否是最后一节课， 如果是，则要查找到相应的考试，并传递给原生端
    beforeGotoCourse(item, contentList, index) {
      let extendsParam = [];
      let hasExam = false;
      let currentExam = {};
      // 查找当前课程后面的有没有考试
      for(let i = index; i < contentList.length; i ++) {
        // if(contentList[i].type == 1 && contentList[i].status != 14) {
        if(contentList[i].type == 1 && contentList[i].id) {
          hasExam = true;
          currentExam = contentList[i];
          break;
        }
      }

      // 如果后面没有考试，则直接退出
      if(!hasExam) return extendsParam;

      let hasNoLearningCourse = false;
      // 查找本模块中是否还有没有学习完的课程，排除当前这个
      for(let j = 0; j < contentList.length; j ++) {
        if(j == index) continue;
        if(contentList[j].type == 2 && (contentList[j].status == 21 || contentList[j].status == 22)) {
          hasNoLearningCourse = true;
          break;
        }
      }

      // 如果还有课程没有学完，则直接退出
      if(hasNoLearningCourse) return extendsParam;

      // let urlType = currentExam.urlType;
      // let jumpUrl = currentExam.url;
      // let jumpContent = '';
      // let examType = 0;
      // // (已经与后台约定只判断链接)如果有链接，则要加入相应参数
      // if(jumpUrl) {
      //   examType = urlType;
      //   jumpContent = jumpUrl;
      // } else {
      //   examType = -1;
      //   jumpContent = currentExam.id;
      // }
      extendsParam.push({key: "examType", value: -1, type: 4, seqNo: 1});
      extendsParam.push({key: "jumpContent", value: currentExam.id, type: 4, seqNo: 1});

      return extendsParam;
    },

    // 跳转到课程
    gotoCourse: function(item, contentList, index, trySee) {
      let extendsParam = this.beforeGotoCourse(item, contentList, index);
      let appVersion = getAppVersion(this.userInfo.appVersion);
      // 弹框提示下载新版本可以试看
      if(appVersion < 343 && !this.hasBindCard) {
        this.$dialog.confirm({
          className: 'con-dialog',
          showCancelButton: false,
          // message: '激活/购买后可学习完整课程',
          message: '升级最新版本可试看课程',
          confirmButtonText: '我知道了',
        }).then(res => {

        })
        return;
      }
      let paramList = []
      paramList = [
        {
          key: "className",
          value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController",
          type: 4,
          seqNo: 1
        },
        {
          key: "isCHC",
          value: 0,
          type: 4,
          seqNo: 1
        },
        {
          key: "courseId",
          value: item.id,
          type: 4,
          seqNo: 1
        },
        {
          key: "courseRequire",
          value: this.courseRequire - 0,
          type: 4,
          seqNo: 1
        },
        {
          key: "projectId",
          value: this.projectId,
          type: 4,
          seqNo: 1
        },
      ];

      if(trySee) {
        // let limitTimes = this.limitTimes - 0;
        let limitTimes = item.trySeeTime - 0;
        if(this.hasBindCard) {
          limitTimes = -1;
        }
        paramList.push({
          key: "limitTimes",
          value: limitTimes,
          type: 4,
          seqNo: 1
        });
      }
      console.log(paramList.concat(extendsParam));
      rocNative.dispatchEventByModuleCode({
        modeCode: "M200",
        jsonString: paramList.concat(extendsParam)
      });
    },

    // 跳转到考试
    gotoExam: function(examId) {
      let paramList = [
        {
          key: "className",
          value:
            "com.picahealth.yunque.activitys.exammodule.ExamPreActivity###PicaDo.ExamModuleManager",
          type: 4,
          seqNo: 1
        },
        {
          key: "examId",
          value: examId,
          type: 4,
          seqNo: 1
        }
      ];

      rocNative.dispatchEventByModuleCode({
        modeCode: "M200",
        jsonString: paramList
      });
    },

    // 获取按钮文案
    getActionText(status, type) {
      let actionText = actionMap[status];
      if(!actionText) {
        actionText = type == 1 ? '去考试' : '去学习';
      }
      return actionText;
    },

    // 折叠与展开模块
    changeCollapse(activeNames) {
      console.log('activeNames',activeNames);
      let param = {
        expandKeys: activeNames,
        setEntry: true,
        token: this.userInfo.userToken,
      }
      this.POST("portal/portalApp/updateExpandStatus?projectId="+this.projectId, param).then(res => {
      });
    },
    deleteFlow() {

    },
    chooseItem(item) {
      let _this = this;
      // if(item.disabled === true) {
      //   console.log('item',item);
      //   Toast('尚未开始，敬请期待');
      // }
    },

    // 弹框提示
    toastToBuy(toastMsg) {
      Toast(toastMsg);
    }
  }
};
</script>

<style lang="less">
.van-dialog {
  transform: translate(-50%,-50%);
  width: 300px;
  border-radius: 3px;
  .van-dialog__header {
    padding-top: 30px;
    font-size: 18px;
    color: #333333;
  }
  .van-dialog__content {
    .van-dialog__message--has-title {
      padding-top: 14px;
      text-align: left;
      color: #676869;
      font-weight:400;
    }
  }
  .van-dialog__footer {
    .van-button {
      .van-button__text {
        color: #449284;
        font-size: 17px;
      }
    }
  }
}
.van-toast {
  // background: #000000;
  div {
    font-size:12px;
    color: #FFFFFF;
  }
}
.van-toast--text {
  padding: 7px 8px;
}
.no-more-bottom {
  position: relative;
  width: 100%;
  height: 40px;
}
.cell-detail {
  .van-hairline--top::after , .van-hairline--top-bottom::after {
    border-width: 0px;
  }
  .van-collapse-item {
    .van-cell {
      margin: 9px auto 0 auto;
      // width: 345px;
      width: 100%;
      min-height: 48px;
      border-radius: 6px;
    }
    .van-collapse-item__title {
      background: #F8F9FA;
      .van-cell__title {
        max-width: 200px;
        vertical-align: middle;
        line-height: 30px;
        flex: auto;
        span {
          color: #373839;
          font-weight:500;
          font-size: 15px;
          height: 15px;
          line-height: 15px;
        }
      }
      .van-cell__value {
        // max-width: 80px;
        line-height: 30px;
        span {
          color: #979899;
          font-weight:500;
          font-size: 14px;
          line-height: 14px;
        }
      }
      .van-icon {
        margin-top: 3px;
        color: #999999;
      }
    }
    .van-collapse-item__title--expanded {
      background: #E3EFED;
      .van-cell__title {
        span {
          color: #449284;
          font-weight:500;
          font-size: 15px;
          line-height: 15px;
        }
      }
      .van-cell__value {
        span {
          color: #449284;
          font-weight:500;
          font-size: 14px;
          line-height: 14px;
        }
      }
      .van-icon {
        color: #449284;
      }
    }
    .van-collapse-item__title--disabled {
      .van-cell__right-icon {
        display: none;
      }
      .van-cell__title , .van-cell__value{
        span {
          color: #979899;
        }
      }
    }
    .van-collapse-item__content {
      padding: 0;
    }
  }
  .line-component {
    position: relative;
    margin-top: 20px;
    margin-left: 0;
    width: 373px;
    height: 6px;
    background: #F8F9FA;
  }
}
.cell-container {
  display: flex;
  flex-direction: column;
  margin: 20px 0px -28px 0px;
  &-item {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-bottom: 39px;
    line-height: 51px;
    font-size: 15px;
    justify-content: space-between;
    align-items: center;
    .name {
      display: flex;
      align-items: center;
      flex: 1;
      width: 100px;
      .name-img {
        position: relative;
        z-index: 9;
        margin-right: 6px;
        width: 20px;
        height: 20px;
        float: left;
        .img-icon {
          position: absolute;
          top: 0;
          left: 0;
          width: 20px;
          height: 20px;
        }
      }
      &-logo {
        position: relative;
        z-index: 9;
        margin-right: 6px;
        width: 20px;
        height: 20px;
        text-align: center;
        background:rgba(68,146,132,1);
        font-size: 12px;
        font-weight: 700;
        color: #FFFFFF;
        border-radius: 50%;
        float: left;
        line-height: 22px;
        // display:table;
        // overflow:hidden;
        // span {
        //   color: #FFFFFF;
        //   font-size: 12px;
        //   font-weight: 700;
        //   display: table-cell;
        //   text-align: center;
        //   vertical-align: middle;
        //   line-height: 20px;
        // }
        // &::before {
        //   position: absolute;
        //   top: -6px;
        //   left: 8px;
        //   display: inline-block;
        //   height: 6px;
        //   width: 4px;
        //   background: #FFFFFF;
        //   content: "";
        // }
        // &::after {
        //   position: absolute;
        //   top: 20px;
        //   left: 8px;
        //   display: inline-block;
        //   height: 6px;
        //   width: 4px;
        //   background: #FFFFFF;
        //   content: "";
        // }
      }
      &-learn {
        background:rgba(246, 131, 103, 1);
      }
      &-logo-no {
        background:rgba(231, 232, 233, 1);
      }
      &-title {
        flex: 1;
        // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
        // width: 231px;
        font-size: 15px;
        font-weight: 700;
        line-height: 22px;
        color: #333333;
        padding-right: 10px;
        // float: left;
      }
      &-title-no {
        color: #979899;
      }
      // &::before {
      //   position: relative;
      //   top: 3px;
      //   display: inline-block;
      //   width: 4px;
      //   content: "";
      //   margin-right: 5px;
      //   height: 16px;
      //   background: #449284;
      //   border-radius: 3px;
      // }

      // span {
      //   img {
      //     margin-top: 4px;
      //     position: relative;
      //     top: 2px;
      //     width: 70px;
      //     height: 20px;
      //   }
      // }
    }
    .text-action {
      width: 68px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      border-radius: 15px;
      border: 1px solid rgba(68, 146, 132, 0.6);
      color: rgba(68, 146, 132, 1);
      img {
        position: relative;
        left: 2px;
        top: 3px;
        width: 8px;
        height: 12px;
      }
      &-no {
        border: 1px solid #c7c8c9;
        color: #c7c8c9;
      }
    }
    .key {
      width: 15px;
      height: 15px;
      margin-right: 20px;
    }
  }
  span {
    .cert-img {
      margin-left: 26px;
      position: relative;
      top: -34px;
      width: 70px;
      height: 20px;
    }
    .space2 {
      top: -34px;
    }
  }
  .connect-line {
    position: absolute;
    // top: 32px;
    top: 3px;
    left: 8.5px;
    height: 42px;
    width: 3px;
    background: #F8F9FA;
    // border: 0.5px dashed rgba(240, 241, 244, 1);
  }
  .line-complete {
    background: #E3EFED;
  }
  .len4 {
    // height: 100px;
    height: 106px;
  }
  .len3 {
    // height: 82px;
    height: 88px;
  }
  .len2 {
    // height: 82px;
    height: 88px;
  }
  .len1 {
    // height: 62px;
    height: 68px;
  }
  .bottom-line {
    position: relative;
    margin: -19px 0 20px 0;
    bottom: 0px;
    width: 100%;
    height: 6px;
    background: #F8F9FA;
    border-radius: 2px;
    // border-bottom: 0.5px solid #F0F1F2;
  }
  .foot-line {
    position: absolute;
    width: 311px;
    margin-left: 34.5px;
    height: 1px;
    background: #E7E8E9;
    // border-bottom: 0.5px solid #E7E8E9;
    transform: scaleY(0.5);
    bottom: -20px;
  }
}
.bg-13 {
  background: #abcec7;
}
</style>
