import { ref, reactive, computed, toRefs, inject } from "vue";
import { Table } from "@/hooks/interface";
import { ColumnProps } from "@/components/LjVxeTable/interface";
import { ALLOW_EDIT_STATE } from "@/config/index";

interface defaultState {
  /**
   * @description 单据当前状态
   */
  orderStatus: string;
}
/**
 * @description 表格多选数据操作
 * @param {String} rowKey 当表格可以多选时，所指定的 id
 * */
export const useHooks = (t?: any) => {
  const state = reactive<defaultState>({
    orderStatus: ""
  });

  // 表格配置项
  const columns: ColumnProps<any>[] = [
    { type: "seq", title: "#", fixed: "left", width: 80 },
    {
      field: "userid",
      title: "用户代号",
      basicinfo: {
        el: "input",
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "descrp",
      title: "备注",
      basicinfo: {
        el: "input",
        editable: ALLOW_EDIT_STATE,
        props: { type: "textarea", rows: 5 },
        row: 3
      }
    },
    {
      field: "username",
      title: "用户名称",
      basicinfo: {
        el: "input",
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "usermode",
      title: "用户模式",
      enum: [
        { label: "管理员模式", value: 0 },
        { label: "业务员模式", value: 1 },
        { label: "经理模式", value: 2 }
      ],
      basicinfo: {
        el: "select",
        editable: ALLOW_EDIT_STATE,
        defaultValue: 0
      }
    }
  ];

  const columns_pricelist: ColumnProps<any>[] = [
    // { type: "checkbox", field: "view", fixed: "left", width: 60 },
    // { type: "checkbox", field: "edit", fixed: "left", width: 60 },
    {
      field: "view",
      title: "查看",
      width: 60,
      basicinfo: {
        el: "input",
        editable: ALLOW_EDIT_STATE
      },
      render: scope => {
        let _keys = Object.keys(scope);
        let _data = _keys.includes("row") ? scope.row : _keys.includes("searchParam") ? scope.searchParam : scope;
        let editS = inject("orderStatus", ref(""));
        if (editS.value != "") {
          return <el-checkbox v-model={_data.view} style="display: block" />;
        } else {
          switch (Number(_data.view)) {
            case 1:
              return <el-checkbox class={"el-checkbox__disabled-checked"} checked={true} disabled={true} />;
            default: // 0
              let bool = false;
              return <el-checkbox v-model={bool} disabled={true} />;
          }
        }
      }
    },
    {
      field: "edit",
      title: "修改",
      width: 60,
      render: scope => {
        let _keys = Object.keys(scope);
        let _data = _keys.includes("row") ? scope.row : _keys.includes("searchParam") ? scope.searchParam : scope;
        let editS = inject("orderStatus", ref(""));
        if (editS.value != "") {
          return <el-checkbox v-model={_data.edit} style="display: block" />;
        } else {
          switch (Number(_data.edit)) {
            case 1:
              return <el-checkbox class={"el-checkbox__disabled-checked"} checked={true} disabled={true} />;
            default: // 0
              let bool = false;
              return <el-checkbox v-model={bool} disabled={true} />;
          }
        }
      }
    },
    {
      field: "pricelistname",
      title: "价格表名称",
      width: "auto"
    }
  ];

  const columns_dept: ColumnProps<any>[] = [
    { type: "checkbox", fixed: "left", width: 60 },
    {
      field: "deptname",
      title: "部门名称",
      width: "auto"
    }
  ];

  const columns_outrep: ColumnProps<any>[] = [
    { type: "checkbox", fixed: "left", width: 60 },
    {
      field: "username",
      title: "业务员名称",
      width: "auto"
    }
  ];

  return {
    ...toRefs(state),
    columns,
    columns_pricelist,
    columns_dept,
    columns_outrep
  };
};
