<template>
    <el-dialog title="添加产品" v-model="visible" width="1130px" append-to-body>
        <el-row>
            <el-col :span="24" >
                <el-form style="margin-bottom: 20px"  :model="queryParams" ref="queryFormRef" :inline="true" >

                    <el-form-item label="编号：">
                        <el-input type="text" v-model.trim="queryParams.ssdSkuCode" style="width: 120px" :maxlength="50" placeholder="请输入内部编号"></el-input>
                     </el-form-item>
                    <el-form-item label="接口：">
                        <el-select v-model="queryParams.connectorType" clearable style="width: 120px">
                            <el-option v-for="item in configData.connectorType" :value="item" :key="item">{{ item }}</el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item label="尺寸：">
                        <el-select v-model="queryParams.productSize" clearable style="width: 120px">
                            <el-option v-for="item in configData.productSize" :value="item" :key="item">{{ item }}</el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item label="协议：">
                        <el-select v-model="queryParams.connectorProtocol" clearable style="width: 120px">
                            <el-option v-for="item in configData.connectorProtocol" :value="item" :key="item">{{ item }}</el-option>
                        </el-select>
                     </el-form-item>

                    <el-form-item label="主控：">
                        <el-select v-model="queryParams.coreChipType" clearable style="width: 120px">
                            <el-option v-for="item in configData.coreChipType" :value="item" :key="item">{{ item }}</el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item label="级别：">
                        <el-select v-model="queryParams.productLevel" clearable style="width: 120px">
                            <el-option v-for="item in configData.productLevel" :value="item" :key="item">{{ item }}</el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item label="闪存：">
                        <el-select v-model="queryParams.flashChipType" clearable style="width: 120px">
                            <el-option v-for="item in configData.flashChipType" :value="item" :key="item">{{ item }}</el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item label="容量：">
                        <el-select v-model="queryParams.capacity" clearable style="width: 120px">
                            <el-option v-for="item in configData.capacity" :value="item" :key="item">{{ item }}</el-option>
                        </el-select>
                     </el-form-item>
                    <el-form-item >
                        <el-button type="primary" icon="search" @click="getSkuList">搜索</el-button>
                        <el-button type="primary" @click="resetGetData">重置</el-button>
                    </el-form-item>

                 </el-form>

                <el-table :data="skuData" ref="skuTableRef" @selection-change="handleSelectionChange">
                    <el-table-column  type="selection">   </el-table-column>
                    <el-table-column label="内部编号" prop="ssdSkuCode"> </el-table-column>
                    <el-table-column  prop="connectorType"  label="接口" > </el-table-column>
                    <el-table-column  prop="productSize"  label="尺寸" > </el-table-column>
                    <el-table-column  prop="connectorProtocol"  label="协议" > </el-table-column>
                    <el-table-column  prop="coreChipType"  label="主控" > </el-table-column>
                    <el-table-column  prop="productLevel"  label="级别" > </el-table-column>
                    <el-table-column  prop="flashChipType"  label="内存" > </el-table-column>
                    <el-table-column  prop="capacity"  label="容量" > </el-table-column>
                    <el-table-column  prop="shipmentCount"  label="出货片数" > </el-table-column>

                </el-table>

                <pagination  layout="total, sizes, prev, pager, next" :total="total"
                            v-model:page="queryParams.pageIndex" v-model:limit="queryParams.pageSize" @pagination="getSkuList" />
            </el-col>
        </el-row>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="okPrice">添加</el-button>
            </div>
        </template>
    </el-dialog>



</template>

<script setup lang="ts">

import {listProductType, querySkuVoList, getSkuConfig} from '@/api/product/index'
import downloadPlugins from '@/plugins/download'
import {ProductTypeVo, SkuVo, SkuQueryVo, ProductTypeQuery} from '@/api/product/types'
const visible = ref(false)
const deptCheckStrictly = ref(false)
const deptOptions = ref([])
const total = ref(0)
const skuData = ref([])

const productTypeListVo = ref<Array<ProductTypeVo>>()
const skuVoList = ref<Array<SkuVo>>()
const emits = defineEmits(['callBack'])
//确认报价
const okPrice=()=>{
    emits('callBack', selectedSkuVo.value)
    resetQueryForm()
    reset()
}
const queryForms = {
    ssdSkuId:'',
    ssdSkuCode: '',
    connectorType:'',
    productSize: undefined,
    connectorProtocol: undefined,
    coreChipType: undefined,
    productLevel: undefined,
    flashChipType: undefined,
    capacity: undefined,
    status: 2,
    pageIndex: 1,
    pageSize: 100,
    total: 0,
}
const data = reactive({queryParams:{...queryForms} })
const {queryParams} = toRefs(data)
const getName = (url) =>{
    return url ? url.substring(url.lastIndexOf('/')) : '' ;
}
const skuTableRef = ref()
const reset=()=>{
    skuTableRef.value.clearSelection()
    visible.value = false
}
const resetGetData = ()=>{
    resetQueryForm()
    getSkuList()
}
const resetQueryForm=()=>{
    queryParams.value = {...queryForms};

}
const handleQuery=()=>{

}
const getConfig = async ()=>{
    let data = await getSkuConfig()
    configData.value = data.result
}

const configData:any = ref({
    connectorType: [],
    productSize: [],
    connectorProtocol: [],
    coreChipType: [],
    productLevel: [],
    flashChipType: [],
    capacity: [],
})
const  statusList = reactive([
        {value: 1, label: '预上架'},
        {value: 2, label: '已上架'},
        {value: 3, label: '已下架'},
    ]
)

const getSkuList = async ()=>{
   let data  = await querySkuVoList(queryParams.value)
    skuData.value = data.result.records
    console.log(typeof data.result.total)
    total.value = Number(data.result.total)
}
const download = (url)=>{
    downloadPlugins.oss(url)

}
const getCheckedNodes = ()=>{

}
//产品数量
const countNum = computed(()=>{
    return 0
})
//产品总金额
const totalMoney = computed(()=>{
    return 0
})

const open=()=>{
    visible.value = true
}
const selectedSkuVo = ref<SkuVo>()
const handleSelectionChange=(selection)=>{
    selectedSkuVo.value = selection
}
//提交报价
const submit=()=>{

}
const preStep =()=>{
    visible.value = true
}
const priceInfoForm = reactive({


})
defineExpose({
    open
})
onMounted(()=>{
    getConfig()
    getSkuList()
})
</script>

<style lang="scss" scoped>

</style>
