<!-- 废弃物资处理交接记录 列表 -->
<script name="ConsumableHandoverList" lang="ts" setup>
import type { DateModelType } from 'element-plus'
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IConsumableHandover, IConsumableHandoverGoods, IHandoverListQuery } from './consumable-interface'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDictByCode } from '@/api/system/dict'
import { deleteConsumableHandover, detailConsumableHandover, getConsumableHandoverList } from '@/api/resource/supplierConsumable'

const { proxy } = getCurrentInstance() as any
const router = useRouter()

// 弹窗子组件
const handoverTableRef = ref()
// 右上角菜单
const menu = [
  {
    id: '1',
    value: '1',
    name: '草稿箱',
  },
  {
    id: '2',
    value: '2',
    name: '全部',
  },
]
const active = ref('') // 是否为草稿箱(1/2)
// 查询条件
const searchQuery = ref<IHandoverListQuery>({
  recordNo: '', // 记录单编号
  createUserName: '', // 创建人
  createTimeStart: '', // 创建时间-起始
  createTimeEnd: '', // 创建时间-结束
  draft: '',
  offset: 1,
  limit: 20,
})
const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据
const total = ref(0) // 数据条数
const loadingTable = ref(false) // 表格loading
const expandLoading = ref(false) // 展开表格的loading

// 表头
const columns = ref<TableColumn[]>([
  { text: '文件编号', value: 'recordNo', align: 'center', width: '200' },
  { text: '物资名称', value: 'goodsName', align: 'center' },
  { text: '数量', value: 'amount', align: 'center' },
  { text: '交接人', value: 'handoverUserName', align: 'center' },
  { text: '交接时间', value: 'handoverTime', align: 'center', width: '120' },
  // { text: '物资名称、交接时间及数量', value: 'goodsListStr', align: 'center' },
  { text: '创建人', value: 'createUserName', align: 'center' },
  { text: '创建时间', value: 'createTime', align: 'center', width: '120' },
])
const handoverList = ref<Array<IConsumableHandover>>([]) // 表格数据
const expandRowKey = ref<string>('')
const goodsListExpand = ref<Array<IConsumableHandoverGoods>>([])

const expandRowKeys = computed(() => {
  return [expandRowKey.value]
})

// 逻辑
// 跳转到新建的页面
const addConsumableHandover = () => {
  router.push({
    query: {
      type: 'create',
    },
    path: 'consumableHandover/detail',
  })
}

// 点击编辑按钮
const updateInfo = (row: IConsumableHandover) => {
  router.push({
    query: {
      type: 'update',
      id: row.id,
    },
    path: 'consumableHandover/detail',
  })
}

// 点击查看（或编辑）按钮
const detail = (row: IConsumableHandover) => {
  if (active.value === '1') { // 草稿箱
    router.push({
      query: {
        type: 'detail',
        id: row.id,
      },
      path: 'consumableHandover/detail',
    })
  }
  else {
    router.push({
      query: {
        type: 'detail',
        id: row.id,
      },
      path: `consumableHandoverDoc/detail/${row.id}`,
    })
  }
}

// 删除废弃物资处理交接记录
const deleteById = (row: any) => {
  ElMessageBox.confirm('是否删除废弃物资处理交接记录', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 删除
    deleteConsumableHandover({ id: row.id }).then((res) => {
      if (res.code === 200) {
        ElMessage.success('废弃物资处理交接记录删除成功')
        fetchData()
      }
      else {
        ElMessage.error(`废弃物资处理交接记录删除失败: ${res.message}`)
      }
    })
  })
}

const getDetailGoodsList = (goods: IConsumableHandover) => {
  expandLoading.value = true
  detailConsumableHandover({ id: goods.id }).then((res) => {
    if (res.code === 200) {
      goodsListExpand.value = res.data.goodsHandleDetailList.map((item: { handoverAmount: string; company: string }) => {
        return {
          ...item,
          handoverAmount: `${item.handoverAmount + item.company}`,
        }
      })
      expandLoading.value = false
    }
  }).catch(() => {
    expandLoading.value = false
  })
}

// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    searchQuery.value.offset = 1
  }
  searchQuery.value.draft = active.value
  getConsumableHandoverList(searchQuery.value).then((response) => {
    if (response.code === 200) {
      handoverList.value = response.data.rows.map((item: IConsumableHandover) => {
        return {
          ...item,
          createTime: item.createTime!.length > 16 ? item.createTime!.substring(0, 10) : '',
          goodsListStr: `${item.goodsName}；${item.handoverTime}；${item.amount}`,
        }
      })
      total.value = parseInt(response.data.total)
    }
    expandRowKey.value = ''
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}

const searchList = () => {
  fetchData(true)
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    searchQuery.value.limit = val.size
  }
  if (val && val.page) {
    searchQuery.value.offset = val.page
  }
  fetchData(true)
}

// 改变页容量
function handleSizeChange(val: number) {
  changePage({ size: val })
}
// 改变当前页
function handleCurrentChange(val: number) {
  changePage({ page: val })
}

// 重置
const reset = () => {
  searchQuery.value = {
    recordNo: '', // 记录单编号
    createUserName: '', // 创建人
    createTimeStart: '', // 创建时间-起始
    createTimeEnd: '', // 创建时间-结束
    draft: '',
    offset: 1,
    limit: 20,
  }
  dateRange.value = ['', '']
  fetchData(true)
}

// 展开行 每次只能展开一行
const expandCurrentRow = (row: IConsumableHandover) => {
  if (expandRowKey.value === '') {
    // 全部收起的状态 展开当前点击的行
    expandRowKey.value = row.recordNo
  }
  else if (expandRowKey.value !== row.recordNo) {
    // 已经有展开的行 切换到当前打开的行
    expandRowKey.value = row.recordNo
  }
  else {
    // 点击的是当前已经展开的行 收起
    expandRowKey.value = ''
  }
}

// 点击行
const expandClickedHandler = async (row: IConsumableHandover) => {
  expandCurrentRow(row)
  if (expandRowKey.value !== '') {
    getDetailGoodsList(row)
  }
}

const tableRowExpandChange = (row: IConsumableHandover) => {
  expandCurrentRow(row)
}

const getLabCodeDict = async () => {
  await getDictByCode('bizLabCode').then((res) => {
    if (res.code === 200) {
      sessionStorage.setItem('bizLabCode', JSON.stringify(res.data))
    }
  })
}

const getGroupCodeDict = async () => {
  await getDictByCode('bizGroupCode').then((res) => {
    if (res.code === 200) {
      sessionStorage.setItem('bizGroupCode', JSON.stringify(res.data))
    }
  })
}

const getDict = async () => {
  getLabCodeDict()
  getGroupCodeDict()
}

watch(dateRange, (val) => {
  if (val) {
    searchQuery.value.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD')
    searchQuery.value.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD')
  }
  else {
    searchQuery.value.createTimeStart = ''
    searchQuery.value.createTimeEnd = ''
  }
})

// 切换tab状态
const changeCurrentButton = (val: string) => {
  active.value = val
  // clearList()
  fetchData()
}

onMounted(async () => {
  await getDict()
  active.value = '1'
  fetchData(true)
})
</script>

<template>
  <app-container>
    <!-- 筛选条件 -->
    <search-area :need-clear="true" @search="searchList" @clear="reset">
      <search-item>
        <el-input v-model="searchQuery.recordNo" placeholder="文件编号" clearable />
      </search-item>
      <search-item>
        <el-input v-model="searchQuery.createUserName" placeholder="创建人" clearable />
      </search-item>
      <search-item>
        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="创建时间（开始）" end-placeholder="创建时间（结束）" />
      </search-item>
    </search-area>

    <!-- 表格数据展示 -->
    <table-container>
      <!-- 表头区域 -->
      <template v-if="proxy.hasPerm(`/resource/outsideService/consumableHandover/add`)" #btns-right>
        <icon-button icon="icon-add" title="新建" @click="addConsumableHandover" />
      </template>

      <el-table
        ref="handoverTableRef"
        v-loading="loadingTable" :data="handoverList" style="width: 100%;" stripe
        border row-key="recordNo"
        :expand-row-keys="expandRowKeys"
        @expand-change="tableRowExpandChange"
      >
        <el-table-column type="expand" width="1">
          <el-table
            v-loading="expandLoading" :show-header="true" :data="goodsListExpand"
            border class="expand-approval-all"
          >
            <el-table-column label="物资名称" prop="goodsName" align="center" />
            <el-table-column label="交接数量" prop="handoverAmount" align="center" />
            <el-table-column label="交接人" prop="handoverUserName" align="center" />
            <el-table-column label="交接时间" prop="handoverTime" align="center" />
          </el-table>
        </el-table-column>

        <el-table-column align="center" label="序号" width="55" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        />

        <el-table-column fixed="right" label="操作" align="center" width="180">
          <template #default="{ row }">
            <el-button size="small" type="primary" link @click="expandClickedHandler(row)">
              <template v-if="expandRowKey !== row.recordNo">
                展开物资
              </template>
              <template v-else>
                收起展开
              </template>
            </el-button>
            <el-button v-if="active === '1'" size="small" type="primary" link @click="updateInfo(row)">
              编辑
            </el-button>
            <el-button size="small" type="primary" link @click="detail(row)">
              详情
            </el-button>

            <el-button v-if="proxy.hasPerm(`/resource/outsideService/consumableHandover/del`) && active === '1'" size="small" type="danger" link @click="deleteById(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="width: 100%;margin-top: 10px;">
        <el-pagination
          :current-page="searchQuery.offset"
          :page-sizes="[10, 20, 30]"
          :page-size="searchQuery.limit"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </table-container>
    <!-- 右上角按钮集合 -->
    <button-box :active="active" :total-refuse="totalRefuse" :total-approval="totalApproval" :total-to-approval="totalToApproval" :menu="menu" @change-current-button="changeCurrentButton" />
  </app-container>
</template>

<style lang="scss" scoped>
:deep(.el-table__expand-icon) {
  visibility: hidden !important;
}

:deep(.el-table__expanded-cell) {
  padding-top: 0 !important;
}

/* 其他状态下的列表 */
.expand-approval-with-status {
  width: calc(100% - 725px);
  margin-left: 255px;
}

/* 全部状态下的列表 */
.expand-approval-all {
  width: calc(100% - 675px);
  margin-left: 255px;
}
</style>