<script setup lang="ts">
import type { MaterialProp } from '../types'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import AppList from '@/components/base/AppList.vue'
import { getMaterialList, updateMaterial, deleteMaterial } from '../api'
import {
  getNameByValue,
  materialMethodList,
  // materialUsageList, materialUsersList
} from '@/utils/dictionary'
import { useMapStore } from '@/stores/map'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

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

const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')

const router = useRouter()
const route = useRoute()
const appList = ref<InstanceType<typeof AppList> | null>(null)

// 资料类型
const materialType = ref('')

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getMaterialList,
      params: { name: '', id: '', status: '', way: '', type: route.query.type || '', updated_operator: '' },
      beforeRequest(params: any) {
        materialType.value = params.type
        return params
      },
    },
    filters: [
      {
        type: 'select',
        prop: 'type',
        placeholder: '请选择资料类型',
        options: materialTypeList,
      },
      {
        type: 'select',
        prop: 'status',
        placeholder: '请选择资料状态',
        options: [
          { label: '有效', value: '1' },
          { label: '失效', value: '0' },
        ],
      },
      {
        type: 'select',
        prop: 'way',
        placeholder: '请选择创作方式',
        options: materialMethodList,
      },
      { type: 'input', prop: 'name', placeholder: '请输入资料名称' },
      { type: 'input', prop: 'id', placeholder: '请输入资料ID' },

      { type: 'input', prop: 'updated_operator', placeholder: '更新人' },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      {
        label: '资料类型',
        prop: 'type_name',
        width: 100,
        computed: ({ row }: { row: MaterialProp }) => {
          return getNameByValue(row.type, materialTypeList)
        },
      },
      { label: '资料名称', prop: 'name' },
      { label: '资料ID', prop: 'id' },
      {
        label: '创作方式',
        prop: 'way',
        computed: ({ row }: { row: MaterialProp }) => {
          return getNameByValue(row.way, materialMethodList)
        },
      },
      // { label: '行业', prop: 'industry_name' },
      // {
      //   label: '使用场景',
      //   prop: 'scenario_type',
      //   computed: ({ row }: { row: MaterialProp }) => {
      //     return getNameByValue(row.scenario_type, materialUsageList)
      //   }
      // },
      // {
      //   label: '使用人员',
      //   prop: 'personnel_type',
      //   computed: ({ row }: { row: MaterialProp }) => {
      //     return getNameByValue(row.personnel_type, materialUsersList)
      //   }
      // },
      // { label: '投放渠道', prop: 'channel_detail.type_name' },
      {
        label: '状态',
        prop: 'status_name',
        width: 90,
        slots: 'table-status',
      },
      {
        label: '更新人',
        prop: 'updated_operator_name',
        computed: ({ row }: { row: MaterialProp }) => {
          return row.updated_operator.real_name || row.updated_operator.nickname || row.updated_operator.username
        },
      },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 240 },
    ],
  }
})

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

let dialogVisible = $ref(false)
// 编辑
const currentRow = ref<MaterialProp>()
const handleEdit = function (row: MaterialProp) {
  router.push({ path: 'material/update', query: { id: row.id } })
}

// 查看
const handleView = function (row: MaterialProp) {
  materialType.value = row.type
  currentRow.value = row
  dialogVisible = true
}

// 删除
async function handleRemove(row: MaterialProp) {
  await deleteMaterial({ id: row.id })
  ElMessage({ message: '删除成功', type: 'success' })
  handleRefresh()
}

// 修改状态
async function handleChangeStatus(row: MaterialProp) {
  const status = row.status === '1' ? '0' : '1'
  await updateMaterial({ id: row.id, status })
  ElMessage({ message: '更新成功', type: 'success' })
  return true
}
</script>

<template>
  <AppCard>
    <AppList border v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-space v-if="!userStore.status.material_status">
          <router-link :to="{ path: '/material/create', query: $route.query }">
            <el-button type="primary" :icon="Plus">营销内容创作</el-button>
          </router-link>
        </el-space>
      </template>
      <template #table-status="{ row }">
        <el-switch
          v-model="row.status"
          active-value="1"
          inactive-value="0"
          :before-change="() => handleChangeStatus(row)"></el-switch>
      </template>
      <template #table-x="{ row }">
        <el-button type="primary" plain @click="handleView(row)">查看</el-button>
        <el-button type="primary" plain @click="handleEdit(row)">编辑</el-button>
        <el-button type="primary" plain @click="handleRemove(row)">删除</el-button>
      </template>
    </AppList>
    <ViewDialog :data="currentRow" v-if="dialogVisible" v-model="dialogVisible"></ViewDialog>
  </AppCard>
</template>
