<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报价</title>
    <meta name="author" content="JIAL">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="HandheldFriendly" content="true">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="icon" href="/static/image/JNlogo.png" type="image/x-icon">
    <link rel="stylesheet" href="/plugins/element-ui/index.css">
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/jnquotation/css/index.css">
</head>
<body>
<div class="container" id="index-app">
    <div class="center-container">
        <div class="form-box">
            <el-form label-width="45%" :model="formLabelAlign">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="加工费" title="蒸汽费/钢丝铠装材料及加工费">
                            <el-input v-model="formLabelAlign.processingFee" placeholder="蒸汽费/钢丝铠装材料及加工费">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span="6">
                        <el-form-item label="生产财务成本" title="生产财务成本">
                            <el-input v-model="formLabelAlign.prodFinancialCost" placeholder="生产财务成本">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="额外账期" title="额外账期">
                            <el-input v-model="formLabelAlign.accountPeriod" placeholder="账期">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="承兑" title="承兑">
                            <el-input v-model="formLabelAlign.acceptance" placeholder="承兑">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="公司管理成本" title="公司管理成本">
                            <el-input v-model="formLabelAlign.companyMgmtCost" placeholder="公司管理成本">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span="6">
                        <el-form-item label="中标服务费" title="中标服务费">
                            <el-input v-model="formLabelAlign.bidServiceFee" placeholder="中标服务费">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="公司净利润" title="公司净利润">
                            <el-input v-model="formLabelAlign.netProfit" placeholder="公司净利润">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="业务费" title="业务费">
                            <el-input v-model="formLabelAlign.businessFee" placeholder="业务费">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="省">
                            <el-input :disabled="true" v-model="formLabelAlign.province" placeholder="省"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item  label="市">
                            <el-input :disabled="true" v-model="formLabelAlign.city" placeholder="市"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="区">
                            <el-input :disabled="true" v-model="formLabelAlign.district" placeholder="区"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item label="公里数">
                            <el-input v-model="formLabelAlign.kilometers" placeholder="公里数">
                                <template slot="append">KM</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="可下浮点数" title="可下浮点数">
                            <el-input v-model="formLabelAlign.canFloat" placeholder="可下浮">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item label="运费">
                            <el-input v-model="formLabelAlign.freight" placeholder="运费">
                                <template slot="append">￥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="净重合计" title="净重合计">
                            <el-input v-model="formLabelAlign.netWeightTotal" placeholder="净重合计">
                                <template slot="append">KG</template>
                            </el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span="6">
                        <el-form-item label="重量合计" title="重量合计">
                            <el-input v-model="formLabelAlign.weightTotal" placeholder="重量合计">
                                <template slot="append">KG</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item label="厂价金额合计" title="厂价金额合计">
                            <el-input v-model="formLabelAlign.totalFactoryAmount" placeholder="厂价金额合计">
                                <template slot="append">￥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item label="实际金额合计" title="实际金额合计">
                            <el-input v-model="formLabelAlign.totalActualAmount" placeholder="实际金额合计">
                                <template slot="append">￥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="button-box">
            <el-button type="text" @click="selectedRegion">选择地区</el-button>
            <el-button type="text" @click="addMaterial">添加物料</el-button>
            <el-button type="text" @click="calculatedData">刷新界面</el-button>
            <el-button type="text"></el-button>
        </div>
        <div class="table-box">
            <el-table
                :data="materialData"
                border
                :cell-style="cellStyle"
                :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center' }">
                    <el-table-column
                        fixed
                        label="编号"
                        type="index"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        fixed
                        width="180"
                        prop="materialName"
                        label="物料名称">
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="quantity"
                        label="数量">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.quantity" >
                                </el-input>
                            </template>
                    </el-table-column>
                    <el-table-column
                        width="120"
                        prop="voltage"
                        label="电压">
                    </el-table-column>
                    <el-table-column
                        width="80"
                        prop="standard"
                        label="标准">
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="costPrice"
                        label="成本价">
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="factoryPrice"
                        label="厂价">
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="netVolume"
                        label="净重量">
                    </el-table-column>
                    <el-table-column
                        width="120"
                        prop="inventory"
                        label="盘具">
                        <template slot-scope="scope">
                            <el-link @click="handleInventoryClick(scope.row, scope.$index)" type="primary">{{ scope.row.inventory }}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="180"
                            prop="invItemCount"
                            label="盘具数量">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.invItemCount" >
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="100"
                        prop="weighInv"
                        label="盘重">
                    </el-table-column>
                    <el-table-column
                            width="180"
                            prop="totalWeight"
                            label="总重">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        width="120"
                        prop="totalCost"
                        label="总成本">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        width="120"
                        prop="totalFacPrice"
                        label="总厂价">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        width="120"
                        prop="totalNetWt"
                        label="总净重">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        width="80"
                        label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleDeleteClick(scope.$index)" style="color: red;" type="text">删除</el-button>
                            </template>
                    </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog class="regionDialogTable" :visible.sync="dialogRegionVisible" width="932px" >
        <div slot="title" style="margin: 0px">
            <el-form>
                <el-form-item >
                    <el-input style="width: 300px; " v-model="regionName" placeholder="请输入地区名称">
                    </el-input>
                    <el-button type="primary" size="small" @click="searchRegion">查询地区</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table
                    :data="getCurrentRegionData"
                    :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
                    :cell-style="{'text-align': 'center', 'padding': '0px'}"
                    highlight-current-row
                    border>
                <el-table-column
                        label="序号"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="province"
                        label="省">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="city"
                        label="市">
                </el-table-column>
                <el-table-column
                        width="200"
                        prop="district"
                        label="区">
                </el-table-column>
                <el-table-column
                        width="200"
                        prop="kilometers"
                        label="公里数">
                </el-table-column>
                <el-table-column
                        width="80"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="chooseRegion(scope.row)" style="color: blue;" type="text">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align: center; margin-top: 10px;">
            <el-pagination
                @current-change="handleRegionCurrentChange"
                :current-page.sync="regionCurrentPage"
                :page-size="pageSize"
                :total="regionTableData.length"
            ></el-pagination>
        </div>
    </el-dialog>
    <el-dialog class="materialDialogTable" :visible.sync="dialogMaterialVisible" width="1200px">
        <div slot="title"  style="margin: 0px">
            <el-form>
                <el-form-item >
                    <el-input style="width: 200px; " v-model="precMaterialName" placeholder="开头物料名称精确查询">
                    </el-input>
                    <el-input style="width: 200px; " v-model="vagueMaterialName" placeholder="物料名称模糊查询">
                    </el-input>
                    <el-input style="width: 200px; " v-model="vagueModel" placeholder="规格模糊查询">
                    </el-input>
                    <el-button type="primary" size="small" @click="searchMaterial">查询物料</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="display: flex; flex-direction: row;">
            <div style="width: 766px">
                <el-table
                        :data="getCurrentMaterialData"
                        ref="materialTable"
                        @selection-change="handleSelectionChange"
                        :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
                        :cell-style="{'text-align': 'center', 'padding': '5px 0px'}"
                        highlight-selection-row
                        :row-key="row => row.materialName"
                        :reserve-selection="true"
                        border>
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="序号"
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            width="200"
                            prop="materialName"
                            label="物料名称">
                    </el-table-column>
                    <el-table-column
                            width="120"
                            prop="model"
                            label="型号">
                    </el-table-column>
                    <el-table-column
                            width="120"
                            prop="specification"
                            label="规格">
                    </el-table-column>
                    <el-table-column
                            width="120"
                            prop="voltage"
                            label="电压">
                    </el-table-column>
                    <el-table-column
                            width="100"
                            prop="standard"
                            label="标准">
                    </el-table-column>
                </el-table>
                <div style="text-align: center; margin-top: 10px;">
                    <el-pagination
                            @current-change="handleMaterialCurrentChange"
                            :current-page.sync="materialCurrentPage"
                            :page-size="pageSize"
                            :total="materialTableData.length"
                    ></el-pagination>
                </div>
            </div>
            <div style="flex-grow: 1; padding-left: 20px;">
                <div
                        v-for="(selectedItem, index) in selectedMaterialItems"
                        :key="index"
                        class="selected-item"
                >
                    {{ selectedItem.materialName }} - {{ selectedItem.voltage }}
                    <el-button @click="removeSelectedItem(selectedItem)" type="text" class="remove-btn">&#10006;</el-button>
                </div>
            </div>
        </div>

        <div style="text-align: center; padding-top: 20px">
            <el-button-group>
                <el-button type="primary" size="small" style="margin-right: 80px" @click="addMaterialToTable">确认</el-button>
                <el-button type="warning" size="small" @click="closeMaterialDialog">取消</el-button>
            </el-button-group>
        </div>
    </el-dialog>
    <el-dialog class="inventoryDialogTable" :visible.sync="dialogInventoryVisible" width="792px" >
        <div>
            <el-table
                    :data="getCurrentInventoryData"
                    :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center', 'padding': '0px'}"
                    :cell-style="{'text-align': 'center', 'padding': '0px'}"
                    highlight-current-row
                    border>
                <el-table-column
                        label="序号"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        width="200"
                        prop="inventory"
                        label="盘具名称">
                </el-table-column>
                <el-table-column
                        width="200"
                        prop="invDesc"
                        label="盘具描述">
                </el-table-column>
                <el-table-column
                        width="200"
                        prop="weighInv"
                        label="盘重">
                </el-table-column>
                <el-table-column
                        width="100"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="chooseInventory(scope.row)" style="color: blue;" type="text">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align: center; margin-top: 10px;">
            <el-pagination
                    @current-change="handleInventoryCurrentChange"
                    :current-page.sync="inventoryCurrentPage"
                    :page-size="pageSize"
                    :total="inventoryTableData.length"
            ></el-pagination>
        </div>
    </el-dialog>
</div>


<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/element-ui/index.js"></script>
<script src="/plugins/calendar/calendar.js"></script>
<script src="/plugins/axios/axios.min.js"></script>
<script src="/plugins/axios/request.js"></script>
<!-- import Script -->
<script src="/static/jnquotation/js/index.js"></script>

<script>
    new Vue({
        el: '#index-app',
        data() {
            return {
                formLabelAlign: {
                    processingFee: '0.60',      /*蒸汽费/钢丝铠装材料及加工费*/
                    prodFinancialCost: '0.40',  /*生产财务成本*/
                    accountPeriod: '1.20',      /*账期*/
                    acceptance: '0.90',         /*承兑*/
                    companyMgmtCost: '1.50',    /*公司管理成本*/
                    bidServiceFee: '0.44',      /*中标服务费*/
                    netProfit: '3.00',          /*公司净利润*/
                    businessFee: '2.00',        /*业务费*/
                    province: '',               /*省*/
                    city: '',                   /*市*/
                    district: '',               /*区*/
                    freight: '',                /*运费*/
                    canFloat: '',               /*可下浮点数*/
                    kilometers: '',             /*公里数*/
                    netWeightTotal: '',         /*净重合计*/
                    weightTotal: '',            /*重量合计*/
                    totalFactoryAmount: '',     /*厂价金额合计*/
                    totalActualAmount: '',      /*实际金额合计*/
                },
                materialData: [

                ],
                regionTableData: [],
                price_0t_5t: '',
                price_5t_10t: '',
                price_10t_25t: '',
                price_25t_100t: '',
                price_100t: '',
                dialogRegionVisible: false,
                regionName: '',
                regionCurrentPage: 1,
                inventoryCurrentPage : 1,
                materialCurrentPage: 1,
                pageSize: 10,
                dialogMaterialVisible: false,
                materialTableData: [],
                selectedMaterialItems: [], // 选中的数据
                savedSelectedMaterials: [], // 保存选中的数据
                precMaterialName: '',
                vagueMaterialName: '',
                vagueModel: '',
                dialogInventoryVisible: false,
                inventoryTableData: [],
                clickedRowIndex: null, // 用于记录点击的行的索引
            }
        },
        computed: {
            getCurrentRegionData() {
                const start = (this.regionCurrentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.regionTableData.slice(start, end);
            },
            getCurrentMaterialData() {
                const start = (this.materialCurrentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.materialTableData.slice(start, end);
            },
            getCurrentInventoryData() {
                const start = (this.inventoryCurrentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.inventoryTableData.slice(start, end);
            },
        },
        created() {
            this.getInventoryData();
        },
        mounted() {

        },
        methods: {
            async init () {

            },

            cellStyle({row, column, rowIndex, columnIndex}) {
                if(columnIndex === 0) {
                    return 'color : black; text-align : center; background : #E0E0E0; padding: 0px';
                } else if (columnIndex === 8) {
                    return 'text-align : center; background : #F5F5F5; padding: 0px';
                } else {
                    return ' text-align : center; padding: 0px';
                }
            },

            handleDeleteClick(index){
                this.materialData.splice(index, 1)
            },

            selectedRegion(){
                this.dialogRegionVisible = true;
            },

            chooseRegion(row) {
                this.dialogRegionVisible = false;
                this.formLabelAlign.province = row.province
                this.formLabelAlign.city = row.city
                this.formLabelAlign.district = row.district
                this.formLabelAlign.kilometers = row.kilometers
                this.price_0t_5t = row.price01
                this.price_5t_10t = row.price02
                this.price_10t_25t = row.price03
                this.price_25t_100t = row.price04
                this.price_100t = row.price05
            },
            searchRegion(){
                if(this.regionName === ''){
                    this.$message({
                        message: '请输入你要查询的地区名称',
                        type: 'warning'
                    });
                }else{
                    const params = {
                        regionName : this.regionName
                    }
                    console.log(params)
                    queryRegionListByName(params).then(res => {
                        this.regionTableData = res.data || []
                        this.regionCurrentPage = 1;
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }
            },

            handleRegionCurrentChange(val) {
                this.currentPage = val;
            },

            handleMaterialCurrentChange(val) {
                this.currentPage = val;

            },

            handleInventoryCurrentChange(val) {
                this.currentPage = val;
            },

            addMaterial(){
                this.dialogMaterialVisible = true;
            },
            handleSelectionChange(selection) {
                selection.forEach(item => {
                    // 判断是否已经存在于已选列表中，避免重复添加
                    if (!this.selectedMaterialItems.some(selectedItem => selectedItem.materialName === item.materialName)) {
                        this.selectedMaterialItems.push(item);
                    }
                });

            },
            removeSelectedItem(selectedItem) {
                // 判断当前数据是否被选择
                const isSelected = this.$refs.materialTable.selection.includes(selectedItem);

                // 从已选列表中移除该项
                const index = this.selectedMaterialItems.findIndex(item => item.materialName === selectedItem.materialName);
                if (index !== -1) {
                    this.selectedMaterialItems.splice(index, 1);
                }

                // 如果当前数据被选择，则取消 el-table 中该项的选择状态
                if (isSelected) {
                    this.$refs.materialTable.toggleRowSelection(selectedItem, false);
                }

            },

            addMaterialToTable() {
                // 将选中的物料信息添加到表格中
                this.materialData = this.materialData.concat(this.selectedMaterialItems);

                // 清空选中的物料信息
                this.selectedMaterialItems = [];
                this.$refs.materialTable.clearSelection();
                this.dialogMaterialVisible = false;

            },

            closeMaterialDialog() {
                this.dialogMaterialVisible = false;
            },

            searchMaterial() {
                if(this.precMaterialName === '' && this.vagueMaterialName === '' && this.vagueModel === '') {
                    this.$message({
                        message: '请输入你要查询的物料条件',
                        type: 'warning'
                    });
                }else {
                    const params = {
                        precMaterialName : this.precMaterialName,
                        vagueMaterialName : this.vagueMaterialName,
                        vagueModel : this.vagueModel
                    }

                    queryMaterialListByParam(params).then(res => {
                        this.materialTableData = res.data || []
                        this.materialCurrentPage = 1;
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })

                }
            },

            handleInventoryClick(row, index) {
                this.clickedRowIndex = index; // 记录点击的行的索引
                this.dialogInventoryVisible = true; // 打开选择盘具的 dialog
            },

            getInventoryData() {
                queryInventoryList().then(res => {
                    this.inventoryTableData = res.data || []
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },

            chooseInventory(row) {
                // 在选择盘具的逻辑中，将选择的盘具信息赋值给之前点击的行的数据
                if (this.clickedRowIndex !== null) {
                    // 假设选择盘具后的数据存储在 this.selectedInventory 中
                    const updatedRow = {
                        inventory: row.inventory, // 盘具名称
                        weighInv: row.weighInv, // 盘重信息
                    };
                    this.$set(this.materialData, this.clickedRowIndex, updatedRow);
                }
                this.dialogInventoryVisible = false; // 打开选择盘具的 dialog
                // 其他逻辑
            },

        },
    })
</script>
</body>
</html>
