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

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

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

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

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getAttrList,
      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: 'name', type: 'input', placeholder: '请输入商品属性名称' },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '商品属性名称', prop: 'name' },
      { label: '所属商品品类', prop: 'live_commodity_type_full_name' },
      {
        label: '重要性',
        prop: 'is_importance',
        computed({ row }) {
          return getNameByValue(row.is_importance, importType)
        },
      },
      {
        label: '必要性',
        prop: 'is_essential',
        computed({ row }) {
          return getNameByValue(row.is_essential, requiredType)
        },
      },
      {
        label: '状态',
        prop: 'status',
        computed({ row }) {
          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_time' },
      { label: '操作', slots: 'table-x', width: 160 },
    ],
  }
})
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 deleteAttr({ id: row.id })
  ElMessage.success('删除成功')
  appList.value?.refetch()
}
</script>

<template>
  <AppCard title="商品属性管理">
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-button type="primary" @click="handleAdd">新增商品属性</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>
