<template>
  <div>
    <c-dialog :title="'建议详情'"
              :visible="diaVisible"
              :width="dialogWidth"
              :confirm="'回复'"
              :showConfirm="showConfirm"
              @ok="save"
              @cancel="diaCancel">
      <div class="div_total">
        <el-tag type="info"
                class="eltag"
                size="medium"
                style="width:100%;margin-top:10px">建议详情</el-tag>
        <div>
          <!-- 第一行 -->
          <el-row type="flex"
                  :gutter="gutterPro">
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'客&nbsp&nbsp户&nbsp&nbsp名'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.customerName}}</div>
                </el-col>

              </el-row>
            </el-col>
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'组&nbsp&nbsp织&nbsp&nbsp名'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.agencyName}}</div>
                </el-col>

              </el-row>
            </el-col>
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'网&nbsp&nbsp格&nbsp&nbsp名'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.gridName}}</div>
                </el-col>

              </el-row>
            </el-col>
          </el-row>

          <!-- 第二行 -->
          <el-row type="flex"
                  :gutter="gutterPro">
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'注册手机'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.regPhone}}</div>
                </el-col>

              </el-row>
            </el-col>
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'问题分类'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.adviceType}}</div>
                </el-col>

              </el-row>
            </el-col>
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'提出时间'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.adviceTime}}</div>
                </el-col>

              </el-row>
            </el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row type="flex"
                  :gutter="gutterPro">
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'提&nbsp&nbsp出&nbsp&nbsp者'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.userName}}</div>
                </el-col>

              </el-row>
            </el-col>
            <el-col :span="spanThree">
              <el-row :gutter="gutterCon">
                <el-col :span="spanTitle">
                  <div class="form-title">{{'联系方式'}}</div>
                </el-col>
                <el-col :span="spanCon">
                  <div class="form-content">{{adviceData.phone}}</div>
                </el-col>

              </el-row>
            </el-col>

          </el-row>

          <!-- 第四行 -->
          <el-row type="flex"
                  :gutter="gutterPro">
            <el-col :span="spanOne">
              <el-row :gutter="gutterCon">
                <el-col :span="span2Title">
                  <div class="form-title margin2">{{'建议内容'}}</div>
                </el-col>
                <el-col :span="span2Con">
                  <div class="form-content  bg-gray">{{adviceData.adviceContent}}</div>
                </el-col>

              </el-row>
            </el-col>

          </el-row>

          <!-- 第五行 -->
          <el-row type="flex"
                  :gutter="gutterPro">
            <el-col :span="spanOne">
              <el-row :gutter="gutterCon">
                <el-col :span="span2Title">
                  <div class="form-title margin2">{{'建议图片'}}</div>
                </el-col>
                <el-col :span="span2Con">
                  <el-image v-for="(item,index) in adviceData.imgList"
                            style="width:70px;height:70px;margin-right:15px"
                            :key="index"
                            :src="item"
                            :preview-src-list="adviceData.imgList">
                  </el-image>
                  <!-- <img v-for="(item,index) in adviceData.imgList"
                       :key="index"
                       :src="item"
                       style="width:70px;height:70px;margin-right:15px"
                       class="function-icon"> -->

                </el-col>

              </el-row>
            </el-col>

          </el-row>
        </div>

        <el-tag type="info"
                class="eltag"
                size="medium"
                style="width:100%;margin-top:10px">回复详情</el-tag>
        <div>
          <div v-if="!showConfirm">
            <el-row type="flex"
                    :gutter="gutterPro">
              <el-col :span="spanThree">
                <el-row :gutter="gutterCon">
                  <el-col :span="spanTitle">
                    <div class="form-title">{{'回&nbsp&nbsp&nbsp&nbsp复&nbsp&nbsp&nbsp&nbsp者'}}</div>
                  </el-col>
                  <el-col :span="spanCon">
                    <div class="form-content">{{adviceData.replyUserName}}</div>
                  </el-col>

                </el-row>
              </el-col>
              <el-col :span="spanThree">
                <el-row :gutter="gutterCon">
                  <el-col :span="spanTitle">
                    <div class="form-title">{{'回&nbsp&nbsp复&nbsp&nbsp时&nbsp&nbsp间'}}</div>
                  </el-col>
                  <el-col :span="spanCon">
                    <div class="form-content">{{adviceData.replyTime}}</div>
                  </el-col>

                </el-row>
              </el-col>

            </el-row>

            <el-row :gutter="gutterPro">
              <el-col :span="spanOne">
                <el-row :gutter="gutterCon">
                  <el-col :span="span2Title">
                    <div class="form-title margin2">{{'回&nbsp&nbsp复&nbsp&nbsp内&nbsp&nbsp容'}}</div>
                  </el-col>
                  <el-col :span="span2Con">
                    <div class="form-content">{{adviceData.replyContent}}</div>

                  </el-col>

                </el-row>
              </el-col>

            </el-row>

            <el-row :gutter="gutterPro">
              <el-col :span="spanOne">
                <el-row :gutter="gutterCon">
                  <el-col :span="span2Title">
                    <div class="form-title margin2">{{'政府回复文本'}}</div>
                  </el-col>
                  <el-col :span="span2Con">
                    <div class="form-content">{{adviceData.govContent}}</div>

                  </el-col>

                </el-row>
              </el-col>

            </el-row>

            <el-row :gutter="gutterPro">
              <el-col :span="spanOne">
                <el-row :gutter="gutterCon">
                  <el-col :span="span2Title">
                    <div class="form-title margin2">{{'政府回复取证'}}</div>
                  </el-col>
                  <el-col :span="span2Con">
                    <el-image v-for="(item,index) in adviceData.govImgList"
                              style="width:70px;height:70px;margin-right:15px"
                              :key="index"
                              :src="item"
                              :preview-src-list="adviceData.govImgList">
                    </el-image>
                    <!-- <img v-for="(item,index) in adviceData.govImgList"
                         :key="index"
                         :src="item"
                         style="width:70px;height:70px;margin-right:15px"
                         class="function-icon"> -->

                  </el-col>

                </el-row>
              </el-col>

            </el-row>

          </div>

          <div v-if="showConfirm">

            <el-row :gutter="gutterPro">
              <el-col :span="spanOne">
                <el-row :gutter="gutterCon">
                  <el-col :span="span2Title">
                    <div class="form-title margin2">{{'回&nbsp&nbsp复&nbsp&nbsp内&nbsp&nbsp容'}}</div>
                  </el-col>
                  <el-col :span="span2Con">

                    <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>

                  </el-col>

                </el-row>
              </el-col>

            </el-row>

            <el-row :gutter="gutterPro">
              <el-col :span="spanOne">
                <el-row :gutter="gutterCon">
                  <el-col :span="span2Title">
                    <div class="form-title margin2">{{'政府回复文本'}}</div>
                  </el-col>
                  <el-col :span="span2Con">

                    <el-input type="textarea"
                              :rows="4"
                              resize="none"
                              maxlength="500"
                              style="width:600px"
                              show-word-limit
                              placeholder='请输入政府回复文本'
                              v-model="adviceData.govContent"></el-input>
                  </el-col>

                </el-row>
              </el-col>

            </el-row>

            <el-row :gutter="gutterPro">
              <el-col :span="spanOne">
                <el-row :gutter="gutterCon">
                  <el-col :span="span2Title">
                    <div class="form-title margin2">{{'政府回复取证'}}</div>
                  </el-col>
                  <el-col :span="span2Con">

                    <el-upload class="avatar-uploader"
                               ref="uploadPic"
                               :action="uploadUlr"
                               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>
                  </el-col>

                </el-row>
              </el-col>

            </el-row>

          </div>

        </div>

      </div>

    </c-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import CForm from '@c/CForm'
import CDialog from '@c/CDialog'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from "@/js/dai/request";

let loading // 加载动画
export default {
  data () {
    return {
      gutterPro: 10,//每个属性的列间隔
      gutterCon: 5,//标题和内容的列间隔
      spanThree: 8,//每行三列的列宽
      spanOne: 24,
      spanTitle: 9,//标题列宽
      spanCon: 15,//内容列宽

      span2Title: 3,
      span2Con: 20,

      srcList: [],

      diaVisible: false,
      adviceId: '',//建议id，父组件传来
      adviceData: {
        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/uploadimg',
      //  upload_url: '', // 上传URL
      upload_name: '', // 图片或视频名称

    }
  },
  components: {
    CForm, CDialog
  },
  mounted () {
  },
  computed: {
    dialogWidth () {
      return this.resolution === 'small' ? 70 : 60
    },
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 50 - 400
    },
    ...mapGetters(['clientHeight', 'resolution'])
  },
  methods: {
    // eslint-disable-next-line
    async initData (row) {
      this.diaVisible = true
      this.adviceId = row.id
      await this.getData()

    },

    async getData () {
      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, internalMsg } = 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 + "：" + internalMsg)
      }
      this.endLoading()
    },

    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)

    },

    save () {
      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 _data = {
        adviceId: this.adviceData.adviceId,
        replyContent: this.adviceData.replyContent,
        govContent: this.adviceData.govContent,
        govImgList: this.adviceData.govImgList
      }


      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)
        })

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

<style scope>
.div_total {
  margin: 0 10px;
}

.el-row {
  margin-bottom: 5px;
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;

  /* &:last-child {
      margin-bottom: 0;
    } */
}
.el-col {
  border-radius: 4px;
  height: 100%;
}
.margin2 {
  margin-left: 10px;
}

.bg-gray {
  background: #ececec;
  border-radius: 4px;
}

.form-title {
  margin-left: 10px;
  text-align: center;
  border-radius: 4px;

  line-height: 30px;
}
.form-content {
  padding: 0 5px;
  text-align: left;
  border-radius: 4px;
  line-height: 30px;
}
.input_tip {
  color: #e60000;
  margin: 10px 0 0 0;
}
.upload_tip {
  color: #7a7a7a;
  margin: 10px 0 0 0;
}
</style>
