<template>
  <section class="mmDetail">
    <ai-detail>
      <ai-title slot="title" title="留言详情" isShowBottomBorder isShowBack @onBackClick="$router.push({query:{}})">
        <template #rightBtn>
          <el-button type="primary">回复留言</el-button>
          <el-button>关闭留言</el-button>
        </template>
      </ai-title>
      <template #content>
        <el-form size="small">
          <ai-card class="header">
            <template #title>
              <b v-text="detail.title||'标题'"/>
              <el-row type="flex">
                <el-form-item label="留言编号">{{ detail.createTime || "-" }}</el-form-item>
                <el-form-item label="留言时间">{{ detail.createTime || "-" }}</el-form-item>
                <el-form-item label="留言人">{{ detail.createUserName || "-" }}</el-form-item>
              </el-row>
              <ai-icon type="svg" :icon="statusImages[detail.status||0]"/>
            </template>
            <template #content>
              <div v-html="detail.content"/>
            </template>
          </ai-card>
          <ai-card title="沟通记录">
            <template #content>

            </template>
          </ai-card>
        </el-form>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "mmDetail",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    statusImages() {
      return {
        0: "iconno_response",
        1: "iconreplied",
        2: "iconfinished"
      }
    }
  },
  data() {
    return {
      detail: {},
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      this.instance.post("/appportaluserenterprise/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.mmDetail {
  height: 100%;

  ::v-deep.header {
    position: relative;

    .el-form-item {
      width: 33%;
    }

    .aibar {
      height: auto;

      .aibar-left {
        width: 100%;
        font-weight: normal;
      }

      b {
        line-height: 56px;
      }
    }

    .AiIcon {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 80px;
      height: 80px;
    }
  }
}
</style>
