 <template>
  <!-- 项目组件列表项 -->
  <section>
    <CommonTitle :title="moduleName" :isShowCert="false"></CommonTitle>
    <article class="cell-container">
      <span class="" v-for="(item, index) in paramData" :key="index">
        <div v-if="index > 0 && paramData[index].templetId!= paramData[index-1].templetId" class="bottom-line"></div>
        <div class="cell-container-item" @click="gotoExamOrCourse(item)" >
          <div class="name">
            <div class="name-logo" :class="{'name-learn': item.type == 2, 'name-logo-no': item.useFlag == 2}" >
              {{item.type | contentType}}
            </div>
            <p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
            <!-- <span v-if="item.certificateFlag !== 2 && index == 0">
              <img class="banner-img" src="../../images/has-owner-cert.png">
            </span> -->
          </div>
          <!--  'bg-13': item.status == 13 -->
          <span
            class="text-action"
            :class="{'text-action-no': item.useFlag == 2}"
          >
            <!-- <img v-show="item.status == 13" class="text-action-dh" src="../../images/icon-dh.png"> -->
            {{getActionText(item.status)}}
          </span>
          <div class="connect-line"
            :class="{'len1': item.height === 1, 'len2': item.height === '1','len3': item.height === 2, 'len4': item.height === '2'}"
            v-if="index+1 < paramData.length && paramData[index].templetId == paramData[index+1].templetId">
          </div>
        </div>
        <span v-if="item.certificateFlag == 2">
          <img class="banner-img" :class="{'space2': item.height == 2 }" src="../../images/has-owner-cert.png">
        </span>

      </span>
    </article>
    <NoMoreContent v-if="paramData.length > 9"/>
    <Toast ref="toastTitle"></Toast>
  </section>
</template>

<script>
import CommonTitle from "@/components/common/common-title";
import NoMoreContent from "@/components/business/no-more-content";
import Toast from "@/components/common/common-toast";
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
import vueFilters from '@/utils/filter';
const actionMap = {
  11: "去考试",
  12: "再考一次",
  13: "已通过",
  14: "已完成",
  15: "已通过",
  16: "未通过",
  21: "去学习",
  22: "继续学习",
  23: "去复习"
};
export default {
  name: "cell-list-item",
  data() {
    return {
      appVersion: "200",
      hocImg: require("../../images/has-owner-cert.png")
    };
  },
  props: {
    moduleName: {
      type: String,
      default: ""
    },
    paramData: {
      type: Array,
      default: () => []
    },
    courseRequire: {
      type: Number,
      default: 0,
    },
    projectId: {
      type: Number | String,
      default: 0,
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: {
    CommonTitle,
    NoMoreContent,
    Toast,
  },
  mounted() {
  },
  created() {
  },
  methods: {
    // 跳转到考试或课程 type 1: 考试;  2: 课程
    // 如果是考试，将根据appVersion判断是新考试还是老考试，如果是301或之前的，都是老考试
    gotoExamOrCourse(item) {
      let appVersion = getAppVersion(this.userInfo.appVersion);
      if (item.useFlag == 2) return;
      if (window.__isWeb) {
        this.$refs.toastTitle.toast("请您下载App");
        return;
      }
      if (item.type == 1) {
        if (appVersion <= 300) {
          this.$refs.toastTitle.toast("请您下载新版本App");
          return;
        } else {
          this.gotoExam(item.id);
        }
      } else if (item.type == 2) {
        this.gotoCourse(item.id);
      }
      console.log(item);
    },

    // 跳转到课程
    gotoCourse: function(courseId) {
      let paramList = []
      paramList = [
        {
          key: "className",
          // value: "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
          value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController",
          type: 4,
          seqNo: 1
        },
        {
          key: "isCHC",
          value: 0,
          type: 4,
          seqNo: 1
        },
        {
          key: "courseId",
          value: courseId,
          type: 4,
          seqNo: 1
        },
        {
          key: "courseRequire",
          value: this.courseRequire,
          type: 4,
          seqNo: 1
        },
        {
          key: "projectId",
          value: this.projectId,
          type: 4,
          seqNo: 1
        },
      ];
      console.log('gotoCourse', paramList);
      rocNative.dispatchEventByModuleCode({
        modeCode: "M200",
        jsonString: paramList
      });
    },
    // 跳转到考试
    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) {
      return actionMap[status];
    }
  }
};
</script>

<style lang="less" scoped>
.cell-container {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  &-item {
    position: relative;
    display: flex;
    flex-direction: row;
    // margin: 6px 0px;
    // height: 51px;
    margin-bottom: 32px;
    line-height: 51px;
    font-size: 15px;
    // padding: 0px 15px;
    // background: rgba(248, 249, 250, 1);
    // border-bottom: 1px solid #f0f0f0;
    // border-radius: 6px;
    justify-content: space-between;
    align-items: center;
    .name {
      &-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: 21px;
        color: #373839;
        padding-right: 10px;
        // float: left;
      }
      &-title-no {
        color: rgba(151, 152, 153, 1);
      }
      // &::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;
      // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
      // opacity: 0.45;
      border: 0.5px 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: 0.5px solid #c7c8c9;
        color: #c7c8c9;
      }
    }
    // span {
    //   width: 100%;
    // }
  }
  span {
    img {
      margin-left: 26px;
      position: relative;
      top: -28px;
      width: 70px;
      height: 20px;
    }
    .space2 {
      top: -26px;
    }
  }
  .connect-line {
    position: absolute;
    // top: 32px;
    top: 3px;
    left: 9.5px;
    height: 42px;
    width: 0.5px;
    border: 0.5px dashed rgba(240, 241, 244, 1);
  }
  .len4 {
    height: 100px;
  }
  .len3 {
    height: 82px;
  }
  .len2 {
    height: 82px;
  }
  .len1 {
    height: 62px;
  }
  .bottom-line {
    position: relative;
    margin: 6px 0 28px 0;
    bottom: 0px;
    width: 100%;
    border-bottom: 0.5px solid #F0F1F2;
  }
}
.bg-13 {
  background: #abcec7;
}
</style>

