<template>
  <ai-list class="comments" :isTabs="true">
    <template slot="content">
      <div class="ai-table">
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
          <el-table-column prop="type" slot="options" label="评论明细">
            <div slot-scope="scope">
              <el-row type="flex" justify="space-between">
                <p class="comment_p">来自《{{ scope.row.title }}》</p>
                <span title="删除" style="cursor: pointer;color: #26f;user-select: none;" @click="remove(scope.row.id)">删除</span>
              </el-row>
              <div style="display: flex;">
                <b slot="label">回复内容:</b>
                <ai-audio single-play v-if="scope.row.audioFile" :src="scope.row.audioFile"/>
                <div v-html="scope.row.content" style="white-space: pre-wrap;"></div>
              </div>
              <p style="float:left;padding-right:8px;"><span style="font-weight:bold;padding-right:8px;">回复人:</span>{{ scope.row.createUser }}
              </p>
              <p style="float:left;">{{ scope.row.createDate }}</p>
            </div>
          </el-table-column>
        </ai-table>
      </div>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'JoinEvent',

    props: {
      instance: Function,
      dict: Object,
      areaId: String,
      permissions: Function
    },

    computed: {
      ...mapState(['user']),

      colConfigs() {
        return [
          { slot: 'options' }
        ]
      }
    },

    data () {
      return {
        search: {
          current: 1,
          size: 10,
          status: ''
        },
        total: 0,
        ids: [],
        tableData: [],
        orderDetail: {}
      }
    },

    created () {
      this.getList()
    },

    methods: {
      getList () {
        this.instance.post(`/app/appvillageinfocomment/list`, null, {
          params: {
            ...this.search,
            areaId: this.areaId
          }
        }).then(res => {
          if (res.data) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      remove (id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/appvillageinfocomment/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .join-event {
    ::v-deep th {
      font-weight: bold!important;
    }
  }

  .table-btn {
    margin-right: 16px;
    font-size: 14px;
    color: #2266FF;
    cursor: pointer;

    &:hover {
      opacity: 0.6;
    }

    &:last-child {
      margin-right: 0;
    }

    &:last-child:hover {
      color: #f46;
      opacity: 1;
    }
  }
</style>
