<template>
  <div class="page-dialog">
    <div class="tables">
      <block-header :title="title"></block-header>
      <div class="block-box">
        <el-button size="mini" @click="handleTabClick" type="primary">新增反馈记录</el-button>
      </div>
      <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" width="180" align="center" label="客服反馈编号"></el-table-column>
        <el-table-column prop="feedProductStr" align="center" label="产品名称"></el-table-column>
        <!-- <el-table-column prop="clientName" align="center" label="客户姓名"></el-table-column> -->
        <!-- <el-table-column prop="clientCell" align="center" label="客户手机号"></el-table-column> -->
        <el-table-column prop="feedType" align="center" label="反馈类型"></el-table-column>
        <el-table-column prop="feedContent" align="center" label="反馈内容"></el-table-column>
        <el-table-column prop="feedVoucher" width="180" align="center" label="相关凭证">
          <template slot-scope="scope">
            <template v-if="scope.row.feedVoucher && scope.row.feedVoucher!==null">
              <template v-for="item in scope.row.feedVoucher">
                <el-image style="width: 50px; height: 50px; margin: 0 5px; cursor: pointer;" fit="fill"
                          :preview-src-list="scope.row.feedVoucher" :src="item"></el-image>
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="finishContent" align="center" label="处理意见"></el-table-column>
        <el-table-column prop="feedStatus" align="center" label="状态" :formatter="serviceFormat"></el-table-column>
        <el-table-column prop="creater" align="center" label="处理人"></el-table-column>
        <el-table-column prop="gmtCreated" align="center" label="记录时间" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" align="center">
          <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>


    <!--  意见反馈弹框 -->
    <template v-if="visible">
      <add-question
          :dialog-visible="visible"
          :title="dialogTitle"
          :params="dialogParams!=null?dialogParams: params"
          @handleClose="visible=false"
          @callback="init"
      />
    </template>

    <!--  查看图片弹框-->

    <el-dialog
        title="查看大图"
        :visible.sync="imgDialogVisible"
        width="30%"
        :before-close="handleCloseDialog">
      <el-image :src="dialogImgUrl"/>
    </el-dialog>
  </div>

</template>

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

export default {
  name: 'RiskInfo',
  components: {
    BlockHeader,
    AddQuestion
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      visible: false,
      dialogTitle: '',
      dialogImgUrl: '',
      dialogParams: null,

      imgDialogVisible: false,

      form: {
        total: 1,
        current: 1,
        size: 10,
      },
      data: []
    }
  },
  async created() {
    const params = this.params;
    console.log(this.params,'909090');
    this.dialogTitle = '意见反馈'

    this.form.clientCell = params.phoneNo;
    this.form.loanNo = params.loanNo;
    this.form.feedProduct = params.clientProductName;
    this.form.feedSource = 'CUSTOMER';
    this.form.sort = 'id desc';
    await this.init()
  },
  methods: {
    handleCloseDialog() {
      this.dialogVisible = false;
    },
    handleDialog(img) {
      this.dialogImgUrl = img;
    },
    handleTabClick() {
      this.dialogTitle = '意见反馈';
      this.visible = true;
      const {clientProductName,clientNo,loanNo} = this.params;
      this.dialogParams = {
        feedType:'',
        feedStatus:'',
        feedContent:'',
        feedVoucher:[],
        clientNo,
        loanNo,
        feedProduct: clientProductName
      }


    },
    updateQueDialog(row) {
      const {loanNo} = this.params;
      console.log(row, '那啥');
      this.visible = true;
      this.dialogTitle = '意见反馈';
      this.dialogParams = row;
      this.dialogParams.loanNo=loanNo;
    },

    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();
    }
  }
}
</script>

<style>
.tables {
  margin-bottom: 20px;
}

.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
