<template>
    <el-dialog title="选择物料BOM" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="80%">
        <el-card shadow="never">
            <bomSearch @search="reload" />


            <!-- 表格 -->

            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" height="calc(100vh - 350px)"
            :need-page="true" class="dict-table" @cell-click="cellClick">


                <!-- 表头工具栏 -->
                <template v-slot:action="{ row }">
                    <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
                </template>
            </ele-pro-table>


        </el-card>
        <div class="btns">
            <el-button type="primary" size="small" @click="selected">选择</el-button>
            <el-button size="small" @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import AssetTree from '@/components/AssetTree';
import bomSearch from './BOM-search.vue'
import { getPage } from '@/api/material/BOM';
export default {
    components: { AssetTree, bomSearch },
    data() {
        return {
            visible: false,
            // 表格列配置
            columns: [



                {
                    label: '序号',
                    columnKey: 'index',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'code',
                    label: 'BOM编码',
                    showOverflowTooltip: true
                },
                {
                    prop: 'name',
                    label: 'BOM名称',
                    showOverflowTooltip: true
                },
                {
                    prop: 'categoryCode',
                    label: '产品编码',
                    showOverflowTooltip: true
                },
                {
                    prop: 'categoryName',
                    label: '产品名称',
                    showOverflowTooltip: true
                },
                {
                    prop: 'version',
                    label: '版本'
                },
                {
                    prop: 'status ',
                    label: '状态',
                    formatter: (row) => {
                        return this.statusOpt[row.status];
                    }
                },
                {
                    prop: 'createUserName',
                    label: '创建人',
                    showOverflowTooltip: true
                },
                {
                    prop: 'createTime',
                    label: '创建日期',
                    showOverflowTooltip: true
                },

                {
                    action: 'action',
                    slot: 'action',
                    align: 'center',
                    label: '选择'
                }

            ],

            statusOpt: {
                '-1': '草稿',
                0: '已停用',
                1: '已发布'
            },

            radio: null,

        }
    },

    watch: {

    },
    methods: {
        /* 表格数据源 */
        async datasource({ page, limit, where, order }) {
            return getPage({
                ...where,
                pageNum: page,
                size: limit
            });
        },



        /* 刷新表格 */
        reload() {
            this.$refs.table.reload();
        },
        open(item) {
            if (item) {
                this.current = {
                    id: item.routingId,
                    name: item.routingName,
                    code: item.routingCode
                }
                this.radio = item.routingId
            }
            this.visible = true
        },

        // 单击获取id
        cellClick(row) {
            this.current = row
            this.radio = row.id
        },
        handleClose() {
            this.visible = false
            this.current = null
            this.radio = ''
        },
        selected() {
            console.log(this.current)
            if (!this.current) {
                return this.$message.warning('请选择物料BOM')
            }
            this.$emit('changeBom', this.current)
            this.handleClose()
        },
    }
}
</script>
  
<style lang="scss" scoped>
.tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
}

.table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
        background: #f2f2f2;
    }
}

.pagination {
    text-align: right;
    padding: 10px 0;
}

.btns {
    text-align: center;
    padding: 10px 0;
}

.topsearch {
    margin-bottom: 15px;
}
</style>
  