<script setup lang="ts">
import DealDialog from '../components/DealDialog.vue'
import { getSuggestionList } from '../api'
const appList = ref()
const isShowDialog = ref(false)
const id = ref('')
const status = ref('')
// const userList: any = ref([])
// 状态
//表单每行数据
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getSuggestionList,
      params: {
        // sso_id: {},
        name: '',
        created_time_start: '',
        created_time_end: ''
      }
      // beforeRequest(params: any) {
      //   if (params.sso_id) {
      //     params.sso_id = params.sso_id.id
      //   } else {
      //     params.sso_id = ''
      //   }
      //   return params
      // }
    },
    filters: [
      // { type: 'input', prop: 'sso_id', slots: 'user_name' },
      { type: 'input', prop: 'name', label: '用户姓名：', placeholder: '用户姓名' },
      {
        type: 'input',
        label: '投诉时间：',
        slots: 'created_time_start',
        prop: 'created_time_start'
      },
      { slots: 'created_time_end', prop: 'created_time_end' }
    ],
    columns: [
      { label: '序号', type: 'index', align: 'center', width: '100px' },
      { label: '问题描述', prop: 'title', align: 'center' },
      { label: '投诉人', prop: 'sso_id_name', align: 'center' },
      {
        label: '投诉时间',
        prop: 'created_time',
        align: 'center'
      },
      { label: '处理人', prop: 'operator_name', align: 'center' },
      { label: '处理时间', prop: 'updated_time', align: 'center' },
      { label: '处理状态', prop: 'status_name', align: 'center' },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
    ]
  }
})
const handleDeal = (row: any) => {
  id.value = row.id
  status.value = row.status
  isShowDialog.value = true
}
// 用户检索
// const handleGetUserList = (query: string) => {
//   console.log('query', query)
//   if (!query) return
//   getUserList({ q: query }).then((res: any) => {
//     userList.value = res.data
//   })
// }
const handleFresh = () => {
  appList.value.refetch()
}
</script>

<template>
  <AppCard title="投诉建议管理">
    <AppList v-bind="listOptions" ref="appList" border stripe>
      <!-- <template v-slot:user_name="{ params }">
        用户姓名：
        <el-select
          v-model="params.sso_id"
          filterable
          remote
          value-key="id"
          :reserve-keyword="false"
          :remote-method="handleGetUserList"
          placeholder="用户姓名"
          v-permission="'v1-backend-suggestion-search-user'"
        >
          <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item" />
        </el-select>
      </template> -->
      <template v-slot:created_time_start="{ params }">
        <el-date-picker
          v-model="params.created_time_start"
          type="date"
          placeholder="开始时间"
          v-permission="'v1-backend-suggestion-search-user'"
        >
        </el-date-picker>
        <p class="separator" v-permission="'v1-backend-suggestion-search-user'">&nbsp;&nbsp;&nbsp;&nbsp;-</p>
      </template>
      <template v-slot:created_time_end="{ params }">
        <el-date-picker
          v-model="params.created_time_end"
          type="date"
          placeholder="结束时间"
          v-permission="'v1-backend-suggestion-search-user'"
        >
        </el-date-picker>
      </template>
      <template #table-operate="{ row }">
        <el-space>
          <el-link
            type="primary"
            plain
            @click="handleDeal(row)"
            v-permission="'v1-backend-suggestion-update'"
            v-if="row.status === '1'"
            >处理</el-link
          >
          <el-link type="primary" plain @click="handleDeal(row)" v-permission="'v1-backend-suggestion-view'" v-else>
            查看</el-link
          >
        </el-space>
      </template>
    </AppList>
  </AppCard>
  <DealDialog
    v-if="isShowDialog === true"
    v-model:isShowDialog="isShowDialog"
    :id="id"
    :status="status"
    @updatePage="handleFresh"
  />
</template>
