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 {
  SaveConfigureType,
  SaveConfigureCode,
  SaveConfigureCodeMx,
  DeleteConfigureType,
  DeleteConfigureCode,
  DeleteConfigureCodeMx
} from "@/api/modules/basicinfo";
import { ElMessage, ElMessageBox } from "element-plus";
interface defaultState {
  /**
   * @description 单据当前状态
   */
  orderStatus: string;
  /**
   * @description 列表Ref
   */
  VxeTableLeftRef: any;
  /**
   * @description 列表Ref
   */
  VxeTableMidRef: any;
  /**
   * @description 列表Ref
   */
  VxeTableRightRef: any;
  /**
   * @description 详情页Ref
   */
  LjDetailLeftRef: any;
  /**
   * @description 详情页Ref
   */
  LjDetailMidRef: any;
  /**
   * @description 详情页Ref
   */
  LjDetailRightRef: any;
  /**
   * @description 详情页明细表格Ref
   */
  VxeTableMxRef: any;
}

const state = reactive<defaultState>({
  orderStatus: "",
  VxeTableLeftRef: null,
  VxeTableMidRef: null,
  VxeTableRightRef: null,
  LjDetailLeftRef: null,
  LjDetailMidRef: null,
  LjDetailRightRef: null,
  VxeTableMxRef: null
});
/**
 * @description 表格多选数据操作
 * @param {String} rowKey 当表格可以多选时，所指定的 id
 * */
export const useHooks = (t?: any) => {
  // 表格配置项
  const columns_left: ColumnProps<any>[] = [
    { type: "checkbox", width: 40, fixed: "left" },
    {
      field: "contfigtypename",
      title: "类型名称",
      basicinfo: {
        el: "input",
        span: 4,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "flag",
      title: "审核",
      basicinfo: {
        visible: false
      }
    },
    {
      field: "auditemp",
      title: "审核人",
      basicinfo: {
        visible: false
      }
    },
    {
      field: "auditdate",
      title: "审核时间",
      basicinfo: {
        visible: false
      }
    }
  ];
  const columns_mid: ColumnProps<any>[] = [
    { type: "checkbox", width: 40, fixed: "left" },
    {
      field: "pzcode",
      title: "配置项编号",
      width: 100,
      basicinfo: {
        el: "input",
        span: 4,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "name",
      title: "配置项名称",
      basicinfo: {
        el: "input",
        span: 4,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "inputtype",
      title: "录入类型",
      width: 100,
      basicinfo: {
        el: "select",
        span: 3,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "ifnum",
      title: "数值",
      basicinfo: {
        editable: ALLOW_EDIT_STATE,
        span: 1,
        render: (scope: any) => {
          const { column, searchParam } = scope;

          const _disabled = Number(searchParam.inputtype) === 0;

          return (
            <>
              <el-checkbox v-model={searchParam[column.field]} true-value={1} false-value={0} disabled={_disabled} />
            </>
          );
        }
      }
    },
    {
      field: "ifcross",
      title: "混搭",
      basicinfo: {
        editable: ALLOW_EDIT_STATE,
        span: 1,
        render: (scope: any) => {
          const { column, searchParam } = scope;

          const _disabled = Number(searchParam.inputtype) === 0;

          return (
            <>
              <el-checkbox v-model={searchParam[column.field]} true-value={1} false-value={0} disabled={_disabled} />
            </>
          );
        }
      }
    },
    {
      field: "ifcheck",
      title: "必填",
      basicinfo: {
        editable: ALLOW_EDIT_STATE,
        span: 1,
        render: (scope: any) => {
          const { column, searchParam } = scope;

          const _disabled = Number(searchParam.inputtype) === 0;

          return (
            <>
              <el-checkbox v-model={searchParam[column.field]} true-value={1} false-value={0} disabled={_disabled} />
            </>
          );
        }
      }
    },
    {
      field: "ifuse",
      title: "有效",
      basicinfo: {
        editable: ALLOW_EDIT_STATE,
        span: 1,
        render: (scope: any) => {
          const { column, searchParam } = scope;

          return (
            <>
              <div class="flx-align-center">
                <el-checkbox v-model={searchParam[column.field]} true-value={1} false-value={0} />
              </div>
            </>
          );
        }
      }
    },
    {
      field: "maxnum",
      title: "最大数",
      basicinfo: {
        el: "input",
        span: 4,
        editable: (scope: any) => {
          return Number(scope.searchParam.inputtype) > 0;
        }
      }
    },
    {
      field: "minnum",
      title: "最小数",
      basicinfo: {
        el: "input",
        span: 4,
        editable: (scope: any) => {
          return Number(scope.searchParam.inputtype) > 0;
        }
      }
    },
    {
      field: "pricestr",
      title: "差价公式",
      basicinfo: {
        el: "input",
        span: 4,
        editable: (scope: any) => {
          return Number(scope.searchParam.inputtype) > 0;
        }
      }
    },
    {
      field: "priceratestr",
      title: "差价比例公式",
      basicinfo: {
        el: "input",
        span: 4,
        editable: (scope: any) => {
          return Number(scope.searchParam.inputtype) > 0;
        }
      }
    }
  ];
  const columns_right: ColumnProps<any>[] = [
    { type: "checkbox", width: 40, fixed: "left" },
    {
      field: "pzcodemx",
      title: "明细编号",
      width: 100,
      basicinfo: {
        el: "input",
        span: 4,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "namemx",
      title: "明细名称",
      basicinfo: {
        el: "input",
        span: 4,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "ifuse",
      title: "有效",
      basicinfo: {
        editable: ALLOW_EDIT_STATE,
        span: 1,
        render: (scope: any) => {
          const { column, searchParam } = scope;

          return (
            <>
              <div class="flx-align-center">
                <el-checkbox v-model={searchParam[column.field]} true-value={1} false-value={0} />
              </div>
            </>
          );
        }
      }
    }
  ];

  const getSaveFun = (type: Number) => {
    return type === 2 ? SaveConfigureCodeMx : type === 1 ? SaveConfigureCode : SaveConfigureType;
  };

  const getDelFun = (type: Number) => {
    return type === 2 ? DeleteConfigureCodeMx : type === 1 ? DeleteConfigureCode : DeleteConfigureType;
  };

  const getTableRef = (type: Number) => {
    return type === 2 ? state.VxeTableRightRef : type === 1 ? state.VxeTableMidRef : state.VxeTableLeftRef;
  };

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

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

  return {
    ...toRefs(state),
    columns_left,
    columns_mid,
    columns_right,
    fSave,
    fDelete
  };
};
