<template>
  <div class="content">
    <h-row id="GeneralQueryTable" type="flex">
      <h-col
        class="width-fixed margin-right"
        :class="{
          'hidden-card': !flag && flagChange,
          'show-card': flag && flagChange,
          'hidden-card-finish': !flag && !flagChange,
          'show-card-finish': flag && !flagChange,
        }"
      >
        <h-card class="list-card-form">
          <h-row>
            <span style="font-weight: bold; font-size: 15px">
              {{ t('GeneralQuery.common.savedQuery') }}
            </span>
            <div style="margin-left: 45px">
              <h-dropdown :size="small" style="margin: -15px">
                <template #overlay>
                  <h-menu>
                    <h-menu-item key="1" @click="saveAs">
                      {{ t('GeneralQuery.common.saveAs') }}
                    </h-menu-item>
                    <h-menu-item key="2" @click="deletes">
                      {{ t('GeneralQuery.common.delete') }}
                    </h-menu-item>
                  </h-menu>
                </template>
                <h-button type="link">{{ t('GeneralQuery.common.more') }}</h-button>
              </h-dropdown>
              <h-button type="link" @click="preservation" :size="small" style="margin: -15px">
                {{ t('GeneralQuery.common.save') }}
              </h-button>
            </div>
          </h-row>

          <h-row style="width: 100%">
            <h-select
              ref="select"
              v-model:value="formSelect.select1"
              :options="saveQueryList"
              class="table-card-left-top-select"
              @focus="focus"
              @change="handleChange1"
              allowClear
              showArrow="true"
              label-in-value
              :placeholder="t('GeneralQuery.common.selectTip')"
              :getPopupContainer="getParentContainer"
            ></h-select>
          </h-row>

          <h-row style="width: 100%">
            <label class="z-ant-form-item-required" style="margin: 6px; font-size: 15px">
              <span style="font-weight: bold">{{ t('GeneralQuery.common.generalQuery') }}</span>
            </label>
          </h-row>

          <h-row style="width: 100%">
            <h-select
              ref="select"
              v-model:value="formSelect.select2"
              :options="GeneralQuery"
              class="table-card-left-top-select"
              @focus="focus"
              @change="handleChange2"
              allowClear
              showArrow="true"
              label-in-value
              :filter-option="filterOption"
              :placeholder="t('GeneralQuery.common.selectTip')"
              :getPopupContainer="getParentContainer"
            ></h-select>
          </h-row>

          <br />

          <h-row>
            <h-button bordered="false" type="text">
              {{ t('GeneralQuery.common.queryCondition') }}
            </h-button>
          </h-row>

          <h-card class="card-left-bottom">
            <div class="circulate-overflow">
              <h-form
                ref="generalForm"
                v-model="queryModel"
                id="FormCCER_Dialog"
                autocomplete="off"
                layout="vertical"
              >
                <h-row
                  type="flex"
                  v-for="(item, index) in queryData"
                  :key="index"
                  style="padding: 0; margin: 0"
                  gutter="40"
                >
                  <template v-if="item?.fieldType === 'Enum'">
                    <h-form-item :label="item.label" :name="item.fieldName" style="width: 100%">
                      <h-select
                        v-model:value="queryModel[item.fieldName]"
                        :optionLabelProp="null"
                        :showSearch="false"
                        :options="item?.dictList"
                        :getPopupContainer="getParentContainer"
                        :placeholder="t('GeneralQuery.common.selectTip')"
                      ></h-select>
                    </h-form-item>
                  </template>
                  <template v-else-if="item?.fieldType === 'Date'">
                    <h-form-item :label="item.label" :name="item.fieldName" style="width: 100%">
                      <h-date-picker
                        v-model:value="queryModel[item.fieldName]"
                        format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm"
                        :getPopupContainer="getPopupContainer"
                      ></h-date-picker>
                    </h-form-item>
                  </template>
                  <template
                    v-else-if="
                      item?.fieldType === 'HBCustomSelect' || item?.fieldType === 'SingleUserValue'
                    "
                  >
                    <h-form-item :label="item.label" :name="item.fieldName" style="width: 100%">
                      <h-b-custom-select
                        v-model:value="queryModel[item.fieldName]"
                        valueType="string"
                        componentType="user"
                        dataQueryType="company"
                        selectMode="single"
                        :selectShowMaxLength="3"
                        :showSearch="false"
                        :open="false"
                        :notFoundContent="null"
                        hasPath="1"
                      ></h-b-custom-select>
                    </h-form-item>
                  </template>
                  <template v-else>
                    <h-form-item
                      :label="item.label"
                      :name="item.fieldName"
                      style="width: 100%"
                      :rules="[
                        {
                          trigger: ['change', 'blur'],
                          validator: validateDefaultValue,
                        },
                      ]"
                    >
                      <h-input
                        v-model:value="queryModel[item.fieldName]"
                        autocomplete="off"
                        :placeholder="t('GeneralQuery.common.inputTip')"
                        allowClear
                      />
                    </h-form-item>
                  </template>
                </h-row>
              </h-form>
            </div>
          </h-card>
          <br />
          <h-button type="primary" block @click="executeSearch" :disabled="loading">
            {{ t('GeneralQuery.common.search') }}
          </h-button>
        </h-card>
        <div
          class="show-button"
          :class="{
            'hidden-button': !flag && buttonChange,
            'hidden-button-finish': !flag && !flagChange && !buttonChange,
          }"
          @click="hideOrNot"
        >
          <h-icon :name="!flag ? 'general-show' : 'general-hidde'"></h-icon>
        </div>
      </h-col>
      <h-col class="width-computed" flex="5">
        <h-card class="list-table">
          <h-b-pro-table
            id="RoleIndex-queryTable"
            v-bind="tableProps"
            rowKey="key"
            :needRowIndex="true"
            :show-size="false"
            :showExport="false"
            :animateRows="false"
            :title="t('GeneralQuery.generalManagement.title')"
            :row-selection="{
              type: 'checkbox',
              memory: true,
              clickSelectTrigger: 'row',
              unSelectable: true,
            }"
            :pagination="false"
            :dataSource="dataSource"
            :columns="columns"
            :columnDrag="true"
            ref="gridRef"
            :scroll="{
              extra: 20,
              y: 520,
            }"
            style="position: relative"
            :loading="loading"
          >
            <!-- 按钮组插槽 -->
            <template #headerContent>
              <h-button type="primary" @click="executeSearch" :disabled="loading">
                {{ t('GeneralQuery.common.refresh') }}
              </h-button>
              <!-- <h-b-button-group id="RoleIndex-buttonGroup" v-bind="menuProps" ref="menuRef" /> -->
            </template>
            <!-- 行内操作按钮 -->
            <template #action="{}">
              <h-b-button-group
                id="RoleIndex-buttonGroup-inline"
                v-bind="menuPropsTable"
                ref="menuRefTable"
              />
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.valueType === 'Enum' && column.dataSource.length > 0">
                <span>
                  {{ findEnum(column.dataSource, record[column.dataIndex]) }}
                </span>
              </template>
            </template>
            <template #roleState="{ text }">
              <template v-if="text === '启用'">
                <h-badge status="success" :text="text" />
              </template>
              <template v-else>
                <h-badge status="error" :text="text" />
              </template>
            </template>
          </h-b-pro-table>
          <div style="height: 20px"></div>
          <div class="poition">
            <h-button @click="previousPage" :disabled="previousPageDisabled">上一页</h-button>
            <h-button @click="nextPage" :disabled="nextPagedisabled">下一页</h-button>
          </div>
        </h-card>
      </h-col>
    </h-row>
    <!-- </div> -->
    <h-modal
      id="GeneralQueryTable-queryModal"
      v-model:visible="visible"
      :maskClosable="false"
      :title="t('GeneralQuery.saveToMyQuery.title')"
      :cancelText="t('platform.common.cancel')"
      :okText="t('platform.common.save')"
      :destroyOnClose="true"
      @ok="handleOk"
    >
      <h-form layout="vertical" v-model="modelData" name="basic">
        <h-form-item :label="t('GeneralQuery.saveToMyQuery.name')" name="name">
          <h-input
            allowClear
            v-model:value="modelData"
            :placeholder="t('GeneralQuery.common.inputTip')"
          />
        </h-form-item>
      </h-form>
    </h-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect, computed, ref, onMounted } from 'vue';
import { useTable, useForm, useButtonGroup } from '@crami/bui-platform';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
import { message, HModal } from '@crami/ui';
// import { Http } from '@crami/http';
import { commonApi } from '@remote/icpx-platform/commonApi';
/* import { commonApi } from '@/api/commonApi/index'; */
import { useI18n } from '@crami/locale';
import { useHttp } from '@crami/http';

export default defineComponent({
  name: 'GeneralQueryTable',
  setup() {
    //---左上部分，表单：开始----------------------------------------------
    const isShow = ref(true);
    const formSelect = reactive({
      select1: undefined,
      select2: undefined,
    });
    const previousPageDisabled = ref(false);
    const nextPagedisabled = ref(false);
    const tableTotle = ref(0);
    const saveQueryData = ref([]);
    const hiddenQueryCondition = ref([]);
    const queryCondition = ref([]);
    const saveEid = ref('');
    const saveEname = ref('');
    let paramList = reactive({
      eid: '',
      type: '',
      modelName: '',
      filter: [],
      needEdField: [],
      // page: 1,
      // pageSize: 10,
      current: 0,
      pageType: 0,
      pages: null,
      lang: 'zhs',
      connect: 'MYSQL',
      userDept: 'P_SYS_DEPT_8a5bb97a9163465595e7bad773328f5f',
      userGroup: 'P_SYS_ORG_40d2290328d5484ea1e18c47562d50f8',
      projectCode: 'PLMBASE',
      refModelCode: '',
      ...commonApi().system.getData.params,
    });
    let saveParameters = reactive({
      eid: '',
      ename: '',
      commonQueryConfigId: '',
      queryConditionValue: [],
      description: null,
      ecompanyid: '',
      createuid: '',
      createtime: '2022-08-20T17:18:06.770+08:00',
      updateuid: '',
      updatetime: '2022-08-20T17:18:06.954+08:00',
      delflag: 0,
      ...commonApi().system.getData.params,
    });
    const dataSource = ref([]);
    const columns = ref([]);
    let queryData = reactive([]);
    const queryModel = ref({});
    const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }));
    const GeneralQuery = ref([]);
    const saveQueryList = ref([]);
    const focus = () => {
      console.log('focus');
    };
    const handleChange1 = value => {
      dataSource.value = [];
      paramList.filter.length = 0;
      queryData.length = 0;
      queryModel.value = {};
      paramList.current = 0;
      paramList.pages = null;
      paramList.pageType = 0;
      tableTotle.value = 0;
      paramList.needEdField.length = 0;
      saveEid.value = value.option.value;
      saveEname.value = value.option.label;
      handleChange2({ value: value.option.commonQueryConfigId });
      formSelect.select2 = value.option.commonQueryConfigId;
      setTimeout(() => {
        saveQueryData.value.forEach(e => {
          if (e.eid == value.option.value) {
            JSON.parse(e.queryConditionValue).filter(v => {
              queryData.forEach(h => {
                if (h.commonQueryConfigId == e.commonQueryConfigId && h.id === v.id) {
                  h.val = v.actualValue;
                }
              });
            });
          }
        });
      }, 500);
    };
    const handleChange2 = async value => {
      dataSource.value = [];
      paramList.filter.length = 0;
      queryData.length = 0;
      queryModel.value = {};
      paramList.current = 0;
      paramList.pages = null;
      paramList.pageType = 0;
      tableTotle.value = 0;
      paramList.needEdField.length = 0;
      const modelName = GeneralQuery.value.filter(item => {
        return item.value == value.value;
      });
      if (modelName.length === 0) return;
      paramList.modelName = modelName[0].majorModelCode;
      const result = await useHttp({
        url: '/api/commonquery/commonQuery/front/getConfigListById' + '?eid=' + value.value,
        method: 'get',
      });
      paramList.eid = result.data[0].eid;
      paramList.type = result.data[0].type;
      paramList.refModelCode = result.data[0].refModelCode;
      hiddenQueryCondition.value = JSON.parse(result.data[0].hiddenQueryCondition);
      JSON.parse(result.data[0].hiddenQueryCondition).forEach(p => {
        paramList.filter.push({
          field: paramList.type == '1' ? p.fieldName : p.tableName + '.' + p.fieldName,
          value: p.actualValueDesc,
          operation: p.operator,
          andOrFlag: p.splicer,
          key: p.tableName + '.' + p.fieldName,
        });
      });
      columns.value = JSON.parse(result.data[0].queryResult).map((item, index) => {
        return {
          title: item.fieldDefaultValue,
          dataIndex: paramList.type == '1' ? item.fieldName : item.tableName + '.' + item.fieldName,
          key: item.tableName + '.' + item.fieldName,
          align: 'left',
          ellipsis: true,
          width: '150px',
          valueType: item.valueType,
          resizable: true,
          dataSource: item.dictList ?? [],
        };
      });
      columns.value = [].concat(columns.value);
      columns.value.forEach(utem => {
        paramList.needEdField.push(utem.dataIndex);
      });
      queryCondition.value = JSON.parse(result.data[0].queryCondition);
      result.data.forEach(item => {
        JSON.parse(item.queryCondition).forEach(j => {
          paramList.filter.push({
            field: paramList.type == '1' ? j.fieldName : j.tableName + '.' + j.fieldName,
            value: '',
            operation: j.operator,
            andOrFlag: 'AND',
            id: j.id,
            commonQueryConfigId: item.eid,
          });

          queryData.push({
            label: j.fieldDefaultValue,
            id: j.id,
            commonQueryConfigId: item.eid,
            fieldType: j.fieldType,
            dictList: j.dictList,
            fieldName: j.fieldName,
          });
          queryModel.value[j.fieldName] = '';
        });
      });
    };
    const formatDateTime = dateIn => {
      if (dateIn == '' || !dateIn) {
        return '';
      }
      let date = new Date(dateIn);
      const timeZone = window.localStorage.getItem('TIME_ZONE');
      if (typeof timeZone === 'string') {
        let timeZoneNum = Number.parseInt(timeZone);
        if (timeZoneNum > 0 && timeZoneNum < 24) {
          date.setHours(date.getHours() + timeZoneNum);
        }
      }
      let y: string | number = date.getFullYear();
      let m: string | number = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      let d: string | number = date.getDate();
      d = d < 10 ? '0' + d : d;
      let h: string | number = date.getHours();
      h = h < 10 ? '0' + h : h;
      let minute: string | number = date.getMinutes();
      minute = minute < 10 ? '0' + minute : minute;
      let second: string | number = date.getSeconds();
      second = second < 10 ? '0' + second : second;
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
    };
    const loading = ref<boolean>(false);
    const generalForm = ref();
    const serch = () => {
      generalForm.value
        .validate()
        .then(() => {
          searchNext();
        })
        .catch(err => {
          console.log('Success:', err);
        });
    };
    const searchNext = async () => {
      if (typeof formSelect.select2 == 'undefined' || formSelect.select2 == '') {
        message.error('必须选择一个通用查询');
        return;
      }
      loading.value = true;
      paramList.filter.forEach(i => {
        queryData.forEach(e => {
          if (i.id == e.id) {
            i.value = queryModel.value[e.fieldName];
          }
        });
      });
      if (currentStartMap.value) {
        paramList['currentStartMap'] = currentStartMap.value;
      } else if (paramList['currentStartMap']) {
        delete paramList['currentStartMap'];
      }
      const result = await useHttp({
        url: '/api/commonquery/commonQuery/query/page',
        method: 'post',
        params: paramList,
      });
      if (result.code == 200) {
        paramList.current = result.data.current;
        paramList.pages = result.data.pages;
        currentStartMap.value = result.data?.currentStartMap ?? null;
        if (result.data.data) {
          nextPagedisabled.value = false;
          dataSource.value = result.data.data.map((item, index) => {
            let datasour = JSON.parse(item.data);
            let fieldKeys = Object.keys(datasour);
            fieldKeys.forEach(fieldKey => {
              let fieldType = null;
              columns.value.forEach(column => {
                if (column.dataIndex == fieldKey) {
                  fieldType = column.valueType;
                  return;
                }
              });
              if (fieldType === 'Date') {
                datasour[fieldKey] = formatDateTime(datasour[fieldKey]);
              }
            });
            datasour.key = index + 1;
            return datasour;
          });
          dataSource.value = [].concat(dataSource.value);
          if (result.data.notNextPage == 1) {
            nextPagedisabled.value = true;
          } else {
            nextPagedisabled.value = false;
          }
          if (result.data.pages <= 1) {
            previousPageDisabled.value = true;
          } else {
            previousPageDisabled.value = false;
          }
        } else {
          dataSource.value = [];
          nextPagedisabled.value = true;
        }

        tableTotle.value = result.data.total;
      } else {
        message.error(result.msg);
        nextPagedisabled.value = true;
      }
      loading.value = false;
    };
    const flag = ref(true); //伸缩
    const flagChange = ref(false);
    const buttonChange = ref(false);
    const hideOrNot = () => {
      flag.value = !flag.value;
      flagChange.value = true;
      buttonChange.value = true;
      setTimeout(() => {
        flagChange.value = false;
        setTimeout(() => {
          buttonChange.value = false;
        }, 100);
      }, 1000);
    };

    //---左上部分，表单：结束----------------------------------------------

    //---弹窗：开始-------------------------------------------------------
    let visible = ref(false); //弹窗
    const saveAs = () => {
      visible.value = !visible.value;
      modelData.value = '';
    };
    const deletes = async () => {
      if (saveQueryList.value.length > 0 && formSelect.select1 !== undefined) {
        const result = await useHttp({
          url:
            '/api/commonquery/commonQuery/front/deleteOftenQuery?eid=' +
            formSelect.select1.option.value,
          method: 'get',
        });
        if (result.code == 200) {
          message.success(result.msg);
          getOftenQueryList();
          formSelect.select1 = '';
        } else {
          message.error(result.msg);
        }
      } else {
        message.error('请选择一条查询方案！');
      }
    };
    const preservation = () => {
      if (
        saveQueryList.value.length > 0 &&
        typeof formSelect.select1 !== 'undefined' &&
        formSelect.select1 !== ''
      ) {
        saveParameters.queryConditionValue.length = 0;
        saveParameters.eid = saveEid.value;
        saveParameters.ename = modelData.value ?? saveEname.value;
        if (typeof formSelect.select2 == 'string') {
          saveParameters.commonQueryConfigId = formSelect.select2;
        } else {
          saveParameters.commonQueryConfigId = formSelect.select2.option.value;
        }

        queryCondition.value.forEach(item => {
          queryData.forEach(e => {
            if (item.id == e.id) {
              item.actualValue = e.val;
            }
          });
          saveParameters.queryConditionValue.push({
            actualValue: item.actualValue,
            conditionType: 'show',
            fieldDesc: item.fieldDesc,
            fieldName: item.fieldName,
            operator: item.operator,
            tableDesc: item.tableDesc,
            tableName: item.tableName,
            id: item.id,
          });
        });
        if (hiddenQueryCondition.value.length > 0) {
          hiddenQueryCondition.value.forEach(item => {
            saveParameters.queryConditionValue.push({
              actualValue: item.actualValue,
              conditionType: item.conditionType,
              id: item.id,
              fieldDesc: item.fieldDesc,
              fieldName: item.fieldName,
              operator: item.operator,
              tableDesc: item.tableDesc,
              tableName: item.tableName,
            });
          });
        }
        saveScheme(saveParameters);
      } else {
        message.error('保存查询列表为空或未选择一条保存查询！');
      }
    };
    const handleOk = () => {
      visible.value = !visible.value;
      saveParameters.eid = '';
      saveParameters.queryConditionValue.length = 0;
      saveParameters.ename = modelData.value;
      if (
        saveQueryList.value.length > 0 &&
        formSelect.select1 !== undefined &&
        typeof formSelect.select2 == 'string'
      ) {
        saveParameters.commonQueryConfigId = formSelect.select2;
      } else {
        saveParameters.commonQueryConfigId = formSelect.select2.option.value;
      }

      queryCondition.value.forEach(item => {
        queryData.forEach(e => {
          if (item.id == e.id) {
            item.actualValue = e.val;
          }
        });
        saveParameters.queryConditionValue.push({
          actualValue: item.actualValue,
          conditionType: 'show',
          fieldDesc: item.fieldDesc,
          fieldName: item.fieldName,
          operator: item.operator,
          tableDesc: item.tableDesc,
          tableName: item.tableName,
          id: item.id,
        });
      });
      if (hiddenQueryCondition.value.length > 0) {
        hiddenQueryCondition.value.forEach(item => {
          saveParameters.queryConditionValue.push({
            actualValue: item.actualValue,
            conditionType: item.conditionType,
            id: item.id,
            fieldDesc: item.fieldDesc,
            fieldName: item.fieldName,
            operator: item.operator,
            tableDesc: item.tableDesc,
            tableName: item.tableName,
          });
        });
      }
      saveScheme(saveParameters);
    };

    let modelData = ref();

    //---弹窗：结束-------------------------------------------------------

    const handleChange = (data, index) => {
      console.log(data, index);
    };
    //----右侧开始--------------------------------------------------------
    const { t } = useI18n();

    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });
    const saveScheme = async params => {
      const result = await useHttp({
        url: '/api/commonquery/commonQuery/front/saveOftenQuery',
        method: 'post',
        params: params,
      });
      if (result.code == 200) {
        message.success(result.msg);
        getOftenQueryList();
      } else {
        message.error(result.msg);
      }
    };
    const validateDefaultValue = (rule, value, callback) => {
      if (queryModel.value[rule.field].length > 100) {
        return Promise.reject(t('GeneralQuery.common.maxNum'));
      }
      return Promise.resolve(true);
    };
    const [formRef, props, methods] = useForm(
      {
        configApi: {
          url: commonApi().studioCache.getMetaInfo.url,
          params: {
            ...commonApi().studioCache.getMetaInfo.params,
            type: 'form_view',
            mode: 'search',
            name: commonParams.value?.listViewName,
          },
          method: 'post',
        },
        beforeSetData: (type, props) => {
          if (type === 'config') {
            const _props = {
              submitter: {
                isQuery: true,
              },
              // 此处更改只在dev使用，不同步tcl
              // layout: 'vertical',
              column: 2,
              // title: t('platform.common.search'),
            };
            methods?.setProps(_props, props);
          }
          return props;
        },
        immediate: true,
      },
      '',
      '',
      {},
    );

    const onFinish = () => {
      // 处理data数据
      const formData = formRef.value.getFilterData();
      search(formData);
    };

    const [gridRef, tableProps, tableMethods] = useTable({
      // 表头数据
      // configApi: {
      //   url: commonApi().system.getData.url,
      //   method: commonApi().system.getData.method,
      //   params: {
      //     type: 'gridTitle',
      //     data: {
      //       ...commonApi().system.getData.params,
      //       // viewName: commonParams.value?.listViewName,P_SYS_ROLE_LISTVIEW
      //       viewName: 'P_SYS_ROLE_LISTVIEW',
      //     },
      //   },
      // },
      configApi: false,
      // 数据接口
      // dataSourceApi: {
      //   url: commonApi().system.getGetOnePageGridDataList.url,
      //   method: commonApi().system.getGetOnePageGridDataList.method,
      //   studioParams: {
      //     ...commonApi().system.getGetOnePageGridDataList.params,
      //     viewName: commonParams.value?.listViewName,
      //   },
      // },
      dataSourceApi: false,
      beforeRequest: (type, params: any) => {
        if (type == 'column') {
          if (params && params.data && typeof params.data == 'object') {
            params.data = JSON.stringify(params.data);
          }
        }
        return {
          ...params,
        };
      },
      // operation: {
      //   dataIndex: 'action',
      //   title: t('platform.common.operate'),
      //   width: 160,
      //   show: true,
      //   customSlot: 'action',
      //   fixed: 'right',
      // },
      columnExtra: {
        ROLE_STATUS: {
          customSlot: 'roleState',
        },
      },
    });

    const findEnum = (datas: any[], value: string): string => {
      const item = datas.find(item => item.value == value);
      if (item) {
        return item.label;
      }
      return value;
    };

    const search = (params: any) => {
      const allParam = {
        filter: params,
      };
      tableMethods.query(allParam, true);
    };
    const [menuRef, menuProps, { getRowMenu }] = useButtonGroup({
      sortRule: 'default',
      pageName: 'RoleIndex',
      dataSourceApi: false,
      items: [],
    });
    const [menuRefTable, menuPropsTable, { load }] = useButtonGroup({
      sortRule: 'computedByNumber',
      computedByNumber: 3,
      pageName: 'RoleIndex',
      items: [],
      moreItem: {
        trigger: ['click'],
      },
    });
    const newJsFun = (event: any) => {
      if (event.result?.code == 200) {
        message.success(event.result.msg);
        refreshTable();
        HModal.destroyAll();
      } else {
        if (undefined == event?.result) {
          //TODO：后期可能会有处理
        } else {
          message.warning(event.result.msg);
        }
      }
    };

    //处理行内操作按钮
    watchEffect(async () => {
      const rowData = getRowMenu('link');
      load(rowData);
    });

    const refreshTable = () => {
      const formFilter = formRef.value?.getFilterData();
      search(formFilter);
    };

    const onReset = () => {
      search([]);
    };
    const getOftenQueryList = async () => {
      saveQueryList.value = [];
      const saveQuery = await useHttp({
        url: '/api/commonquery/commonQuery/front/getOftenQueryList',
        method: 'get',
      });
      saveQueryData.value = saveQuery.data;
      saveQuery?.data?.forEach(m => {
        saveQueryList.value.push({
          value: m.eid,
          label: m.ename,
          commonQueryConfigId: m.commonQueryConfigId,
        });
      });
    };
    //----右侧结束--------------------------------------------------------
    onMounted(async () => {
      previousPageDisabled.value = true;
      nextPagedisabled.value = true;
      const result = await useHttp({
        url: '/api/commonquery/commonQuery/front/getCommonQueryConfigList',
        method: 'get',
        params: {},
      });
      result?.data?.forEach(item => {
        GeneralQuery.value.push({
          value: item.eid,
          label: item.ename,
          majorModelCode: item.majorModelCode,
        });
      });
      getOftenQueryList();
    });
    const filterOption = (input: string, option: any) => {
      return option.label.indexOf(input) >= 0;
    };

    const previousPage = () => {
      paramList.pageType = 1;
      serch();
    };
    const nextPage = () => {
      paramList.pageType = 0;
      serch();
    };
    const currentStartMap = ref(null);
    const executeSearch = () => {
      previousPageDisabled.value = true;
      paramList.current = 0;
      paramList.pages = null;
      paramList.pageType = 0;
      tableTotle.value = 0;
      currentStartMap.value = null;
      serch();
    };

    const getPopupContainer = val => {
      return document.getElementById('GeneralQueryTable');
    };

    const getParentContainer = val => {
      return val.parentNode;
    };

    return {
      isShow,
      focus,
      visible,
      saveAs,
      preservation,
      flag,
      hideOrNot,
      handleOk,
      getParentContainer,
      modelData,
      // hideOrNotClassLeft,
      // hideOrNotClassRight,
      // hideStyle,
      handleChange1,
      handleChange2,
      queryData,
      formSelect,
      paramList,
      handleChange,
      getPopupContainer,
      options,
      GeneralQuery,
      saveQueryList,
      t,
      onFinish,
      onReset,
      formRef,
      props,
      methods,
      menuRef,
      menuProps,
      menuRefTable,
      menuPropsTable,
      buttonChange,
      newJsFun,
      findEnum,
      loading,
      serch,
      queryModel,
      flagChange,
      // clearData,
      // model,
      refreshTable,
      dataSource,
      columns,
      gridRef,
      tableProps,
      tableTotle,
      filterOption,
      saveQueryData,
      saveParameters,
      hiddenQueryCondition,
      queryCondition,
      saveEid,
      deletes,
      previousPage,
      nextPage,
      previousPageDisabled,
      nextPagedisabled,
      executeSearch,
      generalForm,
      validateDefaultValue,
    };
  },
});
</script>

<style lang="less" scoped>
@leftMAXW: 280px;
@leftMINW: 0px;
.table-card-left {
  height: 100%;
  border-radius: 8px;
}
.table-card-right {
  height: 100%;
  border-radius: 8px;
}
.table-card-left-top-select {
  // width: 350px;

  width: 100%;
  border-radius: 20px;
}
.circulate-overflow {
  height: 348px;
  // height: 100%;
  overflow: scroll;
  padding-right: 10px;
}
.width-fixed {
  position: relative;
  height: 700px;
  background-color: white;
  .list-card-form {
    width: @leftMAXW;
  }
}
.hidden-card {
  animation: hiddemove 1s ease 0s;
  width: @leftMINW;
  .ant-card {
    animation: hiddencard 1s ease 0s;
    opacity: 0;
  }
}
.hidden-card-finish {
  width: @leftMINW;
  .ant-card {
    opacity: 0;
  }
  .hidden-button {
    animation: buttonmove 0.1s ease-out 0s;
    right: 7.8px;
  }
}
.show-card {
  animation: showmove 1s ease 0s;
  width: @leftMAXW;
  .ant-card {
    animation: showcard 1s ease 0s;
  }
}
.show-card-finish {
  width: @leftMAXW;
}
@keyframes hiddemove {
  0% {
    width: @leftMAXW;
  }
  100% {
    width: @leftMINW;
  }
}
@keyframes hiddencard {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    // display: none;
  }
}
@keyframes showcard {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showmove {
  0% {
    width: @leftMINW;
  }
  100% {
    width: @leftMAXW;
  }
}
@keyframes buttonmove {
  0% {
    right: -16px;
  }
  100% {
    right: 7.8px;
  }
}
.width-computed {
  height: 700px;
}
.show-button {
  width: 16px;
  height: 66px;
  background-color: white;
  position: absolute;
  right: -16px;
  top: calc(50% - 33px);
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  .h-div-icon {
    position: absolute;
    right: 0px;
    top: calc(50% - 7px);
  }
}
.hidden-button-finish {
  right: 7.8px;
}
.express {
  position: absolute;
  left: -20px;
  top: 40%;
  opacity: 0;
  transition: opacity 0.1s 0.25s;
}
.card-left-bottom {
  :deep(.ant-card-body) {
    padding-right: 10px;
  }
}
.poition {
  position: absolute;
  right: 30px;
  bottom: 0px;
  cursor: pointer;
  button {
    margin: 5px 5px;
  }
}
:deep(.surely-table) {
  height: 605px !important;
}
.z-ant-form-item-required::before {
  display: inline-block;
  margin-right: 4px;
  color: #ff4d4f;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>
