<template>
    <headerTop @search="searchFn" @reset="resetFn" @export="exportFn" @deleteBatch="deleteBatchFn"
        @auditBatch="auditBatchFn" :selectItemList="selectItemList"></headerTop>
    <addCom ref="addComRef" @send="initTableList"></addCom>
    <el-card shadow="always" class="content_body_row">
        <el-table :data="tableListInfo.list" border style="width: 100%" show-overflow-tooltip
            :max-height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'"
            :height="'calc(100vh - 72px - 48px - 65px - 12px - 60px  - 88px)'" :row-key="getRowKeys"
            @selection-change="handleSelectionChange" :header-cell-style="{ background: '#F2F3F5' }">
            <el-table-column type="selection" width="55" :reserve-selection="true" />
            <el-table-column type="index" width="72" label="序号" />
            <el-table-column prop="companyName" label="企业名称" min-width="150" />
            <el-table-column prop="code" label="编码" min-width="160">
            </el-table-column>
            <el-table-column prop="v_mnoney" label="租赁范围" min-width="160">
            </el-table-column>
            <el-table-column prop="parentDevType" label="装备类型" min-width="160">
            </el-table-column>

            <el-table-column prop="devName" label="装备名称" min-width="160">
            </el-table-column>
            <el-table-column prop="v_money" label="租金" min-width="160">
                <template #default="scope">
                    <div>
                        {{ scope.row.monthLeasePrice }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" min-width="160">
                <template #default="scope">
                    <div class="todo_status_c" v-if="scope.row.maStatus == '15'">
                        待上架

                    </div>
                    <div class="pass_status_c" v-else-if="scope.row.maStatus == '16'">
                        待租
                    </div>
                    <div class="pass_status_c" v-else-if="scope.row.maStatus == '17'">
                        在租
                    </div>
                    <div class="reject_status_c" v-else-if="scope.row.maStatus == '18'">
                        下架
                    </div>
                    <div class="pass_status_c" v-else-if="scope.row.maStatus == '331'">
                        待审批
                    </div>
                    <div class="pass_status_c" v-else-if="scope.row.maStatus == '332'">
                        上架驳回
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">

                <template #default="scope">
                    <el-button type="primary" size="small" @click.prevent="auditFn(scope.row)">
                        审批
                    </el-button>
                    <el-button type="primary" size="small" @click.prevent="showFn(scope.row)">
                        查看
                    </el-button>
                    <!-- <el-button type="danger" size="small" @click.prevent="deleteRowFn(scope.row)">
                        下架
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="paination_out">
            <Pagination :currentPage="paginationInfo.pageNum" :pageSize="paginationInfo.pageSize" @sendPage="getPageFn">
            </Pagination>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import headerTop from "./com/headerTop.vue"
import addCom from "./com/addCom.vue"
import { ElConfirmBeforeOpert } from "utils/elementCom"
import { apiOffList, apiOff } from "http/api/equip"
import {ElMessage} from "element-plus"
const addComRef = ref()
const paginationInfo = reactive({
    pageNum: 1,
    pageSize: 15
})
let total = ref(0)
let tableListInfo = reactive({
    list: []
})
let searchParams: any = {
    typeId: []
}
const selectItemList = ref([])


const editRowFn = (row: any) => {
    addComRef.value.edit({
        a: "111"
    })

}

const deleteItem = (row: any) => {
    const itemID = row.v_id
    console.log("ITEMid", row)
}

const deleteRowFn = (row: any) => {
    ElConfirmBeforeOpert(
        '操作确认',
        '是否确定下架？',
        deleteItem,
        '确定',
        '取消',
        row
    )

}

const searchFn = (params: any) => {
    searchParams = params
    initTableList()
}

const resetFn = (params: any) => {
    searchParams = params
    initTableList()
}

const exportFn = (val: any) => {

}
const auditFn = (row: any) => {
    addComRef.value.edit(row)
}
const showFn = (row: any) => {
    addComRef.value.open(row)
}




const getPageFn = (val: any) => {
    paginationInfo.pageNum = val.pageNum
    paginationInfo.pageSize = val.pageSize
    initTableList()
}

const initTableList = async () => {
    const params = {
        ...searchParams,
        ...paginationInfo,
        typeId: searchParams.typeId.pop()
    }
    const res: any = await apiOffList(params)
    console.log("apiGetCompanyInfoSelectList", res)
    tableListInfo.list = res.rows
    // tableListInfo.list = 
    total.value = res.total
}

const getRowKeys = (row: any) => {
    return row.maId
}

const handleSelectionChange = (val: any) => {
    console.log("valhandleSelectionChange", val)
    selectItemList.value = val
}

const deleteBatchFn = () => {
    const selectList = selectItemList.value
    console.log("selectList",)
}
const auditBatchFn = () => {
    const selectList = selectItemList.value
    ElConfirmBeforeOpert(
        '操作确认',
        '是否确定审批？',
        batchFn,
        '确定',
        '取消',
        selectList
    )
}

const batchFn = async (ev: any) => {
    console.log("batchFn", ev)

    const params = ev.map((ele: any) => {
        return {
            maId: ele.maId,
            id: ele.creator,
            applyCompany: ele.companyName,
            type: "1",
            status: '1'
        }
    })
    const res = await apiOff(params)
    console.log("apiOff", res)
    ElMessage({
        type: 'success',
        message: "审批成功"
    })
    initTableList()
}



onMounted(() => {
    initTableList()
})

</script>

<style scoped lang="scss"></style>
