<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import LiveProductCategory from '@/components/LiveProductCategory.vue'
import { getTestList, deleteTest } from '../api'
import { getNameByValue } from '@/utils/dictionary'
import { useMapStore } from '@/stores/map'
import { getOperatorName } from '@/utils/utils'

const liveUploadWay = useMapStore().getMapValuesByKey('live_upload_way')

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

const appList = ref(null)
// 刷新
const handleRefresh = () => {
  appList.value?.refetch()
}

const listParams = reactive({ live_commodity_title: '', live_commodity_type_id: '' })

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getTestList,
      params: listParams,
      beforeRequest(params, isReset) {
        if (isReset) listParams.live_commodity_type_id = ''
        params.live_commodity_type_id = listParams.live_commodity_type_id
        return params
      },
    },
    filters: [
      { label: '直播主题品类', prop: 'live_commodity_type_id', slots: 'filter-category' },
      { label: '直播主题标题', prop: 'live_commodity_title', type: 'input' },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '直播ID', prop: 'id' },
      { label: '直播主题标题', prop: 'live_commodity_title' },
      { label: '直播话术', prop: 'live_commodity_speeches_name' },
      { label: '所属直播主题品类', prop: 'live_commodity_type_full_name' },
      {
        label: '上传方式',
        prop: 'upload_way',
        computed({ row }) {
          return getNameByValue(row.upload_way, liveUploadWay)
        },
      },
      { label: '创建人', prop: 'created_operator', computed: ({ row }) => getOperatorName(row.created_operator) },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 200 },
    ],
  }
})

const formVisible = ref(false)

const recordVisible = ref(false)
const currentRow = ref(null)
const handelView = (row) => {
  recordVisible.value = true
  currentRow.value = row
}
// 删除
const handleRemove = async (row) => {
  await ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示')
  await deleteTest({ id: row.id })
  ElMessage.success('删除成功')
  handleRefresh()
}
</script>

<template>
  <AppCard title="我的直播">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button type="primary" @click="formVisible = true">添加直播</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">
          <router-link :to="{ path: 'test/demo', query: { id: row.id } }" v-if="row.practice_count == 0"
            >开始直播</router-link
          >
        </el-button>
        <el-button text type="primary" @click="handelView(row)">查看</el-button>
        <el-button text type="primary" @click="handleRemove(row)">删除</el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 新建/修改 -->
  <FormDialog v-model="formVisible" @update="handleRefresh" v-if="formVisible" />
  <!-- 查看 -->
  <RecordDialog v-model="recordVisible" :data="currentRow" v-if="recordVisible"></RecordDialog>
</template>
