<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <el-tag type="info"
              class="eltag"
              size="medium"
              style="width: 100%; margin-top: 10px">建议详情</el-tag>
      <div class="m-row">

        <div class="m-row-2">
          <div class="info-prop">
            <span class="info-title-2">客户名：</span>
            <span>{{ adviceData.customerName }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">组织名：</span>
            <span>{{ adviceData.agencyName}}</span>
          </div>
        </div>

        <div class="m-row-2">

          <div class="info-prop">
            <span class="info-title-2">网格名：</span>
            <span>{{ adviceData.gridName}}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">注册手机：</span>
            <span>{{ adviceData.regPhone}}</span>
          </div>
        </div>
        <div class="m-row-2">

          <div class="info-prop">
            <span class="info-title-2">问题分类：</span>
            <span>{{ adviceData.adviceType}}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">提出时间：</span>
            <span>{{ adviceData.adviceTime}}</span>
          </div>
        </div>
        <div class="m-row-2">

          <div class="info-prop">
            <span class="info-title-2">提出者：</span>
            <span>{{ adviceData.userName}}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">联系方式：</span>
            <span>{{ adviceData.phone}}</span>
          </div>
        </div>

        <div class="m-info">
          <div class="info-prop">
            <span class="info-title-2">建议内容：</span>
            <span>{{ adviceData.adviceContent}}</span>

          </div>

          <div v-if="adviceData.imgList.length>0"
               class="info-prop">
            <span class="info-title-2">建议图片：</span>

            <div style="display:flex"
                 v-for="(item,index) in adviceData.imgList"
                 :key="index">

              <img class="img_icon"
                   :src="item">

            </div>

          </div>
        </div>

      </div>

      <el-tag type="info"
              class="eltag"
              size="medium"
              style="width: 100%; margin-top: 10px">回复详情</el-tag>
      <div v-if="!showConfirm"
           class="m-row">

        <div class="m-row-2">
          <div class="info-prop">
            <span class="info-title-3">回复者：</span>
            <span>{{ adviceData.replyUserName }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-3">回复时间：</span>
            <span>{{ adviceData.replyTime}}</span>
          </div>
        </div>

        <div class="m-info">
          <div class="info-prop">
            <span class="info-title-3">回复内容：</span>
            <span>{{ adviceData.replyContent}}</span>

          </div>
          <div class="info-prop">
            <span class="info-title-3">政府回复文本：</span>
            <span>{{ adviceData.govContent}}</span>

          </div>
          <div v-if="adviceData.govImgList.length>0"
               class="info-prop">
            <span class="info-title-3">政府回复取证：</span>

            <div style="display:flex"
                 v-for="(item,index) in adviceData.govImgList"
                 :key="index">

              <img class="img_icon"
                   :src="item">
            </div>

          </div>

        </div>

      </div>
      <div v-if="showConfirm"
           class="m-row">

        <div class="m-info">
          <div class="info-prop">
            <span class="info-title-3">回复内容：</span>
            <div>
              <el-input type="textarea"
                        :rows="4"
                        resize="none"
                        maxlength="500"
                        show-word-limit
                        style="width: 600px"
                        placeholder="请输入回复内容"
                        v-model="adviceData.replyContent"></el-input>
              <div class="input_tip">建议只可回复一次，请谨慎回复</div>

            </div>
          </div>

          <div class="info-prop">
            <span class="info-title-3">政府回复文本：</span>
            <el-input type="textarea"
                      :rows="4"
                      resize="none"
                      maxlength="500"
                      style="width: 600px"
                      show-word-limit
                      placeholder="请输入政府回复文本"
                      v-model="adviceData.govContent"></el-input>

          </div>
          <div class="info-prop">
            <span class="info-title-3">政府回复取证：</span>

            <div>
              <el-upload :headers="$getElUploadHeaders()"
                         ref="uploadPic"
                         :action="uploadUlr"
                         :data="{ customerId: adviceData.customerId }"
                         list-type="picture-card"
                         :on-exceed="exceedPic"
                         :on-remove="removePic"
                         :file-list="replayImgList"
                         :on-success="handleSuccess"
                         :limit="3">
                <span class="font-14">选择图片</span>
                <div slot="tip"
                     class="upload_tip">
                  最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式
                </div>
              </el-upload>
            </div>

          </div>

        </div>

      </div>
    </div>
    <div class="div-btn">
      <el-button size="small"
                 @click="handleCancle">关 闭</el-button>
      <el-button v-if="showConfirm"
                 size="small"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">回 复</el-button>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";


let loading // 加载动画

export default {
  data () {


    return {
      initLoading: false,
      btnDisable: false,

      adviceId: '',
      srcList: [],
      adviceData: {
        customerId: '', //客户id
        customerName: '', //客户名
        agencyName: '', //组织名
        gridName: '', //网格名
        userName: '', //提出人名字
        regPhone: '', //注册时的联系电话
        adviceType: '', //问题分类，后台拼接
        phone: '', //填写的联系电话
        adviceTime: '', //建议时间
        adviceContent: '', //建议内容
        imgList: [], //建议图片列表
        replyContent: '', //回复内容 无为空字符串
        replyTime: '', //回复时间 无为空字符串
        replyUserName: '', //回复人
        govContent: '', //政府回复文本
        govImgList: [] //政府回复取证
      },

      showConfirm: true,
      replayImgList: [],

      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
      //  upload_url: '', // 上传URL
      upload_name: '' // 图片或视频名称

    }
  },

  mounted () {


  },

  methods: {
    diaDestroy () {

    },

    async initForm (adviceId) {

      this.adviceId = adviceId
      await this.loadFormData()
      this.initLoading = true

    },


    //加载form
    async loadFormData () {
      this.startLoading()
      //const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/useradvice/advicedetail"
      const url = '/epmetuser/useradvice/advicedetail'

      const params = {
        adviceId: this.adviceId
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        // this.endLoading()
        if (data) {
          this.adviceData = data
          if (
            this.adviceData.replyContent === '' ||
            this.adviceData.replyContent === null
          ) {
            this.showConfirm = true
          } else {
            this.showConfirm = false
          }
        }
      } else {
        this.$message.error(msg)
      }
      this.endLoading()
    },


    async handleComfirm () {
      if (
        this.adviceData.replyContent === '' ||
        this.adviceData.replyContent === null
      ) {
        this.$message.warning('请填写回复内容')
        return
      }

      this.startLoading()
      // let url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/useradvice/replyadvice'
      let url = '/epmetuser/useradvice/replyadvice'
      // 表单对象

      let params = {
        adviceId: this.adviceData.adviceId,
        replyContent: this.adviceData.replyContent,
        govContent: this.adviceData.govContent,
        govImgList: this.adviceData.govImgList
      }

      const { data, code, msg } = await requestPost(url, params)
    
      this.endLoading()
      if (code === 0) {
        this.$message.success('回复成功')
        this.$emit('replayOk')
      } else {
        this.$message.error(msg)
      }

      // window.app.ajax.post(
      //   url,
      //   _data,
      //   (data, rspMsg) => {
      //     this.endLoading()
      //     this.$message.success('回复成功')
      //     this.diaCancel()
      //     this.$emit('refresh')
      //   },
      //   (rspMsg, data) => {
      //     this.endLoading()
      //     this.$message.error(rspMsg)
      //   }
      // )
    },

    removePic (file, fileList) {
      this.adviceData.govImgList.splice(
        this.adviceData.govImgList.findIndex((item) => item === file.url),
        1
      )
      this.replayImgList.splice(
        this.replayImgList.findIndex((item) => item.uid === file.uid),
        1
      )
    },
    exceedPic () {
      this.$message.warning('最多上传3张预览图片')
    },
    handleSuccess (response, file, fileList) {
      this.replayImgList.push(file)
      this.adviceData.govImgList.push(response.data.url)
    },

    handleCancle () {
      this.$emit('diaDetailClose')

    },


    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {


  },
  props: {


  }
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/management/detail-main.scss";
</style>
<style lang="scss" scoped >
.m-info {
  padding-left: 0px;
}
.upload_tip {
  color: #7a7a7a;
  margin: 10px 0 0 0;
}
.div-tooltip {
  margin-left: 10px;
  color: red;
}
.input_tip {
  color: #e60000;
  margin: 10px 0 0 0;
}

.img_icon {
  margin-right: 10px;
  width: 70px;
  height: 70px;
}
</style>

<style lang="scss">
.el-dialog__body {
  padding: 0 10px 20px !important;
}

.hide {
  .el-upload--picture-card {
    display: none !important;
  }
}
</style>

