<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize" label-width="auto">
      <el-form-item label="姓名" prop="opinionUserName">
        <el-input v-model="queryParams.opinionUserName" maxlength="10" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="opinionUserPhone">
        <el-input maxlength="11" v-model="queryParams.opinionUserPhone" placeholder="请输入联系电话" clearable />
      </el-form-item>
      <el-form-item label="类型" prop="opinionType">
        <el-select v-model="queryParams.opinionType" placeholder="请选择">
          <el-option v-for="(v, i) in dict.type.user_opinion_type" :key="i" :label="v.label" :value="v.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="提交时间" prop="submitTime">
        <el-date-picker v-model="queryParams.submitTime" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click.stop="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click.stop="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <el-table :border="TableBorder" :size="ELTableSize" :data="dataList" v-loading="loading">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="{$index}">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" width="100">
        <template slot-scope="{row}">
          <dict-tag :options="dict.type.user_opinion_type" :value="row.opinionType" />
          <!-- {{ row.opinionType | TableItemEmpty }} -->
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.opinionUserPhone | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" width="100">
        <template slot-scope="{row}">
          {{ row.opinionUserName | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="问题描述" align="center">
        <template slot-scope="{row}">
          {{ row.opinionContent | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" width="150">
        <template slot-scope="{row}">
          {{ row.submitTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="回复状态" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.opinionStatus ? '已回复' : '待回复' }}
        </template>
      </el-table-column>
      <el-table-column label="回复时间" align="center" width="150">
        <template slot-scope="{row}">
          {{ row.operateTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="回复内容" align="center">
        <template slot-scope="{row}">
          {{ row.operateContent | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" :size="ELTableSize" @click="$refs.updateDrawerRef.openHandle(row)">查看</el-button>
          <el-button type="text" :size="ELTableSize" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <update-drawer ref="updateDrawerRef" @success="getList" />
  </div>
</template>

<script>
import getListApi from '@/mixins/getListApi.js';
import updateDrawer from './update-drawer.vue';
import { getOpinionList, deleteFeedbackApi } from '@/api/feedback.js';
export default {
  mixins: [getListApi],
  dicts: ['user_opinion_type'],
  components: { updateDrawer },
  data() {
    return {
      showSearch: true,
      listURL: getOpinionList,
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        opinionUserName: undefined,
        opinionUserPhone: undefined,
        opinionType: undefined,
        submitTime: undefined,
      },
      // 日期范围字段映射配置
      dateRangeMapping: {
        // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
        submitTime: { start: 'submitStartTime', end: 'submitEndTime' }
      },

    };
  },
 

  methods: {
    // 删除
    handleDelete(row) {
      this.$MessageBoxConfirm({
        text: '确定删除当前反馈吗？', confirmCallback: async (callback) => {
          try {
            await deleteFeedbackApi(row.opinionId);
            this.$successMsg('删除成功');
            this.getList();
          } catch (error) {
            // this.$errorMsg(error.message || '取消插队失败');
          } finally {
            callback && callback();
          }
        }
      })
    },


    // handleView(row) {
    //   this.showTitle = '查看用户反馈';
    //   this.activeId = row.opinionId;
    //   this.$refs.updateDrawerRef.open();
    // },

    // dataFormSubmit() { },

    // //新增
    // addInformation(row = {}) {
    //   this.$router.push({
    //     name: 'addInformation'
    //   });
    // },
    // // 打开详情弹窗
    // openDetails(type, item) {
    //   // this.$router.push({
    //   //     path: '/store-details',
    //   //     query: {
    //   //         id: item.id,
    //   //         user_id: item.user_id,
    //   //         title: item.name
    //   //     }
    //   // });
    // },
    // // 获取列表
    // getList(reset) {
    //   if (reset) this.queryParams.pageNum = 1;
    //   this.dataListLoading = true;
    //   getOpinionList(this.queryParams).then((res) => {
    //     if (res && res.code == 200) {
    //       this.dataList = res.rows;
    //       this.total = res.total;
    //     }
    //     this.dataListLoading = false;
    //   });
    // },

    // //删除
    // deleteInfo(row) {
    //   this.$confirm('是否确认删除？')
    //     .then((_) => {
    //       deleteOpinion(row.opinionId).then((res) => {
    //         if (res && res.code == 200) {
    //           this.getList();
    //           this.$modal.msgSuccess('删除成功');
    //         }
    //       });
    //     })
    //     .catch((_) => { });
    // },
    // // 每页数
    // sizeChangeHandle(val) {
    //   this.queryParams.pageSize = val;
    //   this.getList();
    // },
    // // 当前页
    // currentChangeHandle(val) {
    //   this.queryParams.pageNum = val;
    //   this.getList();
    // },

    // // 重置
    // reset() {
    //   this.queryParams = {
    //     pageSize: 10,
    //     pageNum: 1
    //   };
    //   this.getList();
    // }
  }
};
</script>

<style>
/* .container-box {
  padding: 20px;
}

.el-form--inline .el-form-item__content {
  width: auto !important;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
} */
</style>
