<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,
  getStoreLoss,
  lossesAuth,
  refuseStock,
  getWareLoss,
  wareLossAuth,
  getStoreList
} 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 getStoreLoss({
        page: unref(currentPage) || 1,
        limit: unref(pageSize) || 10,
        ...unref(searchParams)
      })
    } else {
      res = await getWareLoss({
        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) => {
        if (row?.stockinfo?.length > 0) {
          return (
            <>
              {row.stockinfo.map((item) => {
                return (
                  <>
                    <div>
                      {item.product_name}
                      <ElText class="mx-1" type="primary">
                        {item.net_weight}
                      </ElText>
                      {item.suk}
                    </div>
                  </>
                )
              })}
            </>
          )
        } else if (row?.info?.length > 0) {
          return (
            <>
              {row.info.map((item) => {
                return (
                  <>
                    <div>
                      {item.product_name}
                      <ElText class="mx-1" type="primary">
                        {item.net_weight}
                      </ElText>
                      {item.suk}
                    </div>
                  </>
                )
              })}
            </>
          )
        } else {
          return <></>
        }
      }
    }
  },
  {
    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: '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>
              <ElDivider direction="vertical" />
              <BaseButton link size="small" type="primary" onClick={() => action('print', row)}>
                打印
              </BaseButton>
            </>
          )
        } else {
          return <>
              <BaseButton link size="small" type="primary" onClick={() => action('print', row)}>
                打印
              </BaseButton></>
        }
      }
    }
  }
])

const searchParams = ref<{
  // type?: string
  qtype?: string
}>({
  // type: 'loss',
  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 dialogVisible = ref(false)
const currentRow = ref()
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 prDialogVisible = ref(false)
const prItem = ref<any>({})

const endItem = ref({ wid: '', store_id: '', info: [], out_order_id: '', id: 0 })
const action = async (type: string, row?: any) => {
  actionType.value = type
  if (type == 'print') {
    prDialogVisible.value = true
    prItem.value = row
  }
  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/losses_edit/${type}/${row?.id || 0}`)
  }
  if (type == 'edit') {
    dialogTitle.value = t('exampleDemo.edit')
    currentRow.value = {
      // roles: row.roles,
      wid: row.wid,
      type: row.type,
      id: row.id,
      name: row.name,
      is_show: row.is_show == 1 ? true : false,
      introduction: row.introduction,
      address: row.address,
      area: row.area,
      city: row.city,
      province: row.province,
      detailed_address: row.detailed_address,
      latitude: row.latitude,
      logo: [row.logo],
      longitude: row.longitude,
      manager_name: row.manager_name,
      phone: row.phone,
      product_verify_status: row.product_verify_status == 1 ? true : false,
      product_status: row.product_status == 1 ? true : false,
      valid_range: row.valid_range,
      slide_images: row.slide_images_chs,
      auth_code: row.auth_code,
      auth_code_end_time: row.auth_code_end_time,
      ppid: row.appid,
      loss_sale: row.loss_sale == 1,
      receiver_uid: row.receiver_uid,
      huifu_id: row.huifu_id,
      appsecret: row.appsecret,
      cost: row.cost,
      roles: row.roles * 1
    }
    console.log(currentRow, 'currentRow')
  }
  dialogVisible.value = true
}
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 wareLossAuth(endItem.value.id, {
      create_admin_id: formData.value.auth_admin_id,
      wid: endItem.value.wid || '',
      store_id: endItem.value.store_id || '',
      status: 1
    })
    if (res.status == 200) {
      ElMessage.success('审核完成')
      getList()
      cancelClick()
    }
  } else {
    const res = await lossesAuth(endItem.value.id, {
      info: endItem.value.info,
      create_admin_id: formData.value.auth_admin_id,
      store_id: endItem.value.store_id,
      out_order_id: endItem.value.out_order_id
    })
    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 wareLossAuth(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 refuseStock(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()
  }
}

const getTime = () => {
  let time = new Date().getTime()
  return formatTime(time, 'yyyy-MM-dd HH:mm:ss')
}
const getLen = () => {
  let sum = 0
  prItem.value.stockinfo.forEach((item) => {
      sum += item.net_weight * 1
  })
  return sum
}
const printobj = ref({
  id: 'dc',
  popTitle: '好的打印标题',
  extraCss:
    'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead: '<meta http-equiv="content-language" content="zh-cn" />',
  beforeOpenCallback(vue) {
    vue.printLoading = true
    console.log('打开之前')
  },
  openCallback(vue) {
    vue.printLoading = false
    console.log('执行了打印')
  }
})
</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>
  <Dialog v-model="prDialogVisible" title="打印">
    <div id="dc">
      <div class="section">
        <div class="text-center title">报损单</div>
        <div class="top-tit">
          <div class="item mb10">
            <div class=""
              ><span class="name">报损单号：</span><span>{{ prItem.order_id }}</span></div
            >
            <div class="val"></div>
          </div>
          <div class="item mb10" v-if="prItem?.store && prItem.store.name">
            <div class=""
              ><span class="name">报损单位：</span><span>{{ prItem?.store.name || '' }}</span></div
            >
          </div>
          <div class="item mb10" v-if="prItem?.ware && prItem.ware.name">
            <div class=""
              ><span class="name">报损单位：</span><span>{{ prItem?.ware.name || '' }}</span></div
            >
          </div>
          <div class="item mb10" v-if="prItem?.store">
            <div class=""
              ><span class="name">联系电话：</span><span>{{ prItem.store.phone }}</span></div
            >
            <div class="val"></div>
          </div>
          <div class="item mb10" v-if="prItem?.ware">
            <div class=""
              ><span class="name">联系电话：</span><span>{{ prItem.ware.phone }}</span></div
            >
            <div class="val"></div>
          </div>
          <div class="item items mb10" v-if="prItem?.store">
            <div class=""
              ><span class="name">地址：</span><span>{{ prItem.store.address }}</span></div
            >
          </div>
        </div>
        <div class="table">
          <div class="tr">
            <div class="item w10">序号</div>
            <div class="item w20">编号</div>
            <div class="item w30">商品</div>
            <div class="item w20">数量</div>
            <div class="item w20">单位</div>
          </div>
          <div class="tr" v-for="(item, index) in prItem.stockinfo">
            <div class="item w10">{{ index + 1 }}</div>
            <div class="item w20">{{ item.bar_code }}</div>
            <div class="item w30">{{ item.product_name }}</div>
            <div class="item w20">{{
              item.net_weight}}</div>
            <div class="item w20">{{ item.suk }}</div>
          </div>
        </div>
        <div class="btm-tip">
          <div class="itemt">
            <span class="name">货品数：</span>
            <span>{{ prItem.stockinfo.length }}</span>
          </div>
          <div class="itemt">
            <span class="name">数量：</span>
            <span>{{ getLen() }}</span>
          </div>
          <div class="itemt">
            <span class="name">审核人：</span>
            <span>{{ prItem.auth_admin_id ? prItem.auser.real_name : '' }}</span>
          </div>
          <div class="itemt">
            <span class="name">仓管员签字：</span>
            <span></span>
          </div>
          <div class="itemt">
            <span class="name">财务员签字：</span>
            <span></span>
          </div>
          <div class="itemt">
            <span>打印时间：</span>
            <span>{{ getTime() }}</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div style="flex: auto">
        <BaseButton type="primary" v-print="printobj">打印</BaseButton>
      </div>
    </template>
  </Dialog>
</template>
<style>
@media print {
  .section {
    page-break-before: always;
    margin-top: 0;
  }
}
.bold {
  font-weight: bold;
}
#dc {
  font-size: 14px;
  page-break-before: always;
  padding: 10px;
  position: relative;
  padding-bottom: 100px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}
.top-tit {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 20px 0 10px;
}
.item {
  width: 50%;
  /* margin-bottom: 10px; */
}
.mb10 {
  margin-bottom: 10px;
}
.items {
  width: 100% !important;
}
.name {
  font-weight: bold;
  color: #000000;
}
.table {
  width: 98%;
  text-align: center;
  border-top: 1px solid #000;
  /* border-left: 1px solid #000; */
}
.table > .tr {
  display: flex;
  flex-wrap: wrap;
}
.table .tr > .item {
  padding: 5px 10px;
  /* border-right: 1px solid #000; */
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.w30 {
  width: 30%;
}
.w20 {
  width: 20%;
}
.w10 {
  width: 10%;
}
.table .th {
  color: #000000;
  padding: 10px 0;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
  min-width: 60px;
}

.table .td {
  padding: 5px 3px;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}
@media print {
  body,
  html,
  .previewPageBox {
    height: auto !important;
    overflow: visible !important;
  }

  .previewPageBox {
    position: relative !important;
  }
}
.btm-tip {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-top: 150px;
  
}
.btm-tip .itemt {
  width: 33.3%;
  margin-bottom: 10px;
}
</style>

