<template>
  <section class="interviewDetail">
    <ai-detail>
      <template #title>
        <ai-title title="调查随访详情" isShowBottomBorder isShowBack @onBackClick="interview.back()"/>
      </template>
      <template #content>
        <ai-card title="基本信息">
          <template #content>
            <ai-wrapper
                label-width="56px">
              <ai-info-item label="标题" isLine>{{ detail.title }}</ai-info-item>
              <ai-info-item label="内容" isLine>{{ detail.content }}</ai-info-item>
              <ai-info-item label="图片" isLine>
                <div class="images">
                  <el-image
                      v-for="(op,i) in detail.fileList"
                      :key="i"
                      :src="op.accessUrl"
                      :preview-src-list="detail.fileList.map(e=>e.accessUrl)">
                    <i slot="placeholder" class="el-icon-picture-outline"/>
                    <i slot="error" class="el-icon-picture-outline"/>
                  </el-image>
                </div>
              </ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
      </template>
      <!-- <template #footer>
        <el-button @click="interview.back()">取消</el-button>
        <el-button type="primary" @click="submitInterview" v-if="interview.permissions('app_appinterview_edit')">保存</el-button>
      </template> -->
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "interviewDetail",
  inject: ['interview'],
  data() {
    return {
      detail: {
        fileList: []
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      this.interview.instance.post("/app/appinterview/queryDetailById", null, {params: {id}}).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
    submitInterview() {
      this.$refs.interviewForm.validate(v => {
        if (v) {
          this.interview.instance.post("/app/appinterview/update-web", this.detail).then(res => {
            if (res?.code == 0) {
              this.$message.success("保存成功!")
              this.interview.back()
            }
          })
        }
      })
    },
  }
}
</script>

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

  ::v-deep .images {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;

    &:before {
      content: none;
    }

    .el-image__inner {
      width: 82px !important;
      height: 82px !important;
      margin-right: 16px;
    }
  }
}
</style>
