import { BasicColumn, FormSchema } from '/@/components/Table';
import { getTown, getHylb, dict } from '/@/api/common/api';
import { convertTreeData } from '/@/utils/modifFiled';
import { useUserStore } from '/@/store/modules/user';
import { ref } from 'vue';

const userStore: any = useUserStore();

export const useSuspectsData = () => {
  const suspects = ref([]);
  // 获取行业分类
  const getIsSuspect = async () => {
    suspects.value = await dict({ key: 'dk_hyfl' });
  };
  getIsSuspect();
  return { data: suspects };
};

export const useCategoryData = () => {
  let allCategory = [];
  const treeData = ref([]);
  // 获取行业类别
  const getData = async () => {
    allCategory = await getHylb({});
    allCategory = convertTreeData(allCategory); // 只显示前2级
    allCategory.forEach((item: any) => {
      item.disabled = true; // 第1层级不能选中
    });
    treeData.value = allCategory;
  };
  getData();
  // 改变行业分类
  function changeIsSuspect(v) {
    if (v == 1) {
      // 只显示42号类
      treeData.value = allCategory.filter((item) => item['is42']);
    } else {
      treeData.value = allCategory;
    }
  }
  return { data: treeData, changeIsSuspect };
};

export const columns: BasicColumn[] = [
  {
    title: '市',
    dataIndex: 'cityName',
    resizable: true,
  },
  {
    title: '县',
    dataIndex: 'countryName',
    resizable: true,
  },
  {
    title: '地块名称',
    dataIndex: 'wrdkmc',
    resizable: true,
  },
  {
    title: '地块编码',
    dataIndex: 'wrdkbm',
    resizable: true,
  },
  {
    title: '行业类别',
    dataIndex: 'hylb',
    resizable: true,
  },
  {
    title: '采样管理状态',
    dataIndex: 'cyglzt',
    resizable: true,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    label: '行政区(市)',
    field: 'cityCode',
    component: 'ApiSelect',
    ifShow: () => {
      return userStore?.userInfo?.userIdentity == '1' ? true : false
    },
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getTown,
        params: 440000, // 行政区划编码
        labelField: 'name',
        valueField: 'id',
        onChange: (val: any) => {
          const { updateSchema } = formActionType;
          formModel.countryCode = undefined;
          if (val) {
            updateSchema({
              field: 'countryCode',
              componentProps: {
                api: getTown,
                params: val,
              },
            });
          } else {
            updateSchema({
              field: 'countryCode',
              componentProps: {
                api: undefined,
              },
            });
          }
        },
      };
    },
  },
  {
    label: '区县',
    field: 'countryCode',
    component: 'ApiSelect',
    ifShow: () => {
      return (userStore?.userInfo?.userIdentity == '2' || userStore?.userInfo?.userIdentity == '1') ? true : false
    },
    componentProps: ({ formModel, formActionType }) => {
      if (userStore?.userInfo?.userIdentity == '2') {
        const { updateSchema } = formActionType;
        updateSchema({
          label: '区县',
          field: 'countryCode',
          ifShow: true,
          componentProps: {
            api: getTown,
            params: userStore?.userInfo?.codeRegion,
            labelField: 'name',
            valueField: 'id',
          },
        });
      }
      return {
        labelField: 'name',
        valueField: 'id',
      }
    },
  },
  {
    label: '行业分类',
    field: 'isSuspect',
    component: 'ApiSelect',
    slot: 'suspect',
  },
  {
    label: '行业类别',
    field: 'hylb',
    component: 'TreeSelect',
    slot: 'category',
  },
  {
    label: '地块类型',
    field: 'dklx',
    component: 'JSearchSelect',
    componentProps: {
      dict: 'dk_dklx',
    },
  },
  {
    label: '采样管理状态',
    field: 'cyglstatus',
    component: 'Select',
    componentProps: {
      options: [
        { value: '1', label: '已完成' },
        { value: '0', label: '未完成' },
      ],
    },
  },
  // {
  //   label: '地块名称',
  //   field: 'wrdkmc',
  //   component: 'Input',
  // },
  {
    label: '地块名称或者编码',
    field: 'wrdkbm',
    component: 'Input',
  },
];

// 样点列表
export const lookDatacolumns: BasicColumn[] = [
  {
    title: '样点编号',
    dataIndex: 'ydbh',
    resizable: true,
  },
  {
    title: '样点类型',
    dataIndex: 'ydlx',
    resizable: true,
    customRender: ({ text }) => {
      if (text == '1') {
        return '土壤点';
      } else if (text == '2') {
        return '地下水点';
      } else if (text == '3') {
        return '基坑样点';
      } else {
        return '未知';
      }
    },
  },
  {
    title: '样点日期',
    resizable: true,
    dataIndex: 'ydrq',
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'ydbh',
    label: '样点编号',
    component: 'Input',
    required: true,
  },
  {
    field: 'id',
    label: '主键',
    component: 'Input',
    required: true,
    ifShow: () => false
  },
  {
    field: 'xccyId',
    label: '现场采样id',
    component: 'Input',
    required: true,
    ifShow: () => false
  },
  {
    field: 'ydlx',
    label: '样点类型',
    component: 'Select',
    required: true,
    dynamicDisabled: ({ values }) => {
      return true
    },
    componentProps: {
      options: [
        { value: '1', label: '土壤点' },
        { value: '2', label: '地下水点' },
        { value: '3', label: '基坑样点' },
      ],
    },
  },
  {
    field: 'jd',
    label: '经度',
    component: 'Input',
    required: true,
    componentProps: {
      placeholder: '十进制，保留五位小数',
    },
    dynamicRules: () => {
      return [
        // { pattern: /^[1-9][0-9]*$/, message: '只能输入数字', required: true, },
        { pattern: /^-?(180(\.(\d{5}))|((1[0-7]|[1-9])?\d(\.\d{5})))$/, message: '中心经度码格式有误', required: true, },
      ];
    },
  },
  {
    field: 'wd',
    label: '纬度',
    component: 'Input',
    required: true,
    componentProps: {
      placeholder: '十进制，保留五位小数',
    },
    dynamicRules: () => {
      return [
        // { pattern: /^[1-9][0-9]*$/, message: '只能输入数字', required: true, },
        { pattern: /^-?(180(\.(\d{5}))|((1[0-7]|[1-9])?\d(\.\d{5})))$/, message: '中心经度码格式有误', required: true, },
      ];
    },
  },
  {
    field: 'ydrq',
    label: '采样日期',
    component: 'DatePicker',
    required: true,
    componentProps: {
      valueFormat: 'YYYY-MM-DD hh:mm:ss',
    },
  },
  {
    label: '四面图(东)',
    field: 'smtd',
    required: true,
    component: 'JUpload',
    componentProps: {
      fileName: '四面图(东)',
      showUploadList: false,
      // returnUrl: false,
      fileType: 'image',
      onchange: ({ values }) => {
        console.log(values);
      },
    },
  },
  {
    label: '四面图(南)',
    field: 'smtn',
    required: true,
    component: 'JUpload',
    componentProps: {
      fileName: '四面图(南)',
      showUploadList: false,
      // returnUrl: false,
      fileType: 'image',
      onchange: ({ values }) => {
        console.log(values);
      },
    },
  },
  {
    label: '四面图(西)',
    field: 'smtx',
    required: true,
    component: 'JUpload',
    componentProps: {
      fileName: '四面图(西)',
      showUploadList: false,
      // returnUrl: false,
      fileType: 'image',
      onchange: ({ values }) => {
        console.log(values);
      },
    },
  },
  {
    label: '四面图(北)',
    field: 'smtb',
    required: true,
    component: 'JUpload',
    componentProps: {
      fileName: '四面图(北)',
      showUploadList: false,
      // returnUrl: false,
      fileType: 'image',
      onchange: ({ values }) => {
        console.log(values);
      },
    },
  },
  {
    label: ' 现场核查人员自拍图',
    field: 'xchczpt',
    required: true,
    component: 'JUpload',
    componentProps: {
      fileName: ' 现场核查人员自拍图',
      showUploadList: false,
      // returnUrl: false,
      fileType: 'image',
      onchange: ({ values }) => {
        console.log(values);
      },
    },
  },
  {
    label: ' GPS设备坐标图',
    field: 'gpszbt',
    required: true,
    component: 'JUpload',
    componentProps: {
      fileName: ' GPS设备坐标图',
      showUploadList: false,
      // returnUrl: false,
      fileType: 'image',
      onchange: ({ values }) => {
        console.log(values);
      },
    },
  },
  {
    label: ' 岩芯图',
    field: 'yxt',
    required: true,
    component: 'JUpload',
    componentProps: {
      fileName: ' 岩芯图',
      showUploadList: false,
      // returnUrl: false,
      fileType: 'image',
      onchange: ({ values }) => {
        console.log(values);
      },
    },
  },
];