<template>
  <div class="app-download">
    <div class="head_title">{{ $t("APP_DOWNLOAD") }}</div>
    <div class="app_search">
      <a-input
        v-model="appVersionName"
        :placeholder="$t('PLACEENTER')"
        @pressEnter="search"
      >
        <template #prefix>
          <Icon type="icon-cur-search" :size="16" />
        </template>
      </a-input>
    </div>
    <div class="app_list">
      <ul v-if="dataList.length > 0">
        <li v-for="(item, index) in dataList" :key="index">
          <div class="icon">
            <Icon :type="item.logo" :size="40" />
          </div>
          <div class="content">
            <span>{{ item.appName }}</span>
            <span>{{ item.appVersionName }}</span>
            <span>{{ item.appDescribe }}</span>
          </div>
          <div class="btn" @click="handClick(item)">{{ $t("INSTALL") }}</div>
        </li>
      </ul>
      <div v-else class="no_data_div">
        <div>
          <img src="@/assets/svg/no_data.svg" alt="" />
          <span class="no_data">{{ $t("NO_DATA") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from "@mega-design/ui-vue";
import { fetchFileUrlDownload } from "@/utils/file";
import ApiConstant from "@/api/ApiConstant";
// 当页面加载完成后触发该函数
window.onload = function () {
  // e.preventDefault() --- 阻止默认事件
  // 当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。
  document.addEventListener("gesturestart", function (e) {
    e.preventDefault();
  });

  // 在单个元素上单击两次 --- dblclick
  document.addEventListener("dblclick", function (e) {
    e.preventDefault();
  });

  // 一个手指放在屏幕上时，会触发touchstart事件
  document.addEventListener("touchstart", function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });

  // 如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件
  // 但只要有一个手指移开，则会触发gestureend事件，紧接着又会触发toucheend事件。
  let lastTouchEnd = 0;
  document.addEventListener(
    "touchend",
    function (event) {
      const now = new Date().getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    },
    false
  );
};

export default {
  name: "AppDownload",
  components: { Icon },
  layout: "none",
  data() {
    return {
      appVersionName: "",
      dataList: [],
    };
  },
  head() {
    return {
      meta: [
        {
          name: "viewport",
          content:
            "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no",
        },
        {
          name: "apple-mobile-web-app-capable",
          content: "yes",
        },
      ],
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      const obj = {
        appVersionName: this.appVersionName,
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/app-version/list-app`, {
          params: obj,
        })
        .then((res) => {
          this.dataList = res.data.data;
        });
    },
    handClick(item) {
      window.location.href = item.fileUrl;
    },
  },
};
</script>

<style lang="less" scoped>
@media only screen and (min-width: 1080px) {
  .app-download {
    background: #e8eff2;
    width: 100%;
    height: 100%;
    .head_title {
      width: 100%;
      height: 74px;
      background: #fff;
      border-radius: 0;
      opacity: 1;
      font-size: 24px;
      line-height: 74px;
      text-align: center;
      font-weight: bold;
      color: #333;
    }
    .app_search {
      width: 699px;
      height: 42px;
      background: #fff;
      border-radius: 21px 21px 21px 21px;
      margin: 11px auto 0;
      display: flex;
      align-items: center;
      /deep/.ant-input {
        height: 42px;
        line-height: 42px;
        border-radius: 21px 21px 21px 21px;
        border: none;
        padding-left: 32px;
      }
    }
    .app_list {
      width: 699px;
      height: calc(100vh - 138px);
      background: #fff;
      text-align: center;
      border-radius: 12px 12px 12px 12px;
      margin: 11px auto;
      ul {
        li {
          display: flex;
          align-items: center;
          padding: 14px 0;
          margin: 0 14px;
          border-bottom: 1px solid #eaedf1;
          .icon {
            width: 75px;
            height: 75px;
            background: #0ea8d0;
            box-shadow: 0 2px 11px 1px rgba(5, 96, 133, 0.27);
            border-radius: 12px 12px 12px 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
          }
          .content {
            width: calc(100% - 135px);
            padding-left: 20px;
            span {
              display: block;
              width: 100%;
              text-align: left;
              font-size: 14px;
              color: #999;
            }
            span:nth-of-type(1) {
              font-size: 16px;
              font-weight: 400;
              color: #333;
            }
          }
          .btn {
            width: 58px;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            background: #006896;
            border-radius: 15px 15px 15px 15px;
            cursor: pointer;
          }
        }
      }
      .no_data_div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;
        span {
          display: block;
          width: 100%;
          font-size: 14px;
          font-weight: 400;
          color: #333;
          margin-top: 12px;
        }
      }
      .no_data {
        font-size: 14px;
        font-weight: 400;
        color: #333;
      }
    }
  }
}
@media screen and (max-width: 1079px) {
  .app-download {
    background: #e8eff2;
    width: 100%;
    height: 100%;
    .head_title {
      width: 100%;
      height: 74px;
      background: #fff;
      border-radius: 0;
      opacity: 1;
      font-size: 24px;
      line-height: 74px;
      text-align: center;
      font-weight: bold;
      color: #333;
    }
    .app_search {
      width: 351px;
      height: 42px;
      background: #fff;
      border-radius: 21px 21px 21px 21px;
      margin: 11px auto 0;
      display: flex;
      align-items: center;
      /deep/.ant-input {
        height: 42px;
        line-height: 42px;
        border-radius: 21px 21px 21px 21px;
        border: none;
        padding-left: 32px;
      }
    }
    .app_list {
      width: 351px;
      height: calc(100vh - 138px);
      background: #fff;
      text-align: center;
      border-radius: 12px 12px 12px 12px;
      margin: 11px auto;
      ul {
        li {
          display: flex;
          align-items: center;
          padding: 14px 0;
          margin: 0 14px;
          border-bottom: 1px solid #eaedf1;
          .icon {
            width: 75px;
            height: 75px;
            background: #0ea8d0;
            box-shadow: 0 2px 11px 1px rgba(5, 96, 133, 0.27);
            border-radius: 12px 12px 12px 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
          }
          .content {
            width: calc(100% - 135px);
            padding-left: 20px;
            span {
              display: block;
              width: 100%;
              text-align: left;
              font-size: 14px;
              color: #999;
            }
            span:nth-of-type(1) {
              font-size: 16px;
              font-weight: 400;
              color: #333;
            }
          }
          .btn {
            width: 58px;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            background: #006896;
            border-radius: 15px 15px 15px 15px;
            cursor: pointer;
          }
        }
      }
      .no_data_div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;
        span {
          display: block;
          width: 100%;
          font-size: 14px;
          font-weight: 400;
          color: #333;
          margin-top: 12px;
        }
      }
      .no_data {
        font-size: 14px;
        font-weight: 400;
        color: #333;
      }
    }
  }
}
</style>
