<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="服务评分 "
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->

    <!--  内容开始  -->
    <div class="main">
        <p class="topHead">温馨提示：请在服务完成后进行评分，评分不可撤销。投诉商品请致电 <span>150 3250 1255</span></p>

        <div class="main_content_right_list">
          <div class="main_content_right_list_center">
            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png">
            <div class="main_content_right_list_content">
              <p class="tt">{{supplyDemand.contractionName}}</p>
              <div class="tab">
                <p>￥<span>{{supplyDemand.unitPrice}}</span>.00/{{supplyDemand.unit}}</p>
              </div>
            </div>
          </div>
        </div>


        <div class="main_content_right_list">
          <van-field label="实际服务数量" type="number" v-model="supplyDemand.realityServiceNum" :border="false" input-align="right" placeholder="实际服务数量" />
          <van-field label="实际服务费用" type="number" v-model="supplyDemand.realityServiceMoney" :border="false" input-align="right" placeholder="实际服务费用" />
          <van-field label="服务评分" type="number" v-model="supplyDemand.serviceScore" :border="false" input-align="right" placeholder="服务评分" />
          <van-field label="服务评价" v-model="supplyDemand.serviceAssess" :border="false" input-align="right" placeholder="服务评价" />
        </div>

    </div>

    <!--  内容结束  -->

    <div class="main_btn">
      <p @click="goSubmit()">确定</p>
      <p @click="history.back(-1)">取消</p>
    </div>

  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {supplyComment, supplyorderGet} from "@/api/agriculturalTrusteeship";

  export default {
    name: "agriculturalTrusteeshipIndex",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        show:true,
        activeNames:[],
        cropTypeOptions:[],
        orderStatusOptions:[],
        productList:[],
        supplyDemand:{},
        query:{
          realityServiceNum:'',
          realityServiceMoney:'',
          serviceScore:'',
          serviceAssess:'',
        }
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail(){
        supplyorderGet(this.$route.query.id).then(response => {
          if (response.data.supplyMasterMap){
            response.data.supplyMasterMapList = [];
            var attachement = response.data.supplyMasterMap.split( "," );
            this.supplyMasterMapArr = response.data.supplyMasterMap.split( "," );
            attachement.forEach(responseAttach=>{
              response.data.supplyMasterMapList.push('/api' + responseAttach);
            })
          }
          this.supplyDemand = response.data;
        });
      },
      goSubmit(){
        supplyComment(this.supplyDemand).then(response => {
          this.$notify({ type: 'success', message: '评价成功' });
          setTimeout(function () {
            history.back(-2);
          },2000)
        })
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
  background: #F6F6F6;
  height: 100vh;
}
  /*内容*/
  .main{
    width: 94%;
    margin: 0 auto;
    padding-bottom: 5vh;
    .topHead{
      color: #989898;
      background: rgba(0,0,0,0.05);
      padding: 5PX 10PX;
      border-radius: 8PX;
      margin-top: 2vh;
      span{
        color: #1E67FF;
      }
    }
    .main_content_right_list{
      margin-top: 2vh;
      padding: 1.5vh 3%;
      background: #ffffff;
      border-radius: 10PX;
      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
      /deep/ .van-cell{
        padding: 0;
        margin-top: 10PX;
        &:first-child{
          margin-top: 0;
        }
      }
      .main_content_right_list_header{
        display: flex;
        margin-bottom: 1vh;
        align-items: center;
        p{
          padding: 3PX 10PX;
          border-radius: 8PX;
          &:nth-child(2){background: #2B7EEC;color: #ffffff;margin-left: auto;}
          &:nth-child(3){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
        }
        .on{
          color: #334281;
          border-radius: initial;
          padding:0 0 0 20PX;
          font-size: 0.35rem;
          background: url("../../../../static/images/agriculturalTrusteeship/socialization/bill_icon_01.png") no-repeat left center
        }
        .off{
          color: #E60505;
          border-radius: initial;
          margin-left: auto;
          padding:0 0 0 15PX;
          background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_off.png") no-repeat left center
        }
      }
      .main_content_right_list_center{
        display: flex;
        img{
          border-radius: 15PX;
          margin-right: 4%;
        }
        .main_content_right_list_content{
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          .tt{
            color: #333333;
            font-size: .35rem;
          }
          .tab{
            display: flex;
            justify-content: space-between;
            p{
              &:nth-child(1){
                flex: 1;
                color: #FF5E00;
                span{
                  font-size: .4rem;
                }
              }
              &:nth-child(2){
                span{
                  display: inline-block;
                  text-align: center;
                  padding: 2PX 5PX;
                  &:nth-child(1){
                    color: #497CE8;
                    background: #E2E9FD;
                    border-top-left-radius: 10PX;
                  }
                  &:nth-child(2){
                    color: #ffffff;
                    background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
                    border-bottom-right-radius: 10PX;
                  }
                }
              }
            }
          }
          .name{
            color: #7A7A7A;
            span{
              &:nth-child(2){
                margin-left: 5PX;
              }
            }
          }
        }
      }
    }
  }

.main_btn{
  display: flex;
  justify-content: space-around;
  padding: 4vh 0;
  p{
    font-size: .4rem;
    width: 35%;
    text-align: center;
    padding: 10PX 0;
    border-radius: 5rem;
    box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
    &:nth-child(1){
      background: #334281;
      color: #ffffff;
    }
    &:nth-child(2){
      background: #D1D5E4;
      color: #334281;
    }
  }
}
</style>
