<script setup lang="tsx">
import { reactive, ref, unref, onMounted} from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import { Dialog } from '@/components/Dialog'
import { BaseButton } from '@/components/Button'
import {
  ElDivider,
  ElMessage,
  ElMessageBox,
  ElTag,
  ElText,
  ElSelect,
  ElOption,
  ElForm,
  ElFormItem,
  ElInput
} from 'element-plus'
import {
  getStoreUser,
  refuse,
  getStoreList,
  getStoreCheck,
  getCheck,
  wareCheckAuth,
  storeCheckAuth
} from '@/api/erp'
import { useRouter } from 'vue-router'
import { formatTime } from '@/utils'
// import Write from './components/Write.vue'

const { t } = useI18n()
const { push } = useRouter()

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    let res: any = ''

    if (searchParams.value.qtype == 'store') {
      res = await getStoreCheck({
        page: unref(currentPage) || 1,
        limit: unref(pageSize) || 10,
        ...unref(searchParams)
      })
    } else {
      res = await getCheck({
        page: unref(currentPage) || 1,
        limit: unref(pageSize) || 10,
        ...unref(searchParams)
      })
    }

    return {
      list: res.data.data,
      total: res.data.count || 0
    }
  }
})

onMounted(() => {
  getStore()
  getWare()
})

const storeLoading = ref(false)
const wareLoading = ref(false)

const storeOptions = ref<any[]>([])
const wareOptions = ref<any[]>([])
const getStore = async (query = '', id = '') => {
  try {
    storeLoading.value = true
    const res = await getStoreList({ page: 1, limit: 1000, name: query, id, store: 1 })
    if (res) {
      storeOptions.value = res.data.data.map((item) => {
        return {
          value: item.id,
          label: item.name
        }
      })
    } else {
      return []
    }
  } catch (error) {
    console.log(error)
  } finally {
    storeLoading.value = false
  }
}
const getWare = async (query = '', id = '') => {
  try {
    wareLoading.value = true
    const res = await getStoreList({ page: 1, limit: 1000, name: query, id, type: 3 })
    if (res) {
      wareOptions.value = res.data.data.map((item) => {
        return {
          value: item.id,
          label: item.name
        }
      })
    } else {
      return []
    }
  } catch (error) {
    console.log(error)
  } finally {
    wareLoading.value = false
  }
}

const { dataList, loading, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: 'ID',
    align: 'center',
    width: 70
  },
  {
    field: 'order_id',
    label: '盘点单号',
    minWidth: 230
  },
  {
    field: 'out',
    label: '盘点单位',
    minWidth: 150,
    slots: {
      default: ({ row }: any) => {
        return <>{row.wid ? row.ware?.name : row.store?.name}</>
      }
    }
  },
  {
    field: 'stockinfo',
    label: '盘点商品',
    minWidth: 200,
    slots: {
      default: ({ row }: any) => {
        return (
            <>
              {row.body.map((item) => {
                return (
                  <>
                    <div>
                      {item.product_name}
                      <ElText class="mx-1" type="primary">
                        {item.new_stock}
                      </ElText>
                      {item.suk}
                    </div>
                  </>
                )
              })}
            </>
          )
      }
    }
  },
  {
    field: 'create_admin_id',
    label: '创建人员',
    width: 200,
    slots: {
      default: ({ row }: any) => {
        return (
          <>
            <div>{row.cuser?.real_name || '-'}</div>
            <div>{row.create_time ? formatTime(row.create_time * 1000, 'yyyy-MM-dd') : ''}</div>
          </>
        )
      }
    }
  },
  {
    field: 'auth_admin_id',
    label: '审核人员',
    width: 200,
    slots: {
      default: ({ row }: any) => {
        return (
          <>
            <div>{row.auser?.real_name || '-'}</div>
            <div>{row.auth_time ? formatTime(row.auth_time * 1000, 'yyyy-MM-dd') : ''}</div>
          </>
        )
      }
    }
  },
  {
    field: 'auth_remark',
    label: '审核备注',
    width: 200,
  },
  {
    field: 'status',
    label: '状态',
    width: 190,
    slots: {
      default: ({ row }: any) => {
        return (
          <>
            <ElTag
              class="mr-5px"
              type={row.status == -1 ? 'danger' : row.status == 0 ? 'warning' : 'success'}
            >
              {row.status == -1 ? '拒绝' : row.status == 0 ? '待审核' : '通过'}
            </ElTag>
          </>
        )
      }
    }
  },
  {
    field: 'action',
    label: t('userDemo.action'),
    width: 200,
    fixed: 'right',
    align: 'center',
    headerAlign: 'center',
    slots: {
      default: ({ row }: any) => {
        if (row.status == 0) {
          return (
            <>
              <BaseButton link size="small" type="primary" onClick={() => action('pass', row)}>
                通过
              </BaseButton>
              <ElDivider direction="vertical" />
              <BaseButton link size="small" type="danger" onClick={() => action('repass', row)}>
                拒绝
              </BaseButton>
            </>
          )
        } else {
          return <></>
        }
      }
    }
  }
])

const searchParams = ref<{
  qtype?: string
}>({
  qtype: 'store'
})
const setSearchParams = (data: any) => {
  searchParams.value = data
  getList()
}

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'qtype',
    label: '类型',
    component: 'Select',
    value: 'store',
    componentProps: {
      placeholder: '门店盘点',
      options: [
        {
          label: '门店盘点',
          value: 'store'
        },
        {
          label: '仓库盘点',
          value: 'ware'
        }
      ]
    }
  },
  {
    field: 'store_id',
    label: '门店',
    component: 'Select',
    value: '',
    componentProps: {
      placeholder: '请选择',
      options: storeOptions
    }
  },
  {
    field: 'wid',
    label: '仓库',
    component: 'Select',
    value: '',
    componentProps: {
      placeholder: '请选择',
      options: wareOptions
    }
  }
  // {
  //   field: 'name',
  //   label: '名称',
  //   component: 'Input',
  //   value: '',
  //   componentProps: {
  //     placeholder: '请输入门店名称'
  //   }
  // }
])



const dialogTitle = ref('')
const actionType = ref('')
// const writeRef = useTemplateRef('writeRef')

// function arrayToObject(array) {
//     var obj = {};
//     for (var i = 0; i < array.length; i++) {
//         obj[i] = array[i];
//     }
//     return obj;
// }
const authId = ref(0)
const storeId = ref(0)
const wid = ref(0)
const dialogVisibles = ref(false)
const dialogVisibless = ref(false)
const dialogVisiblesss = ref(false)
const dialogVisiblessss = ref(false)

const endItem = ref({ wid: '', store_id: '', info: [], out_order_id: '', id: 0 })
const action = async (type: string, row?: any) => {
  actionType.value = type
  if (type == 'repass') {
    endItem.value = row
    dialogVisibless.value = true
  }
  if (type == 'pass') {
    endItem.value = row
    dialogVisibles.value = true
  }
  if (type == 'out') {
    ElMessageBox.confirm('是否立即出库?', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const re = await refuse({ id: row.id })
        if (re) {
          ElMessage({
            showClose: true,
            message: '处理成功',
            type: 'success'
          })
        }
        await getList()
      })
      .catch(() => {})
  }
  if (type == 'authCompute') {
    endItem.value = row
    dialogVisiblessss.value = true
  }
  if (type == 'compute') {
    endItem.value = row
    dialogVisiblesss.value = true
  }

  if (type == 'auth') {
    dialogTitle.value = '审核'
    authId.value = row.id * 1
    storeId.value = row.up_store_id || 0
    wid.value = row.up_wid || 0
    dialogVisibles.value = true
  }
  if (type == 'add') {
    // dialogTitle.value = t('exampleDemo.add')
    // currentRow.value = undefined
    push(`/erp/check_edit/${type}/${row?.id || 0}`)
  }
}
const formData = ref({ auth_admin_id: '', auth_status: 1, freight: '', refuse_remark: '' })
const adminOptions = ref<any[]>([])
const adminLoading = ref(false)
const rules = reactive({
  auth_admin_id: [{ required: true, message: '请选择审核员', trigger: 'change' }],
  refuse_remark: [{ required: true, message: '请填写拒绝原因' }]
})
const getAdmin = async () => {
  const res = await getStoreUser({
    page: 1,
    limit: 20,
    relation_id: endItem.value.store_id ? endItem.value.store_id : endItem.value.wid
  })
  adminLoading.value = true
  try {
    if (res) {
      adminOptions.value = res.data.map((item) => {
        return {
          value: item.id,
          label: item.real_name
        }
      })
      console.log(adminOptions.value, 'adminOptions.value')
    } else {
      return []
    }
  } catch (err) {
    console.log(err)
  }
}
const cancelClick = () => {
  dialogVisibles.value = false
  formData.value.auth_admin_id = ''
  formData.value.freight = ''
  formData.value.refuse_remark = ''
  endItem.value = { wid: '', store_id: '', id: 0, info: [], out_order_id: '' }
}
const cancelClicks = () => {
  dialogVisibless.value = false
  cancelClick()
}
const confirmClick = async () => {
  if (!formData.value.auth_admin_id) {
    return ElMessage.error('请选择审核人员')
  }
  // if (formData.value.status == 1 && !formData.value.purchasing_person_admin_id) {
  //   return ElMessage.error('请选择采购人员')
  // }
  if (endItem.value.wid) {
    const res = await wareCheckAuth(endItem.value.id, {
      create_admin_id: formData.value.auth_admin_id,
      wid: endItem.value.wid || '',
      status: 1
    })
    if (res.status == 200) {
      ElMessage.success('审核完成')
      getList()
      cancelClick()
    }
  } else {
    const res = await storeCheckAuth(endItem.value.id, {
      create_admin_id: formData.value.auth_admin_id,
      store_id: endItem.value.store_id,
      status: 1
    })
    if (res.status == 200) {
      ElMessage.success('审核完成')
      getList()
      cancelClick()
    }
  }
}

const confirmClicks = async () => {
  if (!formData.value.refuse_remark) {
    return ElMessage.error('请选择拒绝原因')
  }
  if (!formData.value.auth_admin_id) {
    return ElMessage.error('请填写审核人')
  }
  let res
  if (endItem.value.wid) {
    res = await wareCheckAuth(endItem.value.id, {
      create_admin_id: formData.value.auth_admin_id,
      wid: endItem.value.wid || '',
      status: -1,
      auth_remark: formData.value.refuse_remark
    })
  } else {
    res = await storeCheckAuth(endItem.value.id, {
      auth_status: -1,
      auth_remark: formData.value.refuse_remark,
      create_admin_id: formData.value.auth_admin_id,
      store_id: endItem.value.store_id || ''
    })
  }
  if (res.status == 200) {
    ElMessage.success('处理完成')
    getList()
    cancelClicks()
  }
}
</script>

<template>
  <ContentWrap>
    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
    <div class="mb-10px">
      <BaseButton type="primary" @click="action('add')">{{ t('exampleDemo.add') }}</BaseButton>
    </div>
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      stripe
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
  </ContentWrap>
  <Dialog v-model="dialogVisibles" :title="dialogTitle" width="500px" maxHeight="100px">
    <!-- <Record :cid="cid"></Record> -->
    <ElForm ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <ElFormItem label="审核人员" prop="auth_admin_id">
        <ElSelect
          filterable
          remote
          reserve-keyword
          v-model="formData.auth_admin_id"
          :remote-method="getAdmin"
          remote-show-suffix
          placeholder="请选择审核人员"
        >
          <ElOption
            v-for="item in adminOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </ElSelect>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <div style="flex: auto">
        <BaseButton @click="cancelClick">取消</BaseButton>
        <BaseButton type="primary" @click="confirmClick">确认</BaseButton>
      </div>
    </template>
  </Dialog>
  <Dialog v-model="dialogVisibless" :title="dialogTitle" width="500px" maxHeight="150px">
    <ElForm ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <ElFormItem label="审核人员" prop="auth_admin_id">
        <ElSelect
          filterable
          remote
          reserve-keyword
          v-model="formData.auth_admin_id"
          :remote-method="getAdmin"
          remote-show-suffix
          placeholder="请选择审核人员"
        >
          <ElOption
            v-for="item in adminOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem prop="refuse_remark" label="拒绝原因">
        <ElInput type="textarea" v-model="formData.refuse_remark" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <div style="flex: auto">
        <BaseButton @click="cancelClick">取消</BaseButton>
        <BaseButton type="primary" @click="confirmClicks">确认</BaseButton>
      </div>
    </template>
  </Dialog>
</template>
