<template>
  <view class="content">
    <view
      v-if="type"
      class="relative column align-center justify-center full-height bg-white"
    >
      <view class="last-time-box">
        <button
          class="last-time last-time1"
          shape="circle"
          size="mini"
          :plain="true"
          @click="handleFast"
        >
          外网快捷
        </button>
        <button
          class="last-time"
          :style="{
            'pointer-events': isUps ? 'none' : '',
            opacity: isUps ? 0.5 : 1,
          }"
          shape="circle"
          size="mini"
          :plain="true"
          @click="openPage"
        >
          跳过 {{ leftTime }}
        </button>
      </view>

      <view class="icon-setting" @click="zzcNo">
        <image src="./sz.png" alt="" mode="widthFix" />
      </view>

      <view>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
          "
        >
          <image src="./appbg.png" alt="" style="width: 50%" mode="widthFix" />
        </div>

        <view class="ups" v-if="isUps">
          <view class="ups-box">
            <view class="header"> 老年综合评估系统 </view>
            <uni-forms
              ref="formRef"
              :modelValue="formData"
              :label-width="70"
              :rules="rules"
            >
              <uni-forms-item label="访问域名" name="APP_ACCESS_HOST1">
                <view class="view-item">
                  <view class="view-item-hz">
                    <uni-data-select
                      style="flex: 2"
                      v-model="value"
                      :localdata="range"
                    ></uni-data-select>
                  </view>
                  <uni-easyinput
                    type="text"
                    v-model="formData.APP_ACCESS_HOST1"
                    placeholder="请输入域名"
                  />
                  <view class="view-item-hz view-item-hz1">
                    <uni-easyinput
                      type="text"
                      v-model="formData.APP_ACCESS_ROOT1"
                      placeholder="请输入‌根路径"
                    />
                  </view>
                </view>
              </uni-forms-item>
              <uni-forms-item label="页面地址" name="APP_ACCESS_HOST1">
                <view class="view-item">
                  <view class="view-item-title">
                    {{ value }}{{ formData.APP_ACCESS_HOST1
                    }}{{ formData.APP_ACCESS_ROOT1 }}</view
                  >
                </view>
              </uni-forms-item>
              <view
                class="btn-box"
                style="display: flex; justify-content: space-between"
              >
                <view class="borrad">
                  <button type="default" style="color: #000" @click="onCancel">
                    取消
                  </button>
                </view>
                <view class="borrad">
                  <button class="bul" type="default" @click="onConfirm">
                    确定
                  </button>
                </view>
              </view>
            </uni-forms>
          </view>
        </view>
      </view>
    </view>
    <view v-if="webViewUrl">
      <web-view @message="handleH5Message" :src="webViewUrl"></web-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    const HOSTROOT = (rule, value, callback) => {
      if (!this.formData.APP_ACCESS_HOST1) {
        callback(new Error("域名不能为空"));
      } else if (!this.formData.APP_ACCESS_ROOT1) {
        callback(new Error("根路径不能为空"));
      } else {
        callback();
      }
    };
    return {
      type: true,
      value: "http://",
      range: [
        { value: "http://", text: "http://" },
        { value: "https://", text: "https://" },
      ],
      title: "Hello",
      showCreateBtn: true,
      isUps: false,
      formData: {
        APP_ACCESS_HOST1: "",
        APP_ACCESS_ROOT1: "",
      },
      leftTime: 5,
      rules: {
        APP_ACCESS_HOST1: {
          rules: [
            {
              required: true,
              errorMessage: "域名不能为空",
            },
            {
              validateFunction: (rule, value, data, callback) => {
                if (!this.formData.APP_ACCESS_HOST1) {
                  callback("域名不能为空");
                } else if (!this.formData.APP_ACCESS_ROOT1) {
                  callback("根路径不能为空");
                }

                return true;
              },
            },
          ],
        },
      },
      timer: null, // 左上角倒计时
      timer1: null, // 有数据默认跳转倒计时
      state: true,
      webViewUrl: null,
    };
  },
  onShow() {},
  onLoad() {
    let HOST = uni.getStorageSync("APP_ACCESS_HOST1") || null; // 域名
    let ROOT = uni.getStorageSync("APP_ACCESS_ROOT1") || null; // 根路径
    this.value = uni.getStorageSync("APP_HOST1") || "http://"; // 域名前缀
    this.isUps = true;
    if (HOST && ROOT) {
      this.isUps = false;
    }

    this.formData.APP_ACCESS_HOST1 = HOST;
    this.formData.APP_ACCESS_ROOT1 = ROOT || "/cga/v2/examine/#/";

    // 倒计时
    this.init();
    // 判断是否需要默认弹窗
    if (!HOST || !ROOT) {
      this.isUps = true;
    }
  },
  watch: {
    isUps(newVal, oldVal) {
      if (newVal) {
        clearInterval(this.timer);
        this.timer = undefined;
      } else {
        this.init();
      }
    },
  },
  methods: {
    // 接收H5消息
    handleH5Message(e) {
      let APP_HOST = uni.getStorageSync("APP_HOST1");
      let APP_ACCESS_HOST = uni.getStorageSync("APP_ACCESS_HOST1");
      let url = `${APP_HOST}${APP_ACCESS_HOST}${e.detail.data[0].filePath}`;
      this.handlexz(url);
    },
    // 下载文件并预览
    handlexz(url) {
      console.log("下载", url);
      uni.downloadFile({
        url: url,
        success: (res) => {
          console.log("下载成功", res);
          if (res.statusCode === 200) {
            // 下载成功后调用打开文件方法
            uni.openDocument({
              filePath: res.tempFilePath,
              // fileType: "pdf",
              success: function (res) {
                console.log("打开文档成功");
              },
              fail: function (err) {
                console.log("打开文档失败", err);
              },
            });
          }
        },
        fail: (err) => {
          console.log("下载失败:", err);
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
        },
      });
    },
    // 外网快捷
    handleFast() {
      this.value = "https://";
      this.formData.APP_ACCESS_HOST1 = "www.ylinno.com";
      this.formData.APP_ACCESS_ROOT1 = "/cga/v2/examine/#/";
    },
    //
    onCancel() {
      this.isUps = false;
    },
    onConfirm() {
      if (!this.$refs.formRef) return;
      this.$refs.formRef
        .validate()
        .then(async () => {
          uni.setStorageSync(
            "APP_ACCESS_HOST1",
            this.formData.APP_ACCESS_HOST1,
          );
          uni.setStorageSync("APP_HOST1", this.value);
          uni.setStorageSync(
            "APP_ACCESS_ROOT1",
            this.formData.APP_ACCESS_ROOT1,
          );
          this.isUps = false;
          this.openPage();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    init() {
      this.timer = setInterval(() => {
        if (this.leftTime === 0) {
          clearInterval(this.timer);
          this.timer = undefined;
          if (!this.isUps) {
            this.openPage();
          }
          return;
        }
        this.leftTime -= 1;
      }, 1000);
    },
    openPage() {
      let HOST = this.formData.APP_ACCESS_HOST1 || null;
      let ROOT = this.formData.APP_ACCESS_ROOT1 || null;
      if (HOST && ROOT) {
        this.webViewUrl = `${this.value}${HOST}${ROOT}`;
        this.type = false;
      } else {
        this.isUps = true;
      }
    },
    // 关闭弹窗
    zzcoff() {
      this.isUps = false;
    },
    // 打开弹窗
    zzcNo() {
      clearInterval(this.timer1);
      this.isUps = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.view-item {
  position: relative;
  display: flex;
  align-items: center;

  .view-item-title {
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    line-height: 35px;
    border-radius: 4px;
  }
  .view-item-hz1 {
    flex: 1;
    height: 37px;
    line-height: 37px;
    background: #f5f7fa;
    width: 80px;
    text-align: center;
    border-radius: 4px 0 0 4px;
    border-right: none !important;
    margin-left: 4px;
  }
}
.btn-box {
  button {
    width: 160px;
    height: 44px;
    line-height: 44px;
    border-radius: 22px;
    border: none !important;
  }

  .bul {
    background: #9ed7f4;
    color: #fff;
  }

  .fff {
    border: none;
  }
}

.btn {
  display: block;
  height: 50px;
  box-sizing: border-box;
  background: #9ed7f4;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

.fild-cned {
  width: 196 * 3rpx;
  height: 215 * 3rpx;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.last-time-box {
  position: absolute;
  right: 48rpx;
  top: 68rpx;
  z-index: 2;
}
.last-time {
}
.last-time1 {
  margin-right: 10px;
}
.loading-img {
  width: 450 * 1.5px;
  height: 370 * 1.5px;
  margin-bottom: 50rpx;
}

// .btn-create {
// 	width: 560rpx;
// 	height: 100rpx;
// }

.icon-setting {
  position: fixed;
  right: 48rpx;
  bottom: 68rpx;
  z-index: 1;
}

.icon-setting uni-image {
  width: 50px;
  height: 50px;
}
/* 弹窗样式 */
.ups {
  // height: 280px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ups-box {
  width: 600px;
  padding: 24px 50px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e3e3e3;
}

.ups scroll-view {
  height: 97%;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.ups >>> .checklist-text {
  display: none !important;
}

>>> .uni-switch-input:before {
  background-color: #a3acbf;
}

.header {
  text-align: center;
  font-weight: 600;
  font-size: 36px;
  margin: 15px 0;
  margin-bottom: 30px;
}
</style>
<style scoped>
>>> .box img {
  margin-left: 0;
}
>>> .is-input-border {
  /* border-left: none !important; */
  border-radius: 0 4px 4px 0;
}
>>> .uni-select {
  height: 37px;
  line-height: 37px;
  background: #f5f7fa;
  width: 80px;
  text-align: center;
  border-radius: 4px 0 0 4px;
  border-right: none !important;
}
>>> .uni-icons {
  display: none !important;
}
.content {
  width: 100vw;
  height: 100vh;
  background: #9ed7f4;
  /* background: url("./appbg.png");
  background-size: cover; */
}
uni-button {
  color: #fff;
}
uni-button:after {
  border: 1px solid #fff;
}
uni-button[plain] {
  border: 1px solid #fff;
}
</style>
