<!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/zmquotation/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">刷新界面</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="180"
                        prop="voltage"
                        label="电压">
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="standard"
                        label="标准">
                    </el-table-column>
                    <el-table-column
                        width="180"
                        prop="core"
                        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="180"
                        prop="inventory"
                        label="盘具">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.inventory" >
                                </el-input>
                            </template>
                    </el-table-column>
                    <el-table-column
                        width="180"
                        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.row)" 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" class="regionTable-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
                @size-change="handleRegionSizeChange"
                @current-change="handleRegionCurrentChange"
                :current-page.sync="regionCurrentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                :total="regionTableData.length"
            ></el-pagination>
        </div>
    </el-dialog>
    <el-dialog class="materialDialogTable" :visible.sync="dialogMaterialVisible" width="1300px">
        <div slot="title" class="regionTable-title" style="margin: 0px">
            <el-form>
                <el-form-item >
                    <el-input style="width: 200px; " v-model="regionName" placeholder="开头精确查询">
                    </el-input>
                    <el-input style="width: 200px; " v-model="regionName" placeholder="模糊查询">
                    </el-input>
                    <el-input style="width: 200px; " v-model="regionName" placeholder="结尾精确查询">
                    </el-input>
                    <el-button type="primary" size="small" @click="searchRegion">查询物料</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="display: flex; flex-direction: row;">
            <div style="width: 866px">
                <el-table
                        :data="materialTableData"
                        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
                        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-column
                            width="100"
                            prop="core"
                            label="线芯">
                    </el-table-column>
                </el-table>
            </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>
</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/zmquotation/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: [
                    {
                        province: '浙江',
                        city: '杭州',
                        district: '西湖区',
                        kilometers: 10
                    },
                    {
                        province: '上海',
                        city: '上海',
                        district: '黄浦区',
                        kilometers: 20
                    },
                ],
                price_0t_5t: '',
                price_5t_10t: '',
                price_10t_25t: '',
                price_25t_100t: '',
                price_100t: '',
                dialogRegionVisible: false,
                regionName: '',
                regionCurrentPage: 1,
                pageSize: 10,
                dialogMaterialVisible: false,
                materialTableData: [
                    {
                        materialName: 'Material 1',
                        model: 'Model A',
                        district: 'Spec 1',
                        voltage: '220V',
                        standard: 'Standard 1',
                        core: 'Core X'
                    },
                    {
                        materialName: 'Material 2',
                        model: 'Model B',
                        district: 'Spec 2',
                        voltage: '110V',
                        standard: 'Standard 2',
                        core: 'Core Y'
                    },
                    // Add more data as needed
                ],
                selectedMaterialItems: [], // 选中的数据
            }
        },
        computed: {
            getCurrentRegionData() {
                const start = (this.regionCurrentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.regionTableData.slice(start, end);
            },
            getCurrentMaterialData(){

            },
        },
        created() {

        },
        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)
                    })
                }
            },

            handleRegionSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1; // 切换每页显示条目数时回到第一页
            },

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

            addMaterial(){
                this.dialogMaterialVisible = true;
            },
            handleSelectionChange(selection) {
                // 当选择发生变化时更新选中数据
                this.selectedMaterialItems = selection;
            },
            removeSelectedItem(selectedItem) {
                // 移除选中的记录
                const index = this.selectedMaterialItems.indexOf(selectedItem);
                if (index !== -1) {
                    this.selectedMaterialItems.splice(index, 1);
                }

                // 同步取消左侧表格中对应项的选择
                const tableIndex = this.materialTableData.indexOf(selectedItem);
                if (tableIndex !== -1) {
                    this.$refs.materialTable.toggleRowSelection(this.materialTableData[tableIndex]);
                }
            },

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

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

            },

            closeMaterialDialog() {
                this.dialogMaterialVisible = false;
            }

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