<template>
  <van-popup
    v-model="dialogVisible"
    class="ibps-fullscreen-popup"
    position="bottom"
    @opened="loadFormData"
  >
    <div v-if="dialogLoading" class="ibps-fixed-toolbar">
      <van-sticky>
        <van-nav-bar
          title="消息明细"
          left-arrow
          @click-left="onClose"
        >
          <template #left>
            <van-icon name="cross" class="ibps-nav-bar__close-icon" />
          </template>
        </van-nav-bar>
      </van-sticky>
      <van-cell title="主题">
        <template>
          {{ form.subject }}
        </template>
      </van-cell>
      <van-cell title="创建时间">
        {{ form.createTime | dateFormat }}
      </van-cell>
      <van-cell title="发送人">
        {{ form.ownerName }}
      </van-cell>
      <van-cell title="消息类型">
        <van-tag :type="form.messageType|optionsFilter(typeOptions,'type')">
          {{ form.messageType|optionsFilter(typeOptions,'label') }}
        </van-tag>
      </van-cell>
      <van-cell title="是否公告">
        <van-tag :type="form.isPublic|optionsFilter(publicOrCanreplyOptions,'type')">
          {{ form.isPublic|optionsFilter(publicOrCanreplyOptions,'label') }}
        </van-tag>
      </van-cell>
      <van-cell title="是否可回复">
        <van-tag :type="form.canreply|optionsFilter(publicOrCanreplyOptions,'type')">
          {{ form.canreply|optionsFilter(publicOrCanreplyOptions,'label') }}
        </van-tag>

      </van-cell>
      <van-cell title="消息内容">
        <template #label>
          <span v-html="form.content" />
        </template>
      </van-cell>
      <van-tabs v-model="activeName">
        <van-tab name="reply" title="已回复信息列表">
          <reply-list :id="id" ref="replyList" />
        </van-tab>
        <van-tab name="readed" title="已读取人员列表">
          <readed-list :id="id" ref="readedList" />
        </van-tab>
      </van-tabs>
    </div>
  </van-popup>
</template>
<script>
import { get } from '@/api/platform/message/innerMessage'
import { typeOptions, publicOrCanreplyOptions } from '../constants'

import ReadedList from './readed-list'
import ReplyList from './reply-list'

export default {
  components: {
    ReadedList,
    ReplyList
  },
  props: {
    visible: Boolean,
    id: String,
    readonly: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogLoading: false,
      defaultForm: {},
      form: {},
      typeOptions: typeOptions,
      publicOrCanreplyOptions: publicOrCanreplyOptions,
      activeName: 'reply'
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
        if (!val) {
          this.dialogLoading = false
        }
      },
      immediate: true
    }
  },
  methods: {
    loadFormData() {
      this.form = JSON.parse(JSON.stringify(this.defaultForm))

      this.dialogLoading = true
      if (this.$utils.isEmpty(this.id)) {
        return
      }
      get({
        innerMessageId: this.id
      }).then(response => {
        const data = response.data
        if (this.$refs['replyList']) {
          this.$refs['replyList'].loadData()
        }

        if (this.$refs['readedList']) { this.$refs['readedList'].loadData() }
        this.form = data
      }).catch(error => {
        console.error(error)
      })
    },
    onClose() {
      this.$emit('close', false)
    }
  }
}
</script>
