<!-- 反馈意见明细——陈昭宇 -->
<template>
  <div>
    <dialog-edit
      :visible.sync="dialogVisible"
      :form="dialogForm"
      :api="api"
      :editModel="editModel"
      :title="$t('feedbackDetailsIndex.title')"
      :footerVisible="footerVisible"
      :footerBtnShow="false"
      width="1480px">
      <div class="titleLine">{{$t('feedbackDetailsIndex.title')}}<span class="line"></span></div>
      <template>
        <data-table
          ref="dataTable"
          :sourceData.sync="sourceData"
          :columns="columns"
          :api="api"
          :queryParas="searchFormQueryParas"
          operateBtnLayout=""
          :showSelection="true"
          type="index"
          :typeLabel="$t('feedbackDetailsIndex.serialNumber')"
          loadPage="getPage"
          max-height="460px"
          :loadCount.sync="loadCount">
          <!-- 操作 -->
          <el-table-column v-if="feedBackOperation !== 'see'" :label="$t('common.operate')" align="center" width="80px" fixed="right">
            <template slot-scope="scope">
              <auth-button class="iconCircle marginLeft"
                          icon="iconfont icondaichuli"
                          :title="$t('feedbackDetailsIndex.manage')"
                          @click="showButton(scope.row)"
                          v-if="scope.row.treatmentState==='01'"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
      <template slot="footer">
        <!-- 关闭按钮 -->
        <auth-button :label="$t('common.close')" @click="dialogClose" size="medium"></auth-button>
      </template>
      <!-- 解决弹窗抖动问题 -->
      <div style="height:1px"></div>
    </dialog-edit>
    <handingFeedback v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :feedbackKeyId="feedbackKeyId" @load="load"></handingFeedback>
  </div>
</template>

<script>
import { DialogEdit, authButton, DataTable } from 'newepoch-components'
import BaseEditPage from '@/pages/baseEditPage'
import * as format from '@/filters/index'
import knowledgeBaseApi from '@/api/assetaudit/knowledgeBaseApi'
import handingFeedback from '@/pages/assetaudit/knowledgeBase/handlingFeedback'
export default {
  extends: new BaseEditPage(),
  props: {
    keyId: {
      type: [String],
      required: true
    },
    feedBackOperation: {
      type: [String],
      required: true
    }
  },
  components: {
    DialogEdit,
    authButton,
    DataTable,
    format,
    handingFeedback
  },
  data () {
    return {
      dialogFormVisible: false,
      feedbackKeyId: '',
      dialogForm: {},
      footerVisible: true,
      sourceData: [],
      searchFormQueryParas: {
        pageIndex: 1,
        pageSize: 10,
        knowledgeBaseId: ''
      },
      headTitleFlag: true,
      handleFlag: false,
      columns: [
        // 反馈意见
        {
          prop: 'opinion',
          align: 'left',
          label: this.$t('feedbackDetailsIndex.opinion'),
          width: '200px'
        },
        // 反馈时间
        {
          prop: 'feedbackTime',
          align: 'center',
          label: this.$t('feedbackDetailsIndex.feedbackTime'),
          width: '160px',
          format: (row) => {
            return format.formatDateNull(row.feedbackTime, 'yyyy-MM-dd hh:mm:ss')
          }
        },
        // 反馈人
        {
          prop: 'feedbackPersonName',
          align: 'left',
          label: this.$t('feedbackDetailsIndex.feedbackPersonId'),
          width: '120px'
        },
        // 处理时间
        {
          prop: 'processTime',
          align: 'center',
          label: this.$t('feedbackDetailsIndex.processTime'),
          width: '160px',
          format: (row) => {
            return format.formatDateNull(row.processTime, 'yyyy-MM-dd hh:mm:ss')
          }
        },
        // 处理人
        {
          prop: 'handlerName',
          align: 'left',
          label: this.$t('feedbackDetailsIndex.handlerId'),
          width: '120px'
        },
        // 处理结果
        {
          prop: 'change',
          align: 'center',
          label: this.$t('feedbackDetailsIndex.treatmentState'),
          width: '120px',
          format: (row) => {
            return format.formatDict(row.change, 'HANDLE_RESULT')
          }
        },
        // 不修改原因
        {
          prop: 'modifyContent',
          align: 'left',
          label: this.$t('feedbackDetailsIndex.modifyContent'),
          width: '200px'
        }
      ],
      loadCount: 0
    }
  },
  mounted () {
    // 获取父组件传递的keyId
    this.$nextTick(() => {
      this.searchFormQueryParas.knowledgeBaseId = this.keyId
      this.handleFilter()
    })
  },
  methods: {
    // 关闭按钮
    dialogClose () {
      this.$emit('operateBtnClick', this.handleFlag)
      this.dialogVisible = false
    },
    // 处理按钮
    showButton (val) {
      this.dialogFormVisible = true
      this.feedbackKeyId = val.keyId
    },
    // 调用当前组件自带方法，实现分页，展示数据
    load (data) {
      if (data) {
        this.handleFlag = true
        this.$refs.dataTable.loadTableData()
      }
    }
  },
  computed: {
    // 查询传入API接口
    api () {
      return knowledgeBaseApi.feedbackdetails
    }
  }
}
</script>
