<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse pb-2">
            <li>
                <a href="javascript:;" class=" hover:underline" @click="goHome">首页</a>
            </li>
            <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2 text-primary">
                <span>出入明细</span>
            </li>
        </ul>
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="入库明细" name="first"></el-tab-pane>
            <el-tab-pane label="出库明细" name="second"></el-tab-pane>
        </el-tabs>


        <div v-if="activeName == 'first'" class="panel pb-0 mt-6">

            <div class="flex md:items-center md:flex-row flex-col mb-5 gap-5">

                <div class="flex items-center gap-5 ltr:ml-auto rtl:mr-auto">
                    <div class="dropdown">
                        <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="0"
                            class="align-middle">
                            <button type="button"
                                class="whitespace-nowrap flex items-center border font-semibold border-[#e0e6ed] dark:border-[#253b5c] rounded-md px-4 py-2 text-sm dark:bg-[#1b2e4b] dark:text-white-dark">
                                <span class="ltr:mr-1 rtl:ml-1">选择</span>
                                <icon-caret-down class="w-5 h-5" />
                            </button>
                            <template #content>
                                <ul class="whitespace-nowrap">
                                    <template v-for="(col, i) in cols" :key="i">
                                        <li>
                                            <div class="flex items-center px-4 py-1">
                                                <label class="cursor-pointer mb-0">
                                                    <input type="checkbox" class="form-checkbox" :id="`chk-${i}`"
                                                        :value="col.field" @change="col.hide = !$event.target.checked"
                                                        :checked="!col.hide" />
                                                    <span :for="`chk-${i}`" class="ltr:ml-2 rtl:mr-2">{{ col.title
                                                        }}</span>
                                                </label>
                                            </div>
                                        </li>
                                    </template>
                                </ul>
                            </template>
                        </Popper>
                    </div>
                    <div>
                        <input v-model="search" type="text" class="form-input" placeholder="Search..." />
                    </div>
                </div>
            </div>

            <div class="datatable">
                <vue3-datatable :rows="rows" :columns="cols" :totalRows="rows?.length" :sortable="true" :search="search" style="min-height: 500px;"
                    skin="whitespace-nowrap bh-table-hover"
                    firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                    lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
                    previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                    nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'>
                    <template #in_warehouse_id="data">
                        {{ warehouseName(data.value.in_warehouse_id) }}
                    </template>
                    <template #warehouse_id="data">
                        {{ warehouseName(data.value.warehouse_id) }}
                    </template>
                    <template #type="data">
                        {{ typeName(data.value.type) }}
                    </template>
                    <template #has_submit="data">
                        {{ deliveryName(data.value.has_submit) }}
                    </template>
                    <!-- 定义操作栏的模板 -->
                    <template #actions="data">
                        <button v-if="data.value.has_submit == 'N'" @click="inStorage(data)"
                            class="btn btn-primary">编辑</button>
                    </template>
                    <template #isActive="">
                        <!--  <span class="capitalize" :class="data.value.isActive ? 'text-success' : 'text-danger'">{{
                            data._rawValue }}</span> -->
                    </template>
                </vue3-datatable>
                <el-pagination class="p-2 flex justify-end dark:bg-[#0e1726]" v-model:current-page="params.page_no"
                    :page-size="params.page_size" :small="true" layout="total, prev, pager, next" :total="totalRows"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <div v-else class="panel pb-0 mt-6">

            <div class="flex md:items-center md:flex-row flex-col mb-5 gap-5">

                <div class="flex items-center gap-5 ltr:ml-auto rtl:mr-auto">
                    <div class="dropdown">
                        <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="0"
                            class="align-middle">
                            <button type="button"
                                class="whitespace-nowrap flex items-center border font-semibold border-[#e0e6ed] dark:border-[#253b5c] rounded-md px-4 py-2 text-sm dark:bg-[#1b2e4b] dark:text-white-dark">
                                <span class="ltr:mr-1 rtl:ml-1">选择</span>
                                <icon-caret-down class="w-4 h-5" />
                            </button>
                            <template #content>
                                <ul class="whitespace-nowrap">
                                    <template v-for="(col, i) in outcols" :key="i">
                                        <li>
                                            <div class="flex items-center px-4 py-1">
                                                <label class="cursor-pointer mb-0">
                                                    <input type="checkbox" class="form-checkbox" :id="`chk-${i}`"
                                                        :value="col.field" @change="col.hide = !$event.target.checked"
                                                        :checked="!col.hide" />
                                                    <span :for="`chk-${i}`" class="ltr:ml-2 rtl:mr-2">{{ col.title
                                                        }}</span>
                                                </label>
                                            </div>
                                        </li>
                                    </template>
                                </ul>
                            </template>
                        </Popper>
                    </div>
                    <div>
                        <input v-model="search" type="text" class="form-input" placeholder="Search..." />
                    </div>
                </div>
            </div>

            <div class="datatable">
                <vue3-datatable :rows="outrows" :columns="outcols" :totalRows="rows?.length" :sortable="true" style="min-height: 500px;"
                    :search="search" skin="whitespace-nowrap bh-table-hover"
                    firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                    lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
                    previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                    nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'>
                    <template #warehouse_id="data">
                        {{ warehouseName(data.value.warehouse_id) }}
                    </template>
                    <template #has_submit="data">
                        {{ outName(data.value.has_submit) }}
                    </template>
                    <template #type="data">
                        {{ typeOutName(data.value.type) }}
                    </template>
                    <!-- 定义操作栏的模板 -->
                    <template #actions="data">
                        <button v-if="data.value.type !== 'SALE_OUT'" @click="outStorage(data)"
                            class="btn btn-primary">编辑</button>
                    </template>
                    <!--   <template #isActive="data">
                       <span class="capitalize" :class="data.value.isActive ? 'text-success' : 'text-danger'">{{
                            data._rawValue }}</span>
                    </template> -->
                </vue3-datatable>
                <el-pagination class="p-2 flex justify-end dark:bg-[#0e1726]" v-model:current-page="params.page_no"
                    :page-size="params.page_size" :small="true" layout="total, prev, pager, next" :total="totalRows"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Vue3Datatable from '@bhplugin/vue3-datatable';
import { useAppStore } from '@/stores/index';
import { useRouter } from 'vue-router';
import { useMeta } from '@/composables/use-meta';
import { entryOutAPI, infoApi, dictionaryAPI } from '@/api/api'
import IconBell from '@/components/icon/icon-bell.vue';
import IconCaretDown from '@/components/icon/icon-caret-down.vue';
import type { TabsPaneContext } from 'element-plus'


useMeta({ title: 'Column Chooser Table' });
const router = useRouter();
const store = useAppStore();
const search = ref('');
const rows: any = ref([]); // 初始化rows为响应式引用
const outrows: any = ref([]);
const customerList: any = ref([])//初始化客户列表
const warehouseList: any = ref([])//初始化客户列表
const deliveryList: any = ref([])//初始化客户列表
const entryTypeList: any = ref([])//初始化入库状态列表
const outTypeList: any = ref([])//初始化出库状态列表
//入库列表
const cols = ref([
    { field: 'sn', title: '入库单号', isUnique: true, hide: false },
    { field: 'warehouse_id', title: '仓库名称', hide: false },
    { field: 'type', title: '入库类型', hide: false },
    { field: 'order_id_list', title: '订单编号', hide: false },
    { field: 'has_submit', title: '状态', hide: false },
    { field: 'memo', title: '备注', hide: false },
    { field: 'actions', title: '操作', hide: true }
]);
//出库列表
const outcols = ref([
    { field: 'sn', title: '出库单号', isUnique: true, hide: false },
    { field: 'warehouse_id', title: '仓库名称', hide: false },
    { field: 'type', title: '出库类型', hide: false },
    { field: 'order_id_list', title: '订单编号', hide: false },
    { field: 'has_submit', title: '状态', hide: false },
    { field: 'notes', title: '备注', hide: false },
    { field: 'actions', title: '操作', hide: true }
]);
const params: any = ref([
    { page_no: 1, page_size: 10 }
])
const totalRows: any = ref(0);
let activeName: any = ref('first')
const handleClick = (tab: TabsPaneContext) => {
    if (tab.props.name == 'first') {
        getentryList()
    } else {
        getoutList()
    }
    activeName.value = tab.props.name
}

const handleSizeChange = (val: number) => {

    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    params.page_no = val
    if (activeName.value == 'first') {
        getentryList()
    } else {
        getoutList()
    }
    console.log(`current page: ${val}`)
}

//入库
const inStorage = (row) => {
    router.replace({
        name: 'inStorage',
        params: { id: row.value.id }
    });
}
const outStorage = (row) => {
    router.replace({
        name: 'outStorage',
        params: { id: row.value.id }
    });
}
/* 处理订单时间格式 */
/* 处理客户名称 */
/* 仓库名称 */
const warehouseName = (value) => {
    if (value && warehouseList.value && warehouseList.value.data) {
        const type = warehouseList.value.data.find(type => type.id === value);
        return type ? type.name : '';
    }
}
/* 状态*/
const deliveryName = (value) => {
    if (value) {
        return value === 'Y' ? '已入库' : '未入库';
    }
}
/* 出库状态 */
const outName = (value) => {
    if (value) {
        return value === 'Y' ? '已出库' : '未出库';
    }
}
/* 入库类型*/
const typeName = (value) => {
    if (value && entryTypeList.value && entryTypeList.value.data && entryTypeList.value.data.data) {
        const type = entryTypeList.value.data.data.find(type => type.value === value);
        return type ? type.label : '';
    }
}
/* 出库类型*/
const typeOutName = (value) => {
    if (value && outTypeList.value && outTypeList.value.data && outTypeList.value.data.data) {
        const type = outTypeList.value.data.data.find(type => type.value === value);
        return type ? type.label : '';
    }
}
onMounted(() => {
    getentryList()
    getInforList()
});
/* 获取入库列表 */
const getentryList = async () => {
    entryOutAPI.getWarehouseEntry(params).then((res: any) => {
        params.page_no = res.data.page_no
        params.page_size = res.data.page_size
        totalRows.value = res.data.data_total
        rows.value = res.data.data; // 更新rows的值
    });
};
/* 获取出库列表 */
const getoutList = async () => {
    entryOutAPI.getWarehouseOut(params).then((res: any) => {
        params.page_no = res.data.page_no
        params.page_size = res.data.page_size
        totalRows.value = res.data.data_total
        outrows.value = res.data.data; // 更新rows的值
    });
};
/* 获取仓库,字典,客户信息 */
const getInforList = async () => {
    warehouseList.value = await infoApi.warehouseList({})//获取仓库列表
    deliveryList.value = await dictionaryAPI.getExpressList(params)//获取配送方式
    /*  customerList.value = await infoApi.customer({})//获取客户列表
     collectingAccountList.value = await infoApi.collectingAccount({})//获取支付方式列表
      //入库类型 
     API_Setting.getPage({ dictType: "warehouse_entry_type" }).then((res) => {
        this.entryList = res.data;
      });
       出库类型 
      API_Setting.getPage({ dictType: "out_warehouse_type" }).then((res) => {
        this.outList = res.data;
      });
     */
    entryTypeList.value = await dictionaryAPI.getPage({ dictType: "warehouse_entry_type" })//获取入库类型 
    outTypeList.value = await dictionaryAPI.getPage({ dictType: "out_warehouse_type" })//获取出库类型
}
const goHome = () => {
    router.replace({
        name: 'home'
    });
}
</script>
<style>
.bh-pagination {
    display: none !important;
}
</style>
