<script lang="ts">
// 声明额外的选项
export default {
  name: "Add"
};
</script>
<script setup lang="ts">
import { inject, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ElMessage, ElMessageBox } from "element-plus";
import { http } from "@/utils/http";
// 获取当前板块接口列表
import Upload from "@iconify-icons/ri/upload-2-fill";
import Close from "@iconify-icons/ri/close-fill";
// 获取URLLIST
import { getGroupUrl } from "@/utils/getUrl/getUrl";

const props = defineProps<{
  submit: {
    type: Function;
    default: () => {};
  };
  addVisible: {
    type: Boolean;
    default: false;
  };
  width: {
    type: Number;
    default: 50;
  };
}>();
// 表单数据
let UpdateForm = ref({
  moduleVersion: "", //模板更新版本
  modulePath: "", //模板路径
  backgroudColor: "", //背景色
  textColor: "", //前景色
  statusBarStyle: "", //苹果状态栏
  showTitle: "", //是否显示头部
  title: "", //顶部标题
  showScrollBar: "", //是否显示滚动条
  skidFlag: "", //是否侧滑返回
  leftBtn1: "", //左侧按钮1
  leftBtn2: "", //左侧按钮2
  rightBtn1: "", //右侧按钮1
  rightBtn2: "", //右侧按钮2
  leftAction1: "", //左侧按钮1点击事件
  leftAction2: "", //左侧按钮2点击事件
  rightAction1: "", //右侧按钮1点击事件
  rightAction2: "", //右侧按钮2点击事件
  gotoPages: "", //下级页面
  mustUpdate: "", //是否强制更新

});

// 选项卡参数(默认值为列表某项的id)
const activeId = ref('1')
// 提交函数
const submit = async () => {
  const UrlList = await getGroupUrl(['kxsConfigServer']);
  const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.pageUpdateInfoadd.method, url: UrlList.kxsConfigServer.pageUpdateInfoadd.url, params: UpdateForm.value});
  if (status === 1) {
    ElMessage({
      message: "新增成功",
      type: "success"
    });
    UpdateForm.value = {
      moduleVersion: "", //模板更新版本
      modulePath: "", //模板路径
      backgroudColor: "", //背景色
      textColor: "", //前景色
      statusBarStyle: "", //苹果状态栏
      showTitle: "", //是否显示头部
      title: "", //顶部标题
      showScrollBar: "", //是否显示滚动条
      skidFlag: "", //是否侧滑返回
      leftBtn1: "", //左侧按钮1
      leftBtn2: "", //左侧按钮2
      rightBtn1: "", //右侧按钮1
      rightBtn2: "", //右侧按钮2
      leftAction1: "", //左侧按钮1点击事件
      leftAction2: "", //左侧按钮2点击事件
      rightAction1: "", //右侧按钮1点击事件
      rightAction2: "", //右侧按钮2点击事件
      gotoPages: "", //下级页面
      mustUpdate: "", //是否强制更新

    };
    closeVisible();
  } else {
    ElMessageBox.alert(msg, "提示", {
      confirmButtonText: "关闭",
      type: "warning"
    });
  };
};
const closeFn: any = inject('closeAddVisible');
// 关闭弹窗回调函数
const closeVisible = () => {
  UpdateForm.value = {
    moduleVersion: "", //模板更新版本
    modulePath: "", //模板路径
    backgroudColor: "", //背景色
    textColor: "", //前景色
    statusBarStyle: "", //苹果状态栏
    showTitle: "", //是否显示头部
    title: "", //顶部标题
    showScrollBar: "", //是否显示滚动条
    skidFlag: "", //是否侧滑返回
    leftBtn1: "", //左侧按钮1
    leftBtn2: "", //左侧按钮2
    rightBtn1: "", //右侧按钮1
    rightBtn2: "", //右侧按钮2
    leftAction1: "", //左侧按钮1点击事件
    leftAction2: "", //左侧按钮2点击事件
    rightAction1: "", //右侧按钮1点击事件
    rightAction2: "", //右侧按钮2点击事件
    gotoPages: "", //下级页面
    mustUpdate: "", //是否强制更新

  };
  closeFn();
};
</script>

<template lang="pug">
.main
  el-dialog(v-model='props.addVisible' width="50%" title="新增" @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" label-width="100px")
          el-form-item(label='模板更新版本' prop="moduleVersion")
            el-input-number(v-model='UpdateForm.moduleVersion' :min="1" :max="1000"
              placeholder="请输入模板更新版本")
          el-form-item(label='模板路径' prop="modulePath")
            el-input(v-model='UpdateForm.modulePath' autocomplete='off' class="!w-[230px]"
              placeholder="请输入模板路径")
          el-form-item(label='背景色' prop="backgroudColor")
            el-input(v-model='UpdateForm.backgroudColor' autocomplete='off' class="!w-[230px]"
              placeholder="请输入背景色")
          el-form-item(label='前景色' prop="textColor")
            el-input(v-model='UpdateForm.textColor' autocomplete='off' class="!w-[230px]"
              placeholder="请输入前景色")
          el-form-item(label="苹果状态栏", prop="statusBarStyle")
            el-select(
              v-model="UpdateForm.statusBarStyle",
              placeholder="请选择苹果状态栏",
              clearable,
              class="!w-[230px]"
            )
              el-option(:label="item.label", :value="item.Id" v-for="(item,index) in statusBarStyleOptionList")
          el-form-item(label='顶部标题' prop="title")
            el-input(v-model='UpdateForm.title' autocomplete='off' class="!w-[230px]"
              placeholder="请输入顶部标题")
          el-form-item(label='左侧按钮1' prop="leftBtn1")
            el-input(v-model='UpdateForm.leftBtn1' autocomplete='off' class="!w-[230px]"
              placeholder="请输入左侧按钮1")
          el-form-item(label='左侧按钮2' prop="leftBtn2")
            el-input(v-model='UpdateForm.leftBtn2' autocomplete='off' class="!w-[230px]"
              placeholder="请输入左侧按钮2")
          el-form-item(label='右侧按钮1' prop="rightBtn1")
            el-input(v-model='UpdateForm.rightBtn1' autocomplete='off' class="!w-[230px]"
              placeholder="请输入右侧按钮1")
          el-form-item(label='右侧按钮2' prop="rightBtn2")
            el-input(v-model='UpdateForm.rightBtn2' autocomplete='off' class="!w-[230px]"
              placeholder="请输入右侧按钮2")
          el-form-item(label='左侧按钮1点击事件' prop="leftAction1")
            el-input(v-model='UpdateForm.leftAction1' autocomplete='off' class="!w-[230px]"
              placeholder="请输入左侧按钮1点击事件")
          el-form-item(label='左侧按钮2点击事件' prop="leftAction2")
            el-input(v-model='UpdateForm.leftAction2' autocomplete='off' class="!w-[230px]"
              placeholder="请输入左侧按钮2点击事件")
          el-form-item(label='右侧按钮1点击事件' prop="rightAction1")
            el-input(v-model='UpdateForm.rightAction1' autocomplete='off' class="!w-[230px]"
              placeholder="请输入右侧按钮1点击事件")
          el-form-item(label='右侧按钮2点击事件' prop="rightAction2")
            el-input(v-model='UpdateForm.rightAction2' autocomplete='off' class="!w-[230px]"
              placeholder="请输入右侧按钮2点击事件")
      el-tab-pane(label="下级页面" name="2")
        el-form(:model='UpdateForm' label-position="right" label-width="100px")
          el-form-item(label="下级页面", prop="gotoPages")
            el-transfer(v-model="UpdateForm.gotoPages" :data="gotoPagesOptionList")
      el-tab-pane(label="基本资料" name="3")
        el-form(:model='UpdateForm' label-position="right" label-width="100px")
    el-tabs(v-model="activeId" class="demo-tabs" @tab-click="handleClick")

    el-button(
      :icon="useRenderIcon(Close)",
      :loading="loading",
      @click="closeVisible()"
    ) 关闭
    el-button(
      type="primary",
      :icon="useRenderIcon(Upload)",
      :loading="loading",
      @click="submit"
    ) 确认提交
</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;
}
</style>
