import qs from 'qs'
import Cookies from 'js-cookie'
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import {
  ref,
  onActivated,
  nextTick,
} from "vue";

export default function () {
  // 设置属性
  const mixinViewModuleOptions = ref({
    createdIsNeed: true,       // 此页面是否在创建时，调用查询数据列表接口？
    activatedIsNeed: false,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
    getDataListURL: '',       // 数据列表接口，API地址
    getDataListIsPage: false, // 数据列表接口，是否需要分页？
    deleteURL: '',            // 删除接口，API地址
    deleteIsBatch: false,     // 删除接口，是否需要批量？
    deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
    exportURL: ''             // 导出接口，API地址
  });
  // 默认属性
  const dataForm = ref({});               // 查询条件
  const dataList = ref([]);               // 数据列表
  const order = ref('');                  // 排序，asc／desc
  const orderField = ref('');             // 排序，字段
  const page = ref(1);                    // 当前页码
  const limit = ref(10);                  // 每页数
  const sizes = [10, 20, 50, 100];        // 分业条数数组
  const total = ref(0);                   // 总条数
  const dataListLoading = ref(false);     // 数据列表，loading状态
  let dataListSelections: any[] = [];     // 数据列表，多选项
  const addOrUpdateVisible = ref(false);   // 新增／更新，弹窗visible状态

  const store = useStore();
  const router = useRouter();
  const { t } = useI18n();
  const postEditDom: any = ref();
  const searchFormRef = ref<typeof ElForm>();

  // 获取数据列表
  const query = () => {
    dataListLoading.value = true
    store.dispatch(mixinViewModuleOptions.value.getDataListURL,
      {
        order: order.value,
        orderField: orderField.value,
        current: mixinViewModuleOptions.value.getDataListIsPage ? page.value : null,
        size: mixinViewModuleOptions.value.getDataListIsPage ? limit.value : null,
        params: dataForm.value
      })
      .then((res) => {
        dataListLoading.value = false
        if (res.code !== 200) {
          dataList.value = []
          total.value = 0
          return ElMessage.error(res.msg)
        }
        dataList.value = mixinViewModuleOptions.value.getDataListIsPage ? res.data.records : res.data
        total.value = mixinViewModuleOptions.value.getDataListIsPage ? res.data.total : 0
      })
      .catch(() => {
        dataListLoading.value = false
      });
  }
  // 清除表单
  const clearForm = () => {
    searchFormRef.value?.resetFields();
    query();
  }
  // 多选
  const dataListSelectionChangeHandle = (val: any[]) => {
    dataListSelections = val
  }
  // 排序
  const dataListSortChangeHandle = (data: any) => {
    if (!data.order || !data.prop) {
      order.value = ''
      orderField.value = ''
      return false
    }
    order.value = data.order.replace(/ending$/, '')
    orderField.value = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
    query()
  }
  // 分页, 每页条数
  const pageSizeChangeHandle = (val: any) => {
    page.value = 1
    limit.value = val
    query()
  }
  // 分页, 当前页
  const pageCurrentChangeHandle = (val: any) => {
    page.value = val
    query()
  }
  const getDataList = () => {
    page.value = 1
    query()
  }
  // 新增 / 修改
  const addOrUpdateHandle = (id: any) => {
    addOrUpdateVisible.value = true
    postEditDom.value.isShow = false
    nextTick(() => {
      postEditDom.value.dataForm.id = id
      postEditDom.value.init()
    })
  }
  // 查看
  const viewHandle = (id: any) => {
    addOrUpdateVisible.value = true
    postEditDom.value.dataForm.id = id
    postEditDom.value.isShow = true
    postEditDom.value.init()
  }
  // 关闭当前窗口
  const closeCurrentTab = () => {
    const tabName = store.state.contentTabsActiveName
    store.state.contentTabs = store.state.contentTabs.filter((item: { name: any }) => item.name !== tabName)
    if (store.state.contentTabs.length <= 0) {
      store.state.sidebarMenuActiveName = store.state.contentTabsActiveName = 'home'
      return false
    }
    if (tabName === store.state.contentTabsActiveName) {
      router.push({ name: store.state.contentTabs[store.state.contentTabs.length - 1].name })
    }
  }
  // 删除
  const deleteHandle = (id: string) => {
    const abc = dataListSelections.map(item => item[mixinViewModuleOptions.value.deleteIsBatchKey])

    if (mixinViewModuleOptions.value.deleteIsBatch && !id && dataListSelections.length <= 0) {
      return ElMessage({
        message: t('prompt.deleteBatch'),
        type: 'warning',
        duration: 500
      })
    }
    ElMessageBox.confirm(t('prompt.info', { 'handle': t('delete') }), t('prompt.title'), {
      confirmButtonText: t('confirm'),
      cancelButtonText: t('cancel'),
      type: 'warning'
    }).then(() => {
      store.dispatch(mixinViewModuleOptions.value.deleteURL,

        id ? id : (dataListSelections.map(item => item[mixinViewModuleOptions.value.deleteIsBatchKey])).join()
      )
        .then((res) => {
          ElMessage({
            message: t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              query()
            }
          })
        })
        .catch((e) => {
          console.log(e)
        });
    }).catch((e) => { console.log(e) })
  }
  // 导出
  const exportHandle = () => {
    const params = qs.stringify({
      'token': Cookies.get('token'),
      ...dataForm.value
    })
    window.location.href = `${(window as any).SITE_CONFIG['apiURL']}${mixinViewModuleOptions.value.exportURL}?${params}`
  }

  // onActivated(() => {
  //   if (mixinViewModuleOptions.value.activatedIsNeed) {
  //     query()
  //   }
  // })

  return {
    page,
    total,
    limit,
    sizes,
    dataList,
    dataForm,
    postEditDom,
    searchFormRef,
    dataListLoading,
    addOrUpdateVisible,
    mixinViewModuleOptions,
    query,
    clearForm,
    viewHandle,
    getDataList,
    deleteHandle,
    addOrUpdateHandle,
    pageSizeChangeHandle,
    pageCurrentChangeHandle,
    dataListSortChangeHandle,
    dataListSelectionChangeHandle,
  }
}