<template>
  <div>
    <a-card title="意见反馈">
      <a-button slot="extra" @click="getEvaluateList">刷新</a-button>
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="commentList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="handleTableChange"
        >
          <template
            slot="image_url"
            slot-scope="text, record"
          >
            <a-popover placement="bottom">
              <template slot="content">
                <img :src="record.image_url" alt="加载中" width="500" />
              </template>
              <a-button type="link" v-if="record.image_url"> 查看 </a-button>
            </a-popover>
          </template>
        </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { comments } from '@/api/ticketSetting/ticket'
import moment from 'moment'

const columns = [
  {
    title: '问题标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '问题描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '问题图片',
    dataIndex: 'image_url',
    key: 'image_url',
    scopedSlots: { customRender: 'image_url' }
  },
  {
    title: '联系人',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '联系方式',
    dataIndex: 'phone',
    key: 'phone'
  }
]

export default {
  created () {
    this.getEvaluateList()
  },
  components: {
  },
  data () {
    return {
      commentForm: {
        startDate: moment().startOf('day'), // startDate => 评价开始日期
        endDate: moment().endOf('day'), // endDate => 评价结束日期
        orderNo: '', // orderNo => 订单编号
        status: '', // status => 状态
        scores: '' // scores => 评分等级
      },
      commentList: [],
      columns,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      layout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      loading: true
    }
  },
  methods: {
    moment,
    handleSearch () {
      this.pagination.current = 1
      this.getEvaluateList()
    },
    handleTableChange (page) {
      this.pagination.current = page.current
      this.getEvaluateList()
    },
    getEvaluateList () {
      this.loading = true
      console.log(this.commentForm)
      const params = { pageNum: this.pagination.current, pageSize: 10 }
      comments(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.commentList = res.extraInfo.list
        this.loading = false
      }).catch(() => { this.loading = false })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: relative; padding-left: 80px;  margin-bottom: 15px; font-size: 14px;
  b {
    position: absolute; top: 0; left: 0;  margin-right: 10px;
  }
}
.ant-form-item {
  width: 264px;
}
::v-deep .ant-input,.select-input,.ant-input-affix-wrapper{
  width: 185px;
}
.checkbox-wrap {
  display: flex;  width: 100%; align-items: center;
  .ant-form-item-label{
    flex-grow: 0; flex-shrink: 0;
  }
  ::v-deep .ant-checkbox-group {
    display: inline;
  }
  .ant-checkbox-wrapper{
    margin-right: 5px;
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
}
</style>
