<template>
  <div class="right_wrap">
    <div class="navigat_top" v-show="!isIntroduction">
      <span class="navigat_text">导航:</span>
      <div class="navigat_right">
        <div
          class="ant-breadcrumb"
          v-for="(item, index) in navigationArr"
          :key="index"
        >
          <div class="breadcrumb_item">
            <span class="">{{ item }}</span>
            <span
              class="ant-breadcrumb-separator"
              v-if="index < navigationArr.length - 1"
              >></span
            >
          </div>
        </div>
      </div>
    </div>
    <div
      class="info-card introduction_statistics_wrap"
      v-show="!isIntroduction"
    >
      <div class="introduction_wrap">
        <div
          :class="
            typeA > 2
              ? 'introduction-title introduction-jbxx'
              : 'introduction-title introduction-jjxx'
          "
        ></div>
        <div class="info-card-body" id="scroll_in2">
          <div
            class="card-body_c"
            :class="{ introduction_and_statistics: statisticsArr.length != 0 }"
          >
            <div class="info_text" v-if="introduction">
              {{ introduction }}
            </div>
            <div
              v-if="!introduction && Object.keys(elementary).length"
              class="info_text_obj"
            >
              <div
                v-for="(val, key, i) in elementary"
                :key="i"
                class="info_text_item"
                :index="key"
              >
                <span v-if="key != '照片'">{{ key }}：</span>
                <span v-if="key != '照片'" style="color: #02ffc2; flex: 1">{{
                  val
                }}</span>
                <span v-if="key == '照片'" class="avatar-img-box">
                  <img
                    :src="
                      val || require('@/assets/bigScreenHome/ic_wanggeyuan.png')
                    "
                    :class="[val ? 'avatar-img' : 'default-img']"
                  />
                </span>
              </div>
            </div>
            <div class="xxImg" v-if="fileList && fileList.length > 0">
              <div>图片:</div>
              <div class="imgList">
                <img
                  :src="item"
                  alt=""
                  v-for="(item, id) in fileList"
                  :key="id"
                  @click="
                    () => {
                      ViewerUrl = fileList;
                      dialogModal.imageshow = true;
                    }
                  "
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计信息 -->
      <div class="statistics_wrap" v-show="statisticsArr.length">
        <div class="statistics-title"></div>
        <div class="info-card-body" id="scroll_in3">
          <div
            class="card-body_c"
            :class="{ 'card-body_c_more': typeA === 4 || typeA === 6 }"
          >
            <div class="ant-row">
              <div
                class="gutter-row"
                v-for="(item, index) in statisticsArr"
                :key="index"
              >
                <div class="gutter-lebel">
                  {{ item.name }}{{ filterUnit(item.name) }}：
                </div>
                <span class="fz-color">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btn" v-if="typeA === 4 || typeA === 6" @click="toDetail">
          详情
        </div>
      </div>
    </div>
    <div
      class="info-card-right introduction_img"
      @click="isIntroduction = !isIntroduction"
    >
      <img
        :src="require('@/assets/bigScreenHome/ic_left_shousuo.png')"
        alt=""
        v-if="isIntroduction"
      />
      <img
        :src="require('@/assets/bigScreenHome/ic_right_shousuo.png')"
        alt=""
        v-else
      />
    </div>
    <!-- 图 -->
    <div class="info-card basicInfo" v-show="!isBasicInfo">
      <div class="basicInfo-title"></div>
      <div class="info-card-body">
        <div class="card-body_c">
          <div class="img_box" v-if="dialogModal.imageUrl">
            <img :src="dialogModal.imageUrl" alt="" />
          </div>
          <div
            class="look-picture_btn"
            @click="
              () => {
                dialogModal.imageshow = true;
                ViewerUrl = [dialogModal.imageUrl];
              }
            "
            v-if="dialogModal.imageUrl"
          >
            查看大图
          </div>
        </div>
      </div>
    </div>
    <div
      class="info-card-right basicInfo_img"
      @click="isBasicInfo = !isBasicInfo"
    >
      <img
        :src="require('@/assets/bigScreenHome/ic_left_shousuo.png')"
        alt=""
        v-if="isBasicInfo"
      />
      <img
        :src="require('@/assets/bigScreenHome/ic_right_shousuo.png')"
        alt=""
        v-else
      />
    </div>
    <imageViewer
      v-if="dialogModal.imageshow"
      :on-close="imageviewclose"
      :url-list="ViewerUrl"
    />
  </div>
</template>

<script>
import { imageFileView } from "@/api/document/api";
import imageViewer from "@/views/bigScreen/components/imageViewer"; //文件预览
import { filterUnit } from "../components/modules/utils/util";
export default {
  name: "rightLayout",
  props: {
    introduction: {
      type: String,
      default: "",
    },
    elementary: {
      type: Object,
      default: () => {},
    },
    navigationArr: {
      type: Array,
      default: () => [],
    },
    // 统计信息
    statisticsArr: {
      type: Array,
      default: () => [],
    },
    oImg: {
      type: Object,
      default: () => {},
    },
    jbxx: {
      type: Object,
      default: () => {},
    },
    typeA: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      dialogModal: {
        imageshow: false,
        imageUrl: "",
      },
      isBasicInfo: false,
      isIntroduction: false,
      fileList: [], //基本信息里面的大图地址
      ViewerUrl: [], //预览大图地址列表
    };
  },

  components: {
    imageViewer,
  },

  filters: {
    fliterPath(file) {
      console.log(file, "史蒂夫");
      let captchaImg = "";
      // imageFileView({
      //   filePath: file.filePath,
      //   fileName: file.fileName,
      // }).then((res) => {
      //    captchaImg = window.URL.createObjectURL(res)
      // })
      return captchaImg;
    },
  },

  computed: {},

  mounted() {
    this.autoSroll("scroll_in2");
    this.autoSroll("scroll_in3");
  },
  watch: {
    typeA: {
      handler(newV) {
        console.log(newV, "编号了");
        this.typeA = newV;
      },
      deep: true,
    },
    oImg: {
      handler(newV) {
        let captchaImg =
          "https://i.hd-r.cn/22ff41b04f1fde1568420e8574f20ad6.jpg";
        this.dialogModal.imageUrl = captchaImg;
        // console.log("图片数组", newV);
        // this.dialogModal.imageUrl = "";
        // if (Object.keys(newV).length) {
        //   // this.$Spin.show();
        //   imageFileView({
        //     filePath: newV.filePath,
        //   }).then((res) => {
        //     // this.$Spin.hide();
        //     let captchaImg = window.URL.createObjectURL(res);
        //     this.dialogModal.imageUrl = captchaImg;
        //   });
        // }
      },
      deep: true,
    },
    jbxx: {
      async handler(newV) {
        if (newV && newV.tpList) {
          this.fileList = await this.getImgUrl(newV.tpList);
        } else {
          this.fileList = [];
        }
      },
      deep: true,
    },
    elementary: {
      async handler(newV) {
        if (newV) {
          for (const key in newV) {
            if (key === "照片" && newV[key] && newV[key].filePath) {
              imageFileView({
                filePath: newV[key].filePath,
              }).then((res) => {
                newV[key] = window.URL.createObjectURL(res);
              });
            }
          }
        }
      },
    },
  },

  methods: {
    filterUnit,
    autoSroll(Id) {
      // flag 为true时停止滚动
      var flag = false;
      // 定时器
      var timer;
      function roll() {
        var h = -1;
        timer = setInterval(function () {
          flag = true;
          // 获取当前滚动条高度
          var current = document.getElementById(Id).scrollTop;
          if (current == h) {
            // 滚动到底端,返回顶端
            h = 0;
            document.getElementById(Id).scrollTop = h + 2;
          } else {
            // 以25ms/3.5px的速度滚动
            h = current;
            document.getElementById(Id).scrollTop = h + 2;
          }
        }, 100);
      }
      // setTimeout(function() {
      // 滚动区域内单击鼠标 滚动暂停 再次点击鼠标 继续滚动
      document.getElementById(Id).onclick = () => {
        console.log("点击了", timer, flag);
        if (flag) {
          flag = false;
          clearInterval(timer);
        } else {
          roll();
        }
      };
      roll();
      // }, 2000);
    },
    imageviewclose() {
      this.dialogModal.imageshow = false;
    },
    getImgUrl(fileList) {
      return new Promise((resolve, reject) => {
        let imgHtml = [],
          num = 0;
        fileList.map((file, index) => {
          num++;
          imageFileView({
            filePath: file.filePath,
            fileName: file.fileName,
          }).then((res) => {
            let captchaImg = window.URL.createObjectURL(res);
            imgHtml.push(captchaImg);
          });
        });
        if (num == fileList.length) {
          setTimeout(() => {
            resolve(imgHtml);
          }, 800);
        }
      });
    },
    toDetail() {
      this.$emit("toDetail");
    },
  },
};
</script>
<style lang='less' scoped>
.right_wrap {
  position: absolute;
  right: 20px;
  top: 95px;
  width: 450px;
}

.info-card {
  width: 450px;
  background: rgba(0, 14, 15, 0.6);
  box-sizing: border-box;
  border: 1px solid #036a73;
  padding: 20px;
  position: relative;
  margin-bottom: 20px;

  .introduction-title {
    height: 32px;
    background-size: 100% 100%;
  }
  .introduction-jbxx {
    background-image: url("../../../assets/bigScreenHome/introduction-title.png");
  }
  .introduction-jjxx {
    background-image: url("../../../assets/bigScreenHome/jjxx.png");
  }

  .statistics-title {
    height: 32px;
    background-image: url("../../../assets/bigScreenHome/statistics-title.png");
    background-size: 100% 100%;
  }

  .basicInfo-title {
    height: 32px;
    background-image: url("../../../assets/bigScreenHome/basicInfo-title.png");
    background-size: 100% 100%;
  }

  .info-card-body {
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
    color: #ffffff;

    .card-body_c {
      padding: 30px 0;

      .info_text {
        text-indent: 2em;
        text-align: left;
      }
      .info_text_obj {
        display: flex;
        flex-wrap: wrap;
        font-size: 18px;
        line-height: 38px;
        .info_text_item {
          text-align: left;
          width: 100%;
          display: flex;
          position: relative;
          .avatar-img-box {
            border: 1px solid #036a73;
            position: absolute;
            top: 12px;
            right: 10px;
            width: 100px;
            height: 128px;
            display: flex;
            align-items: center;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .default-img {
              padding: 10px;
              box-sizing: border-box;
              object-fit: contain;
            }
            .avatar-img {
              object-fit: cover;
            }
          }
        }
      }

      .gutter-row {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        box-sizing: border-box;
        text-align: left;
        line-height: 38px;
      }
      .fz-color {
        color: #02ffc2;
      }

      .ant-row {
        position: relative;
        height: auto;
        zoom: 1;
        display: block;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
    }

    .img_box {
      width: 100%;
      height: 144px;
      margin-bottom: 33px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .image__error {
      height: 200px;
      align-items: center;
      font-size: 14px;
      color: #c0c4cc;
      vertical-align: middle;
      background: #f5f7fa;
    }

    .look-picture_btn {
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      /* 蓝绿渐变 */
      background: linear-gradient(180deg, #03fcad 0%, #02f3f7 100%);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 0em;
      color: #000000;
      text-align: center;
    }

    .xxImg {
      div {
        text-align: left;
      }
      .imgList {
        img {
          display: inline-block;
          width: 60px;
          height: 60px;
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
.introduction_statistics_wrap {
  height: 558px;
  .info-card-body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .introduction_wrap {
    .card-body_c {
      height: 485px;
    }
    .introduction_and_statistics {
      height: 240px;
    }
  }
  .statistics_wrap {
    margin-top: 20px;
    .card-body_c {
      height: 194px;
    }
    .card-body_c_more {
      height: 153px;
    }
  }
}
// 图
.basicInfo {
  height: 331px;
  position: absolute;
  top: 608px;
  right: 0px;
  margin-bottom: 0px;
  margin-top: 20px;
}

.info-card-right {
  position: absolute;
  right: -10px;
  top: 290px;
  width: 20px;
  height: 77px;
  cursor: pointer;
  img {
    width: 100%;
  }
}

.basicInfo_img {
  top: 755px;
}

.navigat_top {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 6px;
  margin-top: 14px;

  .navigat_text {
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    font-size: 16px;
    font-weight: 600;
  }
  .navigat_right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }

  .ant-breadcrumb {
    height: 30px;
    color: #02ffc2;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    display: flex;
    &:last-child {
      text-decoration: underline;
    }
  }

  :deep(.ant-breadcrumb-separator) {
    color: #02ffc2;
    margin: 0 8px;
  }
}

/*设置宽度,轨道颜色*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #000e0f;
}
.btn {
  width: 175px;
  height: 40px;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #02ffc2;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: normal;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  margin: auto;
  background: linear-gradient(180deg, #03fcbe 0%, #02f3f7 100%);
  color: #000000;
}
/*滚动条*/
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #03fcad 0%, #02f3f7 100%);
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
}
</style>