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";

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

  const fnMoneyrateChange = (val: any) => {
    console.log("fnMoneyrateChange val :>> ", val);
  };

  // 表格配置项
  const columns: ColumnProps<any>[] = [
    { type: "checkbox", width: 50, fixed: "left" },
    { title: "#", field: "pid", fixed: "left", width: 80 },
    {
      field: "deptid",
      title: "部门",
      search: {
        el: "select",
        key: "arg_deptid",
        props: {
          filterable: true
        },
        order: 1
      },
      basicinfo: {
        order: 1,
        group: "单据信息"
      }
    },
    {
      field: "mattressname",
      title: "床垫名称",
      align: "left",
      table: "u_mattress",
      search: {
        el: "input",
        key: "arg_search",
        titleKey: "searchKw",
        props: {
          placeholder: "唯一码/编码/名称"
        },
        order: 0
      },
      basicinfo: {
        el: "input",
        editable: ALLOW_EDIT_STATE
      }
    },
    {
      field: "flag",
      title: "财务审核",
      table: "u_mattress",
      search: {
        el: "select",
        key: "status_flag",
        titleKey: "status",
        props: {
          clearable: true,
          placeholder: "全部"
        },
        order: 2,
        render: scope => {
          let _keys = Object.keys(scope);
          // let _data = _keys.includes("row") ? scope.row : _keys.includes("searchParam") ? scope.searchParam : scope;
          return (
            <el-select v-model={scope.searchParam.status_flag} placeholder="全部" clearable>
              <el-option label="待下单" value="1" />
              <el-option label="已下单" value="2" />
              <el-option label="待财务审核" value="3" />
              <el-option label="已财务审核" value="4" />
            </el-select>
          );
        }
      }
    },
    {
      field: "dept_profitrate",
      title: "部门让利点数",
      basicinfo: {
        order: 2,
        group: "单据信息"
      }
    },
    {
      field: "fees_dscrp",
      title: "额外费用说明",
      basicinfo: {
        el: "input",
        props: { type: "textarea", rows: 2 },
        row: 2
      }
    },
    {
      field: "moneyrate",
      title: "汇率",
      basicinfo: {
        el: "select",
        render: (scope: any) => {
          let _keys = Object.keys(scope);
          console.log("if_moneyrate scope :>> ", scope);
          let optionRender = [];
          scope.enum.map(item => {
            optionRender.push(<el-option label={item.label} value={item.value} />);
          });
          let slotprefix = {
            prefix: () => {
              return <>{scope.searchParam.moneyrate}</>;
            }
          };

          return (
            <el-select
              v-model={scope.searchParam.if_moneyrate}
              v-slots={slotprefix}
              class="select-text-right"
              onChange={fnMoneyrateChange}
            >
              {optionRender}
            </el-select>
          );
        }
      }
    },
    {
      field: "foreign_cost",
      table: "u_mattress",
      title: "外币价",
      basicinfo: {
        titleKey: "foreign_cost"
      }
    }
  ];

  const columnsMx: ColumnProps<any>[] = [];

  return {
    ...toRefs(state),
    columns,
    columnsMx
  };
};
