import { Checkbox } from 'ant-design-vue';
import $ from 'jquery';
import { loadProfile } from '../hooks/commonMethods';
//从服务器获取列信息
let showCols = [];
const getAndCols = async () => {
  await loadProfile(['receip-main-list'])
    .then((res) => {
      showCols = formatCols(res);
    })
    .finally(() => {});
};
// const getAndCols = async () => {
//   await loadProfile(['supplier-info'])
//     .then((res) => {
//       showCols = formatCols(res);
//     })
//     .finally(() => {});
// };


const _getComBoxlabel = (record, col) => {
  let label = '';
  if (typeof col.Option == 'undefined') {
    label = record[col.Field];
    return;
  }
  for (let i = 0; i < col.Option.length; i++) {
    if (col.Option[i].value == record[col.Field]) {
      label = col.Option[i].label;
      break;
    }
  }
  return label;
};
const _getCheckBox = (record, col) => {
  return <Checkbox checked={record[col.Field]} disabled={true}></Checkbox>;
};

const formatCols = function (data) {
  if (data.length == 0) {
    return;
  }
  const tempArray = [];
  if (data[0].cols.length > 0) {
    const cols = data[0].cols.filter((item) => {
      return item.Visible == true;
    });

    for (let i = 0; i < cols.length; i++) {
      if (cols[i].Style.toLowerCase() == 'textbox') {
        const tempItem = {
          title: cols[i].Name,
          dataIndex: cols[i].Field,
          width: cols[i].width,
          resizable: true,
          formItemProps: cols[i].ifshowInQueryForm
            ? {
                required: cols[i].ifshowInQueryForm,
              }
            : null,
          hideInSearch: cols[i].ifshowInQueryForm ? false : true, //是否生成到最终的查询面板中
        };
        const copy = {};
        $.extend(true, copy, tempItem);
        tempArray.push(copy);
      } else if (cols[i].Style.toLowerCase() == 'combox') {
        const tempItem = {
          title: cols[i].Name,
          dataIndex: cols[i].Field,
          width: cols[i].width,
          resizable: true,
          formItemProps: cols[i].ifshowInQueryForm
            ? {
                component: 'Select',
                componentProps: ({ tableInstance }) => ({
                  options: cols[i].Option,
                  onChange() {
                    console.log('tableInstance', tableInstance?.reload());
                  },
                }),
              }
            : undefined,
          bodyCell: ({ record }) => {
            return _getComBoxlabel(record, cols[i]);
          },
          hideInSearch: cols[i].ifshowInQueryForm ? false : true,
        };
        // const copy = deepClone(tempItem);
        const copy = {};
        $.extend(true, copy, tempItem);
        tempArray.push(copy);
      } else if (cols[i].Style.toLowerCase() == 'checkbox') {
        const tempItem = {
          title: cols[i].Name,
          dataIndex: cols[i].Field,
          width: cols[i].width,
          resizable: true,
          formItemProps: cols[i].ifshowInQueryForm
            ? {
                component: 'Select',
                componentProps: ({ tableInstance }) => ({
                  options: [
                    {
                      label: '是',
                      value: true,
                    },
                    {
                      label: '否',
                      value: false,
                    },
                  ],
                  onChange() {
                    console.log('tableInstance', tableInstance?.reload());
                  },
                }),
              }
            : null,
          bodyCell: ({ record }) => {
            return _getCheckBox(record, cols[i]);
          },
          hideInSearch: cols[i].ifshowInQueryForm ? false : true,
        };
        const copy = {};
        $.extend(true, copy, tempItem);
        tempArray.push(copy);
      }
    }
  }
  return tempArray;
};

await getAndCols(); //获取列配置文件

export const columns = showCols;
