<template>
    <div class="worldgamescost-all">
        <el-dialog width="960px" :close-on-click-modal="false" title="新增编辑" :visible.sync="NeweditsVisible">
            <el-form :model="enterpriseprofitlabel" :rules="enterpriseprofitlabelrules" ref="enterpriseprofitlabel">
                <div class="Newedits-form">
                    <el-form-item prop="t0" label="直属父类 :" :label-width="formLabelWidth">
                        <el-input v-model="enterpriseprofitlabel.t0" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="projectWork" label="项目工作 :" :label-width="formLabelWidth">
                        <el-input v-model="enterpriseprofitlabel.projectWork" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="calculationContent" label="测算内容 :" :label-width="formLabelWidth">
                        <el-input v-model="enterpriseprofitlabel.calculationContent" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="quantity" label="数量 :" :label-width="formLabelWidth">
                        <el-input-number style="width: 100%" @blur="calculateTotal" :precision="2" :controls="false"
                            v-model="enterpriseprofitlabel.quantity"></el-input-number>
                    </el-form-item>
                    <el-form-item prop="unit" label="单位 :" :label-width="formLabelWidth">
                        <el-input v-model="enterpriseprofitlabel.unit" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="unitPrice" label="单价 :" :label-width="formLabelWidth">
                        <el-input-number style="width: 100%" @blur="calculateTotal" :precision="2" :controls="false"
                            v-model="enterpriseprofitlabel.unitPrice" controls-position="right" class="with-unit-right">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="周期-时间 :" :label-width="formLabelWidth">
                        <el-input-number style="width: 100%" @blur="calculateTotal" :precision="0" :controls="false"
                            v-model="enterpriseprofitlabel.cycleTime"></el-input-number>
                    </el-form-item>
                    <el-form-item label="周期-单位 :" :label-width="formLabelWidth">
                        <el-input v-model="enterpriseprofitlabel.cycleUnit" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="itemTotal" label="项总金额 :" :label-width="formLabelWidth">
                        <el-input-number style="width: 100%" :precision="2" :controls="false"
                            v-model="enterpriseprofitlabel.itemTotal" controls-position="right" class="with-unit-right"></el-input-number>
                    </el-form-item>
                    <el-form-item label="说明 :" :label-width="formLabelWidth">
                        <el-input v-model="enterpriseprofitlabel.specification" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="备注 :" :label-width="formLabelWidth">
                    <el-input type="textarea" placeholder="请输入内容" v-model="enterpriseprofitlabel.remark" show-word-limit>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="NeweditsVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('enterpriseprofitlabel')">确 定</el-button>
            </div>
        </el-dialog>
        <div class="worldgamescost-hade">
            <div>
                <el-input style="width:300px" placeholder="请输入内容" v-model="input" clearable></el-input>
                <el-button @click="search" type="primary">查 询</el-button>
            </div>
            <el-button @click="openNewEdit('新增')" type="primary">新 增</el-button>
        </div>
        <div class="worldgamescost-table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="rowIndex" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="t0" label="直属父类" width="180">
                </el-table-column>
                <el-table-column prop="projectWork" label="项目工作" width="180">
                </el-table-column>
                <el-table-column prop="calculationContent" label="测算内容" width="180">
                </el-table-column>
                <el-table-column prop="quantity" label="数量" width="100">
                    <template slot-scope="scope">
                        <span>{{ townum(scope.row.quantity) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="100">
                </el-table-column>
                <el-table-column prop="unitPrice" label="单价" width="100">
                    <template slot-scope="scope">
                        <span>{{ townum(scope.row.unitPrice) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cycleTime" label="周期-时间" width="120">
                </el-table-column>
                <el-table-column prop="cycleUnit" label="周期-单位" width="120">
                </el-table-column>
                <el-table-column prop="itemTotal" label="项总金额" width="120">
                    <template slot-scope="scope">
                        <span>{{ townum(scope.row.itemTotal) }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="specification" label="说明" width="150">
                </el-table-column> -->
                <el-table-column prop="remark" label="备注">
                    <template slot-scope="scope">
                        <el-popover placement="top" width="300" trigger="hover">
                            {{ scope.row.remark }}
                            <span
                                style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;cursor: pointer;color: #48a2ff;"
                                slot="reference">{{ scope.row.remark }}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="openNewEdit('编辑',scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteRow(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageIndex" :page-sizes="[10, 15, 20, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { Decimal } from 'decimal.js'
export default {
    data() {
        return {
            input: '',
            tableData: [],
            userId: '',
            token: '',
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            NeweditsVisible:false,
            formLabelWidth: '90px',
            id : 0,
            enterpriseprofitlabel: {
                t0: '',//直属父类
                projectWork: '',//项目工作
                calculationContent: '',//测算内容
                quantity: '',//数量
                unit: '',//单位
                unitPrice: '',//单价
                cycleTime: 1,//周期-时间
                cycleUnit: '',//周期-单位
                itemTotal: '',//项总金额
                specification: '',//说明
                remark: ''//备注
            },
            enterpriseprofitlabelrules: {
                t0: [{ required: true, message: '请输入直属父类', trigger: 'blur' }],
                projectWork: [{ required: true, message: '请输入项目工作', trigger: 'blur' }],
                calculationContent: [{ required: true, message: '请输入测算内容', trigger: 'blur' }],
                quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
                unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
                unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }],
                itemTotal: [{ required: true, message: '请输入项总金额', trigger: 'blur' }],
            },
        }
    },
    methods: {
        //保留两位小数
        townum(val) {
            val = Number(val);
            return val.toFixed(2);
        },
        //查询
        search() {
            this.pageIndex = 1;
            this.GamesBudgetMasterList();
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageIndex = 1;
            this.pageSize = val;
            this.GamesBudgetMasterList()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.GamesBudgetMasterList()
        },
        //计算项目总金额
        calculateTotal() {
            this.enterpriseprofitlabel.itemTotal=0;
            this.enterpriseprofitlabel.itemTotal = (new Decimal(this.enterpriseprofitlabel.quantity) * new Decimal(this.enterpriseprofitlabel.cycleTime)* new Decimal(this.enterpriseprofitlabel.unitPrice)).toFixed(2);
        },
        //数据初始化
        initData() {
            this.enterpriseprofitlabel = {
                t0: '',
                projectWork: '',
                calculationContent: '',
                quantity: '',
                unit: '',
                unitPrice: '',
                cycleTime: 1,
                cycleUnit: '',
                itemTotal: '',
                specification: '',
                remark: ''
            };
        },
        //打开新增编辑弹窗
        openNewEdit(val,id) {
            this.NeweditsVisible = true;
            this.initData();
            if(val=='新增'){
                this.id=0;
            }else{
                this.id=id;
                this.GamesBudgetMasterInfo(this.id);
            }
        },
        //获取详情
        GamesBudgetMasterInfo(id) {
            var url = "/api/Resource/GamesBudgetMasterInfo/"+id
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.enterpriseprofitlabel = res.data.data;
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取数据源失败！");
            });
        },
        //获取表格
        GamesBudgetMasterList() {
            this.tableData = [];
            var url = "/api/Resource/GamesBudgetMasterList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    pageIndex: that.pageIndex,
                    pageSize: that.pageSize,
                    search: that.input,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.total = res.data.count;
                    that.tableData = res.data.data;
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取数据源失败！");
            });
        },
        //删除行
        deleteRow(id) {
            this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Resource/GamesBudgetMasterDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data: {
                        id: id,
                        currUserId: that.userId
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message.success(res.data.msg);
                        that.GamesBudgetMasterList();
                    } else {
                        that.$message.error(res.data.msg);
                    }
                }).catch(function (error) {
                    that.$message.error("删除失败！");
                });
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        //保存
        GamesBudgetMasterSave() {
            this.enterpriseprofitlabel.id=this.id;
            this.enterpriseprofitlabel.currUserId=this.userId;
            var url = "/api/Resource/GamesBudgetMasterOP"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: that.enterpriseprofitlabel
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message.success(res.data.msg);
                    that.NeweditsVisible = false;
                    that.GamesBudgetMasterList();
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("保存失败！");
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.GamesBudgetMasterSave();
                } else {
                    this.$message.error("提交失败，请检查表单内容！");
                }
            });
        },
    },
    mounted() {
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.GamesBudgetMasterList();
    }
}
</script>
<style>
.worldgamescost-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}

.worldgamescost-table {
    margin-top: 15px;
}

.worldgamescost-table .block {
    text-align: center;
    margin-top: 10px;
}

.worldgamescost-hade {
    display: flex;
    justify-content: space-between;
}
.Newedits-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.Newedits-form .el-form-item{
    width: 48%;
}
.with-unit-right .el-input__inner {
    padding-right: 60px;
}
.with-unit-right::after {
    content: "CNY";
    position: absolute;
    right: 10px;
    top: 50%;
    font-weight: 600;
    transform: translateY(-50%);
    color: #606266;
}
</style>