<template>
    <div>
        <div class="describe">标的需求</div>
        <div class="padding">
            <div class="buttons">
                <el-button @click="add">添加</el-button>
                <el-button @click="delAllSelection">删除</el-button>
            </div>
            <dataTable :table-data="ruleForm.commodityVOList" :columns="columns" :is-pageobj="false" @sendSelection="getSelection">
                <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="examine(scope.row, scope.$index)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </dataTable>
            <el-dialog :visible.sync="dialogVisible" title="添加标的" width="50%">
                <el-form :model="searchData" :rules="rules" ref="searchData" label-width="150px">
                    <el-form-item label="标的编码：" prop="encoding">
                        <el-input v-model.trim="searchData.encoding" placeholder="请输入" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="标的名称：" prop="bidName">
                        <el-input v-model.trim="searchData.bidName" placeholder="请输入" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="数量：" prop="quantity">
                        <el-input
                            v-model.trim="searchData.quantity"
                            onkeyup="value=value.replace(/[^\d]/g,'')"
                            placeholder="请输入"
                            maxlength="30"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="计量单位：" prop="unit">
                        <el-input v-model.trim="searchData.unit" placeholder="请输入" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌：" prop="brand">
                        <el-input v-model.trim="searchData.brand" placeholder="请输入" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="规格型号：" prop="specification">
                        <el-input v-model.trim="searchData.specification" placeholder="请输入" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="标杆价(元)：" prop="price">
                        <el-input-number
                            v-model="searchData.price"
                            :min="0"
                            :controls="false"
                            :precision="2"
                            placeholder="请输入"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="备注：" prop="remark">
                        <el-input v-model.trim="searchData.remark" placeholder="请输入" maxlength="30"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sure">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { generateNumber } from '@api/common/list';
import dataTable from '@components/nopageTable.vue';
import dataForm from '@components/dataForm.vue';
export default {
    components: {
        dataTable,
        dataForm
    },
    props: {
        ruleForm: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            // 表单验证
            rules: {
                encoding: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                bidName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                quantity: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                unit: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                brand: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                specification: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                price: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ]
            },
            multipleSelection: [],
            dialogVisible: false,
            searchData: {
                encoding: '',
                bidName: '',
                quantity: '',
                unit: '',
                brand: '',
                specification: '',
                price: undefined,
                remark: ''
            },
            tableData: [],
            columns: [
                {
                    selection: true
                },
                {
                    label: '标的编码',
                    prop: 'encoding'
                },
                {
                    label: '标的名称',
                    prop: 'bidName'
                },
                {
                    label: '数量',
                    prop: 'quantity'
                },
                {
                    label: '计量单位',
                    prop: 'unit'
                },
                {
                    label: '品牌',
                    prop: 'brand'
                },
                {
                    label: '规格型号',
                    prop: 'specification'
                },
                {
                    label: '标杆价(元)',
                    prop: 'price'
                },
                {
                    label: '备注',
                    prop: 'remark'
                },
                {
                    slot: 'operate'
                }
            ], // 操作列

            pageObj: {
                size: 10,
                total: 1,
                currentPage: 1,
                sizes: [100, 200, 300],
                func: (currentPage) => {
                    this.pageTurning(currentPage);
                }
            },
            type: '',
            idx: ''
        };
    },

    methods: {
        // 删除操作
        handleDelete(row, index) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.ruleForm.commodityVOList.splice(index, 1);
                })
                .catch(() => {});
        },
        getSelection(val) {
            console.log(val);
            this.multipleSelection = val;
        },
        // 删除操作
        delAllSelection() {
            let val = this.multipleSelection;
            if (val.length > 0) {
                console.log(val);
                val.forEach((va, index) => {
                    this.ruleForm.commodityVOList.forEach((v, i) => {
                        if (va.bidName === v.bidName) {
                            this.ruleForm.commodityVOList.splice(i, 1);
                        }
                    });
                });
                this.$message.success('删除成功');
                this.multipleSelection = [];
            } else {
                this.$message.error('没有选择删除的项');
            }
        },
        // 确认添加需求
        async sure() {
            const valid = await this.$refs['searchData'].validate();
            console.log(valid);
            if (valid) {
                let type = this.type;
                if (type === 0) {
                    this.ruleForm.commodityVOList.push(this.searchData);
                } else {
                    this.$set(this.ruleForm.commodityVOList, this.idx, this.searchData);
                }
                this.dialogVisible = false;
            }
        },
        examine(row, index) {
            this.type = 1;
            this.idx = index;
            this.searchData = Object.assign({}, row);
            this.dialogVisible = true;
        },
        async add() {
            try {
                this.type = 0;
                this.dialogVisible = true;
                const { data, code } = await generateNumber(2);
                let searchData = {
                    encoding: data,
                    bidName: '',
                    quantity: '',
                    unit: '',
                    brand: '',
                    specification: '',
                    price: '',
                    remark: ''
                };
                console.log(searchData);
                this.searchData = searchData;
            } catch (e) {
                console.log(e);
            }
        },
        next() {
            let projectCommodityList = this.tableData;
            let ruleForm = {};
            ruleForm.projectCommodityList = projectCommodityList;
            this.$emit('getruleForm', ruleForm);
            this.$parent.next();
        }
    }
};
</script>

<style scoped>
.padding {
    box-sizing: border-box;
    padding: 10px 20px 30px 20px;
}

.buttons {
    margin-bottom: 30px;
}

.button {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20px;
    margin-right: 20px;
}
</style>
