<template>
  <div class="bigBox">
    <Back con="评价问诊" url="/consultation/myConsultation/MyConsultationHistory" class="top"></Back>
    <div class="main">
       <div class="one">
       <MyTitle con="文字评价" class="tit"></MyTitle>
      <van-field
        v-model="message"
        rows="6"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="请输入留言"
        show-word-limit
      />
      </div>
      <div class="two">
        <MyTitle con="星级评价" class="tit"></MyTitle>
        <div class="con">
          <p>医生专业度</p>
          <van-rate v-model="value1" icon="like" void-icon="like-o" />
        </div>
        <div class="con">
          <p>服务满意度</p>
          <van-rate v-model="value2" icon="like" void-icon="like-o" />
        </div>
        
      </div>
      <div class="bot">
        <div class="up" @click="$router.push({path:'/consultation/myConsultation/MyConsultationHistory'})">返回</div>
        <div class="ok" @click="ok">完成</div>
      </div>
    </div>
   
  </div>
</template>

<script>
import {plInquiry} from '@/getData/index.js'
import { Toast } from 'vant'
export default {
  data(){
    return{
      message:'',
      value1:0,
      value2:0,
      id:null,
      recordId:null
    }
  },
  created(){
    this.id=this.$route.query.id
    this.recordId=this.$route.query.recordId
    // console.log(this.$route.query.id);
    // console.log(this.$route.query.recordId);
  },
  methods:{
    ok(){
      let res={
        inquiryRecordId:this.recordId*1,
        doctorId:this.id*1,
        evaluate:this.message,
        majorDegree:this.value1,
        satisfactionDegree:this.value2
      }
      this.submit(res)
    },
    async submit(res){
      let {data}=await plInquiry(res)
      if(data.status=='0000'){
        Toast.success(data.message)
        this.$router.push('/consultation/myConsultation/MyConsultationHistory')
      }
      console.log(data);
    }
  }
}
</script>

<style lang="scss" scoped>
.bigBox{
  width: 100vw;
  height: 100vh;
  // background: rgb(244, 244, 244);
  display: flex;
  flex-direction: column;
  .top{
    // background: #fff;
    border-bottom: 1px solid rgb(244, 244, 244);
  }
  .main{
    flex: 1;
    overflow: scroll;
    margin-top: 10px;
    .tit{
    margin-left: 10px;
    }
    .one{
      border-bottom: 3px solid #ededed;
    }
    .two{
      margin-top: 10px;
      padding-bottom: 30px;
      border-bottom: 3px solid #ededed;
      .con{
        display: flex;
        align-items: center;
        margin-left: 10px;
        margin-top: 20px;
        p{
          font-size: 13px;
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }
    .bot{
      display: flex;
      justify-content: space-around;
      margin-top: 150px;
      color: #fff;
      .up{
        background:rgb(135,135,135);
        padding: 8px 15px;
        border-radius: 3px;
      }
      .ok{
        background:rgb(38,112,229);
        padding: 8px 15px;
        border-radius: 3px;
      }
    }
  }
  
}
</style>