<template>
  <sail-page type="evaluate" title="服务评价" isHead>
    <div slot="content">
        <div class="evaluate-apply-wrapper">
          <van-cell-group class="evaluate-part">
              <van-field
                v-model="repairEvaluateForm.evaluate"
                type="textarea"
                placeholder="请输入您的评价"
                rows="8"
                autosize
              />
            </van-cell-group>
          <div class="evaluate-form">
            <div class="evaluate-min-part">
              <!-- <cube-upload
                :action="action"
                v-model="files"
                :simultaneous-uploads="1"
                @file-success="successHandler"
                @file-removed="removeHandler"
                @files-added="filesAdded"
                @file-error="errHandler"
                /> -->
                <cube-upload
                  :action="action"
                  v-show="false"
                  v-model="files"
                  :simultaneous-uploads="1"
                  @file-success="successHandler"
                  @file-removed="removeHandler"
                  @files-added="filesAdded"
                  @file-error="errHandler"
                  >
                  <div class="cube-upload-def clear-fix">
                    <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"/>
                    <cube-upload-btn :multiple="false"/>
                  </div>
                </cube-upload>
            </div>
            <div class="evaluate-part">
    			<div class="weui-cell">
    	            <div class="weui-cell__hd"><label class="">服务满意度</label></div>
    	            <div class="weui-cell__bd evaluate-rate">
        				<van-rate :size="20" color="#FF9E1A" void-color="#ADADAD" v-model="repairEvaluateForm.evaluateLevel" />
    	            </div>
    	        </div>
            </div>
            <van-button :loading="loading" @click="submit" class="submit-btn gradient-green">确定</van-button>
          </div>
        </div>
      </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
import sailPage from "@/components/sail-page.vue";
import api from "@/api/index.js";

export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      repairEvaluateForm: state => state.repairModule.repairEvaluateForm,
    })
  },
  data: function(){
    return {
      message: "",
      loading: false,
      action: {
        target: api.getURL("uploader/upload"),
        data: {
          inputId: "file"
        }
      },
      files: []
    }; 
  },
  methods: {
    submit() {
      this.loading = true;
      let id = this.$route.params.id;
      this.$store.commit("repairModule/SET_EVALUATE_REPAIR_ID", id);
      this.$store.dispatch("repairModule/cEvaluate").then(res => {
        this.loading = false;
        if(res) {
          res.Toast.success({
            duration: 1000,
            message: "评价成功"
          });
          this.$router.push({path: `/maintenanceDetail/${id}`});
        }
      });
      //
    },
    successHandler(file) {
      
      this.$store.commit("repairModule/EVALUATE_ADD_IMG_INFO", {
        "propCode": "3", // 1 合同， 2 证件 3 其他
        "propName": "维保评价",
        "propValue": file.response.data, //img url
        "propValueDesc": "维保评价",
        "propValueInt": 0
      });
      ///this.$emit('updateFiles', file, this.imgType, true)
    },
    removeHandler(file) {
      
      this.$store.commit("repairModule/EVALUATE_REMOVE_IMG_INFO", file.response.data);
      //this.$emit('updateFiles', file, this.imgType, false)
    },
    errHandler(file) {
      // const msg = file.response.message
      this.$createToast({
        type: "warn",
        txt: "上传失败",
        time: 2000
      }).show();
    },
    filesAdded(files) {
      let hasIgnore = false;
      const maxSize = 8 * 1024 * 1024; // 1M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore && Toast.fail("选择的图片过大，无法上传");
    }
  }
};
</script>
<style lang="less">
   .evaluate-apply-wrapper .van-hairline--top-bottom::after {
      border-width: 1px 0 0 0;
   }
   .spec-placeholder .van-field__control::-webkit-input-placeholder {
      text-align: right;
      color: #808080;
   }
   .evaluate-apply-wrapper {
      .cube-upload {
          overflow: hidden;
      }
      .clear-fix:after {
         clear: unset;
      }
   }
</style>
<style lang="less" scoped>
    @nice-desc-gray: #ADADAD;
    .evaluate-apply-wrapper {
      .evaluate-rate {
      	text-align: left;
      	padding-left: 10px;
      	padding-top: 5px;
      }
      .evaluate-min-part {
        margin-top: 1px;
        background: white;
        padding-top: 19.5px;
        padding-left: 21px;
      }
      .evaluate-part {
        background: white;
        margin-top: 13px;
      }
      .evaluate-desc {
        font-size: 11px;
        margin-top: 11.5px;
        margin-bottom: 11.5px;
        color: @nice-desc-gray;
      }
    }
</style>