<template>
  <el-dialog v-model="visible" title="意见反馈配置" width="700px">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="意见类型配置" name="type">
        <el-button type="primary" size="small" class="mb-10" @click="handleAddType">新增类型</el-button>
        <el-table :data="typeList" border stripe size="small">
          <el-table-column prop="code" label="编码" width="120" />
          <el-table-column prop="name" label="类型名称" width="150" />
          <el-table-column prop="sla" label="响应时限(小时)" width="120" />
          <el-table-column label="操作" width="120">
            <template #default="{ $index }">
              <el-button type="text" class="text-danger" @click="typeList.splice($index, 1)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="回复权限配置" name="auth">
        <el-button type="primary" size="small" class="mb-10" @click="handleAddUser">添加人员</el-button>
        <el-table :data="authList" border stripe size="small">
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="role" label="角色" width="120" />
          <el-table-column prop="scope" label="负责类型" min-width="200">
            <template #default="{ row }">
              <el-tag v-for="tag in row.scope" :key="tag" class="mr-5" size="small">{{ getTypeLabel(tag) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ $index }">
              <el-button type="text" class="text-danger" @click="authList.splice($index, 1)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" @click="handleSave">保存配置</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const activeTab = ref('type')

const typeList = ref([
  { code: 'complaint', name: '投诉', sla: 24 },
  { code: 'suggestion', name: '建议', sla: 48 },
  { code: 'consult', name: '咨询', sla: 12 },
])

const authList = ref([
  { name: '张主管', role: '宿管主管', scope: ['complaint', 'suggestion'] },
  { name: '李客服', role: '前台客服', scope: ['consult'] },
])

const getTypeLabel = (code) => {
  const item = typeList.value.find(i => i.code === code)
  return item ? item.name : code
}

const open = () => {
  visible.value = true
}

const handleAddType = () => {
  typeList.value.push({ code: 'new_type', name: '新类型', sla: 24 })
}

const handleAddUser = () => {
  authList.value.push({ name: '新用户', role: '客服', scope: ['consult'] })
}

const handleSave = () => {
  ElMessage.success('配置已保存')
  visible.value = false
}

defineExpose({
  open
})
</script>

<style scoped>
.mb-10 { margin-bottom: 10px; }
.mr-5 { margin-right: 5px; }
.text-danger { color: var(--el-color-danger); }
</style>
