<template>
  <fs-page class="fs-page-custom">
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <template #actionbar-right>
        <SelectBotton btn-title="新建模板" :options="TemplateType" @click="createTmpl"></SelectBotton>
      </template>
    </fs-crud>
  </fs-page>

  <el-drawer v-model="showDrawer" :title="mode === 'add' ? '新建模板' : '编辑模板'" size="70%" :destroy-on-close="true" :close-on-click-modal="false">
    <div style="padding: 0 15px">
      <component
        :is="dyComponents[formData.rule.type]"
        :mode="mode"
        :data="formData"
        @refresh="refreshTable"
        :submitFormData="submitFormData"></component>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref, watch } from 'vue'
import { FsPage, useFs } from '@fast-crud/fast-crud'
import { createCrudOptions } from './crud'
import * as api from './api'
import { TemplateType } from '../utils/enum'
import SelectBotton from '/@/components/select-button/index.vue'
import TimerBidTmpl from '/@/views/components/auto/auto-templates/timer-bid.vue'
import TimerBudgetTmpl from '/@/views/components/auto/auto-templates/timer-budget.vue'
import SwitchCampaignTmpl from '/@/views/components/auto/auto-templates/switch-campaign.vue'
import TargetRuleTmpl from '/@/views/components/auto/auto-templates/target-rule.vue'
import SearchTermTmpl from '/@/views/components/auto/auto-templates/search-term.vue'
import NegKeywordTmpl from '/@/views/components/auto/auto-templates/neg-keyword.vue'

const dyComponents = {
  1: TimerBidTmpl,
  2: TimerBudgetTmpl,
  3: SwitchCampaignTmpl,
  4: TargetRuleTmpl,
  5: SearchTermTmpl,
  6: NegKeywordTmpl
}
const mode = ref('')
const showDrawer = ref(false)

const formData: Ref<AutoTemplate> = ref({
  name: '',
  rule: {
    type: 0,
    campaignType: '',
    campaignAd: [],
    action: {},
    activeModel: '',
    setTime: '',
    weekdays: [],
    conditions: [],
  },
})

const createTmpl = (val: number) => {
  mode.value = 'add'

  delete formData.value.id
  formData.value.name = ''
  formData.value.rule = {
    type: val,
    campaignType: '',
    campaignAd: [],
    action: {},
    activeModel: '',
    setTime: '',
    weekdays: [],
    conditions: [],
  }
  console.log(formData.value)
  showDrawer.value = true
}
const editTmpl = (row: any) => {
  mode.value = 'edit'
  // console.log(50, row)
  formData.value.id = row.id
  formData.value.name = row.name
  formData.value.rule = row.rule

  // formData.value.rule.id = row.rule.id
  // formData.value.rule.type = row.rule.type
  // formData.value.rule.campaignType = row.rule.campaignType
  // formData.value.rule.campaignAd = row.rule.campaignAd
  // formData.value.rule.action = row.rule.action
  // formData.value.rule.activeModel = row.rule.activeModel
  // formData.value.rule.setTime = row.rule.setTime
  // formData.value.rule.weekdays = row.rule.weekdays
  // formData.value.rule.conditions = row.rule.conditions

  showDrawer.value = true
}

const submitFormData = async () => {
  if (mode.value === 'add') {
    await api.AddObj(formData.value)
  } else if (mode.value === 'edit') {
    await api.UpdateObj(formData.value)
  }
}

const refreshTable = () => {
  showDrawer.value = false
  crudExpose.doRefresh()
}
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { editTmpl } })
onMounted(async () => {
  crudExpose.doRefresh()
})
</script>

<style scoped></style>
