<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import LiveProductCategory from '@/components/LiveProductCategory.vue'
import { getTalkList, deleteTalk } from '../api'
import { getOperatorName } from '@/utils/utils'

const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))

const appList = ref(null)
// 刷新
const handleRefresh = () => {
  appList.value?.refetch()
}
const listParams = reactive({ name: '', live_commodity_type_id: '', live_commodity_title: '' })

const listLength = ref(0)
// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getTalkList,
      params: listParams,
      beforeRequest(params, isReset) {
        if (isReset) listParams.live_commodity_type_id = ''
        params.live_commodity_type_id = listParams.live_commodity_type_id
        return params
      },
      callback(data) {
        listLength.value = data.list.length
        return data
      },
    },
    filters: [
      { label: '直播主题品类', prop: 'live_commodity_type_id', slots: 'filter-category' },
      { label: '直播主题名称', prop: 'live_commodity_title', type: 'input' },
      { label: '话术名称', prop: 'name', type: 'input' },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '直播话术名称', prop: 'name' },
      { label: '直播主题标题', prop: 'title' },
      { label: '所属直播主题品类', prop: 'live_commodity_type_full_name' },
      { label: '创建人', prop: 'created_operator', computed: ({ row }) => getOperatorName(row.created_operator) },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 200 },
    ],
  }
})

const action = ref(null)
const formVisible = ref(false)
const currentRow = ref(null)

// 新建
const handleAdd = () => {
  action.value = 'add'
  currentRow.value = null
  formVisible.value = true
}
// 编辑
const handleUpdate = (row) => {
  action.value = 'update'
  currentRow.value = row
  formVisible.value = true
}
// 查看
const handleView = (row) => {
  action.value = 'view'
  currentRow.value = row
  formVisible.value = true
}
// 删除
const handleRemove = async (row) => {
  await ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示')
  await deleteTalk({ id: row.id })
  appList.value?.refetch()
  ElMessage.success('删除成功')
}
</script>

<template>
  <AppCard title="直播话术管理">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button type="primary" @click="handleAdd" v-if="!listLength">添加话术</el-button>
      </template>
      <template #filter-category>
        <LiveProductCategory v-model="listParams.live_commodity_type_id" @change="handleRefresh"></LiveProductCategory>
      </template>
      <template #table-x="{ row }">
        <el-button text type="primary" @click="handleView(row)">查看</el-button>
        <el-button text type="primary" @click="handleUpdate(row)">编辑</el-button>
        <el-button text type="primary" @click="handleRemove(row)">删除</el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 新建/修改 -->
  <FormDialog v-model="formVisible" :action="action" :data="currentRow" @update="handleRefresh" v-if="formVisible" />
</template>
