 <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="!logged"
                  @click="gotoExamOrCourse(item)"
                  class="text-action text-action-no"
                >
                  {{getActionText(item.status, item.type)}}
                </span>
                <span
                  v-else-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('激活/购买后可学习课程', item)" src="../../images/cme/phrase2/key.png" alt="">
                <span
                  v-else-if="!hasBindCard && item.trySeeFlag == 1"
                  @click="gotoExamOrCourse(item, 'sk')"
                  class="text-action"
                >
                  去试看
                </span>
                <span
                  v-else
                  @click="gotoExamOrCourse(item)"
                  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, getWebPageUrl, isWeiXin } 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],
      token: '',
    };
  },
  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,
    },
    logged: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: Number | String,
      default: 0
    },
    goodsId: {
      type: Number | String,
      default: 0
    },
  },
  components: {
    MergeTitle,
    NoMoreContent,
    Dialog,
  },
  watch:{
    actionList: {
      immediate: true,
      handler (val) {
        this.activeNames = val;
      }
    }
  },
  mounted() {
  },
  created() {
    this.token = this.$store.state.user.token;
  },
  methods: {
    // 跳转到考试或课程 type 1: 考试;  2: 课程
    // 如果是考试，将根据appVersion判断是新考试还是老考试，如果是301或之前的，都是老考试
    gotoExamOrCourse(item, type) {
      if(type == 'sk') {
        this.$sendBuriedData({
          component_tag: `882#88216#${item.id}#${item.name}`
        });
      }

      // 在浏览器中
      if(!isWeiXin()) {
        // 没有绑定则提示去购买/激活
        if(!this.hasBindCard) {
          if(item.type == 1) {
            Toast('激活/购买后可参加考试');
          } else if(item.type == 2){
            Toast('激活/购买后可学习完整课程');
          }
          return;
        // 已经绑定则前往云鹊医APP
        } else {
          if(item.type == 1) {
            Toast('请前往云鹊医APP参加考试');
          } else if(item.type == 2){
            Toast('请前往云鹊医APP学习课程');
          }
          return;
        }
      }

      if(!this.logged) {
        if(item.type == 1) {
          Toast('请前往云鹊医APP参加考试');
        } else if(item.type == 2){
          Toast('登陆后可学习课程');
        }
        return;
      }

      // 埋点：去学习、继续学习、复习、去考试、重考
      // let actionCode = sendBuriedDataMap[item.status];
      // if(actionCode) {
      //   this.$sendBuriedData({
      //     component_tag: `882#${actionCode}#${this.projectId}`
      //   });
      // }
      let logId = null;
      if (item.useFlag == 2) {
        if(item.type == 1) {
          // Toast('尚未完成所有课程学习');
          Toast('请前往云鹊医APP参加考试');
        } else if(item.type == 2){
          Toast('尚未完成相关考试');
        }
        return;
      };
      if (item.type == 1) {
        this.gotoExam(item.id);
        logId = '882#88206';
      } else if (item.type == 2) {
        this.gotoCourse(item);
        logId = '882#88205';
      }
      // if (trySee) {
      //   logId = '882#88204';
      // }
      // logId && this.$sendBuriedData({
      //   component_tag: logId
      // });
    },

    // 跳转到课程
    gotoCourse(item) {
      let param = {
        token: this.token,
        setEntry: true
      };
      this.GET("campaign/admin/task/checkToken", param).then(res => {
        if (res.code !== "000000") {
          Toast('登陆后可学习课程');
        } else {
          this.jumpToCourse(item);
        }
      });
    },

    // 跳转到课程
    jumpToCourse: function(item) {
      if(!isWeiXin()) {
        Toast('请前往云鹊医APP学习课程');
        return;
      }
      let jumpUrl = getWebPageUrl(`profexam/#/course-detail?courseId=${item.id}&projectId=${this.projectId}&goodsId=${this.goodsId}`);
      window.location.href = jumpUrl;
    },

    // 跳转到考试
    gotoExam: function(examId) {
      Toast('请前往云鹊医APP参加考试');
    },

    // 获取按钮文案
    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.token,
      }
      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, item) {
      if(item) {
        this.$sendBuriedData({
          component_tag: `882#88215#${item.id}#${item.name}`
        });
      }
      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: 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";
        font-size: 15px;
        font-weight: 700;
        line-height: 22px;
        padding-right: 10px;
        color: #333333;
      }
      &-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>
