<template>
  <div>
    <van-overlay :show="value" :duration="0.1">
      <div class="unbuy-modal modal">
        <img src="../assets/img/top@2x.png" class="top" />
        <img src="../assets/img/unicmlogo.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>
    <vue-puzzle :show="showVcode" @success="onSuccessCode()"></vue-puzzle>
    <van-action-sheet lock-scroll close-on-popstate v-model="showSheet" title="退订原因" @close="closeSheet">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-row>
            <div v-for="(item, index) in resonList" style="width: 100%">
              <van-col span="12">
                <van-cell :key="index" :title="item.title" clickable @click="radioClick(item.value)">
                  <template #right-icon>
                    <van-radio checked-color="#d6000f" :name="item.value" />
                  </template>
                </van-cell>
              </van-col>

            </div>
          </van-row>

        </van-cell-group>
        <div class="fileBox">
          <van-field v-model="message" rows="2" 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>
    <!-- 挽回弹窗 -->
    <van-overlay :show="saveValue" :duration="0.1">
      <div class="repeat-modal modal" @click.stop>
        <div class="text-box" v-if="memberInfo.joinTime && memberInfo.joinTime !==null">您于{{memberInfo.joinTime}}已成功领取!</div>
        <div v-else class="text-box">非常抱歉给您使用带来不便，为您提供一份专属解决方案，您试试解决？</div>
        <div class="btn-box">
          <div v-if="radio === '1'" class="btn left" @click="saveClick(1)">试试解决</div>
          <div v-else-if="radio === '2' && (memberInfo.joinTime === null || !memberInfo.joinTime) " class="btn left" @click="saveClick(2)">试试解决</div>
          <div v-else-if="radio === '2' && memberInfo.joinTime !== null && memberInfo.joinTime" class="btn left" @click="saveValue=false">确定</div>
          <div class="btn right" @click="savleUnbuy">坚持退订</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { postBuy, getCode, login, outFeed, memberList } from "../api/index";
import addR from "../common/addRecord";
import vuePuzzle from "vue-puzzle-vcode";
import { Notify, Dialog } from "vant";
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: Boolean,
    pageData: Object,
    isBuy: String,
  },
  components: {
    vuePuzzle,
    Notify,
  },
  data () {
    return {
      loginForm: {
        phone: "",
        vcode: "",
      },
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      showVcode: false,
      showSheet: false,
      totasShow: false,
      radio: "0",
      message: "",
      reason: "",
      resonList: [
        {
          title: "最近不用客户端",
          value: "3",
        },
        {
          title: "流量用不完",
          value: "4",
        },
        {
          title: "价格太贵",
          value: "5",
        },
        {
          title: "误点误操作",
          value: "6",
        },
        {
          title: "流量无法激活",
          value: "1",
        },
        {
          title: "会员无法领取",
          value: "2",
        },
        {
          title: "其他",
          value: "7",
        },
      ],
      saveValue: false,
      memberInfo: {}
    };
  },
  computed: {
    user () {
      return this.$store.state.user
    },
  },
  methods: {
    closeUnbuy () {
      this.reason = "";
      this.message = "";
      this.radio = "0";
      this.$emit("change", false);
    },
    checkVcode () {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    getCode () {
      if (this.codeState.state) return;
      let { phone } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      this.showVcode = true;
    },
    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);
        }
      );
    },
    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(async (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 = {};
          let updata = {
            cpid: this.pageData.mainProduct.cpid,
            spid: this.pageData.mainProduct.spid,
            productId: this.pageData.mainProduct.id,
            channelKey: this.pageData.channl.channelKey,
            token: "00011223360000011223360012233600",
            type: "1",
            userid: this.$store.state.user.userid,
          };
          await this.postReson(res.data.userid, phone);
          postBuy(updata).then(
            (res) => {
              if (res.code === 10000) {
                addR.unBuySuccess();
                this.$toast.success("退订成功");
                this.$emit("change", false);
                this.$emit("childData", "已退订");
              }
            },
            (res) => {
              addR.unBuyFail(res);
              // this.$toast({
              //     type: 'fail',
              //     message: res.message,
              //     duration: 5000
              // });
              Dialog({
                message: res.message,
                theme: "round-button",
              });
              this.$emit("change", false);
            }
          );
        }
      }, response => {
        if (response.code === 500) {
          this.$toast(response.message)
        }
      });
    },
    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 (userid, phone) {
      // let {userid , phone} = this.$store.state.users
      let feedBack = {
        phone: phone,
        content: "",
        reason: "",
        channelName: this.pageData.channl.channelName,
        productName: this.pageData.mainProduct.productName,
        spid: this.pageData.mainProduct.spid,
        userid: userid
      };
      let msg = "";
      this.resonList.forEach((item) => {
        if (item.value === this.radio) {
          msg = item.title;
        }
      });
      feedBack.reason = msg
      feedBack.content = this.message;
      outFeed(feedBack).then((res) => {
        if (res.code === 10000) {
          this.radio = "0";
          this.message = "";
          this.reason = "";
        }
      });
    },
    radioClick (value) {
      this.memberInfo = {}
      this.radio = value
      if (value === '3') {
        addR.unbuyReason()
      } else if (value === '4') {
        addR.unbuyReason1()
      } else if (value === '5') {
        addR.unbuyReason2()
      } else if (value === '6') {
        addR.unbuyReason3()
      } else if (value === '7') {
        addR.unbuyReason4()
      } else if (value === '1') {
        addR.unbuyReason5()
        this.saveValue = true
        this.sureClick()
      } else if (value === '2') {
        addR.unbuyReason6()
        if (this.pageData.mainProduct.isCompositeProduct === 0 && this.user.userid) {
          let {
            cpid,
            spid,
            isCompositeProduct,
            activeType
          } = this.pageData.mainProduct;
          memberList({
            userid: this.user.userid,
            cpid,
            spid,
            isCompositeProduct,
            activeType,
          }).then(res => {
            if (res.data.length > 0 && res.data !== null) {
              this.memberInfo = res.data[0]
              this.saveValue = true
              this.sureClick()
            }

          })
        } else {
          this.saveValue = true
          this.sureClick()
        }


      }

    },
    saveClick (num) {
      this.saveValue = false
      this.reason = ''
      this.radio = '0'
      this.$emit('change', false)
      if (num === 1) {
        addR.jihuoSolve()
        this.$emit('jihuo')
      } else {
        addR.memberSolve()
        this.$emit('memberClick', 'member')
      }
    },
    savleUnbuy () {
      this.saveValue = false
      if (this.radio === '1') {
        addR.jihuoUnbuy()
      } else if (this.radio === '2') {
        addR.memberUnbuy()
      }
    }
  },
};
</script>
<style lang="scss">
.fileBox {
  margin: 10px 40px;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
}

.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: 100%;
    height: 96px;
  }

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

.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;
      }
    }

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

  .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;
  }
}
.repeat-modal {
  top: 412px;
  padding: 60px 51px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #222222;

  .text-box {
    line-height: 48px;
    text-align: center;
  }

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

    .btn {
      width: 190px;
      margin-top: 60px;
      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;
    }
  }
}

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