<template>
  <div>
    <PageTable ref="feedbackTable" action="GetFeedbackAll" :columns="tableColumns">
      <Form :model="formSearch" ref="feedbackFormSearch" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item :label="$t('module.feedback.creator')">
          <Input type="text" v-model="formSearch.userName" maxlength="30" :placeholder="$t('module.feedback.enterName')" size="small"></Input>
        </Form-item>
        <Form-item :label="$t('module.feedback.createTime')">
          <DatePicker type="daterange" placement="bottom-end" :placeholder="$t('module.feedback.selectDate')" :value="defaultDate" style="width: 200px" size="small" @on-change="handleDateChange" @on-clear="handleDateClear"></DatePicker>
        </Form-item>
        <Form-item prop="enabled" :label="$t('module.feedback.type')" >  
          <Select v-model="formSearch.feedbackType" size="small" clearable style="width:200px">
            <Option :value="item.id" v-for="(item, index) in feedbackTypes" :key="item.id">{{item.text}}</Option>
          </Select>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <Button size="small" @click.native="search" type="warning" icon="ios-search">{{$t('common.search')}}</Button>
        <Button size="small" @click.native="reset" type="info" icon="md-sync">{{$t('common.reset')}}</Button>
      </div>
    </PageTable>
  </div>
</template>
<script>
import ReplyHistory from './ReplyHistory.vue'
export default {
  name: 'feedback-manage',
  components: {
    ReplyHistory
  },
  data() {
    return {
      defaultDate: [],
      formSearch: {
        userName: "",
        feedbackType: "",
        startTime: "",
        endTime: "",
      },
      tableColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(ReplyHistory,
              {
                props: {
                  feedback: params.row
                }
              }
            )
          }
        },
        {
          title: this.$t('module.feedback.questionDesc'),
          width: 300,
          key: "feedbackContent"
        },
        {
          title: this.$t('module.feedback.creator'),
          key: "userName"
        },
        {
          title: this.$t('module.feedback.createTime'),
          width: 300,
          key: "createTime"
        },
        {
          title: this.$t('module.feedback.type'),
          key: "feedbackType",
          render: (h, params) => {
            return h('span', this.categoryText(params.row.feedbackType))
          }
        },
        {
          title: this.$t('module.feedback.reply'),
          key: "reply",
          render: (h, params) => {
            return h('span', params.row.replyList.length)
          }
        }
      ]
    }
  },
  computed: {
    feedbackTypes() {
      return $store.state.feedback.category;
    },
  },
  created: function () {
  },
  beforeMount: function () {

  },
  mounted: function () {

  },
  beforeDestroy: function () {

  },
  destroyed: function () {

  },
  methods: {
    search(page) {
      this.$refs["feedbackTable"].load(this.formSearch, page);
    },
    reset() {
      this.formSearch.userName = "";
      this.formSearch.feedbackType = "";
      this.formSearch.startTime = "";
      this.formSearch.endTime = "";
      this.defaultDate = [];
      this.$refs["feedbackTable"].load(this.formSearch);
    },
    categoryText(id) {
      return $store.state.feedback.category[$store.state.feedback.category.findIndex((row) => {
        return row.id == id;
      })].text;
    },
    handleDateChange(date) {
      this.formSearch.startTime = `${date[0]} 00:00:00`;
      this.formSearch.endTime = date[1] ? `${date[1]} 23:59:59` : "";
    },
    handleDateClear() {
      this.formSearch.startTime = "";
      this.formSearch.endTime = "";
    },
  },
  watch: {

  },
  directives: {

  }
}
</script>
