<template>
  <el-dialog
      width="70%"
      class="client-data-dialog"
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose">

    <div class="page-dialog">
      <div class="tables">
        <block-header :title="title"></block-header>
        <el-table
            border
            size="mini"
            :highlight-current-row="true"
            :header-row-class-name="headerStyle"
            :data="data"
            stripe
            style="width: 100%;">
          <el-table-column prop="feedNo" label="客服反馈编号"></el-table-column>
          <el-table-column prop="clientName" label="客户姓名"></el-table-column>
          <el-table-column prop="clientCell" label="客户手机号"></el-table-column>
          <el-table-column prop="feedType" label="反馈类型"></el-table-column>
          <el-table-column prop="feedContent" label="反馈内容"></el-table-column>
          <el-table-column prop="finishContent" label="处理意见"></el-table-column>
          <el-table-column prop="feedStatus" label="状态" :formatter="serviceFormat"></el-table-column>
          <el-table-column prop="creater" label="处理人"></el-table-column>
          <el-table-column prop="gmtCreated" label="记录时间" :formatter="dateFormat"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updateQueDialog(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page.sync="form.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="form.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="form.total">
        </el-pagination>
      </div>
    </div>

    <updateQueDialog
        v-if="updateQueDialog.visible"
        :feedNo="updateQueDialog.feedNo"
        :feedType="updateQueDialog.feedType"
        :feedStatus="updateQueDialog.feedStatus"
        :feedContent="updateQueDialog.feedContent"
        :creater="updateQueDialog.creater"
        :finishContent="updateQueDialog.finishContent"
        :dialogVisible.sync="updateQueDialog.visible">
    </updateQueDialog>

  </el-dialog>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import * as moment from "moment";

export default {
  name: 'RiskInfo',
  components: {
    BlockHeader
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      form: {
        total: 1,
        current: 1,
        size: 10,
      },
      updateQueDialog: {
        visible: false,
        feedNo: '',
        feedType: '',
        feedStatus: '',
        feedContent: '',
        clientNo: '',
        creater: '',
        finishContent: '',
      },
      data: []
    }
  },
  async created() {
    const params = this.params;
    this.form.clientCell = params.phoneNo;
    this.form.feedProduct = params.clientProductName;
    this.form.feedSource = 'CUSTOMER';
    this.form.sort = 'id desc';
    await this.init()
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    async init() {
      const res = await this.$$post('/feed/feedPageList', this.form);
      const {success, result} = res.data;
      if (success && result !== null) {
        const {records, total} = result
        this.data = records;
        this.form.total = total;
      }
    },
    /*日期*/
    dateFormat: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },
    handleClose() {
      this.$emit("handleClose");
    },
    //客服状态
    serviceFormat: function (row, column) {
      let status = row['feedStatus'];
      return this.$enumUtils.toMsg('FeedStatus', status);
    },
    handleCurrentChange(e) {
      this.form.current = e;
      this.init();
    },
    handleSizeChange(e) {
      this.form.size = e
      this.form.current = 1;
      this.init();
    },
    // 修改用户的反馈问题
    updateQueDialog(record) {
      this.updateQueDialog = {
        visible: true,
        feedNo: record.feedNo,
        feedType: record.feedType,
        feedStatus: record.feedStatus,
        feedContent: record.feedContent,
        clientNo: record.clientNo,
        creater: record.creater,
        finishContent: record.finishContent,
      };
    },
  }
}
</script>

<style>
.tables{
  margin-bottom: 20px;
}
.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
