<template>
    <div>
        <el-card :body-style="cardBodyStyle">
            <el-form :inline="true" :model="query">
                <el-row style="margin-bottom: 5px;">
                    <el-col :span="5">
                        <el-form-item label="订单号" style="margin-bottom: 0;">
                            <el-input v-model="query.purOrdNo" placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="订单行号" style="margin-bottom: 0;">
                            <el-input v-model="query.purOrdLn" placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="价格执行时间" style="margin-bottom: 0;">
                            <el-date-picker type="datetimerange" v-model="query.priceStartTime"
                                format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm:ss"
                                clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <ButtonBar @search="handleSearch"> </ButtonBar>
        <el-card :body-style="cardBodyStyle">
            <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange"
                height="63vh">
                <el-table-column type="selection" fixed></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="60" fixed>
                    <template #default="scope">
                        <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="true" prop="purOrdNo" label="订单号" min-width="200" header-align="center"
                    align="center" show-overflow-tooltip fixed>
                </el-table-column>
                <el-table-column v-if="true" prop="purOrdLn" label="行号" min-width="100" header-align="center"
                    align="center" show-overflow-tooltip fixed>
                </el-table-column>
                <el-table-column v-if="true" prop="price" label="单价" header-align="center" align="center"
                    min-width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="taxPrice" label="含税单价" header-align="center" align="center"
                    min-width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="priceStartTime" label="价格执行时间" header-align="center" align="center"
                    min-width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="priceSts" label="价格状态" header-align="center" align="center"
                    min-width="100" show-overflow-tooltip :formatter="formatter">
                    <template #default="{ row }">
                        <el-tag v-if="row.priceSts == 'A'">新增</el-tag>
                        <el-tag type="success" v-else-if="row.priceSts == 'B'">生效</el-tag>
                        <el-tag type="info" v-else-if="row.priceSts == 'C'">作废</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" header-align="center" align="center" width="200px">
                    <template #default="{ row }">
                        <el-button plain type="warning" @click="handlePriceSts(row)"
                            v-if="row.priceSts == 'B'">作废</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <el-card :body-style="cardBodyStyle">
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>

        <el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1200px" top="5vh"
            @open="openDialog">
            <el-form :model="form" label-width="80px" label-position="right" inline ref="ruleFormRef" :rules="rules">
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button plain type="success" @click="handleSave(ruleFormRef)">保存</el-button>
                    <el-button plain type="danger" @click="handleCancelSave">取消</el-button>
                </div>
            </template>
        </el-dialog>


    </div>
</template>

<script setup>
import ButtonBar from '@/components/ButtonBar.vue'

import {
    ref,
    reactive,
    onMounted,
    getCurrentInstance
} from 'vue'

const {
    proxy
} = getCurrentInstance()

import tools from '@/tools'
const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)

onMounted(() => {
    handleSearch()
})



/**
 *   查询
 */




const query = ref({
    purOrdNo: '',
    purOrdLn: '',
    priceStartTime: '',
})
const tableData = ref([])
const handleSearch = () => {
    currentPage.value = 1
    getTableData()
}

const getTableData = () => {
    var url = 'pur/OrdPrice/query'
    var param = {
        page: currentPage.value,
        rows: pageSize.value,
        params: JSON.stringify(query.value)
    }
    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            tableData.value = response.data.data.records
            totalRows.value = response.data.data.total
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}
/**
 *   查询
 */

/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(10)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
/**
 * 分页
 */



/**
 * 保存、修改、删除
 */
const openDialog = () => {
}

const handlePriceSts = (row) => {

    var url = 'pur/OrdPrice/updatePriceSts'
    var param = {
        json: JSON.stringify(row),
        priceSts: 'C'
    }
    proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            getTableData()
            dialogVisible.value = false
        } else {
            // ElMessage.error('操作失败！' + response.data.msg)
            ElMessage({
                message: '操作失败' + response.data.msg,
                type: 'error'
            })
        }
    })
}
</script>

<style></style>