<template>
    <div class="opinion-container">
      <el-dialog title="意见反馈" :center="true" :visible.sync="dialogFormVisible" :before-close="beforeClose" :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="opinionForm" >

          <el-form-item label="意见反馈：" :label-width="formLabelWidth" prop="opinion">
            <el-input type="textarea" :rows="5" :maxlength="maxlength" v-model="form.opinion" autocomplete="off" placeholder="请告诉我们您遇到的问题或者建议"></el-input>
            <span class="text-count">{{currentCount}}/{{maxlength}}</span>
          </el-form-item>

          <el-form-item label="上传图片：" :label-width="formLabelWidth" prop="imgs">
            <el-upload
              class="upload-demo"
              :action="action"
              :headers="headers"
              multiple
              list-type="picture"
              :limit="imgLimit"
              :accept="'image/jpg,image/jpeg,image/png,image/bmp'"
              :data="imgFile"
              :before-upload="getImgParam"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <!--:disabled="addImageDisabled"-->
              <!--<el-button size="small" type="primary" @click="addImage" :disabled="addImageDisabled">添加图片</el-button>-->
              <el-button size="small" type="primary" v-if="!addImageDisabled" @click="addImage">添加图片</el-button>
              <div slot="tip" class="el-upload__tip">最多5张，每张小于5M，支持jpg，png，bmp</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="联系方式：" :label-width="formLabelWidth" prop="contact">
            <el-input v-model="form.contact" maxlength="50" autocomplete="off" placeholder="请输入您的联系方式，如有需要我们会尽快联系您" class="contact-info"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="beforeClose">取 消</el-button>
          <el-button type="primary" @click="submitFrom('opinionForm')">提 交</el-button>
        </div>

        <div slot="footer" class="dialog-footer bottom-msg">
          <div class="disblock">
            <h1>客服电话：400-920-8877  工作日：9:00~18:00</h1>
          </div>
          <div class="disblock">
            <img src="https://file.yunqueyi.com/File/static/qrcode_for_yunqueyi.jpg" alt="">
            <div class="ewm-wrap">
              <h1>您可以在「云鹊医」公众号里直接留言</h1>
              <h1>扫一扫二维码关注云鹊医公众号</h1>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        width="60%"
        title=""
        :center="true"
        :visible.sync="innerVisible"
        :before-close="beforeCloseInner"
        :custom-class="'result-opinion'"
        append-to-body>

        <div class="result-msg">
          <i class="el-icon-success"></i>
          <span>提交成功</span>
        </div>

        <div class="msg-wrap">
          <h1>感谢您的反馈，我们会在<span>1个工作日</span>内答复您的问题</h1>
          <h1>请耐心等待</h1>
        </div>

        <div class="btn-wrap">
          <el-button type="primary" class="button" @click="beforeCloseInner">我知道了</el-button>
        </div>

      </el-dialog>
    </div>
</template>

<script>
  import fetch from '@/utils/fetch'
  import { envConfig } from '@/utils/env-config'
  import { uploadImg } from '@/utils/index'
  import { getQiniuToken, submitFeedback } from '@/utils/patients/patientsapi'

  export default {
    data(){
      return{
        maxlength: 1000,
        form: {
          opinion: '',
          imgs: '',
          contact: '',
        },
        innerVisible: false,
        dialogFormVisible: true,
        formLabelWidth: '100px',
        rules: {
          opinion: [
            { required: true, message: '请输入意见反馈', trigger: 'blur' }
          ]
        },
        imgDomin: '',
        addImageDisabled: false,
        imgLimit: 5,// 最多允许上传的图片个数
        action: 'https://upload.qiniup.com/',
        token: '',
        headers: {
          token: ''
        },
        imgToken: null,//qiniu上传token
        imgFile: {},
        fileList: [],
        urlString: ''
      }
    },
    created(){
//      this.token = 'C712F412E096492B84E2B1D636565626';
      this.token = localStorage.getItem('storageToken');
      this.headers.token = this.token
    },
    computed: {
      currentCount(){
        return this.form.opinion.length
      }
    },
    methods: {
      // 获取七牛token
      addImage(){
        if(this.fileList.length>=this.imgLimit){
          this.$message.warning(`最多上传${this.imgLimit}张图片`);
          return;
        }
        getQiniuToken().then((res) => {
          if(res.code=='000000'){
            this.imgToken = res.data.token;
          }else{
            this.$message.error(res.message);
          }
        })
      },
      beforeClose(e){
        this.$emit('closeDialog',false)
      },
      beforeCloseInner(e){
        this.$emit('closeDialog',false)
      },
      submitFrom(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.urlString = '';
            this.fileList.forEach((item)=>{
              // this.urlString += `${this.imgDomin}/${item.response.key};`
              this.urlString += `${item.response.key};`
            })
            const data = {
              input_text: this.form.opinion,
              system_type: 'workStation',
              token: this.token,
              contact_information: this.form.contact,
              url: this.urlString,
            };
            submitFeedback(data).then(res=>{
              this.dialogFormVisible = false;
              this.innerVisible = true;
            })
          } else {
            return false;
          }
        });
      },
      getImgParam(file) {
        let isAllowed = /^image\/(jpg|jpeg|png|bmp)$/.test(file.type);
        if( !isAllowed ){
          this.$message.error('仅支持jpg、png、bmp格式图片文件');
          return false;
        }
        const isLt2M = (file.size / 1024 / 1024) < 5;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 5MB!');
          return false;
        }
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
//        const day = date.getDate();
//        const hour = date.getHours();
//        const minute = date.getMinutes();
//        const second = date.getSeconds();
//        this.imgFile.imageType = this.imageType;
        this.imgFile.file = file;
        this.imgFile.name = file.name;
        this.imgFile.key = `qiniu/image/feedback/${year}/${month}/${file.name}`;
        this.imgFile.token = this.imgToken;
      },
      handleRemove(file, fileList){
        this.fileList = fileList
        this.addImageDisabled = false;
      },
      handleSuccess(response, file, fileList){
        const imgDomin = uploadImg();
        this.imgDomin = imgDomin;
//        this.urlString += `${imgDomin}/${response.key};`
//        this.fileList.forEach((item)=>{
//          this.urlString += `${imgDomin}/${response.key};`
//        })
        this.fileList = fileList;
        this.$message.success(`上传成功！`);
        if(fileList.length>=this.imgLimit){
          this.addImageDisabled = true;
        }
      },
      handleError(err, file, fileList){
        this.$message.error(JSON.stringify(err) + '| 如果出现这个错误信息，说明图片上传失败，请检查代码，如果没有问题，请查看服务器是否有问题!并且删除这段代码提示，只保留前面错误信息提示即可!');
      },
      // 超出限制时
      handleExceed(files, fileList){
        if(fileList.length>=this.imgLimit){
          this.$message.warning(`最多上传${this.imgLimit}张图片`);
        }
      },
    }
  }
</script>

<style lang="scss">
  .opinion-container{
    .text-count{
      position: absolute;
      right: 5px;
      bottom: 3px;
      line-height: 28px;
    }
    .el-form-item__label{
      text-align: center;
    }
    .el-upload__tip{
      display: inline;
      margin-left: 10px;
    }
    .el-upload-list--picture .el-upload-list__item-thumbnail{
      margin-left: -75px;
    }
    .el-upload-list__item{
      width: 92px;
      height: 102px !important;
      padding-top: 15px !important;
      display: inline-block;
      margin-right: 5px;
      .el-upload-list__item-name{
        display: none;
      }
      .el-icon-close-tip{
        display: none;
      }
      &.is-success:focus:not(:hover) .el-icon-close-tip {
          display: none;
      }
    }
    .el-upload-list--picture .el-upload-list__item-status-label{
      background: #449284;
    }
    .el-dialog--center .el-dialog__body{
      padding: 25px 25px 0;
    }
    .el-dialog__footer{
      padding: 0;
    }
    .bottom-msg{
      margin-top: 30px;
      padding: 20px 0;
      background: #efefef;
      .disblock{
        width: 48%;
        display: inline-block;
        vertical-align: middle;
        img,div{
          display: inline-block;
          vertical-align: middle;
        }
        h1{
          color: #000;
          font-size: 14px;
          line-height: 28px;
        }
        img{
          width: 80px;
          height: 80px;
        }
        .ewm-wrap{
          h1{
            text-align: left;
          }
        }
      }
    }
  }
  .contact-info{
    width: 100% !important;
  }
  .result-opinion{
    border-radius: 8px!important;
    text-align: center;
    .result-msg{
      text-align: center;
      color: #449284;
      span{
        color: #000;
        margin-left: 5px;
        font-size: 20px;
      }
    }
    .msg-wrap{
      margin: 10px 0;
      text-align: center;
      h1{
        font-size: 18px;
      }
      span{
        color: #449284;
      }
    }
    .btn-wrap{
      text-align: center;
      padding: 10px 5px;
    }
  }

</style>

