<template>
  <a-drawer
    :maskClosable="false"
    :visible="vdata.visible"
    :title=" vdata.isAdd ? '新增产品分类' : '修改产品分类' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata" layout="vertical" :rules="vdata.rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="产品分类名称" name="typeName">
            <a-input
              v-model:value="vdata.typeName"
              placeholder="请输入产品分类名称"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button style="margin-right:8px" @click="onClose">
        <CloseOutlined />取消
      </a-button>
      <a-button type="primary" style="margin-right:8px" :loading="vdata.btnLoading" @click="handleOkFunc">
        <CheckOutlined />保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts" >
import { API_URL_PRODUCT_TYPE_Add,API_URL_PRODUCT_TYPE_SAVE,API_URL_PRODUCT_TYPE_ID, req } from '@/api/manage'
import { ref, reactive, getCurrentInstance, onMounted,onBeforeUnmount, computed, nextTick, defineProps, defineExpose } from 'vue'

import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import { IToolbarConfig } from '@wangeditor/editor'

import allList from '../../../components/JeepayUIComponents/JeepayBankCodeSelect/bankcode.json'



// 导入全局函数
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// 组件
const infoFormModel = ref()


// 定义函数
const props = defineProps({
  callbackFunc: { type: Function,default:null },
    value: { type: Array, default: null },
    readonly: { type: Boolean, default: false },
})


const vdata = reactive({
      defaultPrivacyHtmlFlag: false,
      defaultAgreementHtmlFlag: false,
      defaultPrivacyHtml: '',
      btnLoading: false,
      isAdd: true, // 新增 or 修改页面标志
      saveObject: {
        typeName:""
      }, // 数据对象
      typeName:"",
      recordId: null, // 更新对象ID
      visible: false, // 是否显示弹层/抽屉
      rules: {
        typeName: [ { required: true, message: '请输入产品分类名称', trigger: 'blur' } ],
      }

})

      
    function show (recordIdParam) { // 弹层打开事件
      vdata.isAdd = !recordIdParam
      // vdata.saveObject = { 'state': 1 } // 数据清空

      if (infoFormModel.value !== undefined) {
        infoFormModel.value.resetFields()
      }
      if (!vdata.isAdd) { // 修改信息 延迟展示弹层
        vdata.recordId = recordIdParam
        req.list(API_URL_PRODUCT_TYPE_ID, {typeId:vdata.recordId}).then(res => {
          vdata.typeName = res.typeName
          })
        vdata.visible = true
      } else {
        vdata.visible = true // 立马展示弹层信息
      }
    }

    function handleOkFunc () { // 点击【确认】按钮事件
      
      console.log(vdata.typeName,'vdatavdata')
        infoFormModel.value.validate().then(valid => {
            vdata.btnLoading = true
            // 请求接口
            if (vdata.isAdd) {
              req.add(API_URL_PRODUCT_TYPE_Add, {
                typeName:vdata.typeName,
              }).then(res => {
                $infoBox.message.success('新增成功')
                vdata.visible = false
                props.callbackFunc() // 刷新列表
                vdata.btnLoading = false
              }).catch(res => {
                vdata.btnLoading = false
              })
            } else {
              req.updateById(API_URL_PRODUCT_TYPE_SAVE, vdata.recordId, {typeName:vdata.typeName}).then(res => {
                $infoBox.message.success('修改成功')
                vdata.visible = false
                props.callbackFunc() // 刷新列表
                vdata.btnLoading = false
              }).catch(res => {
                vdata.btnLoading = false
              })
            }
        })
    }
    function onClose () {
      vdata.visible = false
    }

     // 内容
  function confirmTreatyConfig (saveType) {
    const editor:any = getEditor(editorId) 
  }

  const editorId = 'wangeEditor-1' // 隐私政策

  // 隐藏编辑器菜单中，一些菜单项
  const toolbarConfig: Partial<IToolbarConfig> = {
    // 隐藏 全屏放大  上传视频  等
    excludeKeys: ['fullScreen', 'uploadVideo', 'insertVideo', 'deleteVideo','uploadImage']
  }
   // 编辑器配置
   const editorConfig = {
      placeholder: '请输入内容...',
      MENU_CONF: { /* 菜单配置，下文解释 */ }
  }

    // 组件销毁时，及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = getEditor(editorId)  

      if (editor == null) return

      // 销毁，并移除 editor
      editor.destroy() 
      removeEditor(editorId) 
 

  })

defineExpose({ show })

</script>

<style lang="less" scoped>
.flex {
  display:flex;
  margin-bottom: 8px;
  i {
    margin-left: 5px;
  }
}
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
</style>
<!-- 编辑器样式 -->
<style src="@wangeditor/editor/dist/css/style.css"></style>
