<script setup lang="ts">
import type { TripTemplate } from '../types'
import { Plus } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import { getTripTemplateList } from '../api'
import { useMapStore } from '@/stores/map'
import { getNameByValue, tripTemplateTypeList } from '@/utils/dictionary'

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

const statusList = useMapStore().getMapValuesByKey('system_status')

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getTripTemplateList,
      params: { name: '', status: '', type: '' }
    },
    filters: [
      { type: 'input', prop: 'name', placeholder: '请输入旅程模板名称' },
      { type: 'select', prop: 'type', placeholder: '请选择旅程类型', options: tripTemplateTypeList },
      { type: 'select', prop: 'status', placeholder: '请选择旅程模板状态', options: statusList }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '模板名称', prop: 'name' },
      { label: '所属实验', prop: 'experiment.name' },
      {
        label: '旅程类型',
        prop: 'type',
        computed({ row }: { row: TripTemplate }) {
          return getNameByValue(row.type, tripTemplateTypeList)
        }
      },
      {
        label: '用户旅程分值',
        prop: 'score',
        computed({ row }: { row: TripTemplate }) {
          return parseInt(row.score)
        }
      },
      {
        label: '状态',
        prop: 'status',
        computed({ row }: { row: TripTemplate }) {
          const color = row.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'
          return `<span style="color: ${color}">${getNameByValue(row.status, statusList)}</span>`
        }
      },
      { label: '更新人', prop: 'updated_operator.real_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 360 }
    ]
  }
})

// 刷新
function handleRefresh() {
  appList?.refetch()
}

let formVisible = $ref(false)
let currentRow = $ref<TripTemplate>()

// 新建
function handleAdd() {
  currentRow = undefined
  formVisible = true
}
// 修改
function handleUpdate(row: TripTemplate) {
  currentRow = row
  formVisible = true
}
// 查看
let viewVisible = $ref(false)
function handleView(row: TripTemplate) {
  currentRow = row
  viewVisible = true
}

// 配置
let configVisible = $ref(false)
const router = useRouter()
function handleConfig(row: TripTemplate) {
  // 自由旅程
  if (row.type === '2') {
    router.push(`/trip/template/${row.id}`)
  } else {
    currentRow = row
    configVisible = true
  }
}

let ruleVisible = $ref(false)
function handleRule(row: TripTemplate) {
  currentRow = row
  ruleVisible = true
}
</script>

<template>
  <AppCard>
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-space>
          <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        </el-space>
      </template>

      <template #table-x="{ row }: { row: TripTemplate }">
        <el-button type="primary" plain @click="handleConfig(row)">配置</el-button>
        <el-button type="primary" plain @click="handleView(row)">查看</el-button>
        <el-button type="primary" plain @click="handleUpdate(row)">编辑</el-button>
        <el-button type="primary" plain @click="handleRule(row)">旅程数据规则</el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 新建/修改 -->
  <FormDialog v-model="formVisible" :data="currentRow" @update="handleRefresh" v-if="formVisible"></FormDialog>
  <!-- 查看 -->
  <ViewDialog v-model="viewVisible" :data="currentRow" v-if="viewVisible && currentRow"></ViewDialog>
  <!-- 配置 -->
  <BindConnection v-model="configVisible" :data="currentRow" v-if="configVisible && currentRow"></BindConnection>
  <!-- 旅程数据规则 -->
  <GenerateRule v-model="ruleVisible" :data="currentRow" v-if="ruleVisible && currentRow"></GenerateRule>
</template>
