<template>
    <div>
        <el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="1200px" height="500px">
            <el-card :body-style="cardBodyStyle">
                <el-form inline :model="query">
                    <el-form-item label="签约请示号" style="margin-bottom: 5px;">
                        <el-input v-model="query.signReqNo" placeholder="请输" style="width: 200px; margin-right: 10px;"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="签约请示名称" style="margin-bottom: 5px;">
                        <el-input v-model="query.signReqNm" placeholder="请输入" style="width: 200px; margin-right: 10px;"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="合同标的物" style="margin-bottom: 5px;">
                        <el-input v-model="query.subMatter" placeholder="请输入" style="width: 200px; margin-right: 10px;"
                            clearable></el-input>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card :body-style="cardBodyStyle">
                <el-button type="primary" @click="search">查询</el-button>
            </el-card>

            <el-card :body-style="cardBodyStyle">
                <el-table :data="tableData" border highlight-current-row>
                    <el-table-column v-for="(item, index) in column" :key="index" :prop="item.prop" :label="item.label"
                        header-align="center" align="center" show-overflow-tooltip width="180px" :formatter="formatter">
                    </el-table-column>
                    <el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip width="200px"
                        fixed="right">
                        <template #default="scope">
                            <el-button plain @click="handleSelect(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination v-model:current-page="currentPage" v-model: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>
    </div>
</template>

<script setup>

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

const {
    proxy
} = getCurrentInstance()

import tools from '@/tools'

const cardBodyStyle = ref(tools.style.card)

const dialogVisible = ref(false)
const open = () => {
    dialogVisible.value = true
}
const close = () => {
    dialogVisible.value = false
}

const props = defineProps({
    column: { // form查询项
        type: Array,
        default: () => [
            {
                prop: 'signReqNm',
                label: '签约请示名称',
            },
            {
                prop: 'signReqNo',
                label: '签约请示号',
            },
            {
                prop: 'processInstanceStatus',
                label: '流程状态',
            },
            {
                prop: 'contractParty',
                label: '交易方名称',
            },
            {
                prop: 'signDt',
                label: '预计签约日期',
            },
            {
                prop: 'reqDt',
                label: '请示日期',
            },
            {
                prop: 'contrPrice',
                label: '预计签约金额',
            },
            {
                prop: 'estProfit',
                label: '预计利润',
            },
            {
                prop: 'subMatter',
                label: '合同标的物',
            },
            {
                prop: 'processDesc',
                label: '收付款说明',
            },
            {
                prop: 'riskPoints',
                label: '主要风险点及应对措施',
            },
            {
                prop: 'otherInformation',
                label: '其他情况说明',
            },
        ]
    },
    // tableData: { // form查询数据
    //   type: Array,
    //   default: () => []
    // },
    url: { // form查询数据
        type: String,
        default: 'cot/SignRequest/queryPopup'
    },
    params: {
        type: Object,
    }

})
const query = ref({
    contractParty: '',
    signReqNm: '',
    signReqNo: '',
    subMatter: '',
})



const emit = defineEmits(['receiveFromChild'])
const handleSelect = (row) => {

    emit('receiveFromChild', row)
    close()
}
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])
const tableData = ref([])
const totalRows = ref()
const initTableData = () => {
    tableData.value = []
    query.value.contractParty = props.params.contractParty

    var url = props.url
    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 search = () => {
    initTableData()
}
const handleSizeChange = (val) => {
    pageSize.value = val
    initTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    initTableData()
}

onMounted(() => {
    initTableData()
    getDicList()
})
watch(dialogVisible, (newValue, oldValue) => {
    if (newValue) {
        initTableData()
    } else {

    }
})
defineExpose({
    open,
    close
})


/**
 *  查询字典
 */
const dicList = ref({
    WORKFLOW_STATUS: [],
})
const getDicList = () => {
    var url = 'framework/Common/querySelectorList'
    var param = {
        type: JSON.stringify(['WORKFLOW_STATUS'])
    }
    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            dicList.value = response.data.data
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}

const formatter = (row, column, cellValue, index) => {
    if (!cellValue || cellValue == null || cellValue == '') {
        return cellValue
    }
    switch (column.property) {
        case 'processInstanceStatus':
            cellValue = dicList.value.WORKFLOW_STATUS.find(item => item.dicCode == cellValue).dicName
            break
    }

    return cellValue
}
/**
 *  查询字典
 */
</script>

<style></style>