<template>
  <div class="index-wrap">
    <x-header :left-options="{ backText: '', showBack: false }">
      松中心随访反馈
    </x-header>
    <v-content :has-header="true" :has-footer="false">
      <div class="content-title" v-if="submitStatus != 2">
        <p>尊敬的患者，为更好的为您服务，请填写以下反馈问卷。</p>
        <van-radio-group v-model="selected" class="radio-list">
          <van-radio
            :name="item.value"
            v-for="(item, index) in radioList"
            :key="index"
            class="radio-item"
            >{{ item.label }}</van-radio
          >
        </van-radio-group>
        <van-field
          v-model="value"
          type="textarea"
          rows="4"
          autosize
          placeholder="期待您的其他反馈"
          class="text-area-field"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            :loading="loading"
            :disabled="disabled"
            type="info"
            class="btn"
            native-type="submit"
            @click="submit"
            >{{ disabled ? "已提交" : "提交" }}</van-button
          >
        </div>
      </div>
      <div class="empty" v-else>
        <div class="empty-img"></div>
        <div class="empty-text">该链接已过期</div>
      </div>
    </v-content>
    <van-dialog
      v-model="show"
      confirm-button-color="#4C73FF"
      confirm-button-text="好的"
    >
      <div class="dialog-body">
        <p>提交成功</p>
        <div class="icon">
          <van-icon name="checked" />
        </div>
        <div class="text">您的随访反馈已提交成功</div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      value: "",
      submitStatus: "",
      selected: "",
      loading: false,
      disabled: false,
      radioList: [
        { label: "愿意参与持续随访", value: "1" },
        { label: "推迟参与随访", value: "2" },
        { label: "医生告知无需继续复诊", value: "3" },
        { label: "不想继续在松中心治疗", value: "4" },
        { label: "其他", value: "5" }
      ]
    }
  },
  methods: {
    submit() {
      if (!this.selected) {
        this.$toast.fail({
          type: "fail",
          forbidClick: true,
          message: "请选择反馈内容"
        })
        return
      }
      if (this.selected == "5" && this.value == "") {
        this.$toast.fail({
          type: "fail",
          forbidClick: true,
          message: "请输入反馈内容"
        })
        return
      }
      const data = {
        patientId: this.dataId,
        content:
          this.selected != 5
            ? this.radioList[this.selected - 1].label
            : this.value,
        type: this.selected
      }
      this.$API.putFeedback(data).then((res) => {
        if (res.code == 1) {
          this.show = true
        }
      })
    },
    getData() {
      const data = {
        patientId: this.dataId
      }
      this.$API.getFeedback(data).then((res) => {
        if (res.code == 1) {
          this.submitStatus = res.object.submitStatus
          if (this.submitStatus == 1) {
            this.selected = res.object.data.feedbackType + ""
            this.value =
              this.selected == 5 ? res.object.data.feedbackContent : ""
          } else {
            this.selected = ""
            this.value = ""
          }
          // localStorage.setItem("vd_token", res.result)
          // this.$toast.success({
          //   type: "success",
          //   forbidClick: true,
          //   message: "登录成功",
          //   onClose: () => {
          //     this.$router.push("/peopleList")
          //   },
          //   duration: 1500
          // })
        }
      })
    }
  },
  mounted() {
    console.log(this.$route)
    this.dataId = this.$route.params.dataId
    if (this.dataId) {
      this.getData()
    }
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
.content-title {
  height: 100%;
  padding: 24px;
  position: relative;
  p {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    letter-spacing: 1px;
    color: #333333;
  }
  .radio-list {
    margin-top: 24px;
    .radio-item {
      margin-bottom: 16px;
    }
  }
}
::v-deep {
  .text-area-field {
    // width: 327px;
    // min-height: 140px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d2d2d2;
  }
}
.btn {
  height: 44px;
  border-radius: 22px !important;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}
.empty {
  width: 100%;
  .empty-img {
    margin: 200px auto 0px;
    width: 220px;
    height: 160px;
    background: url("~@/assets/img/guoqi@2x.png") no-repeat 100% 100%;
    background-size: cover;
  }
  .empty-text {
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #666666;
  }
}
.dialog-body {
  text-align: center;
  padding: 20px;
  p {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .icon {
    font-size: 70px;
    color: #4c73ff;
  }
  .text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #333333;
  }
}
</style>