<template>
  <div class="full-page">
    <div class="container sign-page">
      <div class="head">
        <div class="head-bg"></div>
        <!-- <div class="head-block">
          <div class="table">
            <div class="tr">
              <div class="td picture">
                <div class="avatar"></div>
              </div>
              <div class="td info">
                <div class="title"></div>
                <div class="des"></div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="form">
        <!-- <div class="p-title"><span class="label">评价医生</span></div> -->
        <div class="table comment-radio" style="padding-bottom: 0.5em;">
          <div class="tr">
            <div class="td">
              <div class="item-cell">
                <button class="btn btn-white btn-circle" :class="form.DoctorRadio=='满意'?'checked':''" @click="selectedCommentType('commentDoctorType','满意')">
                  <div class="table">
                    <div class="tr">
                      <div class="td icon">
                        <i class="glyphicon" :class="form.DoctorRadio=='满意'?'icon-pleased-white':'icon-pleased-gray'"></i>
                      </div>
                      <div class="td text">
                        <span>满意</span>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div class="td">
              <div class="item-cell">
                <button class="btn btn-white btn-circle" :class="form.DoctorRadio=='不满意'?'checked':''" @click="selectedCommentType('commentDoctorType','不满意')">
                  <div class="table">
                    <div class="tr">
                      <div class="td icon">
                        <i class="glyphicon" :class="form.DoctorRadio=='不满意'?'icon-unpleased-white':'icon-unpleased-gray'"></i>
                      </div>
                      <div class="td text">
                        <span>不满意</span>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
          <p>请对本次服务的整体情况进行评价</p>
          <div class="tr">
            <div class="td">
              <div class="item-cell">
                <button class="btn btn-white btn-circle" :class="form.CommunityRadio=='满意'?'checked':''" @click="selectedCommentType('commentCommunityType','满意')">
                  <div class="table">
                    <div class="tr">
                      <div class="td icon">
                        <i class="glyphicon" :class="form.CommunityRadio=='满意'?'icon-pleased-white':'icon-pleased-gray'"></i>
                      </div>
                      <div class="td text">
                        <span>满意</span>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
            <div class="td">
              <div class="item-cell">
                <button class="btn btn-white btn-circle" :class="form.CommunityRadio=='不满意'?'checked':''" @click="selectedCommentType('commentCommunityType','不满意')">
                  <div class="table">
                    <div class="tr">
                      <div class="td icon">
                        <i class="glyphicon" :class="form.CommunityRadio=='不满意'?'icon-unpleased-white':'icon-unpleased-gray'"></i>
                      </div>
                      <div class="td text">
                        <span>不满意</span>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
          <p>请对为你服务的医护人员态度进行评价</p>
        </div>
        <div class="form">
          <div class="table" style="padding-bottom: 0.5em;">
            <div class="p-title text-center">“很满意”</div>
            <div class="stars m-b text-center">
              <ul class="nav-pills">
                <li>
                  <i class="glyphicon glyphicon-star" :class="form.starsChecked >= 1 ? 'checked' : ''" @click="starHandle(1)"></i>
                </li>
                <li>
                  <i class="glyphicon glyphicon-star" :class="form.starsChecked >= 2 ? 'checked' : ''" @click="starHandle(2)"></i>
                </li>
                <li>
                  <i class="glyphicon glyphicon-star" :class="form.starsChecked >= 3 ? 'checked' : ''" @click="starHandle(3)"></i>
                </li>
                <li>
                  <i class="glyphicon glyphicon-star" :class="form.starsChecked >= 4 ? 'checked' : ''" @click="starHandle(4)"></i>
                </li>
                <li>
                  <i class="glyphicon glyphicon-star" :class="form.starsChecked == 5 ? 'checked' : ''" @click="starHandle(5)"></i>
                </li>
              </ul>
            </div>
            <div class="textarea-editor">
              <textarea class="text-area" v-model="form.commentContent" maxlength="50" placeholder="请您对医生的服务进行评价" @keyup="textareaEditor"></textarea>
              <span class="pagination">{{pagination}}/50</span>
            </div>
            <p class="text-danger text-center m-t" style="font-size:0.9em;">
              温馨提示：本服务评价只针对乡镇卫生院、社区服务中心医生提供的服务做评价反馈，其它二三级医院的服务不做反馈。
            </p>
          </div>
        </div>
      </div>
      <div class="footer">
        <button class="btn-default btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handleSubmit">立即评价</button>
      </div>

      <commentResult v-if="resultVisible"></commentResult>
    </div>
  </div>
</template>

<script>
import commentResult from '@/components/commentResult'
import { evaluationThree } from '@/api/apply/apply.js'

export default {
  name: 'comment',
  data () {
    return {
      voucherId: this.$route.query.voucherId,
      btnDisabled: false,
      pagination: 0,
      form: {
        DoctorRadio: '',
        CommunityRadio: '',
        starsChecked: 0,
        commentContent: ''
      },
      resultVisible: false
    }
  },
  created () {
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
    commentResult
  },
  methods: {
    selectedCommentType (type, radio) {
      console.log(type)
      switch (type) {
        case 'commentDoctorType' :
          this.form.DoctorRadio = radio
          break
        case 'commentCommunityType' :
          this.form.CommunityRadio = radio
          break
      }
    },
    starHandle (index) {
      this.form.starsChecked = index
    },
    textareaEditor () {
      console.log('textarea change')
      this.pagination = this.form.commentContent.length
    },
    handleSubmit () {
      if (!this.voucherId || this.voucherId === '') {
        this.$toast({
          message: '服务券id不能为空',
          position: 'center',
          duration: 3 * 1000
        })
        return
      }
      if (this.form.DoctorRadio < 0 || this.form.DoctorRadio === '') {
        this.$toast({
          message: '请选择对医生的评价',
          position: 'center',
          duration: 3 * 1000
        })
        return
      }
      if (this.form.CommunityRadio < 0 || this.form.CommunityRadio === '') {
        this.$toast({
          message: '请选择对本次服务的评价',
          position: 'center',
          duration: 3 * 1000
        })
        return
      }
      let params = {
        voucherId: this.voucherId,
        doctorEvaluationType: this.form.DoctorRadio === '满意' ? 5 : this.form.DoctorRadio === '不满意' ? 3 : '',
        evaluationContent: this.form.commentContent,
        orgEvaluationType: this.form.CommunityRadio === '满意' ? 5 : this.form.CommunityRadio === '不满意' ? 3 : '',
        serviceEvaluationLevel: this.form.starsChecked
      }
      evaluationThree(params).then(res => {
        console.log(res.code)
        if (res && res.code === 0) {
          this.resultVisible = true
        } else {
          this.$toast({
            message: res.msg,
            position: 'center',
            duration: 3 * 1000
          })
        }
      })
    }
  }
}
</script>
<style>
  .sign-page .form .mint-radiolist .mint-cell {
    width: 50%;
    float: right;
    text-align: center;
    background-image: none;
    min-height: 0;
    background-color: transparent;
  }
  .sign-page .form .mint-radiolist .mint-cell > .mint-cell-wrapper {
    background-image: none;
    padding: 0;
    font-size: 14px;
  }
  .sign-page .form .mint-radiolist-label {
    font-weight: normal;
    padding: 0;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: #fff;
    min-width: 3em;
  }
  .sign-page .form .mint-radio-input:checked + .mint-radio-core {
    background-color: #FF9B44;
    border-color: #FF9B44;
  }
</style>
<style scoped>
  .full-page {
    background-color: #f5f6f7;
    color: #666;
  }
  .sign-page .head{
    position:relative;
    height: 7em;
  }
  .sign-page .head > .head-bg {
    position:absolute;
    background-color:#43d1be;
    width:120%;
    height: 7em;
    left:-10%;
    top:0;
    z-index:1;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
  }
  .sign-page .head > .head-block {
    position:absolute;
    left:0;
    top: 3em;
    z-index:2;
    background-color:#fff;
    width:100%;
    color:#333;
    box-shadow:0 2px 8px #ccc;
    border-radius: 5px;
    padding: 0 0.5em;
  }
  .sign-page .head > .head-block > .table {
    margin-bottom: 0;
  }

  .sign-page .head > .head-block .td.picture {
    width: 6em;
  }

  .sign-page .head > .head-block .td.picture > .avatar{
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
  }

  .sign-page .head > .head-block .info > .title{
    font-size: 1.1em;
    color:#35444f;
    margin-bottom: 0.5em;
  }

  .sign-page .head > .head-block .info > .des{
    font-size:80%;
  }

  .sign-page .p-title{
    padding: 1.2em 0 0 0;
  }

  .sign-page .form > .table > .tr > .td.label {
    color: #9aa0a4;
    font-weight: normal;
  }
  .sign-page .form > .table > .tr{
    border-bottom: none;
  }
  .comment-radio .item-cell{
    text-align: center;
  }
  .comment-radio .btn-white {
    width: 120px;
  }
  .comment-radio .btn-white.checked{
    background-color: #FF9B44;
    color: #fff;
  }
  .comment-radio .btn-white.checked .text{
    color: #fff;
  }
  .textarea-editor{
    position: relative;
  }
  .textarea-editor .text-area{
    width: 100%;
    height: 100px;
    border: 1px solid #B3B3B3;
    border-radius: 5px;
    padding: 5px;
  }
  .textarea-editor .pagination{
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 1;
    color: #B3B3B3;
    margin: 0;
  }

  .btn .table {
    margin-bottom: 0;
    background-color: transparent;
  }
  .btn .table > .tr {
    padding: 0;
  }

  .comment-radio .btn .td {
    width: 50%;
  }
  .comment-radio .btn .td.icon{
    text-align:right;
    padding-right: 10px;
  }
  .comment-radio .btn .td.text{
    text-align:left;
  }

  .stars > ul {
    display: inline-block;
    margin-top: 0.9em;
  }

  .stars > ul > li > i {
    color:#e6e6e6;
    font-size: 2em;
    margin: 0 5px;
  }
  .stars > ul > li > i.checked{
    color: #ff9b44;
  }

  .footer {
    padding: 1em 0;
  }
</style>