<!--
@ 作者: 秦东
@ 时间: 2024-06-03 13:23:59
@ 备注: App表单列表1
-->
<script lang="ts" setup>
import {
  json2string,
  objToStringify,
  string2json,
  stringToObj,
} from "@/utils/DesignForm/form";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
import { useDesignFormStore } from "@/store/DesignForm/designForm";
import {
  attrButton,
  FormPageList,
  FormPageConfig,
  viewPageType,
} from "@/api/DesignForm/tableButton";
import {
  inputUnit,
  timeUnit,
  choiceUnit,
  switchUnit,
  orgUnit,
  checkboxUnit,
  orgDeptUnit,
} from "@/api/DesignForm/fieldUnit";
import type { FormInstance, FormRules, ElNotification } from "element-plus";
import { gainFormPageListCont } from "@/api/DesignForm/requestapi";
import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue";
import request from "@/utils/request";
import { softDeletion, retractRunWorkFlow } from "@/api/taskapi/management";

import { formatNumber } from "@/api/DesignForm/utils";

//引入组件
import FormPageCont from "@/components/DesignForm/tableListPage/formPageCont.vue";
import TableFlow from "@/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue";
import TimeAxisPage from "@/components/DesignForm/app/timeAxis.vue";
import CardPage from "@/components/DesignForm/app/cardPage.vue";
import GanttPageIng from "@/components/DesignForm/app/gannttPage.vue";
import MapPage from "@/components/DesignForm/app/mapPage.vue";
import CalendarPage from "@/components/DesignForm/app/calendar/calendar1/calendarPage.vue";
import SearchSelect from "@/components/DesignForm/app/calendar/selectSearch.vue";
import AKSelect from "@/components/DesignForm/public/form/select.vue";

const props = withDefaults(
  defineProps<{
    data: FormPageList;
    searchData?: attrButton[];
    config: FormPageConfig;
    formId?: string;
    beforeRequest?: (params: any, rout: any) => any;
    afterResponse?: (result: any) => any | string;
    beforeDelete?: (params: any, route: any) => any;
    showPage?: boolean;
    requestUrl?: string; // 请求的api
    deleteUrl?: string; // 删除的api
    dict?: { [key: string | number]: string | number };
    fixedBottomScroll?: boolean;
    query?: { [key: string]: any }; // 一些附加的请求参数
    autoLoad?: boolean; // 初始时自动请求加载数据
    delKey?: string; // 删除标识
    lookPageIsShow?: boolean;
    versionid?: string;
    signCode?: string;
    pickAppMenu?: any;
    versiontitle?: string;
    viewPage?: viewPageType;
  }>(),
  {
    showPage: true,
    data: () => {
      return { columns: [], controlBtn: [], operateBtn: [], config: {} };
    },
    searchData: () => {
      return [];
    },
    config: () => {
      return {};
    },
    dict: () => {
      return {};
    },
    formId: () => {
      return "";
    },
    versionid: () => {
      return "";
    },
    signCode: () => {
      return "";
    },
    versiontitle: () => {
      return "";
    },
    fixedBottomScroll: true,
    autoLoad: true,
    delKey: "id",
    query: () => {
      return {};
    },
    lookPageIsShow: () => {
      return false;
    },
    viewPage: () => {
      return [];
    },
  }
);
const emits = defineEmits<{
  (e: "selectionChange", row: any): void;
  (e: "btnClick", btn: any, row?: any): void; // 列表上面及表格列表里添加删除按钮事件
}>();
const loadData = ref(false);
const operState = ref<number>(1); //操作状态	1：新增；2：重新发起；3：申请修改；4：提交审批;5:普通表单修改
const idList = ref<string[]>([]);
const designStore = useDesignFormStore();
const route = useRoute();
const router = useRouter();
const tableDataList = ref([]); // 表格行数据
const currentAsfTableDataList = ref([]); //当前点击的关联表单数据
const openTaskDrawer = ref(false); //新增数据

const state = reactive({
  loading: false,
  currentPage: 1,
  pageSize: props.config?.pageSize || 2,
  total: 0,
  selectionChecked: [],
  dict: {}, // 接口返回的
  searchFormDown: false,
  treeValue: {}, // 侧栏树选中的值
  tableScrollMargin: 0,
  columnsCheck: designStore.getColumnsCheck(route.path),
  currentNodeKey: "",
});
/**
@ 作者: 秦东
@ 时间: 2024-03-28 16:03:12
@ 功能: 判断类型
*/
const unitIsShow = (val: tableButton, unitName: string) => {
  // val.pattern
  switch (val.fieldClass) {
    case "id": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "masters_key": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "creater": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "creater_time": //自定义表单保留字
      return timeUnit.includes(unitName);
      break;
    case "edit_time": //自定义表单保留字
      return timeUnit.includes(unitName);
      break;
    case "flow_id": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "baidumap": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "input": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "radio": //自定义表单保留字
      return choiceUnit.includes(unitName);
      break;
    case "switch": //自定义表单保留字
      return switchUnit.includes(unitName);
      break;
    case "orgCentent": //自定义表单保留字
      return orgUnit.includes(unitName);
      break;
    case "varchar": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "checkbox":
      return checkboxUnit.includes(unitName);
      break;
    case "deptOrg":
      return orgDeptUnit.includes(unitName);
      break;
    default:
      if (val.fieldClass != "datePicker" && val.fieldClass != "timePicker") {
        return inputUnit.includes(unitName);
      }

      break;
  }
  return false;
};

/**
@ 作者: 秦东
@ 时间: 2024-03-28 13:17:46
@ 功能: 重置表单
*/
const ruleSearchForm = ref();
const resetFields = (formEl: FormInstance | undefined) => {
  // formEl.resetFields()
  // console.log("formEl",formEl,formEl.resetFields())
  // if (!formEl) return
  // formEl.resetFields()
  if (props.searchData && props.searchData.length > 0) {
    props.searchData.forEach((item: any) => {
      item.value = "";
    });
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-04-01 11:36:07
@ 功能: 功能按钮动作
*/
const setUpClick = (val: string, id: string) => {
  // console.log("功能按钮动作",val,"----id----->",props.versionid,"-----formId---->",props.versiontitle)
  if (val.key == "newAdd") {
    drawerWith.value = container.value?.clientWidth;
    openTaskDrawer.value = true;
  } else {
    if (idList.value.length > 0) {
      ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let sendData = {
          id: idList.value,
          isTrue: 2,
        };
        softDeletion(sendData).then((data) => {
          // console.log('cancel!',data)
          ElNotification({
            title: "温馨提示！",
            message: data.mag,
            type: "success",
          });
          getPageData();
        });
      });
    } else {
      ElMessage.error("你还未选中要删除的项目！");
    }
  }
};

/**
@ 作者: 秦东
@ 时间: 2024-04-01 13:30:06
@ 功能: 表格选择操作
*/
const selectionChange = (row: any) => {
  state.selectionChecked = row;
  emits("selectionChange", row);
  // console.log('selectionChange', row)
  idList.value.length = 0;
  // console.log('idList.value-1-->', idList.value)
  if (row && row.length > 0) {
    row.forEach((item: any) => {
      // console.log('item', item.masters_key)
      idList.value.push(item.masters_key.toString());
    });
  }
  // console.log('idList.value--->', idList.value)
};
/**
@ 作者: 秦东
@ 时间: 2024-04-01 13:31:37
@ 功能: 获取表格头内容
*/
const columnsFilter = computed(() => {
  console.log("props.data判断是否有标题", props.data);
  if (!state.columnsCheck?.length) {
    // console.log("props.data判断是否有标题",props.data)
    return props.data.columns;
  } else {
    // console.log("props.data.columns判断是否有标题",props.data)
    return props.data.columns.filter((item: any) => {
      return state.columnsCheck.includes(item.prop || item.type);
    });
  }
  console.log("获取表格头内容", props.data.columns);
});
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:14:36
@ 功能: 翻页操作
*/
const handleSizeChange = (page: number) => {
  // console.log("翻页操作",page)
  state.pageSize = page;
  getListData(1);
};
const handleCurrentChange = (page: number) => {
  getListData(page);
};

/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:15:16
@ 功能: 获取数据
*/
// 筛选查询列表数据
const getListData = (page?: number) => {
  if (page) {
    state.currentPage = page;
  }
  getPageData();
};
watch(
  () => props.lookPageIsShow,
  (val: boolean) => {
    if (val && props.formId != "") {
      getPageData();
    }
  }
);
watch(
  () => props.formId,
  (val: any) => {
    getPageData();
  },
  {
    deep: true,
  }
);

const timeAxisRef = ref(null);
const calendarPageRef = ref(null);
const cardPageRef = ref(null);
const searchSend = reactive({
  formId: props.formId,
  page: state.currentPage,
  pagesize: state.pageSize,
  searchData: json2string(props.searchData),
  viewClass: {},
});
let asfDetails = [];
let asfQueryParams: any[] = [];
/**
@ 作者: 秦东
@ 时间: 2024-04-01 15:51:32
@ 功能: 获取数据
*/
const getPageData = () => {
  let sendData = {
    formId: props.formId,
    page: state.currentPage,
    pagesize: state.pageSize,
    searchData: json2string(props.searchData),
  };
  // console.log("获取列表详细信息",sendData)

  switch (viewType.value) {
    case 2:
      nextTick(() => {
        console.log("获取列表详细信息-------555---------->", calendarPageRef.value);
        calendarPageRef.value.calendarSearchData(sendData);
      });
      // calendarPageRef.value.calendarSearchData()
      break;
    case 3:
      nextTick(() => {
        console.log("获取列表详细信息-------222---------->", timeAxisRef.value);
        timeAxisRef.value.searchTimeList(sendData, 1);
      });

      break;
    case 4:
      break;
    case 5:
      break;
    case 6:
      nextTick(() => {
        cardPageRef.value.getCardList(sendData);
      });
      break;
    default:
      state.loading = true;
      gainFormPageListCont(sendData)
        .then((data) => {
          // console.log("获取列表详细信息----------------->",data)

          //liwenxuan 关联表单数据获取 start
          let dataList = data;
          //console.log(dataList)
          asfDetails = props.data.columns.filter((item: any) => {
            return item.fieldClass == "associatedForms";
          });

          if (asfDetails.length > 0 && data.data.list != null) {
            //console.log(data.data.list)
            //拼装参数,asf值对象数组
            asfQueryParams = [];
            for (let j = 0; j < asfDetails.length; j++) {
              let asfQueryParamsItem: any = {};
              //console.log(asfDetails[j])
              asfQueryParamsItem.formId = asfDetails[j].control.formid;
              asfQueryParamsItem.field = asfDetails[j].field;

              let asfToSelectIds = [];
              // console.log(data.data.list)
              for (let i = 0; i < data.data.list.length; i++) {
                let asfMasterAndAsfId: any = {};
                asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field];
                asfMasterAndAsfId.asfMasterId = data.data.list[i].id;

                asfToSelectIds.push(asfMasterAndAsfId);
              }
              asfQueryParamsItem.asfToSelectIds = asfToSelectIds;
              asfQueryParams.push(asfQueryParamsItem);
            }
            let queryCount = 0;
            for (let i = 0; i < asfQueryParams[0].asfToSelectIds.length; i++) {
              if (asfQueryParams[0].asfToSelectIds[i].asfId != "") {
                queryCount++;
              }
            }
            //console.log(asfQueryParams)
            if (queryCount > 0) {
              getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
                //console.log(data)
                for (let i = 0; i < dataList.data.list.length; i++) {
                  //console.log(dataList.data.list[i])
                  for (let j = 0; j < data.length; j++) {
                    //console.log(data[j])
                    for (let n = 0; n < data[j].list.length; n++) {
                      if (dataList.data.list[i].id == data[j].list[n].asfMasterId) {
                        dataList.data.list[i][data[j].field] = data[j].list[n].label;
                      }
                      //console.log(data[j].list[n])
                    }
                  }
                }
                tableDataList.value = dataList.data.list;
              });
            } else {
              tableDataList.value = data.data.list;
            }
          } else {
            tableDataList.value = data.data.list;
          }

          //tableDataList.value = data.data.list
          //liwenxuan 关联表单数据获取 end
          state.total = data.data.total;
          state.loading = false;
        })
        .finally(() => {
          state.loading = false;
        });
  }
};

const asfGetPageData = (asfFormId: any, asfToSelectMastersKey: any) => {
  let searchData = [
    {
      id: "id",
      label: "Id",
      field: "id",
      type: "bigint(20)",
      attribute: "",
      pattern: "bigint",
      fieldClass: "id",
      activeValue: "",
      inactiveValue: "",
      config: { optionsType: 0 },
      control: { optionsValue3Formid: "", optionsValue3Field: "" },
      options: [],
      isSearch: true,
      value: asfToSelectMastersKey,
    },
  ];
  //state.loading = true;
  let sendData = {
    formId: asfFormId,
    page: 1,
    pagesize: 1,
    searchData: json2string(searchData),
  };
  //console.log("asf获取列表详细信息",sendData)
  gainFormPageListCont(sendData)
    .then((data) => {
      //console.log("获取列表详细信息----------------->",data)
      //liwenxuan 关联表单数据获取 start

      let dataList = data;
      //console.log(dataList)
      asfDetails = props.data.columns.filter((item: any) => {
        return item.fieldClass == "associatedForms";
      });

      if (asfDetails.length > 0) {
        //console.log(data.data.list)
        //拼装参数,asf值对象数组
        let asfAsfQueryParams = [];
        for (let j = 0; j < asfDetails.length; j++) {
          let asfQueryParamsItem: any = {};
          //console.log(asfDetails[j])
          asfQueryParamsItem.formId = asfDetails[j].control.formid;
          asfQueryParamsItem.field = asfDetails[j].field;

          let asfToSelectIds = [];
          for (let i = 0; i < data.data.list.length; i++) {
            let asfMasterAndAsfId: any = {};
            asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field];
            asfMasterAndAsfId.asfMasterId = data.data.list[i].id;

            asfToSelectIds.push(asfMasterAndAsfId);
          }
          asfQueryParamsItem.asfToSelectIds = asfToSelectIds;
          asfAsfQueryParams.push(asfQueryParamsItem);
        }
        let queryCount = 0;
        for (let i = 0; i < asfAsfQueryParams[0].asfToSelectIds.length; i++) {
          if (
            asfAsfQueryParams[0].asfToSelectIds[i].asfId != undefined &&
            asfAsfQueryParams[0].asfToSelectIds[i].asfId != ""
          ) {
            queryCount++;
          }
        }

        //console.log(asfAsfQueryParams)
        if (queryCount > 0) {
          getAsfDataTitlesByIds(asfAsfQueryParams).then(({ data }) => {
            //console.log(data)
            for (let i = 0; i < dataList.data.list.length; i++) {
              //console.log(dataList.data.list[i])
              for (let j = 0; j < data.length; j++) {
                //console.log(data[j])
                for (let n = 0; n < data[j].list.length; n++) {
                  if (dataList.data.list[i].id == data[j].list[n].asfMasterId) {
                    dataList.data.list[i][data[j].field] = data[j].list[n].label;
                  }
                  //console.log(data[j].list[n])
                }
              }
            }
            currentAsfTableDataList.value = dataList.data.list;
          });
        } else {
          currentAsfTableDataList.value = data.data.list;
        }
      } else {
        currentAsfTableDataList.value = data.data.list;
      }
      /* //liwenxuan 关联表单数据获取 end
			state.total = data.data.total
			state.loading = false; */
    })
    .finally(() => {
      /* state.loading = false; */

      //显示关联表单本条详情
      tablePageClass.value = 4;
      drawerWith.value = container.value?.clientWidth;
      asflookPageInfoIsShow.value = true;
    });
};

//liwenxuan 关联表单数据获取 start
function getAsfDataTitlesByIds(asfQueryParams: any[]) {
  return request({
    url: "/javasys/lowCode/AssociatedForms/getAsfDataTitlesByIds",
    method: "post",
    data: asfQueryParams,
  });
}
//liwenxuan 关联表单数据获取 end

//liwenxuan 关联表单详情弹窗 start
function showAsfDetailDialog(item: any, scope: any, asfQueryParams: any) {
  let val = scope.row;
  //asfShowDetailsFlag.value= true
  /* console.log("item----------------->",item)
	console.log("scope----------------->",scope)
	console.log("asfQueryParams----------------->",asfQueryParams)
	console.log("val----------------->",val) */
  let asfFormId = item.control.formid; //关联表单在customer_form中的id
  //alert("asfFormId:"+asfFormId)
  let scopeColumnProperty = scope.column.property; //exp:associatedForms1720570283525

  let asfQueryParamsNAsfToSelectIdsNAsfMasterId = val.id;
  //alert(asfQueryParamsNAsfToSelectIdsNAsfMasterId)
  let asfToSelectMastersKey = "";
  for (let i = 0; i < asfQueryParams.length; i++) {
    if (asfQueryParams[i].field == scopeColumnProperty) {
      for (let j = 0; j < asfQueryParams[i].asfToSelectIds.length; j++) {
        if (
          asfQueryParams[i].asfToSelectIds[j].asfMasterId ==
          asfQueryParamsNAsfToSelectIdsNAsfMasterId
        ) {
          asfToSelectMastersKey = asfQueryParams[i].asfToSelectIds[j].asfId;
        }
      }
    }
  }
  //alert("asfToSelectMastersKey:"+asfToSelectMastersKey)

  asfGetPageData(asfFormId, asfToSelectMastersKey);
}
//liwenxuan 关联表单详情弹窗 end

onMounted(() => {
  // console.log("视图数据提交---》",props.viewPage);
  getPageData();
  nextTick(() => {
    drawerWith.value = container.value?.clientWidth;
  });
});
/**
@ 作者: 秦东
@ 时间: 2024-04-02 13:59:21
@ 功能: 判断单选值
*/
const judjeRadio = (val: any, options: any[]) => {
  // console.log("判断单选值",val, options)
  if (options && options.length > 0) {
    options.forEach((item) => {
      if (item.value == val) {
        // console.log("判断单选值",val, item.value,item.label)
        val = item.label;
      }
    });
  }
  if (val == 0 || val == "0") {
    val = "";
  }
  return val;
};

/**
@ 作者: 秦东
@ 时间: 2024-11-29 13:46:36
@ 功能: 获取级联选择值
*/
const judjeCascader = (val: any[], options: any[]) => {
  if (val.length < 0) return "";
  let valAry = stringToObj(val);
  console.log("获取级联选择值", stringToObj(val), val.length, options);
  if (!Array.isArray(valAry)) return "";
  let title = "";
  valAry.forEach((item: any) => {
    // console.log("item", item);

    console.log(item + "=============:", item, diGuiJilian(item, options));
    if (title == "") {
      title = title + diGuiJilian(item, options);
    } else {
      title = title + " / " + diGuiJilian(item, options);
    }
  });
  return title;
};
/**
@ 作者: 秦东
@ 时间: 2024-11-29 13:57:04
@ 功能: 递归查询数据
*/
const diGuiJilian = (val: any, options: any[]) => {
  if (!Array.isArray(options)) return "";
  let dataVal = "";
  options.forEach((item: any) => {
    if (item.value == val) {
      // console.log(val + "=======递归查询数据======:", item.value, item.label);
      dataVal = item.label;
      // return dataVal;
      // return item.label;
    }

    if (item.children && item.children.length > 0) {
      // console.log(
      //   val + "=======递归查询数据====1==:",
      //   item.children,
      //   item.children.length
      // );
      let gdVal = diGuiJilian(val, item.children);
      if (gdVal != "") {
        dataVal = gdVal;
      }
    }
  });
  return dataVal;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-02 14:49:40
@ 功能: 判断开关类型
*/
const judjeSwitch = (val: any, yesVal: any) => {
  // console.log("判断开关类型-1-->",val)
  // console.log("判断开关类型-2-->",yesVal)
  if (val == yesVal) return true;
  return false;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:13:56
@ 功能: 列表信息删除信息
*/
const confirmEvent = (val: any) => {
  let sendData = {
    id: [val.masters_key],
    isTrue: 2,
  };
  softDeletion(sendData).then((data) => {
    // console.log('cancel!',data)
    ElNotification({
      title: "系统提示！",
      message: data.mag ? data.mag : "删除成功",
      type: "success",
    });
    getPageData();
  });
};
const cancelEvent = (val: any) => {
  //   console.log('cancel!',val)
};
const container = ref(); //实例化内容容器
const drawerWith = ref(); //编辑表单时抽屉宽度
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:24:06
@ 功能: 查看详细内容
*/
const tablePageClass = ref(1);
const lookPageInfoIsShow = ref(false);
const asflookPageInfoIsShow = ref(false);
const pageInfoCont = ref<any>();

const lookPageInfo = (val: any) => {
  tablePageClass.value = 4;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-05 11:29:50
@ 功能: 编辑表单内容
*/

const editInfo = (val: any) => {
  // console.log('修改数据!',val)
  operState.value = 5;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-10 15:32:55
@ 功能: 提交审批
*/
const submitApproval = (val: any) => {
  operState.value = 4;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 09:36:59
@ 功能: 撤回申请
*/
const withdrawApplication = (val: any) => {
  // console.log("撤回申请", val);
  let sendInfo = {
    // id: val.masters_key,
    id: val.runFlowId,
  };
  retractRunWorkFlow(sendInfo).then((data) => {
    ElMessage({
      message: "撤回成功！",
      type: "success",
    });
    getPageData();
  });
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 11:17:42
@ 功能: 重新提交申请
*/
const afreshSendFlow = (val: any) => {
  operState.value = 2;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 11:19:21
@ 功能: 申请修改数据
*/
const editFormSendFlow = (val: any) => {
  operState.value = 3;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
const viewType = ref(1);
const viewLayout = ref<any>();
/**
@ 作者: 秦东
@ 时间: 2024-07-08 09:39:52
@ 功能: 切换视图展示方式
*/
const tabsView = (val: any, types: number) => {
  viewType.value = types;
  val.isClick = true;
  viewLayout.value = val;
  // console.log("切换视图展示方式",val)
  switch (types) {
    case 2:
      props.viewPage.list.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.card.isClick = false;
      break;
    case 3:
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.card.isClick = false;
      getPageData();
      break;
    case 4:
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.card.isClick = false;
      break;
    case 5:
      props.viewPage.card.isClick = false;
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      break;
    case 6:
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      break;
    default:
      props.viewPage.date.isClick = false;
      props.viewPage.card.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      break;
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-07-25 08:30:49
@ 功能: 判断是否有标题
*/
const writeListTitle = (val: any, viewConfig: any) => {
  // console.log("判断是否有标题--1-->",val)
  // console.log("判断是否有标题--2-->",viewConfig)
  var titleAry = [];
  if (viewConfig.form && viewConfig.form.title) {
    if (viewConfig.form.title.length > 0) {
      viewConfig.form.title.forEach((item, index) => {
        // console.log("判断是否有标题--"+index+"-->",val[item])
        if (val[item]) {
          titleAry.push(val[item]);
        }
      });
    }
  }
  if (titleAry.length > 0) {
    return titleAry.join();
  } else {
    let firstWord = "";
    let powerAry = [
      "id",
      "creater_time",
      "edit_time",
      "masters_key",
      "states",
      "flow_id",
    ];
    for (let key in val) {
      if (val.hasOwnProperty(key)) {
        if (!powerAry.includes(key)) {
          if (val[key] != "" && val[key] != null) {
            firstWord = val[key];
          }
        }
      }
    }
    return firstWord;
  }
};

/**
@ 作者: 秦东
@ 时间: 2024-07-25 10:27:21
@ 功能: 判断是否有标题
*/
const judgeListTitle = (val: any, viewConfig: any) => {
  // console.log("判断是否有标题--3-->",val)
  // console.log("判断是否有标题--4-->",viewConfig)
  if (val && val.fieldClass == "_lableTitle") {
    if (viewConfig.form && viewConfig.form.title) {
      if (viewConfig.form.title.length > 0) {
        return true;
      }
    }
  }
  return false;
};
// 选择数据转换，默认尝试转数字
const transformOption = (val: string | number, type?: string) => {
  return formatNumber(val);
};
</script>
<template>
  <div ref="container" v-loading="state.loading" class="table-list-comm">
    <el-row class="rowBox">
      <el-col :span="24">
        <el-form v-if="config.searchIsShow" ref="ruleSearchForm" class="seacherForm">
          <template v-for="(item, index) in searchData" :key="index">
            <div class="group group-input">
              <el-form-item :label="item.label" class="form_cont">
                <el-input
                  v-model="item.value"
                  :placeholder="'请输入' + item.label"
                  clearable
                  v-if="unitIsShow(item, 'input')"
                />
                <el-date-picker
                  v-model="item.value"
                  type="datetime"
                  :placeholder="'请选择' + item.label"
                  :shortcuts="shortcuts"
                  v-if="unitIsShow(item, 'time')"
                />
                <SearchSelect
                  v-if="unitIsShow(item, 'radio')"
                  :data="item"
                  :disabled="false"
                  :transform-option="transformOption"
                  v-model:model-value="item.value"
                />
                <el-select
                  v-model="item.value"
                  clearable
                  :placeholder="'请选择' + item.label"
                  v-if="unitIsShow(item, 'switch')"
                >
                  <el-option
                    :key="item.activeValue"
                    label="是"
                    :value="item.activeValue"
                  />
                  <el-option
                    :key="item.inactiveValue"
                    label="否"
                    :value="item.inactiveValue"
                  />
                </el-select>
                <SearchSelect
                  v-if="unitIsShow(item, 'checkbox')"
                  :data="item"
                  :disabled="false"
                  :is-checkbox="true"
                  :transform-option="transformOption"
                  v-model:model-value="item.value"
                />
                <el-date-picker
                  v-if="item.fieldClass == 'datePicker'"
                  v-model="item.value"
                  :type="item.auxiliary"
                  :placeholder="'请选择' + item.label"
                  value-format="x"
                />
                <el-time-picker
                  v-if="item.fieldClass == 'timePicker'"
                  v-model="item.value"
                  arrow-control
                  :placeholder="'请选择' + item.label"
                  value-format="x"
                />
                <el-select
                  v-model="item.value"
                  clearable
                  :placeholder="'请选择' + item.label"
                  v-if="unitIsShow(item, 'org')"
                >
                </el-select>
                <DeptOrgSearch
                  v-if="unitIsShow(item, 'deptOrg')"
                  v-model:model-value="item.value"
                />
              </el-form-item>

              <!-- <DeptOrgPage
                v-if="item.fieldClass === 'deptOrg' && type != 4"
                :data="data"
                :form-props="formProps"
                :tablekey="props.tablekey"
              /> -->
            </div>
          </template>
          <div class="group group-btn" v-if="searchData.length">
            <el-button type="primary" @click="getPageData"
              ><el-icon><Search /></el-icon>查询</el-button
            >
            <el-button @click="resetFields(ruleSearchForm)"
              ><el-icon><Refresh /></el-icon>重置</el-button
            >
          </div>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div class="operateButArea">
          <div class="operatLeft">
            <el-text v-if="data.controlBtn.length === 0" class="mx-1 tipBox" type="info"
              >操作按钮区域</el-text
            >
            <el-button
              v-for="item in data.controlBtn"
              v-bind="item"
              :key="item.type"
              @click="setUpClick(item)"
            >
              {{ item.label }}
            </el-button>
          </div>
          <div>
            <el-button-group class="ml-4">
              <el-tooltip
                v-if="config.searchFormIsShow"
                class="box-item"
                effect="dark"
                content="折叠查询表单"
                placement="bottom"
              >
                <el-button
                  size="small"
                  @click="config.searchIsShow = !config.searchIsShow"
                  class="fa fa-search"
                />
              </el-tooltip>
              <el-tooltip
                v-if="props.viewPage.list.status"
                class="box-item"
                effect="dark"
                content="列表视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-table"
                  :color="props.viewPage.list.isClick ? '#a0cfff' : ''"
                  @click="tabsView(props.viewPage.list, 1)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="props.viewPage.card && props.viewPage.card.status"
                class="box-item"
                effect="dark"
                content="卡片视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-id-card-o"
                  :color="
                    props.viewPage.card && props.viewPage.card.isClick ? '#a0cfff' : ''
                  "
                  @click="tabsView(props.viewPage.card, 6)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="props.viewPage.date.status"
                class="box-item"
                effect="dark"
                content="日历视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-calendar"
                  :color="props.viewPage.date.isClick ? '#a0cfff' : ''"
                  @click="tabsView(props.viewPage.date, 2)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="props.viewPage.time.status"
                class="box-item"
                effect="dark"
                content="时间轴"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-clock-o"
                  :color="props.viewPage.time.isClick ? '#a0cfff' : ''"
                  @click="tabsView(props.viewPage.time, 3)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="props.viewPage.gantt.status"
                class="box-item"
                effect="dark"
                content="甘特图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-bar-chart"
                  :color="props.viewPage.gantt.isClick ? '#a0cfff' : ''"
                  @click="tabsView(props.viewPage.gantt, 4)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="props.viewPage.map.status"
                class="box-item"
                effect="dark"
                content="地图视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-map-signs"
                  :color="props.viewPage.map.isClick ? '#a0cfff' : ''"
                  @click="tabsView(props.viewPage.map, 5)"
                />
              </el-tooltip>
            </el-button-group>
          </div>
        </div>
      </el-col>

      <el-col v-if="viewType == 1" :span="24">
        <el-table
          v-bind="data.tableProps"
          ref="table"
          :data="tableDataList"
          @selection-change="selectionChange"
          table-layout="fixed"
          v-loading="state.loading"
        >
          <template v-for="item in columnsFilter" :key="item.id || item.label">
            <el-table-column
              v-if="['-'].includes(item.fieldClass)"
              :type="item.type"
              :prop="item.field"
              :label="item.label"
              config=""
              width="60"
              fixed
            >
              <template v-if="item.help" #header="scope">
                {{ scope.column.label }}
                <tooltip :content="item.help" />
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.fieldClass == '__control'"
              :prop="item.field"
              :label="item.label"
              config=""
              width="200"
              align="center"
              fixed="right"
            >
              <template #default="scope">
                <el-button-group>
                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 1 && scope.row.taskStatus == 1"
                    class="box-item"
                    effect="dark"
                    content="提交审批"
                    placement="top-end"
                  >
                    <el-button
                      type="success"
                      size="small"
                      class="fa fa-send-o"
                      @click="submitApproval(scope.row)"
                    />
                  </el-tooltip>

                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 1 && scope.row.taskStatus == 2"
                    class="box-item"
                    effect="dark"
                    content="重新申请"
                    placement="top-end"
                  >
                    <el-button
                      type="warning"
                      size="small"
                      class="fa fa-retweet"
                      @click="afreshSendFlow(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="查看详情"
                    placement="top-end"
                  >
                    <el-button
                      @click="lookPageInfo(scope.row)"
                      type="primary"
                      size="small"
                      class="fa fa-eye"
                    />
                  </el-tooltip>
                  <el-popconfirm
                    v-if="scope.row.flowIsOpen == 1 && scope.row.isRetract"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="QuestionFilled"
                    icon-color="#F56C6C"
                    title="您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！"
                    @confirm="withdrawApplication(scope.row)"
                    @cancel="cancelEvent(scope.row)"
                  >
                    <template #reference>
                      <el-button size="small" class="fa fa-reply-all" />
                    </template>
                  </el-popconfirm>
                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 2"
                    class="box-item"
                    effect="dark"
                    content="编辑"
                    placement="top-end"
                  >
                    <el-button
                      @click="editInfo(scope.row)"
                      type="info"
                      size="small"
                      class="fa fa-edit"
                    />
                  </el-tooltip>
                  <el-popconfirm
                    v-if="scope.row.taskStatus == 2 || scope.row.taskStatus == 1"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="QuestionFilled"
                    icon-color="#F56C6C"
                    title="您确定要删除此条记录?一经删除！数据将不可恢复！"
                    @confirm="confirmEvent(scope.row)"
                    @cancel="cancelEvent(scope.row)"
                  >
                    <template #reference>
                      <el-button type="danger" size="small" class="fa fa-trash-o" />
                    </template>
                  </el-popconfirm>

                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 1 && scope.row.taskStatus == 4"
                    class="box-item"
                    effect="dark"
                    content="申请修改"
                    placement="top-end"
                  >
                    <el-button
                      type="info"
                      size="small"
                      class="fa fa-edit"
                      @click="editFormSendFlow(scope.row)"
                    />
                  </el-tooltip>
                </el-button-group>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.fieldClass == '_lableTitle'"
              label="标题"
              config=""
              min-width="320"
            >
              <template #default="scope">
                {{ writeListTitle(scope.row, viewPage.list) }}
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :prop="item.field"
              :label="item.label"
              config=""
              min-width="220"
            >
              <template v-if="item.help" #header="scope">
                {{ scope.column.label }}
                <tooltip :content="item.help" />
              </template>
              <template v-if="item.fieldClass == 'deptOrg'" #default="scope">
                <!-- {{scope.row[scope.column.property]}}{{item}} -->
                {{ scope.row[scope.column.property] }}
              </template>
              <template v-if="item.fieldClass == 'cascader'" #default="scope">
                {{ judjeCascader(scope.row[scope.column.property], item.options) }}
              </template>
              <template v-if="item.fieldClass == 'radio'" #default="scope">
                <!-- {{scope.row[scope.column.property]}}{{item}} -->
                {{ judjeRadio(scope.row[scope.column.property], item.options) }}
              </template>
              <template v-if="item.fieldClass == 'upload'" #default="scope">
                <div class="demo-image__error">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row[scope.column.property]"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </template>
              <template v-if="item.fieldClass == 'switch'" #default="scope">
                <el-tag
                  v-if="judjeSwitch(scope.row[scope.column.property], item.activeValue)"
                  type="success"
                  effect="light"
                >
                  启用
                </el-tag>
                <el-tag v-else type="danger" effect="light"> 禁用 </el-tag>
              </template>
              <template v-if="item.fieldClass == 'baidumap'" #default="scope">
                {{ scope.row[scope.column.property] }}
              </template>
              <template v-if="item.fieldClass == 'associatedForms'" #default="scope">
                <el-link
                  key="primary"
                  type="primary"
                  @click="showAsfDetailDialog(item, scope, asfQueryParams)"
                >
                  {{ scope.row[scope.column.property] }}
                </el-link>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-col>
      <el-col v-if="viewType == 1 && state.total > 0" :span="24">
        <div class="pageBox">
          <el-pagination
            v-model:currentPage="state.currentPage"
            v-model:page-size="state.pageSize"
            :page-sizes="[20, 30, 40, 50] as any"
            :total="state.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
      <el-col v-if="viewType == 2" :span="24">
        <CalendarPage
          ref="calendarPageRef"
          :search-send="searchSend"
          :body-hight="265"
          :drawer-with="drawerWith"
          :view-setup="viewPage.date"
        />
      </el-col>
      <el-col v-if="viewType == 3" :span="24">
        <TimeAxisPage
          ref="timeAxisRef"
          :data="tableDataList"
          :view-layout="viewLayout"
          :columns-filter="columnsFilter"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.time"
        />
      </el-col>
      <el-col v-if="viewType == 4" :span="24">
        <GanttPageIng
          ref="ganttPageRef"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.gantt"
        />
      </el-col>
      <el-col v-if="viewType == 5" :span="24">
        <MapPage
          ref="mapPageRef"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.map"
        />
      </el-col>
      <el-col v-if="viewType == 6" :span="24">
        <CardPage
          ref="cardPageRef"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.card"
          :columns-filter="columnsFilter"
        />
      </el-col>
      <el-col :span="24" style="display: none">
        <el-button-group>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="提交审批"
            placement="top-end"
          >
            <el-button type="success" size="small" class="fa fa-send-o" />
          </el-tooltip>

          <el-tooltip
            class="box-item"
            effect="dark"
            content="重新申请"
            placement="top-end"
          >
            <el-button type="warning" size="small" class="fa fa-retweet" />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="查看详情"
            placement="top-end"
          >
            <el-button type="primary" size="small" class="fa fa-eye" />
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="撤回" placement="top-end">
            <el-button size="small" class="fa fa-reply-all" />
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="删除" placement="top-end">
            <el-button type="danger" size="small" class="fa fa-trash-o" />
          </el-tooltip>

          <el-tooltip
            class="box-item"
            effect="dark"
            content="申请修改"
            placement="top-end"
          >
            <el-button type="info" size="small" class="fa fa-edit" />
          </el-tooltip>
        </el-button-group>
      </el-col>
    </el-row>
    <FormPageCont
      v-model:is-show="lookPageInfoIsShow"
      :drawer-with="drawerWith"
      :page-info="pageInfoCont"
      :table-page-class="tablePageClass"
      :oper-state="operState"
      @getPageData="getPageData"
    />
    <FormPageCont 
      v-model:is-show="asflookPageInfoIsShow" 
      :drawer-with="drawerWith" 
      :page-info="currentAsfTableDataList[0]" 
      :table-page-class="tablePageClass" 
      :oper-state="operState" 
      @getPageData="getPageData" 
    />
    <TableFlow
      v-model:isopen="openTaskDrawer"
      :versionid="props.versionid"
      :versiontitle="props.versiontitle"
      :drawerwith="drawerWith"
      :pick-app-menu="pickAppMenu"
      @searchquery="getListData"
    />
  </div>
</template>
<style lang="scss" scoped>
.rowBox {
  width: 100%;
}
.table-list-comm {
  padding: 0px 15px 5px 15px;
}
.seacherForm {
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pageBox {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.operateButArea {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
  .operatLeft {
    padding-bottom: 2px;
  }
}
.group {
  width: auto;
  margin-right: 10px;
}
.demo-image__error .block {
  padding: 0px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
