<template>
    <!-- 能源上报_晋泰信和 -->
    <div class="usageData">
        <div class="box">
            <div class="box-top">
                <el-form
                    style="overflow: hidden;"
                    :style="filterForm.show ? null : { height: '0px' }"
                    size="mini"
                    inline
                >
                    <el-form-item label="时间范围">
                        <el-date-picker
                            v-model="filterForm.data.clock"
                            type="daterange"
                            placeholder=""
                            style="width: 280px;"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item
                        label="能源"
                    >
                        <el-select
                            filterable clearable
                            style="width: 100%;"
                            v-model="filterForm.data.dataCode"
                        >
                            <el-option
                                v-for="item of nameObj.dataCode.arr"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select
                            filterable clearable
                            style="width: 100%;"
                            v-model="filterForm.data.status"
                        >
                            <el-option
                                v-for="item of nameObj.status.arr"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="box-top-gjl">
                    <el-button
                        class="button"
                        type="primary"
                        size="mini"
                        icon="el-icon-plus"
                        v-privilege="activeMenu + 'ADD'"
                        @click="but_add"
                        :loading="loading"
                    >新增</el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit-outline"
                        v-privilege="activeMenu + 'PUT'"
                        @click="but_edit_plural()"
                        :loading="loading"
                    >修改</el-button>
                    <el-button
                        class="button"
                        type="primary"
                        size="mini"
                        icon="el-icon-refresh"
                        v-privilege="activeMenu + 'PUT'"
                        @click="but_re_compute()"
                    >重新计算</el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        v-privilege="activeMenu + 'DELETE'"
                        @click="but_del_plural()"
                        :loading="loading"
                    >删除</el-button>
                    <el-button
                        class="button"
                        type="primary"
                        size="mini"
                        icon="el-icon-upload2"
                        @click="upState()"
                        v-privilege="activeMenu + 'PUTDATA'"
                        :loading="loading"
                    >上传</el-button>
                    <el-radio-group
                        v-model="operateType"
                        style="margin-left: 7px;"
                        @change="setOperateType()"
                        v-privilege="activeMenu + 'PUTCONFIG'"
                    >
                        <el-radio label="1" title="系统每天自动进行上传">自动上传</el-radio>
                        <el-radio label="0" title="需要手动进行上传确定操作">人工上传</el-radio>
                    </el-radio-group>
                    <div style="float:right; text-align: right;">
                        <el-button
                            class="button"
                            type="primary"
                            size="mini"
                            icon="el-icon-search"
                            v-privilege="activeMenu + 'QUERY'"
                            @click="getTableData(1)"
                        >查询</el-button>
                        <el-button
                            class="button"
                            type="primary"
                            size="mini"
                            icon="el-icon-refresh"
                            v-privilege="activeMenu + 'QUERY'"
                            @click="tableDataCancel();"
                        >重置</el-button>
                        <el-button
                            size="mini"
                            :icon="filterForm.show ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                            :title="filterForm.show ? '收起搜索区' : '展开搜索区'"
                            @click="filterForm.show = !filterForm.show;
                                $nextTick(() => {
                                    singleTableHeight = getRoleHeight($refs['singleTable'].$el) - 45;
                                }
                            );"
                        >{{ filterForm.show ? '收起' : '展开' }}</el-button>
                    </div>
                </div>
            </div>
            <div class="box-bottom">
                <el-form
                    size="mini"
                    ref="dialog_form_arr"
                    label-width="0px"
                    :model="tableFormDataObj"
                >
                    <el-table
                        stripe
                        id="singleTable"
                        ref="singleTable"
                        :data="tableData"
                        v-loading="tableLoading"
                        style="width: 100%;"
                        :height="singleTableHeight - (dialog.editorBox.show ? 160 : 0)"
                        border
                        size="mini"
                        highlight-current-row
                        @selection-change="handleSelectionChange"
                        :row-class-name="tableRowClassName"
                        @cell-click="cellClick"
                    >
                        <el-table-column
                            type="selection"
                            width="40"
                            align="center"
                            :selectable='checkboxT'
                            fixed="left"
                            class-name="cnspicuous"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="id"
                            label="序号"
                            width="60px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="dt"
                            label="日期"
                            width="80px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="status"
                            label="状态"
                            width="70px"
                            :show-overflow-tooltip="true"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <span
                                    :style="{color: nameObj.status.obj[scope.row.status] ? nameObj.status.obj[scope.row.status].color : ''}"
                                >{{ nameObj.status.obj[scope.row.status] ? nameObj.status.obj[scope.row.status].name : scope.row.status }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="dataCode"
                            label="能源ID"
                            width="85px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="dataName"
                            label="能源名称"
                            width="168px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="usage"
                            label="当日数量"
                            width="120px"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                    v-if="scope.row.isSelection && scope.row.status === '0'"
                                    :prop="scope.row.id + '.usage'"
                                    :rules="dialog.editorBox.form.rules.usage"
                                >
                                    <el-input @keydown.native="keyDown" :id="scope.$index + scope.column.id"
                                    clearable
                                        style="width: 100%;"
                                        v-model="tableFormDataObj[scope.row.id].usage"
                                    ></el-input>
                                    <template slot="error" slot-scope="scope">
                                        <p class="error" :title="scope.error">{{ scope.error }}</p>
                                    </template>
                                </el-form-item>
                                <span v-else>{{scope.row.usage}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="sumval"
                            label="累计数量"
                            width="120px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="unit"
                            label="单位"
                            width="80px"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                    v-if="scope.row.isSelection && scope.row.status === '0'"
                                    :prop="scope.row.id + '.unit'"
                                    :rules="dialog.editorBox.form.rules.unit"
                                >
                                    <el-select
                                        filterable clearable
                                        style="width: 100%;"
                                        v-model="tableFormDataObj[scope.row.id].unit"
                                    >
                                        <el-option
                                            v-for="item of nameObj.unitid.arr"
                                            :key="item.id"
                                            :value="item.id"
                                            :label="item.name"
                                        ></el-option>
                                    </el-select>
                                    <template slot="error" slot-scope="scope">
                                        <p class="error" :title="scope.error">{{ scope.error }}</p>
                                    </template>
                                </el-form-item>
                                <span v-else>{{ nameObj.unitid.obj[scope.row.unit] ? nameObj.unitid.obj[scope.row.unit] : scope.row.unit }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="granularity"
                            label="时间粒度"
                            width="80px"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <span>{{ nameObj.granularity.obj[scope.row.granularity] ? nameObj.granularity.obj[scope.row.granularity] : scope.row.granularity }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="isupload"
                            label="是否上传"
                            width="90px"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <span>{{ scope.row.isupload === '0' ? '否' : scope.row.isupload === '1' ? '是' : '' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="startDate"
                            label="上传开始日期"
                            width="115px"
                            :show-overflow-tooltip="true"
                        >
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="memo"
                            label="备注"
                            min-width="150px"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                    v-if="scope.row.isSelection && scope.row.status === '0'"
                                    :prop="scope.row.id + '.memo'"
                                    :rules="dialog.editorBox.form.rules.memo"
                                >
                                    <el-input @keydown.native="keyDown" :id="scope.$index + scope.column.id"
                                    clearable
                                        style="width: 100%;"
                                        v-model="tableFormDataObj[scope.row.id].memo"
                                    ></el-input>
                                    <template slot="error" slot-scope="scope">
                                        <p class="error" :title="scope.error">{{ scope.error }}</p>
                                    </template>
                                </el-form-item>
                                <span v-else>{{scope.row.memo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            sortable
                            prop="czr"
                            label="创建人"
                            width="70px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="ct"
                            label="创建时间"
                            width="126px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="upman"
                            label="修改人"
                            width="75px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="uptime"
                            label="修改时间"
                            width="125px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="operatorMan"
                            label="上传人"
                            width="70px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            sortable
                            prop="operatorDate"
                            label="上传时间"
                            width="125px"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <!-- 操作单条数据 -->
                        <!-- <el-table-column
                            class-name="gn-TableDownloadExcel-none"
                            label="操作"
                            align="center"
                            width="140px"
                            fixed="right"
                        >
                            <template slot-scope="scope">
                                <div>
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        v-privilege="activeMenu + 'PUT'"
                                        @click="but_edit(scope.row)"
                                        :disabled="scope.row.status === '1'"
                                    >修改</el-button>
                                    <el-button
                                        type="danger"
                                        size="mini"
                                        v-privilege="activeMenu + 'DELETE'"
                                        @click="but_del(scope.row)"
                                        :disabled="scope.row.status === '1'"
                                    >删除</el-button>
                                </div>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </el-form>
                <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;margin-top: 10px;"
                ></el-pagination>
            </div>
            <div
                class="box_edit"
                v-show="dialog.editorBox.show"
                :style="{height: dialog.editorBox.show ? '160px' : '0px'}"
            >
                <div style="padding: 0 20px;">
                    <div class="edit-title">
                        <span class="span-text">编辑区-{{ dialog.editorBox.type === 'add' ? '新增' : '修改' }}</span>
                    </div>
                    <el-form
                        size="mini"
                        :model="dialog.editorBox.form.data"
                        :rules="dialog.editorBox.form.rules"
                        ref="dialog_form"
                        label-width="90px"
                    >
                        <div class="edit-box">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item
                                        label="能源"
                                        prop="dataCode"
                                    >
                                        <el-select
                                            filterable clearable
                                            style="width: 100%;"
                                            v-model="dialog.editorBox.form.data.dataCode"
                                            :disabled="dialog.editorBox.type !== 'add'"
                                        >
                                            <el-option
                                                v-for="item of nameObj.dataCode.arr"
                                                :key="item.id"
                                                :value="item.id"
                                                :label="item.name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="时间粒度"
                                        prop="granularity"
                                    >
                                        <el-select
                                            filterable clearable
                                            style="width: 100%;"
                                            v-model="dialog.editorBox.form.data.granularity"
                                            :disabled="dialog.editorBox.type !== 'add'"
                                        >
                                            <el-option
                                                v-for="item of nameObj.granularity.arr"
                                                :key="item.id"
                                                :value="item.id"
                                                :label="item.name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="业务日期"
                                        prop="dt"
                                    >
                                        <el-date-picker
                                            v-model="dialog.editorBox.form.data.dt"
                                            type="date"
                                            placeholder=""
                                            style="width: 100%;"
                                            :value-format="dialog.editorBox.form.data.granularity === 'MONTH' ? 'yyyy-MM' : 'yyyy-MM-dd'"
                                            :format="dialog.editorBox.form.data.granularity === 'MONTH' ? 'yyyy-MM' : 'yyyy-MM-dd'"
                                            :disabled="dialog.editorBox.type !== 'add'"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item
                                        label="数值"
                                        prop="usage"
                                    >
                                        <el-input clearable
                                            style="width: 100%;"
                                            v-model="dialog.editorBox.form.data.usage"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="单位"
                                        prop="unit"
                                    >
                                        <el-select
                                            filterable clearable
                                            style="width: 100%;"
                                            v-model="dialog.editorBox.form.data.unit"
                                        >
                                            <el-option
                                                v-for="item of nameObj.unitid.arr"
                                                :key="item.id"
                                                :value="item.id"
                                                :label="item.name"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="备注"
                                        prop="memo"
                                    >
                                        <el-input clearable
                                            style="width: 100%;"
                                            v-model="dialog.editorBox.form.data.memo"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="edit-but">
                                <el-button
                                    @click="dialog.editorBox.show = false"
                                    :loading="loading"
                                    size="mini"
                                >取 消</el-button>
                                <el-button
                                    type="primary"
                                    @click="dataSave()"
                                    :loading="loading"
                                    size="mini"
                                >保 存</el-button>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { zCheckNumber1 } from '@/utils/validator.js'
import store from '@/store/index.js';
import {formatDate, commonSummaries} from '@/utils/util.js';
export default {
    name: 'usageData',
    data () {
        let start = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
        let end = new Date(new Date().getFullYear(), new Date().getMonth() + 1, '01');
        end = new Date(end - 1);
        return {
            store,
            rowIndex: '',
            columnId: '',
            focusTarget: null,
            seqArr: [],
            editSetFlag: '',
            userInfo: {
                data: null
            },
            activeMenu: '',
            operateType: '0',
            filterForm: {
                show: true,
                data: {
                    clock: [formatDate(start, 'yyyy-MM-dd'), formatDate(end, 'yyyy-MM-dd')],
                    dataCode: '',
                    status: ''
                },
                rules: {
                }
            },
            pageNum: 1,
            pageSize: 20,
            total: 0,
            singleTableHeight: 100,
            tableData: [
                // {
                //     id: '1',
                //     dataCode: 'cs1',
                //     dataName: '测试1',
                //     dt: '2019-01-11 10:00:00',
                //     usage: '257',
                //     ct: '2019-01-01 10:00:00',
                //     status: '0',
                //     unit: 'T',
                //     granularity: 'DAY',
                //     czr: 'admin',
                //     memo: '测试'
                // }
            ],
            multipleSelection: [],
            tableFormDataObj: {},
            nameObj: {
                unitid: {
                    obj: {},
                    arr: []
                },
                granularity: {
                    obj: {
                        'DAY': '日',
                        'MONTH': '月'
                    },
                    arr: [
                        {
                            id: 'DAY',
                            name: '日'
                        },
                        {
                            id: 'MONTH',
                            name: '月'
                        }
                    ]
                },
                dataCode: {
                    obj: {},
                    arr: []
                },
                status: {
                    obj: {
                        '0': {
                            name: '未传输',
                            color: '#7a7a7a'
                        },
                        '1': {
                            name: '已传输',
                            color: 'red'
                        }
                    },
                    arr: [
                        {
                            id: '0',
                            name: '未传输'
                        },
                        {
                            id: '1',
                            name: '已传输'
                        }
                    ]
                }
            },
            loading: false,
            tableLoading: false,
            dialog: {
                editorBox: {
                    show: false,
                    type: '',
                    form: {
                        data: {
                            id: '',
                            czr: '',
                            dataCode: '',
                            dt: '',
                            usage: '',
                            unit: '',
                            granularity: '',
                            memo: ''
                        },
                        rules: {
                            dataCode: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            dt: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            usage: [
                                { required: true, message: '该项不能为空', trigger: 'change' },
                                { validator: zCheckNumber1, trigger: 'change' }
                            ],
                            unit: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            granularity: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ]
                        }
                    }
                }
            }
        }
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    mounted () {
        let that = this;
        window.PEDataObj = {
            // 将数据绑定到window上，供main页面使用
            vm: that,
            // tableArr：用于导出成Excel的表格的信息
            tableArr: [
                {
                    name: '',
                    id: 'singleTable'
                }
            ]
        };
        that.$nextTick(() => {
            // 立即获取的height有一定偏差，通过setTimeout延迟来解决
            setTimeout(() => {
                that.singleTableHeight = that.getRoleHeight(that.$refs['singleTable'].$el) - 45;
            }, 1);
        });
        that.store.dispatch('getUserInfo').then((res) => {
            that.userInfo.data = res.data;
        });
        that.getOperateType();
        that.getDataCode();
        that.getUnitIdData();
        that.getTableData();
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 获取能源信息
        getDataCode () {
            let that = this
            let url = 'pass/ems/v1/usagedataconfigs/getIdAndNote';
            that.axios.get(url)
                .then(function (res) {
                    if (res.code === '0') {
                        let arr = [];
                        let obj = {};
                        for (let item of res.data) {
                            arr.push({
                                id: item.energyCode,
                                name: item.note
                            })
                            obj[item.energyCode] = item.note;
                        }
                        that.nameObj.dataCode.arr = arr;
                        that.nameObj.dataCode.obj = obj;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        // 获取标准计量单位
        getUnitIdData () {
            let that = this
            let url = 'pass/ems/v1/trmunits/getIdAndName';
            that.axios.get(url)
                .then(function (res) {
                    if (res.code === '0') {
                        let arr = [];
                        let obj = {};
                        for (let item of res.data) {
                            arr.push({
                                id: item.id,
                                name: item.name
                            })
                            obj[item.id] = item.name;
                            if (item.name === '吨') {
                                that.nameObj.unitid.defaults = that.nameObj.unitid.defaults ? that.nameObj.unitid.defaults : item.id;
                            }
                        }
                        that.nameObj.unitid.arr = arr;
                        that.nameObj.unitid.obj = obj;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        // 获取表格中的数据
        getTableData (pageNum) {
            let that = this,
                params = {
                    clock: that.filterForm.data.clock && that.filterForm.data.clock[0],
                    clocke: that.filterForm.data.clock && that.filterForm.data.clock[1],
                    dataCode: that.filterForm.data.dataCode,
                    status: that.filterForm.data.status
                };
            that.pageNum = pageNum || that.pageNum;
            that.tableLoading = true;
            let url = 'pass/ems/v1/usagedatas/searchList?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize;
            that.axios.get(url, {
                params: params
            })
                .then(function (res) {
                    if (res.code === '0') {
                        let arr = [];
                        for (let i = 0; i < res.data.list.length; i++) {
                            let item = res.data.list[i];
                            arr.push({
                                seq: i,
                                id: item.id,
                                dataCode: item.dataCode,
                                dataName: item.dataName,
                                dt: item.dt,
                                usage: item.usage,
                                ct: item.ct,
                                status: item.status,
                                unit: item.unit,
                                granularity: item.granularity,
                                czr: item.czr,
                                memo: item.memo,
                                upman: item.upman,
                                uptime: item.uptime,
                                operatorMan: item.operatorMan,
                                operatorDate: item.operatorDate,
                                sumval: item.sumval,
                                isupload: item.isupload,
                                startDate: item.startDate
                            })
                        }
                        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;
            that.filterForm.data.clock = [];
            that.filterForm.data.dataCode = '';
            that.getTableData(1);
        },
        // 只允许对未接收的数据进行操作
        checkboxT (row, index) {
            if (row.status === '1') {
                return false;
            } else {
                return true;
            }
        },
        // 回车换行1
        keyDown (event1) {
            let tdTarget = event1.target;
            let _this = this;
            while (tdTarget.tagName !== 'TD') {
                tdTarget = tdTarget.parentElement;
            }
            // 如果按下键盘下键或者回车键
            if (event.keyCode === 40 || event.keyCode === 13) {
                let index = parseInt(this.rowIndex);
                // index++;
                if (index !== this.seqArr[this.seqArr.length - 1]) {
                    for (let i = 0; i < this.seqArr.length; i++) {
                        if (index === this.seqArr[i]) {
                        index = this.seqArr[i + 1];
                        break;
                        }
                    }
                }
                this.editSetFlag = index + this.columnId;
                let id = '#' + this.editSetFlag;
                console.log('id', id);
                this.$nextTick(() => {
                    $(id).click();
                });
            }
        },
        // 回车换行2
        tableRowClassName ({row, rowIndex}) {
            // 把每一行的索引放进row
            row.index = rowIndex;
        },
        // 回车换行3
        cellClick (row, column, cell, event) {
            let _this = this;
            this.rowIndex = row.index;
            this.columnId = column.id;
            _this.editSetFlag = row.index + column.id;
            _this.focusTarget = event.target;
            while (_this.focusTarget.tagName !== 'TD') {
                _this.focusTarget = _this.focusTarget.parentElement;
            }
            _this.$nextTick(() => {
                let target = this.focusTarget;
                $(target).find('input').focus();
            });
        },
        // 回车换行4
        handleSelectionChange (val) {
            let that = this;
            let tableFormDataObj = {};
            let arr = [];
            for (let item of val) {
                arr.push(item.seq);
            }
            this.seqArr = arr.sort(sortNumber);
            for (let item of that.tableData) {
                item.isSelection = false;
            }
            for (let item of val) {
                let obj = {};
                let xId = item.id;
                if (that.tableFormDataObj[xId]) {
                    tableFormDataObj[xId] = that.tableFormDataObj[xId];
                } else {
                    for (let key in item) {
                        obj[key] = item[key];
                    }
                    tableFormDataObj[xId] = obj;
                }
                item.isSelection = true;
            }
            that.tableFormDataObj = tableFormDataObj;
            that.multipleSelection = val;
        },
        but_add () {
            let that = this;
            for (let key in that.dialog.editorBox.form.data) {
                that.dialog.editorBox.form.data[key] = '';
            }
            that.dialog.editorBox.type = 'add';
            that.dialog.editorBox.show = true;
            setTimeout(() => {
                that.$refs['dialog_form'].clearValidate();
            }, 100);
        },
        but_edit (row) {
            let that = this;
            for (let key in that.dialog.editorBox.form.data) {
                if (typeof row[key] !== 'undefined') {
                    that.dialog.editorBox.form.data[key] = row[key];
                }
            }
            that.dialog.editorBox.type = 'edit';
            that.dialog.editorBox.show = true;
        },
        but_del (row) {
            let that = this;
            that.$confirm('是否删除该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                state: 'warning'
            }).then(() => {
                that.axios.delete('pass/ems/v1/usagedatas/' + row.id)
                    .then(function (res) {
                        if (res.code === '0') {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            that.getTableData();
                        } else {
                            that.$message.error(res.message);
                        }
                    }).catch(function () {
                    });
            }).catch(() => {
            });
        },
        dataSave () {
            let that = this;
            let SubmitData = {
                id: that.dialog.editorBox.form.data.id,
                dataCode: that.dialog.editorBox.form.data.dataCode,
                dataName: that.nameObj.dataCode.obj[that.dialog.editorBox.form.data.dataCode],
                dt: that.dialog.editorBox.form.data.dt,
                usage: that.dialog.editorBox.form.data.usage,
                // ct: that.dialog.editorBox.form.data.ct,
                // status: that.dialog.editorBox.form.data.status,
                unit: that.dialog.editorBox.form.data.unit,
                granularity: that.dialog.editorBox.form.data.granularity,
                czr: that.userInfo.data.userCode,
                memo: that.dialog.editorBox.form.data.memo
            };
            that.$refs['dialog_form'].validate((valid) => {
                if (valid) {
                    if (that.dialog.editorBox.type === 'add') {
                        that.loading = true;
                        that.axios.post('pass/ems/v1/usagedatas/', SubmitData, {
                            contentType: 'application/json'
                        })
                            .then(function (res) {
                                if (res.code === '0') {
                                    that.$message({
                                        message: '新增成功',
                                        type: 'success'
                                    });
                                    that.getTableData();
                                    that.dialog.editorBox.show = false;
                                } else {
                                    that.$message.error(res.message);
                                }
                                that.loading = false;
                            }).catch(function () {
                                that.loading = false;
                            });
                    } else {
                        that.loading = true;
                        that.axios.put('pass/ems/v1/usagedatas/' + SubmitData.id, SubmitData)
                            .then(function (res) {
                                if (res.code === '0') {
                                    that.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    that.getTableData();
                                    that.dialog.editorBox.show = false;
                                } else {
                                    that.$message.error(res.message);
                                }
                                that.loading = false;
                            }).catch(function () {
                                that.loading = false;
                            });
                    }
                }
            });
        },
        but_edit_plural () {
            let that = this;
            if (that.multipleSelection.length > 0) {
                that.$refs['dialog_form_arr'].validate((valid) => {
                    if (valid) {
                        let SubmitData = [];
                        for (let key in that.tableFormDataObj) {
                            SubmitData.push({
                                id: that.tableFormDataObj[key].id,
                                usage: that.tableFormDataObj[key].usage,
                                unit: that.tableFormDataObj[key].unit,
                                dt: that.tableFormDataObj[key].dt,
                                dataCode: that.tableFormDataObj[key].dataCode,
                                memo: that.tableFormDataObj[key].memo
                            });
                        }
                        that.loading = true;
                        that.axios.put('pass/ems/v1/usagedatas/batchUpdate', SubmitData)
                            .then(function (res) {
                                if (res.code === '0') {
                                    that.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    that.getTableData();
                                    that.dialog.editorBox.show = false;
                                } else {
                                    that.$message.error(res.message);
                                }
                                that.loading = false;
                            }).catch(function () {
                                that.loading = false;
                            });
                        }
                });
            } else {
                this.$message.error('至少要选择一条数据');
            }
        },
        but_del_plural () {
            let that = this;
            if (that.multipleSelection.length > 0) {
                let SubmitData = [];
                for (let item of that.multipleSelection) {
                    SubmitData.push({
                        id: item.id
                    });
                }
                that.$confirm('是否删除已选数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    state: 'warning'
                }).then(() => {
                    that.axios.delete('pass/ems/v1/usagedatas/batchDel', {
                        data: SubmitData,
                        contentType: 'application/json'
                    })
                        .then(function (res) {
                            if (res.code === '0') {
                                that.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                that.getTableData();
                            } else {
                                if (res.code === '51') {

                                }
                                that.$message.error(res.message);
                            }
                        }).catch(function () {
                        });
                }).catch(() => {
                });
            } else {
                this.$message.error('至少要选择一条数据');
            }
        },
        upState () {
            let that = this;
            if (that.multipleSelection.length > 0) {
                let keyArr = ['usage', 'unit', 'memo'];
                for (let item of that.multipleSelection) {
                    for (let key of keyArr) {
                        if ((item[key] === null ? '' : item[key]) !== (that.tableFormDataObj[item.id][key] === null ? '' : that.tableFormDataObj[item.id][key])) {
                            // console.log(item[key], that.tableFormDataObj[item.id][key])
                            this.$message.error('请先将修改的数据保存后再执行上传操作！');
                            return false;
                        }
                    }
                }
                that.$confirm('本次将要上传' + that.multipleSelection.length + '条数据，上传后将无法撤销！是否确定?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    state: 'warning'
                }).then(() => {
                    let SubmitData = [];
                    for (let item of that.multipleSelection) {
                        SubmitData.push(item.id);
                    }
                    that.loading = true;
                    that.axios.post('pass/ems/v1/usagedatas/updatedata/', SubmitData, {
                        contentType: 'application/json'
                    })
                        .then(function (res) {
                            if (res.code === '0') {
                                that.$message({
                                    message: res.data,
                                    type: 'success'
                                });
                                that.getTableData();
                            } else {
                                that.$message.error(res.message);
                            }
                            that.loading = false;
                        }).catch(function () {
                            that.loading = false;
                        });
                }).catch(() => {
                });
            } else {
                this.$message.error('至少要选择一条数据');
            }
        },
        getOperateType () {
            let that = this;
            let url = 'pass/ems/v1/usagedatas/getuploadstate/';
            that.axios.get(url)
                .then(function (res) {
                    if (res.code === '0') {
                        that.operateType = res.data;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        setOperateType () {
            let that = this;
            that.axios.post('pass/ems/v1/usagedatas/setuploadstate/?uploadstate=' + that.operateType)
                .then(function (res) {
                    if (res.code === '0') {
                    } else {
                        that.getOperateType();
                        that.$message.error(res.message);
                    }
                }).catch(function () {
                    that.getOperateType();
                });
        },
        // 批量重新计算
        but_re_compute () {
            let that = this;
            if (that.multipleSelection.length > 0) {
                that.$refs['dialog_form_arr'].validate((valid) => {
                    if (valid) {
                        let SubmitData = [];
                        for (let key in that.tableFormDataObj) {
                            SubmitData.push({
                                id: that.tableFormDataObj[key].id,
                                dt: that.tableFormDataObj[key].dt,
                                dataCode: that.tableFormDataObj[key].dataCode
                            });
                        }
                        that.loading = true;
                        that.axios.put('pass/ems/v1/usagedatas/batchCompute', SubmitData)
                            .then(function (res) {
                                if (res.code === '0') {
                                    that.$message({
                                        message: '重新生成数据成功',
                                        type: 'success'
                                    });
                                    that.getTableData();
                                } else {
                                    that.$message.error(res.message);
                                }
                                that.loading = false;
                            }).catch(function () {
                                that.loading = false;
                            });
                    }
                });
            } else {
                this.$message.error('至少要选择一条数据');
            }
        }
    }
}
function sortNumber (a, b) {
  return a - b
}
</script>

<style lang="less">
.usageData {
    min-width: 700px;
    height: 100%;
    .box {
        height: 100%;
        padding: 15px 15px 0 15px;
        .box-top {
            .el-form-item {
                margin-bottom: 7px;
            }
            .box-top-gjl {
                overflow: hidden;
                padding: 7px 0;
                border-top: 1px solid #ccc;
                // border-bottom: 1px solid #ccc;
                // margin-bottom: 6px;
            }
        }
        .el-table .el-table__row {
            height: 35px;
        }
        .el-table__body .el-form-item--mini.el-form-item {
            margin: 0px;
            .error {
                overflow: hidden;
                color: #f56c6c;
                font-size: 12px;
                line-height: 1;
            }
        }
        .box_edit {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            border-top: 1px solid #e4e7ed;
            -webkit-box-shadow: 0 -5px 5px -5px #e0e0e0;
            box-shadow: 0 -5px 5px -5px #e0e0e0;
            .edit-title {
                text-align: left;
                .span-text {
                    display: inline-block;
                    height: 26px;
                    line-height: 26px;
                    font-size: 14px;
                    padding: 0 10px;
                    border-left: 3px solid #70baf2;
                    margin-bottom: 5px;
                }
            }
            .edit-box {
                position: relative;
                // padding-right: 160px;
                .edit-but {
                    // position: absolute;
                    // width: 160px;
                    top: 0;
                    right: 0;
                    text-align: right;
                }
            }
        }
    }
}
</style>
