<template>
    <div class="zj-equationEditing">
        <el-dialog
            title="公式编辑"
            :visible.sync="equationEditing.show"
            width="90%"
            style="min-width: 900px;"
            :close-on-click-modal="false"
            :show-close="!loading"
        >
            <div>
                <div class="equationEditing-top">
                    <el-button
                        size="mini"
                        @click="form.data.sourcecode += '+';$refs['sourcecode'].focus();"
                    >加</el-button>
                    <el-button
                        size="mini"
                        @click="form.data.sourcecode += '-';$refs['sourcecode'].focus();"
                    >减</el-button>
                    <el-button
                        size="mini"
                        @click="form.data.sourcecode += '*';$refs['sourcecode'].focus();"
                    >乘</el-button>
                    <el-button
                        size="mini"
                        @click="form.data.sourcecode += '/';$refs['sourcecode'].focus();"
                    >除</el-button>
                    <el-button
                        size="mini"
                        @click="form.data.sourcecode += '(';$refs['sourcecode'].focus();"
                    >左括号</el-button>
                    <el-button
                        size="mini"
                        @click="form.data.sourcecode += ')';$refs['sourcecode'].focus();"
                    >右括号</el-button>
                    <div style="display:inline-block;margin-left:50px;">
                        修改版本：
                        <el-select clearable
                            size="mini"
                            v-model="form.data.oclock"
                            placeholder=""
                            @change="getFa"
                            style="width: 95px; margin-right:12px;">
                            <el-option
                                v-for="item of clocks"
                                :key="item"
                                :value="item"
                                :label="item"
                            ></el-option>
                        </el-select>
                        保存版本：
                        <el-date-picker size="mini"
                            type="month"
                            v-model="form.data.nclock"
                            placeholder="请选择"
                            style="width: 108px;"
                            format="yyyyMM"
                            value-format="yyyyMM"
                        ></el-date-picker>
                    </div>
                </div>
                <el-row class="equationEditing-bottom">
                    <el-col :span="12">
                        <el-input
                            ref="sourcecode"
                            type="textarea"
                            class="text-top"
                            v-model="form.data.sourcecode"
                        ></el-input>
                        <div style="padding: 5px 0;">
                            <el-button
                                size="mini"
                                type="danger"
                                @click="form.data.sourcecode='';filterForm.data.code='';filterForm.data.itemtype='';filterForm.data.description='';form.analysis='';"
                            >清空</el-button>
                            <el-button
                                style="margin-left: 15px;"
                                size="mini"
                                type="primary"
                                @click="but_analysis()"
                            >解析</el-button>
                            <span style="margin-left: 15px;">解析结果为：</span>
                        </div>
                        <el-input
                            type="textarea"
                            class="text-bottom"
                            v-model="form.analysis"
                            readonly
                        ></el-input>
                    </el-col>
                    <el-col
                        :span="12"
                        class="right"
                    >
                        <el-form
                            size="mini"
                            label-width="60px"
                        >
                            <div style="float: left;">
                                <el-form-item label="公式类别" label-width="60px">
                                    <el-select
                                        filterable clearable
                                        v-model="filterForm.data.itemtype"
                                        placeholder="公式类别"
                                        style="width: 90px;"
                                    >
                                        <el-option
                                            value=""
                                            label="全部"
                                        ></el-option>
                                        <el-option
                                            value="R"
                                            label="实绩"
                                        ></el-option>
                                        <el-option
                                            value="P"
                                            label="计划"
                                        ></el-option>
                                        <el-option
                                            value="B"
                                            label="平衡"
                                        ></el-option>
                                        <el-option
                                            value="J"
                                            label="计量点"
                                        ></el-option>
                                        <el-option
                                            value="Z"
                                            label="指标"
                                        ></el-option>
                                        <el-option
                                            value="E"
                                            label="折算系数"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>    
                            </div>
                            <div style="margin-left: 150px;">
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="公式名" label-width="48px">
                                            <el-input
                                                v-model="filterForm.data.code"
                                                placeholder="公式名"
                                                style="width: 100%;"
                                                @keyup.enter.native="getTableData(1)"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                <!-- </el-row>
                                <el-row> -->
                                    <el-col :span="14">
                                        <el-form-item label="公式描述">
                                            <el-input
                                                v-model="filterForm.data.description"
                                                placeholder="公式描述"
                                                style="width: 100%;"
                                                @keyup.enter.native="getTableData(1)"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <!-- <el-col :span="12">
                                        <el-form-item label="公式组成">
                                            <el-select
                                                placeholder="公式组成"
                                                style="width: 100%;"
                                            >
                                            </el-select>
                                        </el-form-item>
                                    </el-col> -->
                                </el-row>    
                            </div>
                            <div style="text-align: right;margin-bottom: 5px;">
                                <span style="float: left;margin-top: 6px;">提示：双击表格中的行可添加公式名到左边</span>
                                <el-button
                                    class="button"
                                    type="primary"
                                    size="mini"
                                    icon="el-icon-search"
                                    @click="getTableData(1)"
                                >查询</el-button>
                                <el-button
                                    class="button"
                                    type="primary"
                                    size="mini"
                                    icon="el-icon-refresh"
                                    @click="tableDataCancel();"
                                >重置</el-button>
                            </div>
                        </el-form>
                        <el-table
                            :data="tableData"
                            v-loading="tableLoading"
                            style="width: 100%;"
                            height="260"
                            border
                            size="mini"
                            @row-dblclick="rowDblclick"
                        >
                            <el-table-column
                                sortable
                                prop="code"
                                label="公式名"
                                width="120px"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                                sortable
                                prop="description"
                                label="公式描述"
                                min-width="100px"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                                sortable
                                prop="clock"
                                label="版本号"
                                width="100px"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :page-sizes="[10, 20, 50, 100, 500, 1000]"
                    :page-size="pageSize"
                    :current-page.sync="pageNum"
                    @size-change="tableSizeChange"
                    @current-change="getTableData()"
                    style="text-align: right;display: inline-block;margin-right: 15px;"
                ></el-pagination>
                <el-button
                    size="mini"
                    :loading="loading"
                    @click="equationEditing.show = false"
                >取 消</el-button>
                <el-button
                    size="mini"
                    :loading="loading"
                    type="primary"
                    @click="dataSave()"
                >保 存</el-button>
                <!-- <el-button
                    size="mini"
                    :loading="loading"
                    type="primary"
                    @click="dataSaveOnly()"
                >保存为唯一公式</el-button> -->
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'formulaEditor',
    props: {
        equationEditing: {
            type: Object,
            default: function () {
                return {
                    show: false,
                    form: {
                        data: {
                            clock: '',
                            code: ''
                        }
                    }
                }
            }
        }
    },
    data () {
        return {
            clocks: [],
            filterForm: {
                data: {
                    itemtype: '',
                    code: '',
                    description: ''
                },
                rules: {
                }
            },
            loading: false,
            tableLoading: false,
            tableData: [
                // {
                //     clock: '20191100',
                //     code: 'CS01',
                //     description: '测试1',
                //     isavailable: '1',
                //     sourcecode: '10',
                //     revisor: 'admin',
                //     tablename: '表名'
                // }
            ],
            pageNum: 1,
            pageSize: 20,
            total: 0,
            form: {
                analysis: '',
                data: {
                    id: '',
                    clock: '',
                    code: '',
                    description: '',
                    isavailable: '',
                    sourcecode: '',
                    revisor: '',
                    tablename: '',
                    unitid: '',
                    oclock: '', // 历史版本号
                    nclock: '' // 保存版本号
                },
                rules: {
                }
            }
        };
    },
    watch: {
        'equationEditing.show': function (newVal, oldVal) {
            if (newVal === true) {
                this.form.analysis = '';
                this.filterForm.data.itemtype = '';
                this.filterForm.data.code = '';
                this.filterForm.data.description = '';
                if (this.equationEditing.form.data.code !== '') {
                    this.getByData();
                }
                this.getTableData(1);
            }
        }
    },
    mounted () {
        let that = this;
    },
    methods: {
        getByData () {
            let that = this,
                params = {
                    code: that.equationEditing.form.data.code,
                    clock: that.equationEditing.form.data.clock ? that.equationEditing.form.data.clock : ''
                };
            let url = 'pass/ems/v1/formulas/getByCodeClock';
            that.axios.get(url, {
                params: params
            })
                .then(function (res) {
                    if (res.code === '0') {
                        that.clocks = res.data.result2;
                        let item = res.data.result1;
                        that.form.data = {
                            id: item.id,
                            clock: item.clock,
                            code: item.code,
                            description: item.description,
                            isavailable: item.isavailable,
                            sourcecode: item.sourcecode,
                            revisor: item.revisor,
                            tablename: item.tablename,
                            unitid: item.unitid,
                            oclock: item.clock,
                            nclock: item.clock
                        }
                    } else {
                        that.$message.error(res.message);
                    }
                }).catch(function () {
                });
        },
        // 获取指定版本公式
        getFa (val) {
            if (!val) {
                return true;
            }
            let that = this;
            let params = {
                    code: that.form.data.code,
                    clock: val
                };
            that.form.data.sourcecode = '';
            that.form.analysis = '';
            let url = 'pass/ems/v1/formulas/getByCodeClock';
            that.axios.get(url, {
                params: params
            }).then(function (res) {
                if (res.code === '0') {
                    that.clocks = res.data.result2;
                    let item = res.data.result1;
                    that.form.data = {
                        id: item.id,
                        clock: item.clock,
                        code: item.code,
                        description: item.description,
                        isavailable: item.isavailable,
                        sourcecode: item.sourcecode,
                        revisor: item.revisor,
                        tablename: item.tablename,
                        oclock: item.clock,
                        nclock: item.clock
                    }
                } else {
                    that.$message.error(res.message);
                }
            }).catch(function () {
            });
        },
        // 获取表格中的数据
        getTableData (pageNum) {
            let that = this,
                params = {
                    code: that.filterForm.data.code,
                    clock: '',
                    itemtype: that.filterForm.data.itemtype,
                    description: that.filterForm.data.description,
                    isavailable: '1'
                };
            that.pageNum = pageNum || that.pageNum;
            that.tableLoading = true;
            let url = 'pass/ems/v1/formulas/like/?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize;
            that.axios.get(url, {
                params: params
            })
                .then(function (res) {
                    if (res.code === '0') {
                        let arr = [];
                        for (let item of res.data.list) {
                            arr.push({
                                id: item.id,
                                clock: item.clock,
                                code: item.code,
                                description: item.description,
                                isavailable: item.isavailable,
                                sourcecode: item.sourcecode,
                                revisor: item.revisor,
                                tablename: item.tablename
                            })
                        }
                        that.tableData = arr;
                        that.total = res.data.total;
                    } else {
                        that.$message.error(res.message);
                    }
                    that.tableLoading = false;
                }).catch(function () {
                    that.tableLoading = false;
                });
        },
        // 改变表格显示条数
        tableSizeChange (val) {
            let that = this;
            that.pageSize = val;
            that.getTableData(1);
        },
        // 重置搜索
        tableDataCancel () {
            let that = this;
            for (let key in that.filterForm.data) {
                if (that.filterForm.data[key] instanceof Array) {
                    that.filterForm.data[key] = [];
                } else {
                    that.filterForm.data[key] = '';
                }
            }
            that.getTableData(1);
        },
        // 表格行内点击，选择公式
        rowDblclick (row, event) {
            let that = this;
            that.form.data.sourcecode += '[' + row.code + ']';
            that.$refs['sourcecode'].focus();
        },
        but_analysis () {
            let that = this;
            let SubmitData = {
                id: that.form.data.id,
                clock: that.form.data.nclock,
                code: that.form.data.code,
                description: that.form.data.description,
                isavailable: that.form.data.isavailable,
                sourcecode: that.form.data.sourcecode,
                revisor: that.form.data.revisor,
                tablename: that.form.data.tablename
            };
            let url = 'pass/ems/v1/formulas/analysis/';
            that.axios.post(url, SubmitData, {
                contentType: 'application/json'
            })
                .then(function (res) {
                    if (res.code === '0') {
                        that.form.analysis = res.data;
                    } else {
                        that.$message.error(res.message);
                    }
                })
        },
        // 保存编辑公式
        dataSave () {
            let that = this;
            let SubmitData = {
                id: that.form.data.id,
                clock: that.form.data.clock,
                code: that.form.data.code,
                description: that.form.data.description,
                isavailable: that.form.data.isavailable,
                sourcecode: that.form.data.sourcecode,
                revisor: that.form.data.revisor,
                tablename: that.form.data.tablename
            };
            that.loading = true;
            that.axios.put('pass/ems/v1/formulas/updateMula/?oclock=' + that.form.data.oclock + '&nclock=' + that.form.data.nclock, SubmitData)
                .then(function (res) {
                    if (res.code === '0') {
                        that.$message({
                            message: '公式修改成功',
                            type: 'success'
                        });
                        // that.getTableData();
                        that.equationEditing.show = false;
                    } else {
                        that.$message.error(res.message);
                    }
                    that.loading = false;
                }).catch(function () {
                    that.loading = false;
                });
        },
        // 保存编辑公式为唯一版本
        dataSaveOnly () {
            let that = this;
            let SubmitData = {
                id: that.form.data.id,
                clock: that.form.data.clock,
                code: that.form.data.code,
                description: that.form.data.description,
                isavailable: that.form.data.isavailable,
                sourcecode: that.form.data.sourcecode,
                revisor: that.form.data.revisor,
                tablename: that.form.data.tablename
            };
            that.loading = true;
            that.axios.put('pass/ems/v1/formulas/saveOnly', SubmitData)
                .then(function (res) {
                    if (res.code === '0') {
                        that.$message({
                            message: '公式修改成功',
                            type: 'success'
                        });
                        // that.getTableData();
                        that.equationEditing.show = false;
                    } else {
                        that.$message.error(res.message);
                    }
                    that.loading = false;
                }).catch(function () {
                    that.loading = false;
                });
        },
    }
}
</script>

<style lang="less">
.zj-equationEditing {
    .equationEditing-top {
        padding: 5px;
        border: 1px #ccc solid;
        margin-bottom: 5px;
    }
    .equationEditing-bottom {
        .text-top {
            .el-textarea__inner {
                height: 168px;
                resize: none;
            }
        }
        .text-bottom {
            .el-textarea__inner {
                height: 120px;
                resize: none;
            }
        }
        .right {
            padding-left: 7px;
        }
        .el-form-item {
            margin-bottom: 5px;
        }
    }
}
</style>
