<template>
  <section class="AiEvaluation">
    <ai-card :title="title" v-if="detail.id">
      <template #content>
        <slot v-if="$scopedSlots.default" :detail="detail"/>
        <ai-wrapper v-else>
          <ai-info-item label="评价时间" :value="detail.createTime"/>
          <ai-info-item label="评价分数">
            <el-rate v-model="detail.score" show-text :texts="rateTexts"/>
          </ai-info-item>
          <ai-info-item label="评价详情" is-line>
            <div class="mar-b8" v-html="detail.content"/>
            <div flex class="wrap">
              <el-images v-for="op in annex" :key="op.id" :src="op.url" :preview-src-list="[op.url]" lazy class="mar-b8 mar-r8"/>
            </div>
          </ai-info-item>
        </ai-wrapper>
      </template>
    </ai-card>

  </section>
</template>

<script>
import instance from "../../lib/js/request";
import AiCard from "../layout/AiCard";
import AiWrapper from "../basic/AiWrapper";
import AiInfoItem from "../basic/AiInfoItem";

export default {
  name: "AiEvaluation",
  components: {AiInfoItem, AiWrapper, AiCard},
  props: {
    /**
     * 业务id
     */
    bid: {default: ""},
    /**
     * 面板标题
     */
    title: {default: "办事评价"},
    /**
     * 评价数据
     */
    info: {default: () => ({})},
    /**
     * 评价等级文案
     */
    rateTexts: {default: () => ['非常不满意', '不满意', '一般', '满意', '非常满意']}
  },
  computed: {
    annex: v => v.detail?.files || []
  },
  data() {
    return {
      instance,
      detail: {},
    }
  },
  methods: {
    getDetail() {
      const {bid: bizId} = this.$props
      bizId && this.instance.post("/app/appbusinesscompletionevaluation/queryMyEvaluationByBizId", null, {
        params: {bizId}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data?.[0] || {}
          this.$emit("update:info", {...res.data, rateText: this.rateTexts?.[this.detail.score - 1] || ""})
        }
      })
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.AiEvaluation {
}
</style>
