<template>
    <el-form label-position="left" :model="ruleForm" :rules="rules" size="mini" ref="ruleForm" label-width="80px">
      <el-form-item label="活动评价" prop="grade">
        <el-rate v-model="ruleForm.grade" />
      </el-form-item>

      <el-form-item label="评价内容" prop="evaluate_content">
        <el-input maxlength="2000" show-word-limit v-model="ruleForm.evaluate_content" placeholder="请输入内容" style="width:500px" type="textarea" />
      </el-form-item>


      <el-form-item>
        <div class="image">
          <div class="image_container" v-for="(image,index) in ruleForm.image_file" :key="image">
            <div style="margin-rigth:5px">
              <img :src="image" class="avatar" />
              <i class="el-icon-circle-close" @click="ruleForm.image_file.splice(index,1)"></i>
            </div>
          </div>

          <div class="image_container"  v-for="(video,index) in ruleForm.video_file" :key="video">
            <div style="margin-rigth:5px">
              <video :src="video" class="avatar" autoplay />
              <i class="el-icon-circle-close" @click="ruleForm.video_file.splice(index,1)"></i>
            </div>
          </div>

          <el-upload
              style="margin-right:10px"
              class="avatar-uploader"
              :accept="'.jpg,.png,.jpeg'"
              :show-file-list="false"
              :http-request="evt => handleRequset(evt,'image')"
              :before-upload="beforeAvatarUpload"
            >
            <!-- <div class="image_container"  v-if="ruleForm.image_file">
              <img :src="ruleForm.image_file" class="avatar" />
              <i class="el-icon-circle-close" @click="handleRemoveImage('image_file')"></i>
            </div> -->
            <div>
              <i class="el-icon-camera avatar-uploader-icon"></i>
              <p>添加图片</p>
            </div>
          </el-upload>

          <el-upload
            class="avatar-uploader"
              :show-file-list="false"
              :accept="'.mp4,.avi'"
              :before-upload="beforeVideoUpload"
              :http-request="evt => handleRequset(evt,'video')"
            >
            <div>
              <i class="el-icon-video-camera avatar-uploader-icon"></i>
              <p>添加视频</p>
            </div>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item class="flex-end activity-upload my-label-top" style="width:570px">
        <el-button type="primary" @click="onSubmit" :loading="loading">确认提交</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
import { getToken } from '@/utils/auth'
import asyncRequest from "@/apis/service/customerService/demandOrder"
import urlConfig from "@/apis/url-config";

/**
 * @props
  grade:'', //活动评价
  evaluate_content:'', //客户公司
  image_file:'',
  video_file:''
*/

export default {
  props:['sitem'],
  data(){
    return {
      imgAPI: urlConfig.baseURL,
      loading:false,
      ruleForm:{
        grade:'', //活动评价
        evaluate_content:'', //客户公司
        image_file:[],
        video_file:[]
      }
    }
  },
  computed:{
    rules(){
      return {
      grade:[
        {
          required: true,
          trigger:'change',
          message:'请输入评价内容'
        }
      ],
      evaluate_content:[
        {
          required: true,
          trigger:'change',
          message:'请选择活动评价'
        }
      ]
     }
    }
  },
  methods:{
    async handleRequset({file} ,prop){
      try{
        const _formData = new FormData();
        const token = getToken();
        _formData.append('file', file);
        _formData.append("token", token);
        const api = prop === "image" ? asyncRequest.uploadImage : asyncRequest.uploadvideo
        const property = prop === 'image' ? 'image_file' : 'video_file'
        const { data } = await api(_formData);
        const { file: _file } = data
        const { full_url } = _file
        this.ruleForm[property].push(full_url)
      }catch(err){
        console.log(err)
      }
    },
    beforeVideoUpload(file) {
      console.log(file.type)
      let isJPG = false;
      if (file.type === "video/mp4" || file.type === "video/avi") {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("视频格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("视频大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemoveImage(evt,prop){
      evt.stop
      this.ruleForm[prop] = ""
    },
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      console.log(isJPG && isLt2M)
      return isJPG && isLt2M;
    },
    async onSubmit(){
       try {
        const { video_file, image_file } = this.ruleForm
        if(video_file.length === 0 && image_file.length === 0){
          this.$message.warning('必须上传一条视频或图片')
          return
        }

         await this.$refs.ruleForm.validate()
         this.loading = true

         const { grade } = this.ruleForm

         const { code } = await asyncRequest.evaluate({
          ...this.ruleForm,
          grade: Number(grade / 5).toFixed(2),
          video_file:video_file.join(","),
          image_file:image_file.join(","),
          id: this.sitem.id,
         })
         
         this.loading = false
         if(code !== 1) return
         this.$emit('refresh')
       }catch(err){
         console.log(err)
       }
    }
  }
}
</script>


<style lang="scss" scoped>
  .good_info_img_div {
    ul {
      width: 100%;
      li {
        float: left;
        width: 55px;
        height: 55px;
        padding: 0 5px 0 0;
        .img-show-li-div {
          width: 50px;
          height: 50px;
          border: 1px solid #dfe4ed;
          background: #dfe4ed;
          position: relative;
          img.img-show {
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
          }
          i.el-icon-close {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            color: #dfe4ed;
          }
          &:hover {
            i.el-icon-close {
              cursor: pointer;
              color: #6954f0;
            }
          }
        }
      }
    }
  }

  .goodsCostAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }

  .image {
    display: flex;
    width: 500px;
    gap: 10px;
    flex-wrap: wrap;

    .image_container{
      border: 1px dashed #d9d9d9;
      border-radius: 6px;

      .el-icon-circle-close{
        cursor: pointer;

        &:hover{
          color:#409EFF;
        }
      }
    }

    &_container{
      position: relative;
      width: 128px;
      i{
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 22px;
        color: #ccc;
      }
    }

    ::v-deep(.el-upload) {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      height: 128px;
      &:hover {
        border-color: #409EFF;
      }
    }
    .avatar-uploader-icon {
      font-size: 42px;
      color: #8c939d;
      width: 128px;
      line-height: 88px !important;
      text-align: center;
    }
    .avatar {
      width: 128px;
      height: 128px;
      display: block;
    }
  }
</style>
