<template>
  <div class="page-service-problem">
    <!--搜索-->
    <block-header title="搜索"/>
    <div class="b-search">
      <el-form size="small" label-suffix=":" :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="编号：">
          <el-input placeholder="请输入客户编号" v-model="searchInfo.feedNo"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input placeholder="请输入手机号" v-model="searchInfo.clientCell"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input placeholder="请输入姓名" v-model="searchInfo.clientName"></el-input>
        </el-form-item>
        <el-form-item label="解决状态">
          <el-select v-model="searchInfo.feedStatus" clearable placeholder="全部">
            <el-option v-for="item in this.$enumUtils.toValue('SolveStatus')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="反馈类型">
          <el-select v-model="searchInfo.feedType" clearable placeholder="全部">
            <el-option v-for="item in this.$enumUtils.toValue('ResaultStatus')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="反馈时间：">
          <el-date-picker v-model="searchInfo.gmtStartTime" type="daterange" range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" :clearable="false"></el-date-picker>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-select clearable v-model="searchInfo.feedProduct">
            <el-option v-for="item in this.$enumUtils.toValue('BusinessType')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <!--<el-form-item label="反馈来源">
          <el-select clearable v-model="searchInfo.feedSource" >
            <el-option v-for="item in this.$enumUtils.toValue('FeedSourceType')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item>
          <el-button @click="reset" type="primary">重置</el-button>
          <el-button @click="querySearchRemind" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--列表-->
    <block-header title="反馈列表"/>
    <div class="b-table">
      <el-table
          border
          :data="tablePlanRemindData" style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
          :highlight-current-row="true">
        <el-table-column align="center" prop="feedNo" label="编号"></el-table-column>
        <el-table-column  align="center" label="反馈内容">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top" width="400">
              <p> {{ scope.row.feedContent }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag type='info' size="large">{{ scope.row.feedContent | filterFun }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="finishContent" label="处理意见"></el-table-column>
        <el-table-column align="center" prop="clientName" label="客户姓名"></el-table-column>
        <el-table-column align="center" prop="clientCell" label="手机号"></el-table-column>
        <el-table-column align="center" prop="gmtCreated" label="反馈时间" :formatter="dateFormat"></el-table-column>
        <el-table-column align="center" prop="feedType" label="反馈类型"></el-table-column>
        <!--<el-table-column prop="feedProduct" label="产品名称" :formatter="productNameFormat" ></el-table-column>-->
        <el-table-column align="center" prop="feedSource" label="来源" :formatter="feedSourceFormat"></el-table-column>
        <el-table-column align="center" prop="feedStatus" label="解决状态"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.feedStatus =='NO' ">
              <el-button type="text" size="big" @click="deleteRaise(scope.row)">解决</el-button>
            </div>
            <div v-else>
              <el-button type="text" size="small" disabled>已解决</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="b-pagination">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page.sync="page.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as moment from "moment";

export default {
  name: "ByhPlanRemindList",
  data() {
    return {
      flag: false,
      ui:
          {},
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      activeName: '',
      searchInfo: {
        gmtStartTime: [],
        feedNo: '',
        //feedSource: '',
        clientName: '',
        clientCell: '',
        feedType: '',
        feedStatus: '',
        feedProduct: '',
      },
      tablePlanRemindData: [],
      record: '',
      allUser: [],
    }

  },

  mounted: function () {
    this.tablePlanRemindData = this.remindData();

  },
  filters: {

    filterFun: function (value) {
      if (value.length > 20) {
        value = value.substring(0, 10) + '...';
      }
      return value;
    }

  },


  methods: {

    formatter(row, column) {
      return row.address;
    },
    selected: function (gameName) {
      this.activeName = gameName
    },

    /** 加载数据 */
    remindData(params) {
      var listsData = [];
      this.$$post('/feed/feedPageList', this.buildParam()).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        listsData = res.data.result.records;
        this.tablePlanRemindData = listsData;
        this.page.total = res.data.result.total;

      }).catch(error => {
        this.$Message.error(error || '系统异常');
      });
    },

    handleSizeChange(row) {
      this.page.size = row
      this.page.current = 1;
      this.remindData();
    },

    // 分配后不刷新页面加载数据
    getMyMarket(msg) {
      if (msg) {
        this.tablePlanRemindData = this.remindData();
      }
    },

    //搜索查询
    querySearchRemind() {
      this.remindData();
    },


    //作废
    deleteRaise(record) {
      this.$prompt('请输入处理意见：', '处理意见', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\.*?/,
        inputErrorMessage: '内容不能为空'
      }).then(({value}) => {
        // 获取输入的意见  value
        this.$$post('/feed/updateFeedStatus', this.buildParamRaise(record, value)).then(res => {
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return
          }
          // 修改成功后再次加载数据
          this.$message({message: '操作成功', type: 'success'});
          this.tablePlanRemindData = this.remindData();

        }).catch(error => {
          this.$Message.error(error || '系统异常');
        });


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消处理'
        });
      });

    },

    //产品名称
    productNameFormat: function (row, column) {
      var status = row['feedProduct'];
      return this.$enumUtils.toMsg('BusinessType', status);
    },

    //反馈来源
    feedSourceFormat: function (row, column) {
      var status = row['feedSource'];
      return this.$enumUtils.toMsg('FeedSourceType', status);
    },

    //参数
    buildParam() {
      var return_hash = {
        size: this.page.size,
        current: this.page.current,
        sort: 'id desc',
      };

      if (this.searchInfo.feedNo != '') {
        return_hash['feedNo'] = this.searchInfo.feedNo
      }
      if (this.searchInfo.clientName != '') {
        return_hash['clientName'] = this.searchInfo.clientName
      }
      if (this.searchInfo.clientCell != '') {
        return_hash['clientCell'] = this.searchInfo.clientCell
      }
      if (this.searchInfo.feedType != '') {
        return_hash['feedType'] = this.searchInfo.feedType
      }
      if (this.searchInfo.feedStatus != '') {
        return_hash['feedStatus'] = this.searchInfo.feedStatus
      }
      if (this.searchInfo.feedProduct != '') {
        return_hash['feedProduct'] = this.searchInfo.feedProduct
      }
      return_hash['feedSource'] = 'APP'
      if (this.searchInfo.gmtStartTime != null && this.searchInfo.gmtStartTime.length > 0) {
        var end = new Date(this.searchInfo.gmtStartTime[1])

        end = end.setDate(end.getDate() + 1);
        end = new Date(end);

        return_hash['gmtStartTime'] = this.searchInfo.gmtStartTime[0];
        return_hash['gmtEndTime'] = end

      }

      return return_hash;
    },

    buildParamRaise(record, value) {
      var return_hash = {
        creater: localStorage.getItem("userName"),
      };
      if (record.feedNo != '') {
        return_hash['feedNo'] = record.feedNo
      }
      if (value != '') {
        return_hash['finishContent'] = value
      }
      return return_hash;
    },

    //显示日期
    dateFormat: function (row, column) {

      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    //重置
    reset() {
      this.searchInfo.feedNo = '';
      this.searchInfo.clientName = '';
      this.searchInfo.clientCell = '';
      this.searchInfo.feedType = '';
      this.searchInfo.feedStatus = '';
      this.searchInfo.gmtStartTime = '';
      this.searchInfo.productName = '';
      this.searchInfo.feedSource = '';
    },

    /** 处理分页操作*/
    handleCurrentChange() {
      this.tablePlanRemindData = this.remindData();
    },
    mergeDate(param1, param2) {
      if (param1 == "") {
        return ""
      }
      var array = new Array();
      array[0] = new Date(param1)
      array[1] = new Date(param2)
      return array;
    },
    getDate(param, num) {
      if (param && param[num] !== '') {
        return moment(param[num]).format("YYYY-MM-DD")
      }
      return ""
    },

  }

}
</script>

<style>

/* 用来设置当前页面element全局table 选中某行时的背景色*/
.system-list .el-table__body tr.current-row > td {
  background-color: #e0f144 !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.system-list .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #d7f144;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}

</style>