<template>
  <div class="manual003" v-if="pageData.mainProduct">
    <div v-if="pageData.mainProduct.orderingInfo">
      <div class="title">产品详情</div>
      <div class="text">
        <div class="desc">
          <div class="main" v-html="pageData.mainProduct.orderingInfo"></div>
        </div>
      </div>
    </div>

    <div v-if="pageData.mainProduct.givePhoneInfo">
      <div class="title">流量使用说明</div>
      <div class="btmText">
        <div class="main" v-html="pageData.mainProduct.givePhoneInfo"></div>
      </div>
    </div>
    <div class="oreder">
      <div class="oerdetText" @click="showConceal = true">隐私声明</div>
      <div
        class="oerdetText"
        v-if="pageData.remarks.memberBtn === '1'"
        @click="getMember"
      >
        领取权益
      </div>
      <div
        class="oerdetText"
        v-if="pageData.remarks.tuidingBtn === '1'"
        @click="beforeLogin"
      >
        退订产品
      </div>
    </div>
    <!--退订弹窗-->
    <van-overlay :show="showUnbuy" :duration="0.1">
      <div class="unbuy-modal modal">
        <img src="../../templates/assets/top.png" class="top" />
        <img src="../../templates/assets/logo.png" class="logo" />
        <div class="body-box">
          <div class="input-box">
            <div class="input">
              <input
                type="text"
                v-model="loginForm.phone"
                placeholder="手机号码"
              />
            </div>
          </div>
          <div class="input-box">
            <div class="input">
              <input
                type="text"
                v-model="loginForm.vcode"
                v-on:input="checkVcode"
                placeholder="验证码"
              />
            </div>
            <div :class="{ code: 1, number: codeState.state }" @click="getCode">
              {{ codeState.state ? codeState.time + "s" : "获取验证码" }}
            </div>
          </div>
          <div class="input-box">
            <div
              class="input"
              style="
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              "
            >
              {{ radio === "0" ? "退订原因" : reason }}
            </div>
            <div
              class="code"
              style="color: #d6000f; text-align: end"
              @click="showSheet = true"
            >
              请选择
            </div>
          </div>
          <div class="btn-box">
            <div class="btn right" @click="unbuy">退订</div>
            <div class="btn left" @click="closeUnbuy">取消</div>
          </div>
          <div v-if="pageData.remarks.unBuyText" class="unBuyText">
            {{ pageData.remarks.unBuyText }}
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 退订挽留 -->
    <van-overlay
      :show="unBuyDrainage"
      :duration="0.1"
      @click="unBuyDrainage = false"
      pageData.strategyInfo.unsubscribeStrategyList.length
      >0 > 0 >
      <div class="other-modal modal" @click.stop>
        <img
          src="../../assets/img/close.png"
          class="close"
          @click="unBuyDrainage = false"
        />
        <div class="text-box">确定要放弃本服务吗?</div>
        <div class="text-box">
          {{ unBuyDrainageText }}
        </div>
        <div class="text-box">不要错过！</div>
        <div class="btn-box">
          <div class="btn left" @click="unBuySure">确定</div>
          <div
            class="btn right"
            @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])"
          >
            去看看
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 图形验证 -->
    <vue-puzzle :show="showVcode" @success="onSuccessCode"></vue-puzzle>
    <!-- 隐私条款 -->
    <conceal v-model="showConceal" :cpid="pageData.mainProduct.cpid"></conceal>
    <van-action-sheet
      lock-scroll
      close-on-popstate
      v-model="showSheet"
      title="退订原因"
      @close="closeSheet"
    >
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in resonList"
            :key="index"
            :title="item.title"
            clickable
            @click="radio = item.value"
          >
            <template #right-icon>
              <van-radio checked-color="#d6000f" :name="item.value" />
            </template>
          </van-cell>
        </van-cell-group>
        <div class="fileBox">
          <van-field
            v-model="message"
            rows="4"
            autosize
            type="textarea"
            placeholder="请描述原因，如遇到其他问题请反馈给我们"
            show-word-limit
          />
        </div>
        <!--        <div-->
        <!--          v-if=" radio === '3'"-->
        <!--          style="width: 90%; margin: 0 auto; font-size: 14px; color: #d6000f"-->
        <!--        >-->
        <!--          请填写退订原因-->
        <!--        </div>-->
        <div class="sureStyle" @click="sureClick">确定</div>
      </van-radio-group>
    </van-action-sheet>
  </div>
</template>

<script>
import addR from "../../common/addRecord";
import vuePuzzle from "vue-puzzle-vcode";
import conceal from "../../components/conceal.vue";
import {
  postBuy,
  getCode,
  login,
  strategyGetID,
  detMainProduct,
  channelGet,
  postFeed,
} from "../../api/index";
import { Dialog } from "vant";
export default {
  name: "manual003",
  components: {
    vuePuzzle,
    conceal,
  },
  data() {
    return {
      showQr: false,
      showUnbuy: false,
      showTimeout: false,
      showSheet: false,
      showVcode: false,
      loginForm: {
        phone: "",
        vcode: "",
      },
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      productId: "",
      pageData: {},
      unBuyDrainage: false,
      unBuyDrainageText: "",
      channelKey: "",
      channelName: "",
      strategyId: 0,
      showConceal: false,
      radio: "0",
      message: "",
      reason: "",
      resonList: [
        {
          title: "最近不用客户端",
          value: "1",
        },
        {
          title: "套餐流量用不完",
          value: "2",
        },
        {
          title: "其他",
          value: "3",
        },
      ],
    };
  },
  created() {
    this.channelKey = this.$route.query.channelKey;
    this.strategyId = this.$route.query.strategyId;
    channelGet({
      channelKey: this.channelKey,
    }).then((res) => {
      this.channelName = res.data.channelName;
    });
    this.getProductInfo();
  },
  destroyed() {},
  methods: {
    closeUnbuy() {
      this.reason = "";
      this.message = "";
      this.radio = "0";
      this.showUnbuy = false;
    },

    getProductInfo() {
      strategyGetID({
        id: this.strategyId,
      }).then(async (res) => {
        if (res.data.strategyStatus === 1) {
          let data = res.data;
          let info = await this.getPorduct(data.primaryProductId);
          let pageData = {
            mainProduct: info.data,
            strategyInfo: data,
            remarks: data.extJson,
            channl: {
              channelKey: this.channelKey,
              channelName: this.channelName,
            },
          };
          this.$store.commit("setPageData", pageData);
          this.pageData = pageData;
        } else {
          this.$toast.fail("当前策略未生效");
        }
      });
    },
    // 登录验证框弹起
    beforeLogin() {
      this.showUnbuy = true;
    },
    // 点击确定
    unBuySure() {
      addR.clickUnsubscribe();
      this.unBuyDrainage = false;
      this.showUnbuy = true;
    },
    // 领取会员
    getMember() {
      addR.memberClick();
      setTimeout(() => {
        window.location.href = "https://cs.mige.tv/H";
      }, 200);
    },
    unbuy() {
      let { phone, vcode } = this.loginForm;
      if (!vcode) {
        return this.$toast("请输入验证码");
      }
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      if (this.radio === "0") {
        return this.$toast("请选择退订原因");
      }

      login({
        phone,
        vcode,
      }).then((res) => {
        if (res.code === 500 || res.data === "") {
          this.$toast.fail("登录失败");
        } else {
          clearInterval(this.codeState.task);
          this.codeState.task = null;
          this.codeState.state = false;
          this.codeState.time = 60;
          this.$store.commit("setUser", {
            userid: res.data.userid,
            phone: this.loginForm.phone,
          });
          this.$emit("change", false);
          this.loginForm = {};
          this.postReson();
          let updata = {
            cpid: this.pageData.mainProduct.cpid,
            spid: this.pageData.mainProduct.spid,
            productId: this.pageData.mainProduct.id,
            channelKey: this.channelKey,
            token: "00011223360000011223360012233600",
            type: "1",
            userid: localStorage.getItem("userid"),
          };
          postBuy(updata).then(
            (res) => {
              if (res.code === 10000) {
                addR.unBuySuccess();
                this.$toast.success("退订成功");
                this.showUnbuy = false;
              }
            },
            (res) => {
              addR.unBuyFail(res);
              // this.$toast({
              //     type: 'fail',
              //     message: res.message,
              //     duration: 5000
              // });
              Dialog({
                message: res.message,
                theme: "round-button",
              });
              this.showUnbuy = false;
            }
          );
        }
      });
    },
    checkVcode() {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    onSuccessCode() {
      this.showVcode = false;
      let { phone } = this.loginForm;
      getCode({
        phone,
      }).then(
        (res) => {
          this.$toast("验证码已发送");
          this.codeState.state = true;
          this.codeState.task = setInterval(() => {
            if (this.codeState.time <= 0) {
              clearInterval(this.codeState.task);
              this.codeState.task = null;
              this.codeState.state = false;
              this.codeState.time = 60;
            } else {
              this.codeState.time--;
            }
          }, 1000);
        },
        (res) => {
          this.$toast(res.message);
        }
      );
    },
    getCode() {
      if (this.codeState.state) return;
      let { phone } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      this.showVcode = true;
    },
    onLogin() {
      let { phone, vcode } = this.loginForm;
      if (!vcode) {
        return this.$toast("请输入验证码");
      }
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      return new Promise((resolve, reject) => {
        login({
          phone,
          vcode,
        }).then(
          (res) => {
            if (res.code === 500 || res.data === "") {
              this.$toast.fail("登录失败");
              reject();
            } else {
              clearInterval(this.codeState.task);
              this.codeState.task = null;
              this.codeState.state = false;
              this.codeState.time = 60;
              let flag = this.$store.state.user.userid === "";
              this.$store.commit("setUser", {
                userid: res.data.userid,
                phone: this.loginForm.phone,
              });
              if (localStorage.getItem("userid")) {
                addR.loginSuccess();
              }
              this.loginForm = {};
              resolve();
            }
          },
          (res) => {
            this.$toast(res.message);
            reject();
          }
        );
      });
    },
    getPorduct(productId) {
      return detMainProduct({
        productId: productId,
      });
    },
    closeSheet() {
      if (this.radio !== "0" && this.reason !== "") {
        this.showSheet = false;
      } else {
        this.radio = "0";
        this.message = "";
        this.reason = "";
        this.totasShow = false;
      }
    },
    sureClick() {
      if (this.radio !== "0") {
        this.reason = this.resonList.find((item) => {
          if (item.value === this.radio) {
            return item;
          }
        }).title;
        this.showSheet = false;
      }
    },
    postReson() {
      let user = localStorage.getItem("userid");
      let phone = this.$store.state.user.phone;
      let feedBack = {
        phone: phone,
        content: "",
        channelName: this.channelName,
        productName: this.pageData.mainProduct.productName,
        spid: this.pageData.mainProduct.spid,
      };
      if (user) {
        feedBack.userid = user;
      }
      let msg = "";
      this.resonList.forEach((item) => {
        if (item.value === this.radio) {
          msg = item.title;
        }
      });
      // feedBack.content = "退订原因"+":" + msg + this.message;
      feedBack.content = `退订原因(${msg})：${this.message}`;
      postFeed(feedBack).then((res) => {
        if (res.code === 10000) {
          this.radio = "0";
          this.message = "";
          this.reason = "";
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.manual003 {
  background-color: #1b1414;
  color: #f6f6f7;
  height: 100vh;
  overflow-y: scroll;
  font-family: PingFang SC;
  padding: 0 62px;
  color: #f6f6f7;

  .title {
    font-size: 42px;
    font-weight: bold;
    padding-top: 40px;
  }

  .text {
    position: relative;

    .desc {
      margin-top: 20px;
      height: 780px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      line-height: 40px;
      position: relative;
      padding-bottom: 10px;

      .main {
        width: auto;
        /*width: 626px;*/
        word-break: break-all;
      }
    }

    .btmZZ {
      width: 624px;
      position: absolute;
      bottom: 0;
      height: 40px;
      background-image: linear-gradient(
        180deg,
        rgba(27, 20, 20, 0.65),
        #1b1414
      );
      border-radius: 6px;
    }
  }

  .btmText {
    padding-bottom: 200px;

    .main {
      word-break: break-all;
    }
  }

  .oreder {
    color: #fd5200;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    text-decoration: underline;
    padding: 50px 0 100px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    background-color: #1b1414;
  }

  .unbuy-modal {
    top: 366px;

    .body-box {
      padding: 40px 50px 70px;

      .input-box {
        display: flex;
        line-height: 75px;
        margin-bottom: 25px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #d6000f;

        .input {
          font-size: 32px;
          color: #000;
          flex: 1;
          background-color: transparent;

          input {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            width: 100%;
          }
        }

        .code {
          font-size: 28px;
          width: 150px;
          margin: 0 10px;
          color: #d6000f;

          &.number {
            color: #a7a7a7;
          }
        }
      }

      .btn-box {
        display: flex;
        justify-content: space-between;

        .btn {
          width: 190px;
          margin-top: 20px;
          height: 80px;
          line-height: 80px;
          border-radius: 40px;
          font-size: 34px;
          font-weight: bold;
          text-align: center;
        }

        .left {
          background: #ffffff;
          border: 2px solid #bfbfbf;
          border-radius: 8px;
        }

        .right {
          color: #d6000f;
          background: #ffffff;
          border: 2px solid #d6000f;
          border-radius: 8px;
        }
      }
    }

    .btn {
      margin-top: 40px;
      height: 80px;
      line-height: 80px;
      background: #fdc51b;
      border-radius: 40px;
      font-size: 34px;
      font-weight: bold;
      color: #0d0d0d;
      text-align: center;
    }

    .unBuyText {
      margin-top: 40px;
      text-align: left;
      font-size: 26px;
      line-height: 40px;
    }
  }

  .modal {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 333px;
    transform: translateX(-50%);
    width: 530px;
    background-color: #fff;
    border-radius: 8px;

    .close {
      width: 80px;
      height: 80px;
      position: absolute;
      bottom: -130px;
      left: 50%;
      transform: translateX(-50%);
    }

    .top {
      width: 530px;
      height: 96px;
    }

    .logo {
      width: 92px;
      height: 50px;
      position: absolute;
      top: 22px;
      left: 37px;
    }
  }

  .other-modal {
    top: 366px;
    padding: 60px 65px;

    .input-box {
      display: flex;
      line-height: 75px;
      margin-bottom: 25px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #fdc620;

      .input {
        font-size: 32px;
        color: #000;
        flex: 1;
        background-color: transparent;

        input {
          margin: 0;
          padding: 0;
          border: none;
          outline: none;
          width: 100%;
        }
      }

      .code {
        font-size: 28px;
        width: 150px;
        margin: 0 10px;
        color: #222222;

        &.number {
          color: #a7a7a7;
        }
      }
    }

    .text-box {
      font-family: PingFang-SC-Medium;
      text-align: center;
      line-height: 55px;
      font-size: 32px;
      color: #000;
    }

    .btn-box {
      display: flex;
      justify-content: space-between;

      .btn {
        width: 190px;
        margin-top: 20px;
        height: 80px;
        line-height: 80px;
        border-radius: 40px;
        font-size: 34px;
        font-weight: bold;
        text-align: center;
      }

      .left {
        border: 2px #fdc51b solid;
        color: #fdc51b;
        background-color: #ffffff;
      }

      .right {
        color: #0d0d0d;
        background: #fdc51b;
      }
    }

    .btn {
      margin-top: 40px;
      height: 80px;
      line-height: 80px;
      background: #fdc51b;
      border-radius: 40px;
      font-size: 34px;
      font-weight: bold;
      color: #0d0d0d;
      text-align: center;
    }
  }

  .sureStyle {
    width: 90%;
    margin: 50px auto;
    border-radius: 40px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #dc2633;
    color: #fff;
  }

  .fileBox {
    margin: 10px 40px;
    box-sizing: border-box;
    border: 1px solid #c4c4c4;
  }
}
</style>