 <template>
  <!-- 相关资料列表 -->
  <div class="mater-container-wrapper">
    <CommonTitle
      title="相关资料"
      :isShowCert="false"
      :isShowMore="paramData.length > 3"
      @showMore="gotoPDFList()"
    ></CommonTitle>
    <section class="mater-container">
      <div
        v-show="paramData.length && index < 3"
        v-for="(item, index) in paramData"
        :key="index"
        class="mater-item"
      >
        <div class="mater-item-left">
          <img :src="item.iconUrl">
        </div>
        <div class="mater-item-right">
          <span class="mater-item-right-title">{{item.name}}</span>
          <span class="mater-item-right-other">文件大小：{{item.size | formatFileSize}}</span>
        </div>
        <div class="mater-details" @click="gotoPDFDetail(item)">
          <span>查看</span>
          <img :src="rightIcon" alt>
        </div>
      </div>
      <NoContent v-show="!paramData.length"></NoContent>
    </section>
    <Toast ref="toastTitle"></Toast>
  </div>
</template>

<script>
import CommonTitle from "@/components/common/common-title";
// import NoMoreContent from "@/components/business/no-more-content";
import NoContent from "@/components/business/no-content";
import Toast from "@/components/common/common-toast";
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
export default {
  name: "mater-list-item",
  data() {
    return {
      bgColor: "green",
      statusText: "进行中",
      rightIcon: require("../../images/right-icon.png"),
      appVersion: "200"
    };
  },
  props: {
    paramData: {
      type: Array,
      default: () => []
    },
    projectId: {
      type: Number | String,
      default: 1
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: {
    // NoMoreContent,
    NoContent,
    CommonTitle,
    Toast
  },
  mounted() {
  },
  methods: {
    gotoPDFList() {
      let appVersion = getAppVersion(this.userInfo.appVersion);
      if (window.__isWeb) {
        this.$refs.toastTitle.toast("请您下载App");
        return;
      }
      if (appVersion <= 300) {
        this.$refs.toastTitle.toast("请您下载新版本App");
        return;
      }
      let itemData = {
        title: "",
        imageUrl: "",
        appModuleInfo: {
          code: "M200",
          type: 4,
          name: "wwww",
          paramFlag: 1,
          paramList: [
            {
              key: "className",
              value:
                "com.picahealth.yunque.activitys.scanpdf.AllRelevantInfoActivity###PicaDo.InstructionManagerController",
              type: 4,
              seqNo: 1
            },
            {
              key: "portalProjectId",
              value: this.projectId,
              type: 1,
              seqNo: 2
            }
          ]
        }
      };
      rocNative.dispatchEventByModuleCode({
        modeCode: "M200",
        jsonString: itemData.appModuleInfo.paramList
      });
    },
    gotoPDFDetail: function(item) {
      let appVersion = getAppVersion(this.userInfo.appVersion);
      if (window.__isWeb) {
        this.$refs.toastTitle.toast("请您下载App");
        return;
      }
      if (appVersion <= 300) {
        this.$refs.toastTitle.toast("请您下载新版本App");
        return;
      }
      let itemData = {
        title: "",
        imageUrl: "",
        appModuleInfo: {
          code: "M200",
          type: 4,
          name: "wwww",
          paramFlag: 1,
          paramList: [
            {
              key: "className",
              value:
                "com.picahealth.yunque.activitys.scanpdf.ReadPDFActivity###LiveStreamingCoursewareController",
              type: 4,
              seqNo: 1
            },
            {
              key: "portalProjectId",
              value: 1,
              type: 1,
              seqNo: 2
            },
            {
              key: "pdfURL",
              value: item.url,
              type: 1,
              seqNo: 2
            },
            {
              key: "navTitle",
              value: item.name,
              type: 1,
              seqNo: 2
            },
            {
              key: "pdfId",
              value: item.id,
              type: 1,
              seqNo: 2
            }
          ]
        }
      };
      rocNative.dispatchEventByModuleCode({
        modeCode: "M200",
        jsonString: itemData.appModuleInfo.paramList
      });
    }
  }
};
</script>

<style lang="less" scoped>
.mater-container {
  position: relative;
  margin: 0px 15px;
}
.mater-item {
  display: flex;
  // width: 100%;
  height: 80px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  img {
    width: 35px;
    height: 37px;
    margin-right: 10px;
    border-radius: 3px 2px 2px 3px;
  }
  &-left {
    display: flex;
    position: relative;
    top: 0;
  }
  &-right {
    display: flex;
    // width: 215px;
    flex: 1;
    flex-direction: column;
    padding-top: 4px;
    &-title {
      // height: 50px;
      line-height: 23px;
      font-size: 15px;
      font-weight: 700;
      color: rgba(55, 56, 57, 1);
    }
    &-other {
      height: 22px;
      line-height: 20px;
      font-size: 13px;
      font-weight: 400;
      color: rgba(151, 152, 153, 1);
    }
  }
  .mater-details {
    position: relative;
    right: -10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
      // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
      font-size: 14px;
      font-weight: 700;
      color: #666;
    }
    img {
      width: 15px;
      height: 16px;
    }
  }
}
</style>

