import { ref, reactive, computed, toRefs } from "vue";
import { Table } from "@/hooks/interface";
import { ColumnProps } from "@/components/LjVxeTable/interface";
import { ALLOW_EDIT_STATE } from "@/config/index";
import { SaveBedNetArea, DeleteBedNetArea } from "@/api/modules/basicinfo";
import { ElMessage, ElMessageBox } from "element-plus";
import { numCheck } from "@/utils/rules/index";

interface defaultState {
  /**
   * @description 单据当前状态
   */
  orderStatus: string;
  /**
   * @description 列表Ref
   */
  VxeTableRef: any;
  /**
   * @description 详情页Ref
   */
  LjDetailRef: any;
  /**
   * @description 是否有包边
   */
  ifEdge: boolean;
}

const state = reactive<defaultState>({
  orderStatus: "",
  VxeTableRef: null,
  LjDetailRef: null,
  ifEdge: false
});
/**
 * @description 表格多选数据操作
 * @param {String} rowKey 当表格可以多选时，所指定的 id
 * */
export const useHooks = (t?: any) => {
  // 表格配置项
  const columns: ColumnProps<any>[] = [
    { type: "checkbox", width: 80, fixed: "left" },
    {
      field: "areaname",
      title: "分区名称",
      basicinfo: {
        el: "input",
        span: 3,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "area_1",
      title: "一区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_1",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_2",
      title: "二区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_2",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_3",
      title: "三区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_3",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_4",
      title: "四区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_4",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_5",
      title: "五区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_5",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_6",
      title: "六区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_6",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_7",
      title: "七区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_7",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_8",
      title: "八区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_8",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_9",
      title: "九区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_9",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_10",
      title: "十区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_10",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_11",
      title: "十一区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_11",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_12",
      title: "十二区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_12",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_13",
      title: "十三区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_13",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_14",
      title: "十四区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_14",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    },
    {
      field: "area_15",
      title: "十五区",
      basicinfo: {
        el: "input",
        span: 3,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }]
      }
    },
    {
      field: "sponge_15",
      title: "有包边时",
      visible: false,
      basicinfo: {
        el: "input",
        span: 1,
        group: "比例设置",
        ishidden: true,
        editable: ALLOW_EDIT_STATE,
        rules: [{ validator: numCheck, trigger: "blur" }],
        editvisible: (scope: any) => {
          return state.ifEdge;
        }
      }
    }
  ];

  // 保存
  const fSave = (param: any) => {
    return new Promise((resolve, reject) => {
      ElMessageBox.confirm("是否确定要保存吗?", "询问", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
        closeOnClickModal: false
      })
        .then(() => {
          SaveBedNetArea(param).then(() => {
            ElMessage.success("保存成功！");
            state.VxeTableRef?.refresh();
            resolve({});
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "操作取消"
          });
        });
    });
  };

  // 删除
  const fDelete = () => {
    const checkDate = state.VxeTableRef?.element.getCheckboxRecords();
    if (checkDate.length === 0) {
      ElMessage.error("请选择要删除的数据！");
      return;
    }
    const delArr = checkDate.map((item: any) => {
      return { areaid: parseInt(item.areaid) };
    });
    ElMessageBox.confirm("是否确定要删除吗?", "询问", {
      confirmButtonText: "是",
      cancelButtonText: "否",
      type: "warning",
      closeOnClickModal: false
    })
      .then(() => {
        DeleteBedNetArea({ list: delArr }).then(() => {
          ElMessage.success("删除成功！");
          state.VxeTableRef?.refresh();
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "操作取消"
        });
      });
  };

  return {
    ...toRefs(state),
    columns,
    fSave,
    fDelete
  };
};
