<!--
@ 作者: 秦东
@ 时间: 2024-07-20 15:31:12
@ 备注: 应用设置
-->
<script lang="ts" setup>
import { SearchForm, customerFormCont, customerFormConfig } from "@/api/DesignForm/type";
import {
  customerFormGroupList,
  editFormGroupState,
  createApp,
  gainAppEditPsge,
} from "@/api/DesignForm/requestapi";

import { Search } from "@element-plus/icons-vue";

//引入页面
import AppCardPage from "@/views/sysworkflow/lowcodepage/appCardPage.vue";
import AppListPage from "@/views/sysworkflow/lowcodepage/appListPage.vue";
import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue";
import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue";
import DesignAPPpage from "@/views/sysworkflow/lowcodepage/appPage/index.vue"; //自建应用

const contbody = ref(); //实例化内容容器
const carPage = ref();
const appListPage = ref();
const appGroup = ref("1");
const page = ref<number>(1); //页码
const pageSize = ref<number>(12000); //每页显示几个
const pageTotal = ref<number>(0); //总记录数
const groupFormList = ref<any[]>([]); //记录数组
const drawerWith = ref(); //抽屉宽度
const appPageShow = ref(false);
const addFormGroupIsShow = ref(false);
const formKey = ref<string>(""); //表单标识
const formGroupKey = ref<string>(""); //表单标识
const drawerGroupWith = ref(); //编辑表单时抽屉宽度
const groupKey = ref<string>(""); //分组标识
const squareUrl = ref<string>(
  "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
);

const searchQuery = reactive({
  page: 1,
  pagesize: 20,
  searchWork: "",
});
const isClick = ref(1);
/**
@ 作者: 秦东
@ 时间: 2024-03-21 09:30:27
@ 功能: 获取表单分组
*/
const isUpdate = ref(false);
const gainFormGroup = () => {
  let sendInfo = {
    page: page.value,
    pagesize: pageSize.value,
    state: 1,
  };
  customerFormGroupList(sendInfo).then((data) => {
    pageTotal.value = data.data.total;
    // pageTotal.value = 400
    groupFormList.value = data.data.list;
    // console.log("重新排序", groupFormList.value);
    isUpdate.value = true;
    if (data.data.list && data.data.list.length > 0) {
      let otherGroup = true;
      data.data.list.forEach((item, index) => {
        if (item.isTrue) {
          appGroup.value = item.idStr.toString();
          otherGroup = false;
        }
      });
      if (otherGroup) {
        let lengNum = data.data.list.length;
        data.data.list.forEach((item, index) => {
          if (lengNum > 1) {
            if (index == 1) {
              appGroup.value = item.idStr.toString();
            }
          } else {
            if (index == 0) {
              appGroup.value = item.idStr.toString();
            }
          }
        });
      }
    }
    nextTick(() => {
      searchSub();
    });
  });
};
const handleClick = (val: any) => {
  // console.log("换挡",val,appGroup)
};

/**
@ 作者: 秦东
@ 时间: 2024-07-22 08:50:03
@ 功能: 改变视图展示模式
*/
const viewChannel = (val: number) => {
  isClick.value = val;
};

onMounted(() => {
  drawerWith.value = contbody.value?.clientWidth;
  gainFormGroup();
});
/**
@ 作者: 秦东
@ 时间: 2024-07-20 16:19:45
@ 功能: 获取表单数据
*/
const handleCurrentChange = (val: any) => {};

/**
@ 作者: 秦东
@ 时间: 2024-07-22 10:08:33
@ 功能: 搜索
*/
const searchSub = () => {
  if (isClick.value == 1) {
    carPage.value.getFormAppList(searchQuery);
  } else {
    appListPage.value.getFormAppList(searchQuery);
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:27:51
@ 功能: 获取容器宽度
*/
const getRongQiAttr = () => {
  drawerWith.value = contbody.value?.clientWidth;
};

/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:32
@ 功能: 选择添加项目
*/
const handleCommand = (command: string, groupId: string) => {
  // ElMessage(`click on item ${command}`)
  if (command == "addForm") {
    formKey.value = "";
    formGroupKey.value = groupId;
    // addFormIsShow.value = true
    drawerWith.value = contbody.value?.clientWidth;
    addFormIsShow.value = true;
  } else if (command == "addFormApp") {
    drawerWith.value = contbody.value?.clientWidth;
    let sendInfo = {
      id: groupId.toString(),
    };
    createApp(sendInfo)
      .then((data) => {
        formKey.value = data.data.uuid;
        groupKey.value = groupId.toString();
        nextTick(() => {
          appPageShow.value = true;
        });
      })
      .finally(() => {});
  } else {
    groupKey.value = "";
    addFormGroupIsShow.value = true;
    drawerGroupWith.value = 400;
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-03-21 13:53:29
@ 功能: 编辑分组
*/
const editFormGroup = (id: string) => {
  groupKey.value = id;
  addFormGroupIsShow.value = true;
  drawerGroupWith.value = 400;
};
/**
@ 作者: 秦东
@ 时间: 2024-03-09 09:06:44
@ 功能: 刷新页面
*/

const refreshPage = (pageType: string) => {
  if (pageType == "formPage") {
    addFormIsShow.value = false;
  } else {
    addFormGroupIsShow.value = false;
  }
  //   console.log("刷新页面");
  gainFormGroup();
};

/**
@ 作者: 秦东
@ 时间: 2024-03-21 14:22:58
@ 功能: 改变分组状态
*/
const eidtGroupStatus = (id: string, state: number) => {
  ElMessageBox.confirm(
    "您确定要删除此分组吗？一经删除！数据将不可恢复！请慎重执行此操作！！！",
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    let sendInfo = {
      id: id.toString(),
      status: state,
    };
    editFormGroupState(sendInfo).then((data) => {
      ElMessageBox.alert(data.msg, "温馨提示！", {
        confirmButtonText: "确定",
        callback: (action: Action) => {
          gainFormGroup();
        },
      });
    });
  });
};
</script>
<template>
  <div ref="contbody" class="tab-box">
    <el-tabs
      v-model="appGroup"
      :key="isUpdate"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="item in groupFormList"
        :label="item.title"
        :name="item.idStr"
      ></el-tab-pane>
    </el-tabs>

    <div class="appSubButton">
      <el-input
        v-model="searchQuery.searchWork"
        style="max-width: 150px; margin: 15px 10px 15px 0"
        placeholder="请输入名称"
        class="input-with-select"
        clearable
      >
        <template #append>
          <el-button :icon="Search" @click="searchSub()" />
        </template>
      </el-input>
      <el-button-group class="butGroup">
        <el-button
          class="fa fa-object-group"
          :color="isClick == 1 ? '#a0cfff' : ''"
          @click="viewChannel(1)"
        />
        <el-button
          class="fa fa-table"
          :color="isClick != 1 ? '#a0cfff' : ''"
          @click="viewChannel(2)"
        />

        <el-dropdown>
          <el-button class="fa fa-reorder leftLink" />
          <template #dropdown>
            <el-dropdown-item @click="handleCommand('addFormGroup', appGroup)"
              >新增分组</el-dropdown-item
            >
            <el-dropdown-item
              @click="handleCommand('addForm', appGroup)"
              style="display: none"
              >添加表单</el-dropdown-item
            >
            <el-dropdown-item @click="handleCommand('addFormApp', appGroup)"
              >添加应用</el-dropdown-item
            >
            <el-dropdown-item @click="editFormGroup(appGroup)" divided
              >编辑</el-dropdown-item
            >
            <el-dropdown-item @click="eidtGroupStatus(appGroup, 3)"
              >删除</el-dropdown-item
            >
          </template>
        </el-dropdown>
      </el-button-group>
    </div>
  </div>

  <div class="app-container">
    <AppCardPage
      ref="carPage"
      v-if="isClick == 1"
      :app-group="appGroup"
      :search-query="searchQuery"
      :drawer-with="drawerWith"
      @getRongQiAttr="getRongQiAttr"
    />
    <AppListPage
      ref="appListPage"
      v-else
      :app-group="appGroup"
      :search-query="searchQuery"
      :drawer-with="drawerWith"
      @getRongQiAttr="getRongQiAttr"
    />
  </div>
  <DesignAPPpage
    v-model:is-show="appPageShow"
    :drawer-with="drawerWith"
    v-model:form-key="formKey"
    :group-key="groupKey"
    @refreshPage="refreshPage"
  />

  <LowCodeFormPage
    v-if="addFormIsShow"
    :drawer-with="drawerWith"
    v-model:form-key="formKey"
    :form-group-key="formGroupKey"
    @refreshPage="refreshPage"
  />
  <LowCodeFormGroupPage
    v-if="addFormGroupIsShow"
    :drawer-with="drawerGroupWith"
    :group-key="groupKey"
    @refreshPage="refreshPage"
  />
</template>
<style lang="scss" scoped>
.app-container {
  height: calc(100% - 125px);
  width: calc(100% - 40px);
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 10px;
}

.tab-box {
  margin: 20px;
  height: 63px;
  background: #fff;
  border-radius: 5px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  .appSubButton {
    display: flex;
    justify-content: space-between;
    .butGroup {
      margin-top: 15px;
    }
    .leftLink {
      border-left: 1px solid #ccc;
    }
  }
  ::v-deep(.el-tabs) {
    height: 63px;
    width: calc(100% - 300px);
  }

  ::v-deep(.el-tabs__nav) {
    height: 63px;
    font-size: 16px;
  }
  ::v-deep(.el-tabs__item) {
    margin-top: 15px;
    font-size: 16px;
  }
  ::v-deep(.el-tabs__nav-prev) {
    line-height: 0px;
    margin-top: 30px;
  }
  ::v-deep(.el-tabs__nav-next) {
    line-height: 0px;
    margin-top: 30px;
  }
}

.el-dropdown-link {
  font-size: 30px;
  margin-top: 20px;
  margin-left: 10px;
}
</style>
