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 { SaveBedNetVar, DeleteBedNetVar } from "@/api/modules/basicinfo";
import { ElMessage, ElMessageBox } from "element-plus";
interface defaultState {
  /**
   * @description 单据当前状态
   */
  orderStatus: string;
  /**
   * @description 列表Ref
   */
  VxeTableRef: any;
  /**
   * @description 详情页Ref
   */
  LjDetailRef: any;
  /**
   * @description 详情页明细表格Ref
   */
  VxeTableMxRef: any;
}

const state = reactive<defaultState>({
  orderStatus: "",
  VxeTableRef: null,
  LjDetailRef: null,
  VxeTableMxRef: null
});
/**
 * @description 表格多选数据操作
 * @param {String} rowKey 当表格可以多选时，所指定的 id
 * */
export const useHooks = (t: any, handleSelMxData: (params: any) => any) => {
  // 表格配置项
  const columns: ColumnProps<any>[] = [
    { type: "checkbox", width: 80, fixed: "left" },
    {
      field: "varkind",
      title: "变量应用分类",
      limited: true,
      visible: false,
      basicinfo: {
        el: "select",
        span: 2,
        editable: ALLOW_EDIT_STATE,
        rules: [{ required: true }],
        defaultValue: "0"
      }
    },
    {
      field: "vartype",
      title: "变量类别",
      basicinfo: {
        el: "select",
        span: 2,
        editable: ALLOW_EDIT_STATE,
        rules: [{ required: true }],
        defaultValue: "0"
      }
    },
    {
      field: "varclass",
      title: "变量分类",
      basicinfo: {
        el: "select",
        span: 2,
        editable: ALLOW_EDIT_STATE,
        rules: [{ required: true }],
        defaultValue: "0",
        props: {
          onChange: (value: any) => {
            console.log("value :>> ", value);
            console.log("Lj :>> ", state.LjDetailRef._mainData);
            value = parseInt(value);
            handleSelMxData(value);
            fChangeBedNetType(value);
          }
        }
      }
    },
    {
      field: "varcode",
      title: "变量编号",
      basicinfo: {
        el: "input",
        span: 2,
        editable: ALLOW_EDIT_STATE,
        rules: [{ required: true }]
      }
    },
    {
      field: "varname",
      title: "变量名称",
      basicinfo: {
        el: "input",
        span: 2,
        editable: ALLOW_EDIT_STATE,
        rules: [{ required: true }]
      }
    },
    {
      field: "varunit",
      title: "变量单位",
      basicinfo: {
        el: "input",
        span: 2,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "ifmxformula",
      title: "是否属于明细计算",
      basicinfo: {
        span: 2,
        editable: ALLOW_EDIT_STATE,
        editvisible: (scope: any) => {
          if (ALLOW_EDIT_STATE.includes(scope.status) && Number(scope.searchParam.varclass) > 1) {
            return true;
          }
          return false;
        },
        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: "dscrp",
      title: "备注",
      basicinfo: {
        el: "input",
        props: {
          type: "textarea",
          rows: 3
        },
        span: 4,
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "formula",
      title: "公式",
      basicinfo: {
        el: "input",
        props: {
          type: "textarea",
          rows: 3
        },
        span: 4,
        editable: ALLOW_EDIT_STATE,
        editvisible: (scope: any) => {
          if (ALLOW_EDIT_STATE.includes(scope.status) && Number(scope.searchParam.varclass) > 1) {
            return true;
          }
          return false;
        }
      }
    }
  ];

  const columns_mx: ColumnProps<any>[] = [
    {
      field: "row",
      title: "序",
      width: 60
    },
    {
      field: "bednettypeid",
      title: "床网类别",
      sortable: false,
      width: 120
    },
    {
      field: "pricelistid",
      title: "价格表",
      sortable: false
    },
    {
      field: "line_diameter",
      title: "线径MM",
      editRender: {
        name: "$input"
      },
      sortable: false,
      width: 100
    },
    {
      field: "varvalue",
      title: "变量值",
      editRender: {
        name: "$input"
      },
      sortable: false,
      width: 100
    }
  ];

  // 保存
  const fSave = (param: any) => {
    return new Promise((resolve, reject) => {
      ElMessageBox.confirm("是否确定要保存吗?", "询问", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      })
        .then(() => {
          SaveBedNetVar(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 { varid: parseInt(item.varid) };
    });
    ElMessageBox.confirm("是否确定要删除吗?", "询问", {
      confirmButtonText: "是",
      cancelButtonText: "否",
      type: "warning"
    })
      .then(() => {
        DeleteBedNetVar({ list: delArr }).then(() => {
          ElMessage.success("删除成功！");
          state.VxeTableRef?.refresh();
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "操作取消"
        });
      });
  };

  const fChangeBedNetType = (value: number) => {
    columns.forEach(item => {
      if (item.field === "formula") {
        // $set(item.basicinfo, "visible", value === 2);
      }
    });
    columns_mx.forEach(item => {
      if (item.field === "bednettypeid") {
        item.visible = value === 1;
      }
    });
  };

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