<template>
  <ai-detail>
    <template slot="title">
      <ai-title title="随心问详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
        <template slot="rightBtn">
          <el-button
              @click="close"
              size="small"
              v-if="info.status !== '2'"
              icon="iconfont iconReject">
            关闭留言
          </el-button>
          <el-button
              size="small"
              type="primary"
              v-if="info.status !== '2'"
              icon="iconfont iconRegister"
              @click="isShow = true">
            回复留言
          </el-button>
        </template>
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <ai-wrapper
              label-width="56px">
            <ai-info-item label="标题" isLine>{{ info.title }}</ai-info-item>
            <ai-info-item label="提问状态">
              <span :style="{color: info.status === '0' ? '#F79300' : '#222'}">{{
                  dict.getLabel('leaveMessageStatus', info.status)
                }}</span>
            </ai-info-item>
            <ai-info-item label="提问编号">{{ info.msgCode }}</ai-info-item>
            <ai-info-item label="提问人">{{ info.leaveName }}</ai-info-item>
            <ai-info-item label="提问时间">{{ info.createTime }}</ai-info-item>
            <ai-info-item label="提问内容" isLine>{{ info.content }}</ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="沟通记录">
        <template #content>
          <div class="comments">
            <div class="comments-item" v-for="(item, index) in info.appLeaveMessageReplyList" :key="index"
                 :class="[item.userType === '1' ? 'comments-item__replay' : '']">
              <div class="comments-item__body">
                <div class="comments-item__top">
                  <img class="comments-item__avatar" v-if="item.headPortrait" :src="item.headPortrait">
                  <span v-else>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
                  <div class="comments-item__middle">
                    <div class="comments-item__middle--top">
                      <h2 v-if="item.userType === '0'">{{ item.createUserName }}</h2>
                      <h3 v-if="item.userType === '1'">{{ item.createUnitName }}</h3>
                      <h2 v-if="item.userType === '1'">回复</h2>
                    </div>
                    <p v-if="item.userType === '1'">操作员：{{ item.createUserName }}{{ item.createUserPhone }}</p>
                  </div>
                  <i class="comment-item__date">{{ item.createTime }}</i>
                </div>
                <div class="comments-item__content">
                  <p>{{ item.content }}</p>
                  <ai-uploader :instance="instance" :disabled="true" v-model="item.images"></ai-uploader>
                </div>
              </div>
            </div>
            <div slot="empty" class="no-data" style="height:160px;" v-if="!info.appLeaveMessageReplyList.length"></div>
          </div>
        </template>
      </ai-card>
      <ai-dialog
          :visible.sync="isShow"
          width="800px"
          title="回复留言"
          @close="onClose"
          @onConfirm="confirm">
        <el-form label-width="90px" :model="form" ref="form">
          <el-form-item label="回复内容" prop="content" :rules="[{required: true, message: '请输入回复内容', trigger: 'blur'}]">
            <el-input :maxlength="500" show-word-limit type="textarea" :rows="5" v-model="form.content"
                      placeholder="请输入回复内容"></el-input>
          </el-form-item>
          <el-form-item label="图片附件" prop="imgs">
            <ai-uploader :instance="instance" v-model="form.images" :limit="9"></ai-uploader>
          </el-form-item>
        </el-form>
      </ai-dialog>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'detail',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },

  data() {
    return {
      isShow: false,
      info: {
        appLeaveMessageReplyList: []
      },
      form: {
        explain: '',
        images: []
      },
      imgs: []
    }
  },

  computed: {
    ...mapState(['user'])
  },
  created() {
    this.getInfo(this.params.id)
  },
  methods: {
    getInfo(id) {
      this.instance.post(`/app/appleavemessage/queryDetailById?id=${id}`).then(res => {
        if (res?.data) {
          this.info = res.data
          this.info.appLeaveMessageReplyList = res.data.appLeaveMessageReplyList.map(item => {
            item.images = JSON.parse(item.images).map(e => ({
              ...e,
              url: e.accessUrl || e.url || e?.file?.accessUrl
            }))
            return item
          })
        }
      })
    },
    onClose() {
      this.form.explain = ''
    },
    close() {
      this.$confirm('确定关闭该数据？').then(() => {
        this.instance.post(`/app/appleavemessage/addOrUpdate`, {
          id: this.params.id,
          status: 2
        }).then(res => {
          if (res.code == 0) {
            this.$message.success('关闭成功！')
            this.cancel(true)
          }
        })
      })
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appleavemessagereply/addOrUpdate`, {
            content: this.form.content,
            msgCode: this.info.msgCode,
            userType: '1',
            createUnitId: this.user.info.unitId,
            createUnitName: this.user.info.unitName,
            images: this.form.images.length ? JSON.stringify(this.form.images) : '[]'
          }).then(res => {
            if (res.code == 0) {
              this.isShow = false
              this.$message.success('回复成功')
              this.getInfo(this.params.id)
            }
          })
        }
      })
    },
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh
      })
    }
  }
}
</script>

<style scoped lang="scss">
.comments {
  .comments-item__body, .comments-replay__item {
    margin-bottom: 24px;
    padding: 16px 40px 10px 16px;
  }

  .comments-item__replay {
    background: #F5F6F9;
  }

  .comments-item__top {
    display: flex;
    align-items: center;

    .comments-item__middle {
      flex: 1;
      margin-bottom: 6px;

      .comments-item__middle--top {
        display: flex;
        align-items: center;

        h2, h3 {
          font-size: 14px;
          font-weight: 700;
          color: #222;
        }

        h3 {
          margin-right: 6px;
          color: #2266FF;
        }
      }

      p {
        margin-top: 4px;
        color: #888888;
        font-size: 12px;
      }
    }

    .comment-item__date {
      color: #888888;
      font-size: 14px;
      font-style: normal;
    }

    .comments-item__avatar, span {
      flex-shrink: 1;
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin-right: 8px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      font-size: 14px;
      background: #2266FF;
    }
  }

  .comments-item__content {
    padding-left: 48px;

    p {
      margin-bottom: 16px;
      line-height: 22px;
      color: #222222;
      font-size: 14px;
    }
  }

  .comments-item__body {
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
