<template>
  <div class="user-list">
    <!-- 头部 -->
    <div class="head">
      <div>订单投诉</div>
    </div>
    <!-- 主体 -->
    <div class="app-container calendar-list-container">
      <!-- 数据列表 -->
      <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="用户ID" width="120">
          <template slot-scope="scope">
            {{scope.row.userId}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" prop="name"></el-table-column>
        <el-table-column align="center" label="电话" prop="phone"></el-table-column>
        <el-table-column align="center" label="订单编号" prop="orderNo"></el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            {{scope.row.crtTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="内容">
          <template slot-scope="scope">
            {{ scope.row.content}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="回复内容">
          <template slot-scope="scope">
            {{ scope.row.responseInfo}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.responseInfo"
              size="small"
              class="el-button el-button--text el-button--small"
              @click="handleDeal(scope.row)"
            >回复</el-button>
          </template>
        </el-table-column>
        <!--        <el-table-column align="center" label="状态">-->
        <!--          <template slot-scope="scope">-->
        <!--            &lt;!&ndash; 根据状态获取对应中文 &ndash;&gt;-->
        <!--            {{ getStatus(scope.row.status) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <!--  回复  -->
    <deal-dialog v-if="dealVisible" :one-row="oneRow" v-on:dealEvent="dealEvent"></deal-dialog>
  </div>
</template>
<script type="javascript">
  import dealDialog from "./dealDialog";
  import { feedbackInfoList } from 'api/userManagement/index'
  import {timestamp2Date} from '@/utils/dateUtils';
  export default {
    name: 'userManagement',
    components: {
      dealDialog
    },
    computed:{
      getStatus(status) {
        return (status) => {
          let a = ""
          switch(status) {
            case 0: a = '启用'; break;
            case 1: a = '禁用'; break;
            default: a = '未知';break
          }
          return a
        }
      },
    },
    data() {
      return {
        times: [],
        listLoading: false,
        list: [], // 用户列表
        total: 0, // 总条数
        listQuery: {
          page: 1,
          limit: 20,
          type: 3 //1、联系客服，2、意见反馈，3、订单反馈
        },
        oneRow: {}, // 当前操作项
        dealVisible: false, // 回复弹窗
        invoiceDialogVisible: false, // 查看发票弹窗
        addressDialogVisible: false // 查看地址弹窗
      }
    },
    created() {
      this.getList()
    },
    methods:{
      /**
       * 搜索
       */
      handleSearch(){
        this.listQuery.page = 1
        this.getList() // 获取用户列表
      },
      /**
       * 回复
       */
      handleDeal(row){
        this.oneRow = row
        this.dealVisible = true
      },
      /**
       * 回复-返回
       */
      dealEvent(e){
        this.dealVisible = false
        if(e){
          this.getList()
        }
      },
      /**
       * 查看发票-返回界面
       */
      invoiceEvent(){
        this.invoiceDialogVisible = false
      },
      /**
       * 查看地址-返回界面
       */
      addressEvent(){
        this.addressDialogVisible = false
      },
      /**
       * 启用、禁用
       */
      changeStatus(row){
        this.$confirm("是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          // 0、启用，1、禁用
          updateStatus({id: row.userId, status: row.status == 1?0:1}).then((response) => {
            if(response.status == 200){
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
                duration: 2000
              });
              this.getList()
            } else {
              this.$notify({
                title: '失败',
                message: response.message,
                type: 'error',
                duration: 2000
              })
            }
          });
        }).catch(()=>{})
      },
      /**
       * 查看发票
       */
      handleInvoice(){
        this.invoiceDialogVisible = true
      },
      /**
       * 查看地址
       */
      handleAddress(){
        this.addressDialogVisible = true
      },
      /**
       * 清除搜索
       */
      handleCleanSearch(){
        this.listQuery = {
          page: 1,
          limit: 20,
          mobile: undefined, // 手机号
          realName: undefined, // 真实姓名
          userId: undefined, // 用户id
          status: undefined, // 0：启用  1：禁用
          registrationTimeBegin: undefined, // 开始时间
          registrationTimeEnd: undefined // 结束时间
        }
        this.times = []
        this.getList() // 获取用户列表
      },
      /**
       * 获取用户列表
       */
      getList(){
        this.listLoading = true
        feedbackInfoList(this.listQuery).then(response => {
          if(response.status == 200){
            response.data.data.map(function(item){
              item.crtTimeStr = timestamp2Date(item.createTime);
            })
            this.list = response.data.data;
            this.total = response.data.totalCount;
            this.listLoading = false;
          } else {
            this.listLoading = false
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  }
</script>
<style lang="scss">
  .user-list {
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 20px;
      width: 100%;
      border-bottom: 1px solid #e6e6e6;
      height: 57px;
    }
  }
</style>
