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

const store = useMapStore()

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

const appList = $ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getMemberMeta,
      params: { name: '', status: '', type: '' },
    },
    filters: [
      { type: 'input', prop: 'name', placeholder: '请输入用户属性名称' },
      {
        type: 'select',
        prop: 'type',
        placeholder: '请选择属性字段类型',
        options: store.getMapValuesByKey('experiment_attribute_type'),
      },
      {
        type: 'select',
        prop: 'status',
        placeholder: '请选择生效状态',
        options: [
          { label: '有效', value: '1' },
          { label: '失效', value: '0' },
        ],
      },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '属性ID', prop: 'id' },
      { label: '属性名称', prop: 'name' },
      {
        label: '属性类型',
        prop: 'category',
        computed({ row }: any) {
          return getNameByValue(row.category, store.getMapValuesByKey('experiment_meta_members_category'))
        },
      },
      { label: '属性英文名称', prop: 'english_name' },
      { label: '属性字段类型', prop: 'type_name' },
      { label: '属性字段格式', prop: 'format' },
      {
        label: '状态',
        prop: 'status_name',
        computed: (row: any) => {
          return row.row.status === '0'
            ? `<span style="color: rgb(170, 2, 49)">${row.row.status_name}</span>`
            : `<span style="color: #00ac27">${row.row.status_name}</span>`
        },
      },
      { label: '更新人', prop: 'updated_operator_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 240 },
    ],
  }
})

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

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

// 新建
function handleAdd() {
  currentRow = undefined
  formVisible = true
}

// 修改
function handleUpdate(row: UserProp) {
  currentRow = row
  formVisible = true
}

let viewVisible = $ref(false)
// 查看
function handleView(row: UserProp) {
  currentRow = row
  viewVisible = true
}

// 删除
function handleRemove(row: UserProp) {
  ElMessageBox.confirm('确定要删除该属性吗？', '提示').then(() => {
    deleteMemberMeta({ id: row.id }).then(() => {
      ElMessage({ message: '删除成功', type: 'success' })
      handleRefresh()
    })
  })
}
</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 }">
        <el-button type="primary" plain @click="handleView(row)">查看</el-button>
        <el-button type="primary" plain @click="handleUpdate(row)" v-if="row.id !== '10000'">编辑</el-button>
        <el-button type="primary" plain @click="handleRemove(row)" v-if="row.id !== '10000'">删除</el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 新建/修改 -->
  <FormDialog v-model="formVisible" :data="currentRow" @update="handleRefresh" v-if="formVisible" />
  <!-- 查看 -->
  <ViewDialog v-model="viewVisible" :data="currentRow" v-if="viewVisible && currentRow" />
</template>
