<template>
  <div class="message-detail iconPhoto-content">
    <ai-detail>
      <ai-title slot="title" :title="titleText" isShowBack isShowBottomBorder @onBackClick="$emit('back')"></ai-title>
      <template #rightBtn>
        <p class="resident_top_area" style="text-align: right;" v-if="data.status != '2' && $permissions('app_appleavemessagereply_edit')">
          <el-button type="primary" class="el-icon-edit" v-if="data.status == '0'" @click="maskShow = true" style="width:104px">回复留言</el-button>
          <el-button class="el-icon-switch-button del-btn-list" @click="close()" style="width:104px">关闭留言</el-button>
        </p>
      </template>

      <template #content>
        <ai-card :title="data.title">
          <template #content>
            <div class="content-main">
              <div class="main-header mar-b16">
                <h6 style="font-weight:600;">{{ data.title }}</h6>
                <div class="time">
                  <span class="time-label" style="width: 243px;"
                    >留言编号：<span style="color:#333">{{ data.msgCode }}</span></span
                  >
                  <span class="time-label"
                    >留言时间：<span style="color:#333">{{ data.createTime }}</span></span
                  >
                  <span class="time-label" style="width: 258px;text-align: right"
                    >留言人：<span style="color:#333">{{ data.leaveName }}&nbsp;&nbsp;{{ data.leavePhone }}</span></span
                  >
                  <svg class="status-icon" aria-hidden="true">
                    <use xlink:href="#iconno_response" v-if="data.status == '0'"></use>
                    <use xlink:href="#iconreplied" v-if="data.status == '1'"></use>
                    <use xlink:href="#iconfinished" v-if="data.status == '2'"></use>
                  </svg>
                </div>
                <p class="message-text border-t" style="padding: 16px">{{ data.content }}</p>
                <div v-if="data.images.length">
                  <div class="content-img" v-viewer>
                    <img v-for="(item, index) in data.images" :src="item.accessUrl" alt="" :key="index" />
                  </div>
                </div>
              </div>
              <div class="main-list">
                <div class="main-header mar-b16">
                  <h6 style="font-weight:600;">沟通记录</h6>
                </div>
                <div v-for="(item, index) in data.appLeaveMessageReplyList" :key="index" :class="item.headPortrait == null ? 'message-for reply' : 'message-for'" v-if="data.appLeaveMessageReplyList.length > 0">
                  <div class="message-title">
                    <img :src="item.headPortrait" alt="" class="user-img" v-if="item.headPortrait" />
                    <span class="iconfont iconProfile_Picture" v-else></span>
                    <span class="user-name" v-if="!item.headPortrait">
                      <span style="color:#5088FF">{{ item.createUnitName }} &nbsp;<span style="color:#333">&nbsp;回复</span></span
                      ><br />
                      <span style="color:#999;font-size:12px">操作员：{{ item.createUserName }}{{ item.createUserPhone }}</span>
                    </span>
                    <span class="user-name" v-else>{{ item.createUserName }}</span>

                    <span style="color:#999;vertical-align: text-bottom">{{ item.createTime }}</span>
                  </div>
                  <p class="message-text">{{ item.content }}</p>
                  <div v-if="item.images.length">
                    <div class="message-img-list" v-viewer>
                      <img class="message-img" v-for="(items, index) in item.images" :src="items.accessUrl" :key="index" v-if="items.accessUrl" />
                    </div>
                  </div>
                </div>
                <div v-if="data.appLeaveMessageReplyList.length == 0" style="width:100%;text-align:center;color:#999;font-size:14px">暂无沟通记录</div>
              </div>
            </div>
          </template>
        </ai-card>
      </template>
    </ai-detail>
    <ai-dialog :title="maskText" :visible.sync="maskShow" @onConfirm="confirm('ruleForm')" @onCancel="hideMask" :before-close="hideMask" width="720px">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="auto">
        <el-form-item label="回复内容：" prop="content">
          <el-input type="textarea" v-model.trim="ruleForm.content" :row="4" show-word-limit :maxlength="1000" placeholder="请输入回复内容"></el-input>
        </el-form-item>
        <el-form-item label="图片附件：" class="user">
          <span class="upload-more left-84">(最多9张)</span>
          <el-upload class="upload-demo upload-list-small" ref="upload" multiple action list-type="picture-card" :file-list="images" :http-request="uploadFile" :on-remove="handleRemove" :on-change="handleChange" accept="jpeg/jpg/png">
            <div class="upload-img-small">
              <span class="iconfont iconPhoto iconPhoto2"></span>
              <div class="upload-text">上传照片</div>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'messageDetail',
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    detailId: String,
  },
  data() {
    return {
      titleText: '留言详情',
      maskShow: false,
      maskText: '回复留言',
      images: [],
      data: {
        appLeaveMessageReplyList: [],
      },
      rules: {
        content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
      },
      ruleForm: {
        content: '',
      },
    }
  },
  computed: {
    ...mapState(['user']),
  },
  created() {},
  mounted() {
    console.log(this.user)
    this.getDetailInfo()
  },
  methods: {
    getDetailInfo() {
      this.data.appLeaveMessageReplyList = []
      this.instance.post(`/app/appleavemessage/queryDetailById?id=` + this.detailId).then((res) => {
        this.data = res.data
        this.data.images = JSON.parse(res.data.images)
        if (this.data.appLeaveMessageReplyList.length) {
          this.data.appLeaveMessageReplyList.map((item) => {
            if (item.images) {
              item.images = JSON.parse(item.images || '[]')
            }
            return item
          })
        }
        this.data.appLeaveMessageReplyList.reverse()
      })
    },
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmFn()
        } else {
          return false
        }
      })
    },
    confirmFn() {
      let images = []
      this.images.map((item) => {
        images.push({ fileId: item.fileId, accessUrl: item.accessUrl })
      })
      let params = {
        content: this.ruleForm.content,
        images: JSON.stringify(images),
        msgCode: this.data.msgCode,
        userType: '1',
        createUnitId: this.user.info.unitId,
        createUnitName: this.user.info.unitName,
      }
      this.instance.post(`/app/appleavemessagereply/addOrUpdate`, params).then((res) => {
        console.log(res)
        this.maskShow = false
        this.getDetailInfo()
      })
    },
    hideMask() {
      this.maskShow = false
      this.images = []
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
      })
    },
    close() {
      this.$confirm('关闭留言之后，双方都将无法再进行回复，是否确定关闭本次留言？', {
        type: 'warning',
      })
        .then(() => {
          let params = this.data
          params.status = '2'
          params.images = JSON.stringify(params.images)
          if (params.appLeaveMessageReplyList.length) {
            params.appLeaveMessageReplyList.map((item) => {
              item.images = JSON.stringify(item.images)
              return item
            })
          }
          this.instance.post(`/app/appleavemessage/addOrUpdate`, params).then((res) => {
            this.getDetailInfo()
          })
        })
        .catch(() => {})
    },
    // 上传照片
    uploadFile(file) {
      console.log(this.images.length > 9)
      if (this.images.length > 9) {
        this.$message.warning('上传图片不能超过9张')
        this.images.map((item, index) => {
          if (item.uid == file.file.uid) {
            this.images.splice(index, 1)
          }
          return this.images
        })
      }
      const isLt2M = file.file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.warning('图片大小不能超过 2MB!')
        return
      }
      let formData = new FormData()
      formData.append('file', file.file)
      let file2 = formData
      this.instance.post(`/admin/file/add`, file2, { withCredentials: false }).then((res) => {
        if (res.code == 0) {
          let imgInfo = res.data[0].split(';')
          let img = {
            fileId: imgInfo[1],
            accessUrl: imgInfo[0],
          }
          this.images.map((item, index) => {
            if (item.uid == file.file.uid) {
              this.images[index].fileId = img.fileId
              this.images[index].accessUrl = img.accessUrl
              this.images[index].url = img.accessUrl
            }
            return this.images
          })
        }
      })
    },
    handleChange(file, fileList) {
      this.images = fileList
    },
    handleRemove(file, fileList) {
      this.images = fileList
    },
  },
}
</script>
<style lang="scss" scoped>
.message-detail {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  background-color: #f3f6f9;
  .left-84 {
    left: -84px;
  }
  .iconProfile_Picture {
    font-size: 40px;
  }

  .iconBack_Large {
    width: 16px;
    height: 16px;
    color: #2266ff;
    cursor: pointer;
  }
  .content {
    padding-top: 24px;
    width: 100%;
    height: calc(100% - 80px);
    overflow-y: scroll;
    .content-main {
      width: 760px;
      margin: 0 auto;
      .main-header {
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #eee;
        h6 {
          font-size: 16px;
          color: #333;
          padding: 0 16px;
          min-height: 54px;
          line-height: 54px;
          box-sizing: border-box;
        }
        .time {
          height: 54px;
          line-height: 54px;
          font-size: 12px;
          padding: 0 16px;
          box-sizing: border-box;
          position: relative;
          overflow: hidden;
          .time-label {
            color: #999;
            display: inline-block;
          }
        }
        .status-icon {
          position: absolute;
          width: 66px;
          height: 66px;
          top: -5px;
          right: 0;
        }
      }
      .main-list {
        background-color: #fff;
        padding-bottom: 80px;
        .message-for {
          width: 728px;
          margin: 0 auto 24px auto;
          padding: 16px 16px 8px;
          box-sizing: border-box;
          font-size: 14px;
          .message-title {
            height: 40px;
            line-height: 40px;
            margin-bottom: 6px;
            .user-img {
              display: inline-block;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background-color: red;
            }
            .user-name {
              display: inline-block;
              width: 510px;
              color: #333;
              vertical-align: text-bottom;
              padding-left: 8px;
              box-sizing: border-box;
            }
          }
          .message-text {
            padding-left: 48px;
            color: #666;
            margin-bottom: 16px;
          }
          .message-img-list {
            padding-left: 48px;
            .message-img {
              display: inline-block;
              width: 113px;
              height: 113px;
              margin: 0 16px 16px 0;
            }
          }
        }
        .reply {
          background-color: #f5f6f7;
          .message-title {
            .user-name {
              line-height: 20px;
            }
          }
        }
      }
    }
  }

  .content-img {
    padding: 0 16px;
    img {
      width: 84px;
      height: 84px;
      margin: 0 16px 16px 0;
    }
  }

  .operation-foot {
    overflow: hidden;
    //   position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    line-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f6f9;
    box-shadow: inset 0px 1px 0px 0px #eeeeee;
    button {
      width: 92px;
      height: 32px;
      padding: 0 !important;
    }
    .delete-btn {
      background-color: #fff;
    }
  }
  .mask {
    overflow: hidden;
    .el-form-item__content {
      float: left;
      width: calc(100% - 100px) p {
        font-size: 14px;
        color: #222222;
      }
    }
    .el-form-item__label {
      display: inline-block;
      width: 130px;
      text-align: right;
      font-size: 14px;
      float: left;
    }
    .operation {
      overflow: hidden;
      //   position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 64px;
      line-height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f3f6f9;
      box-shadow: inset 0px 1px 0px 0px #eeeeee;
    }
  }
  .status {
    span {
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
    }
  }
  .status0 {
    background-color: #eff6ff;
    color: #2266ff;
  }
  .status1 {
    background-color: #e8ecff;
    color: #2244ff;
  }
  .status2 {
    background-color: #fff3e8;
    color: #ff8822;
  }
  .status3 {
    background-color: #eaf5e8;
    color: #2ea222;
  }
  .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-top: 16px;
  }
}
</style>
