<template>
  <div class="opinion-container">
    <el-dialog
      title="意见反馈"
      :center="true"
      v-model="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
            >
            <template v-slot:tip>
              <div class="el-upload__tip">
                最多5张，每张小于5M，支持jpg，png，bmp
              </div>
            </template>
          </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>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="beforeClose">取 消</el-button>
          <el-button type="primary" @click="submitFrom('opinionForm')"
            >提 交</el-button
          >
        </div>
      </template>

      <template v-slot:footer>
        <div class="dialog-footer bottom-msg">
          <div class="disblock">
            <h1>客服电话：400-006-5252 工作日：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>
      </template>
    </el-dialog>
    <el-dialog
      width="60%"
      title=""
      :center="true"
      v-model="innerVisible"
      :before-close="beforeCloseInner"
      :custom-class="'result-opinion'"
      append-to-body
    >
      <div class="result-msg">
        <el-icon><el-icon-success /></el-icon>
        <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 { Success as ElIconSuccess } from '@element-plus/icons'
import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
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 {
  components: {
    ElIconSuccess,
  },
  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) {
      $emit(this, 'closeDialog', false)
    },
    beforeCloseInner(e) {
      $emit(this, '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}张图片`)
      }
    },
  },
  emits: ['closeDialog'],
}
</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-upload-list--picture .el-progress {
    top: 7px;
  }
  .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>
