<template>
  <div class="table">
    <Table :loading="$store.state.app.isLoading" border ref="selection" :columns="columns" :data="data" @on-select='onSelect' @on-select-all='onSelectAll'>
      <template slot-scope="{ row }" slot="name">
      <img style="width: 30px;height: 30px;margin-right: 10px;" :src="row.writerIcon" alt="">  <span>{{ row.nickName }}</span>
      </template>
      <template slot-scope="{ row }" slot="countdown">
        <span>{{ row.countdown }}</span>
      </template>
      <template slot-scope="{ row }" slot="created_at">
        <span>{{ row.created_at | format}}</span>
      </template>
      <template slot-scope="{ row }" slot="enable">
       <span>{{row.type?'评论':'留言'}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <a @click="editly(row,1)">编辑留言</a>
         <a style="margin: 0 10px;" @click="setTops(row.id)">置顶</a>
        <a @click="edit(row)">评论</a>
        <a style="margin-left: 10px;"  @click="editly(row,0)">点赞</a>
      </template>
    </Table>
     <Modal
        v-model="showModal"
        @on-ok="submit">
         <Form
        ref="formValidate"
      >
       <FormItem v-if="type" label="留言" prop="title">
          <Input
             type="textarea"
            v-model="content"
            placeholder="请输入留言内容"
          ></Input>
        </FormItem>
         <FormItem v-else label="请输入点赞数">
            <InputNumber v-model="dznum"></InputNumber>
          </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { formatDate } from '@/libs/util'
import {
  setTop,
  updateContent,
  pretendGreate
} from '@/api/api'
export default {
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      id: null,
      type: 0,
      content: '',
      dznum: null,
      showModal: false,
      selectList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户ID',
          width: 200,
          slot: 'name'
        },
        {
          title: '留言内容',
          width: 200,
          key: 'content'
        },
        {
          title: '属性',
          slot: 'enable'
        },
        {
          title: '用户点赞数',
          key: 'greatNum'
        },
        {
          title: '创建日期',
          width: 200,
          key: 'createTime'
        },
        {
          title: '情绪值',
          key: 'mood'
        },
        {
          title: '热度',
          key: 'sore'
        },
        {
          title: '操作',
          width: 200,
          slot: 'action'
        }
      ]
    }
  },
  mounted () {
  },
  filters: {
    format (value) {
      return formatDate(value)
    }
  },
  methods: {
    edit (row) {
      this.$emit('edit', row)
    },
    editly (val, type) {
      this.showModal = true
      this.type = type
      this.id = val.id
      this.content = val.content
    },
    submit () {
      if (this.type) {
        updateContent({ id: this.id, content: this.content }).then((res) => {
          this.$Message.success(res.msg)
          this.$emit('refresh')
        })
      } else {
        pretendGreate({ id: this.id, num: this.dznum }).then((res) => {
          this.$Message.success(res.msg)
          this.$emit('refresh')
        })
      }
    },
    onSelect (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    onSelectAll (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    setTops (id) {
      setTop({ id }).then((res) => {
        if (res.status === 200) {
          this.$Message.success('操作成功')
          this.$emit('refresh')
        }
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    }
  }
}
</script>

<style lang="less">
.table {
  margin-top: 20px;
}
</style>
