<template>
  <div class="center_content">
    <div class="detaBox">
      <div class="anliMiddle">
        <div class="anliBox">
          <div class="anliImg">
            <img
              :src="
                anliBox[0] &&
                JSON.parse(anliBox[0].info) &&
                JSON.parse(anliBox[0].info).cover
                  ? JSON.parse(anliBox[0].info).cover[0].url
                  : noBanner
              "
              alt=""
            />
          </div>
          <div class="anliNav">
            <div>
              项目名称：{{
                anliBox[0] && JSON.parse(anliBox[0].info)
                  ? JSON.parse(anliBox[0].info).title
                  : ""
              }}
            </div>
            <div>创建人：{{ anliBox[0] ? anliBox[0].username : "" }}</div>
            <div>
              <div>单位：{{ anliBox[0] ? anliBox[0].schoolName : "" }}</div>
              <div>
                学科：{{
                  anliBox[0] && anliBox[0].typename
                    ? anliBox[0].typename
                    : "暂无分类"
                }}
              </div>
            </div>
            <div class="people">
              <div class="man">
                <img src="../../../../assets/people.png" alt />
              </div>
              <div class="person">0人</div>
            </div>
          </div>
        </div>
      </div>
      <div class="navBox">
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proOver.png" alt="" />
          </div>
          <div>项目概况</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/learnObj.png" alt="" />
          </div>
          <div>学习目标</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/process.png" alt="" />
          </div>
          <div>项目实施过程</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proEva.png" alt="" />
          </div>
          <div>项目学习成果及评价</div>
        </div>
        <div class="navTop">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proEff.png" alt="" />
          </div>
          <div>项目成效与反思</div>
        </div>
      </div>

      <div class="messageBox" v-if="anliBox[0]">
        <div class="whiteBg">
          <div class="navBg">项目概况</div>
          <div class="detaBrief">
            {{
              anliBox[0] && JSON.parse(anliBox[0].info)
                ? JSON.parse(anliBox[0].info).courseText
                : ""
            }}
          </div>
        </div>
        <div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBg">驱动问题</div>
              <div
                class="proOverNav"
                v-html="
                  anliBox[0] && JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).driQuestion.brief
                    : ''
                "
              ></div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div class="fileList">
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
                      .driQuestion.data"
                    :key="fIndex"
                  >
                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                    <div>{{ f.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBg">目标问题</div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).tarDesign.brief
                    : ''
                "
              ></div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div class="fileList">
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
                      .tarDesign.data"
                    :key="fIndex"
                  >
                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                    <div>{{ f.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBg">活动问题</div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).actiDesign.brief
                    : ''
                "
              ></div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div class="fileList">
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
                      .actiDesign.data"
                    :key="fIndex"
                  >
                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                    <div>{{ f.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBg">评价问题</div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).evaDesign.brief
                    : ''
                "
              ></div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div class="fileList">
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
                      .evaDesign.data"
                    :key="fIndex"
                  >
                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                    <div>{{ f.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="proOverCss">
            <div class="whiteBg whiteLeft">
              <div class="navBg">其他问题</div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].overview)
                    ? JSON.parse(anliBox[0].overview).other.brief
                    : ''
                "
              ></div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/fileList.png"
                    alt=""
                  />
                </div>
                <div>佐证材料</div>
              </div>
              <div class="fileBox">
                <div class="fileList">
                  <div
                    class="file"
                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview).other
                      .data"
                    :key="fIndex"
                  >
                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                    <div>{{ f.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            v-for="(hd, hdIndex) in JSON.parse(anliBox[0].process).actBox"
            :key="hdIndex"
          >
            <div class="proOverCss">
              <div class="whiteBg whiteLeft" style="padding: 0">
                <div class="hdTop">
                  <div class="longNavBg">
                    <div></div>
                    <div>
                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动实施:{{
                        hd.driQuestion.title
                      }}
                    </div>
                  </div>
                  <div class="bottomBg"></div>
                </div>
                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
                <div
                  class="proOverNav"
                  v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
                  style="padding: 20px 0 20px 40px"
                ></div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div class="fileList">
                    <div
                      class="file"
                      v-for="(f, fIndex) in hd.driQuestion.data"
                      :key="fIndex"
                    >
                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="proOverCss">
              <div class="whiteBg whiteLeft" style="padding: 0">
                <div class="hdTop">
                  <div class="longNavBg">
                    <div></div>
                    <div>
                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动工具:{{
                        hd.tarDesign.title
                      }}
                    </div>
                  </div>
                  <div class="bottomBg"></div>
                </div>
                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
                <div
                  class="proOverNav"
                  v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
                  style="padding: 20px 0 20px 40px"
                ></div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div class="fileList">
                    <div
                      class="file"
                      v-for="(f, fIndex) in hd.tarDesign.data"
                      :key="fIndex"
                    >
                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="proOverCss">
              <div class="whiteBg whiteLeft" style="padding: 0">
                <div class="hdTop">
                  <div class="longNavBg">
                    <div></div>
                    <div>
                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动成果:{{
                        hd.actiDesign.title
                      }}
                    </div>
                  </div>
                  <div class="bottomBg"></div>
                </div>
                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
                <div
                  class="proOverNav"
                  v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
                  style="padding: 20px 0 20px 40px"
                ></div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div class="fileList">
                    <div
                      class="file"
                      v-for="(f, fIndex) in hd.actiDesign.data"
                      :key="fIndex"
                    >
                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="proOverCss">
              <div class="whiteBg whiteLeft" style="padding: 0">
                <div class="hdTop">
                  <div class="longNavBg">
                    <div></div>
                    <div>
                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动评价:{{
                        hd.evaDesign.title
                      }}
                    </div>
                  </div>
                  <div class="bottomBg"></div>
                </div>
                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
                <div
                  class="proOverNav"
                  v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
                  style="padding: 20px 0 20px 40px"
                ></div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div class="fileList">
                    <div
                      class="file"
                      v-for="(f, fIndex) in hd.evaDesign.data"
                      :key="fIndex"
                    >
                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
                      <div>{{ f.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="proOverCss" style="margin: 0">
            <div class="whiteBg" style="margin: 0 0 10px 0">
              <div class="navBg">活动成效</div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].results)
                    ? JSON.parse(anliBox[0].results).proEffText
                    : ''
                "
                style="min-height: 100px; max-height: 100px"
              ></div>
            </div>
          </div>
          <div class="proOverCss">
            <div class="whiteBg" style="margin: 0 0 20px 0">
              <div class="navBg">活动反思</div>
              <div
                class="proOverNav"
                v-html="
                  JSON.parse(anliBox[0].results)
                    ? JSON.parse(anliBox[0].results).proRefText
                    : ''
                "
                style="min-height: 100px; max-height: 100px"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="fixBottom">
        <div class="returnAnLi" style="width: 100px">前往评分</div>
        <div
          class="returnAnLi"
          @click="goTo('/eventCenter?userid=' + userid + '&oid=' + oid)"
        >
          返回
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      aid: this.$route.query.aid,
      anliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    selectAnLi() {
      let params = {
        id: this.aid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceDetail", params)
        .then((res) => {
          this.anliBox = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
html,
body {
  background: #e1f1ff !important;
}
.center_content {
  width: 100%;
  height: 100%;
  background: #e1f1ff;
}
.detaBox {
  padding: 10px 0 0 0;
  background: #e1f1ff;
  position: relative;
  padding-bottom: 50px;
}
.anliMiddle {
  margin: 0 0 15px 0;
  width: 100%;
  background: #fff;
}
.anliImg {
  width: 200px;
}
.anliImg > img {
  width: 100%;
  height: 100%;
}
.people {
  display: flex;
}

.person {
  margin-left: 10px;
  line-height: 18px;
}
.man {
  width: 16px;
  height: 16px;
}

.man > img {
  width: 100%;
  height: 100%;
}
.anliBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 25px 0 25px 60px;
  position: relative;
}
.anliNav {
  padding-left: 30px;
}
.anliNav > div:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
}
.anliNav > div:nth-child(2) {
  margin: 10px 0 10px 0;
}
.anliNav > div:nth-child(3) {
  display: flex;
  margin-bottom: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.anliNav > div:nth-child(3) > div:nth-child(2) {
  color: #aba8a8;
  margin-left: 30px;
}
.navBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 70%;
  margin: 0 auto;
  height: 70px;
  border-radius: 10px;
}
.navTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 20px;
}
.navImg {
  width: 35px;
}
.navImg > img {
  width: 100%;
  height: 100%;
}
.messageBox {
  width: 70%;
  margin: 0 auto;
}
.whiteBg {
  width: 100%;
  background: #fff;
  margin: 20px 0;
  padding-top: 15px;
  border-radius: 10px;
}
.whiteLeft {
  width: 60%;
  margin: 0;
  min-height: 400px;
  max-height: 400px;
}
.navBg {
  width: 130px;
  height: 50px;
  background-image: url("../../../../assets/icon/anliDetail/navBg.png");
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
  line-height: 47px;
  margin: 0 0 5px 20px;
  text-indent: 20px;
}
.detaBrief {
  padding: 0 0 20px 40px;
  text-indent: 25px;
  width: 90%;
  height: 100px;
  overflow: auto;
  word-break: break-word;
}
.proOverCss {
  width: 100%;
  display: flex;
  margin: 20px 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.whiteRight {
  width: 35%;
  margin-left: 5%;
}
.proOverNav {
  padding: 0 0 20px 40px;
  max-height: 320px;
  min-height: 320px;
  overflow: auto;
  word-break: break-word;
}
.fileTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background: #398fc0;
  color: #fff;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0 0 0 19px;
  font-size: 15px;
}
.fileListImg {
  width: 25px;
}
.fileListImg > img {
  width: 100%;
  height: 100%;
}
.fileBox {
  height: calc(415px - 50px);
  background: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.fileList {
  width: 98%;
  background: #f6f9fe;
  margin: 0 auto;
  border-radius: 10px;
  height: 340px;
  overflow: auto;
}
.file {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px;
}
.file > div:nth-child(1) {
  background: #286a8d;
  color: #fff;
  width: 95px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.file > div:nth-child(2) {
  background: #fff;
  height: 45px;
  width: 335px;
  line-height: 45px;
  padding-left: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdTop {
  position: relative;
  width: 100%;
  height: 60px;
}
.longNavBg {
  width: calc(100% - 30px);
  background-image: linear-gradient(90deg, #52c6ff, #18adff);
  color: #fff;
  height: 60px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 18px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding-left: 30px;
  position: absolute;
  z-index: 999;
}
.longNavBg > div:nth-child(1) {
  width: 8px;
  height: 8px;
  background: #ffeb24;
  border-radius: 50%;
  margin-right: 15px;
}
.longNavBg > div:nth-child(2) {
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.bottomBg {
  width: 98%;
  height: 40px;
  background: #d6f0ff;
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: 9;
  transform: translate(-50%);
  border-radius: 10px;
}
.returnAnLi {
  background: #205cc6;
  width: 70px;
  height: 30px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  margin-right: 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}
.fixBottom {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #fff;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
</style>