<script lang="ts">
// 声明额外的选项
export default {
  name: "Add"
};
</script>
<script setup lang="ts">
import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
// 接口列表实例
let UrlList = reactive(null)
// 获取当前板块接口列表
onMounted(async () => {
  UrlList = await getGroupUrl(["kxsConfigServer"]);

})
// 组件传参对象
const props = defineProps<{
  submit: Function;
  addVisible: {
    type: Boolean;
    default: false;
  };
  width: {
    type: Number;
    default: 50;
  };
}>();
// 表单数据
let UpdateForm = ref({
  title: "", //标题
  selectIcon: "", //选中图标
  normalIcon: "", //未选中图标
  selectTextColor: "", //选中文字颜色
  normalTextColor: "", //未选中文字颜色
  pageName: "", //关联页面文件
  noPageHint: "", //空页面提示信息
  backgroudColor: "", //背景色
  style: "", //按钮样式
  scrollerAnimationImages: "", //滚动图片
  pagPath: "", //PAG文件
  showTitle: "", //是否显示标题
  pagLocalPath: "", //pag文件路径
  pagDefaultIcon: "", //pag默认图标
  iconSize: "", //图标尺寸
  statusBarColor: "", //状态栏底色
  kind: "", //分类

});
// 表单实例
const ruleFormRef = ref()

// 传参选项数据
// 按钮样式选项数据
const styleOptionList = [
]
// 分类选项数据
const kindOptionList = [
  { label: '创客版', id: 'creater' }
]

// 选项卡参数(默认值为列表某项的id)
const activeId = ref('1')
// 提交函数
const submit = async (formEl) => {
  // 表单校验拦截
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      //表单校验成功回调
      console.log('submit!')


      // 需动态生成接口
      const { status, msg }: any = await http.Request({
        method: UrlList.kxsConfigServer.appBottomNavsadd.method,
        url: UrlList.kxsConfigServer.appBottomNavsadd.url,
        params: UpdateForm.value
      });
      if (status === 1) {
        //业务成功回调
        ElMessage({
          message: "新增成功",
          type: "success"
        });
        UpdateForm.value = {
          title: "", //标题
          selectIcon: "", //选中图标
          normalIcon: "", //未选中图标
          selectTextColor: "", //选中文字颜色
          normalTextColor: "", //未选中文字颜色
          pageName: "", //关联页面文件
          noPageHint: "", //空页面提示信息
          backgroudColor: "", //背景色
          style: "", //按钮样式
          scrollerAnimationImages: "", //滚动图片
          pagPath: "", //PAG文件
          showTitle: "", //是否显示标题
          pagLocalPath: "", //pag文件路径
          pagDefaultIcon: "", //pag默认图标
          iconSize: "", //图标尺寸
          statusBarColor: "", //状态栏底色
          kind: "", //分类

        };
        // 关闭新增弹窗;
        closeVisible()
      } else {
        //业务失败回调
        ElMessageBox.alert(msg, "提示", {
          confirmButtonText: "关闭",
          type: "warning"
        });
      }
    } else {
      //表单校验失败回调
      ElMessage({
        message: "请输入完整信息",
        type: "error"
      });
    }
  })
};



// 上传选中图标回调
const select_iconCallBack = (url) => {
  ElMessage({
    message: `选中图标上传成功:${url}`,
    type: "success"
  });
  UpdateForm.value.select_icon = url;
}
// 上传未选中图标回调
const normal_iconCallBack = (url) => {
  ElMessage({
    message: `未选中图标上传成功:${url}`,
    type: "success"
  });
  UpdateForm.value.normal_icon = url;
}
// 上传PAG文件回调
const pag_pathCallBack = (url) => {
  ElMessage({
    message: `PAG文件上传成功:${url}`,
    type: "success"
  });
  UpdateForm.value.pag_path = url;
}
// 上传pag文件路径回调
const pag_local_pathCallBack = (url) => {
  ElMessage({
    message: `pag文件路径上传成功:${url}`,
    type: "success"
  });
  UpdateForm.value.pag_local_path = url;
}
// 上传pag默认图标回调
const pag_default_iconCallBack = (url) => {
  ElMessage({
    message: `pag默认图标上传成功:${url}`,
    type: "success"
  });
  UpdateForm.value.pag_default_icon = url;
}

// 表单校验规则
const rules = reactive({
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ],
  kind: [
    { required: true, message: '请输入分类', trigger: 'blur' },
  ],

})
// 关闭弹窗回调函数
const closeFn: any = inject("closeAddVisible");
const closeVisible = () => {
  // 清空表单项;
  UpdateForm.value = {
    title: "", //标题
    selectIcon: "", //选中图标
    normalIcon: "", //未选中图标
    selectTextColor: "", //选中文字颜色
    normalTextColor: "", //未选中文字颜色
    pageName: "", //关联页面文件
    noPageHint: "", //空页面提示信息
    backgroudColor: "", //背景色
    style: "", //按钮样式
    scrollerAnimationImages: "", //滚动图片
    pagPath: "", //PAG文件
    showTitle: "", //是否显示标题
    pagLocalPath: "", //pag文件路径
    pagDefaultIcon: "", //pag默认图标
    iconSize: "", //图标尺寸
    statusBarColor: "", //状态栏底色
    kind: "", //分类

  };
  closeFn();
};

// 弹窗是否全屏
const isFullscreen = ref(false)
</script>

<template lang="pug">
.main
  el-dialog(v-model='props.addVisible' width="50%" :fullscreen="isFullscreen" title="新增" draggable @close="closeVisible")
    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")
      el-tab-pane(label="基本资料" name="1")
        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
          el-form-item(label='标题' prop="title")
            el-input(v-model='UpdateForm.title' autocomplete='off'
              placeholder="请输入标题")
          el-form-item(label='选中图标' prop="selectIcon")
            UploadImg(:cropper="true" :callBack="selectIconCallBack")
          el-form-item(label='未选中图标' prop="normalIcon")
            UploadImg(:cropper="true" :callBack="normalIconCallBack")
          el-form-item(label='选中文字颜色' prop="selectTextColor")
            el-input(v-model='UpdateForm.selectTextColor' autocomplete='off'
              placeholder="请输入选中文字颜色")
          el-form-item(label='未选中文字颜色' prop="normalTextColor")
            el-input(v-model='UpdateForm.normalTextColor' autocomplete='off'
              placeholder="请输入未选中文字颜色")
          el-form-item(label='关联页面文件' prop="pageName")
            el-input(v-model='UpdateForm.pageName' autocomplete='off'
              placeholder="请输入关联页面文件")
          el-form-item(label='空页面提示信息' prop="noPageHint")
            el-input(v-model='UpdateForm.noPageHint' autocomplete='off'
              placeholder="请输入空页面提示信息")
          el-form-item(label='背景色' prop="backgroudColor")
            el-input(v-model='UpdateForm.backgroudColor' autocomplete='off'
              placeholder="请输入背景色")
          el-form-item(label="按钮样式", prop="style")
            el-select(
              v-model="UpdateForm.style",
              placeholder="请选择按钮样式",
              clearable,
            )
              el-option(:label="item.label", :value="item.id" v-for="(item,index) in styleOptionList")
          el-form-item(label='PAG文件' prop="pagPath")
            el-input(v-model='UpdateForm.pagPath' autocomplete='off' class="!w-[230px]" disabled)
            Uploadfile(btntext="上传文件" :FilePath="pagPathCallBack")
      el-tab-pane(label="基本信息" name="2")
        el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
          el-form-item(label='是否显示标题' prop="showTitle")
            el-switch(v-model="UpdateForm.showTitle")
          el-form-item(label='pag文件路径' prop="pagLocalPath")
            el-input(v-model='UpdateForm.pagLocalPath' autocomplete='off' class="!w-[230px]" disabled)
            Uploadfile(btntext="上传文件" :FilePath="pagLocalPathCallBack")
          el-form-item(label='pag默认图标' prop="pagDefaultIcon")
            UploadImg(:cropper="true" :callBack="pagDefaultIconCallBack")
          el-form-item(label='图标尺寸' prop="iconSize")
            el-input-number(v-model='UpdateForm.iconSize' :min="1" :max="1000"
              placeholder="请输入图标尺寸")
          el-form-item(label='状态栏底色' prop="statusBarColor")
            el-input(v-model='UpdateForm.statusBarColor' autocomplete='off'
              placeholder="请输入状态栏底色")
          el-form-item(label="分类", prop="kind")
            el-select(
              v-model="UpdateForm.kind",
              placeholder="请选择分类",
              clearable,
            )
              el-option(:label="item.label", :value="item.id" v-for="(item,index) in kindOptionList")
    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")

    .flex.justify-end
      el-button(
        :icon="useRenderIcon(Close)",
        @click="closeVisible"
      ) 关闭
      el-button(
        type="primary",
        :icon="useRenderIcon(Upload)",
        @click="submit(ruleFormRef)"
      ) 确认提交
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-pagination) {
  flex-flow: wrap;
}

:deep(.is-draggable) {
  max-height: 80vh;
  overflow: auto;
}

:deep(.el-dialog__header) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.collapsedom {
  padding: 0 20px;
  background-color: #fff;
}

.ovh-x {
  height: 40vh;
  overflow-y: auto;
}

:deep(.el-descriptions__header) {
  margin: 16px 0 !important;
}

.el-select {
  width: 100%;
}
</style>
