<template>
    <div class="measurementPlaceChoose">
        <div class="box">
            <div class="box-top">
                <el-form
                    size="mini"
                    label-width="80px"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="能介类型">
                                <el-select
                                    filterable clearable
                                    v-model="filterForm.data.energytypeid"
                                    placeholder="能介类型"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item of nameObj.energytypeid.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="能介">
                                <el-select
                                    filterable clearable
                                    v-model="filterForm.data.energyid"
                                    placeholder="能介"
                                    style="width: 100%;"
                                >
                                    <template v-for="item of nameObj.energyid.arr">
                                        <el-option
                                            v-if="item.energytypeid === filterForm.data.energytypeid || filterForm.data.energytypeid === ''"
                                            :key="item.id"
                                            :value="item.id"
                                            :label="item.name"
                                        ></el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="用能属性">
                                <el-select
                                filterable clearable
                                    v-model="filterForm.data.propertyid"
                                    placeholder="用能属性"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item of nameObj.propertyid.arr"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.name"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="手抄或自动">
                                <el-select
                                filterable clearable
                                    v-model="filterForm.data.itemtype"
                                    placeholder="手抄或自动"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item of nameObj.itemtype.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="位置">
                                <el-select
                                filterable clearable
                                    v-model="filterForm.data.locateid"
                                    placeholder="位置"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item of nameObj.locateid.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="计量点编号">
                                <el-input clearable
                                    v-model.trim="filterForm.data.itemid"
                                    placeholder="计量点编号"
                                    style="width: 100%;"
                                    @keyup.enter.native="getTableData(1)"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="计量点名称">
                                <el-input clearable
                                    v-model.trim="filterForm.data.itemname"
                                    placeholder="计量点名称"
                                    style="width: 100%;"
                                    @keyup.enter.native="getTableData(1)"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="站所">
                                <el-select
                                filterable clearable
                                    v-model="filterForm.data.networkid"
                                    placeholder="站所"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item of nameObj.networkid.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="TAG点别名">
                                <el-input clearable
                                    v-model="filterForm.data.tagAlias"
                                    placeholder="TAG点别名"
                                    style="width: 100%;"
                                    @keyup.enter.native="getTableData(1)"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div style="text-align: right;margin-bottom: 5px;border-bottom: 1px #ccc solid;padding-bottom: 5px;">
                    <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>
            </div>
            <div class="box-bottom">
                <div class="box-left">
                    <el-table stripe
                        :data="tableData"
                        v-loading="tableLoading"
                        style="width: 100%;"
                        :height="'250px'"
                        border
                        size="mini"
                        highlight-current-row
                    >
                        <el-table-column
                            label="查询结果"
                        >
                            <el-table-column
                    sortable
                                prop="itemid"
                                label="计量点编号"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                    sortable
                                prop="itemname"
                                label="计量点名称"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                    sortable
                                prop="tagAlias"
                                label="TAG别名"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                    sortable
                                prop="itemtype"
                                label="手抄或者自动"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            >
                                <template slot-scope="scope">
                                    <span>{{ nameObj.itemtype.obj[scope.row.itemtype] ? nameObj.itemtype.obj[scope.row.itemtype] : scope.row.itemtype }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                    sortable
                                prop="locateid"
                                label="位置"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            >
                                <template slot-scope="scope">
                                    <span>{{ nameObj.locateid.obj[scope.row.locateid] ? nameObj.locateid.obj[scope.row.locateid] : scope.row.locateid }}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            width="70px"
                            fixed="right"
                        >
                            <template slot-scope="scope">
                                <div>
                                    <el-button
                                        v-if="typeof selectedObj[scope.row.itemid] === 'undefined'"
                                        type="primary"
                                        size="mini"
                                        @click="rowAdd(scope.row)"
                                    >选择</el-button>
                                    <el-button
                                        v-else
                                        type="danger"
                                        size="mini"
                                        @click="rowDel(scope.row)"
                                    >取消</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <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"
                        :pager-count="5"
                        @current-change="getTableData()"
                        style="text-align: right;margin-top: 10px;"
                    ></el-pagination>
                </div>
                <div class="box-right">
                    <el-table stripe
                        :data="selectedData"
                        style="width: 100%"
                        :height="'288px'"
                        border
                        size="mini"
                        highlight-current-row
                    >
                        <el-table-column
                            label="已选择计量点"
                        >
                            <el-table-column
                    sortable
                                prop="itemid"
                                label="计量点编号"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                    sortable
                                prop="itemname"
                                label="计量点名称"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column
                    sortable
                                prop="tagAlias"
                                label="TAG别名"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            width="70px"
                            fixed="right"
                        >
                            <template slot-scope="scope">
                                <div>
                                    <el-button
                                        type="danger"
                                        size="mini"
                                        @click="rowDel(scope.row)"
                                    >取消</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'measurementPlaceChoose',
    props: {
        z_data: {
            type: Object,
            default: function () {
                return {
                    codes: '',
                    names: ''
                };
            }
        }
    },
    data () {
        return {
            filterForm: {
                data: {
                    energytypeid: '',
                    energyid: '',
                    propertyid: '',
                    itemtype: '',
                    locateid: '',
                    itemid: '',
                    itemname: '',
                    networkid: '',
                    tagAlias: ''
                },
                rules: {

                }
            },
            tableData: [
                // {
                //     itemid: 'WI190VRS4CJYS501',
                //     itemname: '长江取水量',
                //     tagAlias: '',
                //     itemtype: '自动上传',
                //     locateid: '公共'
                // },
                // {
                //     itemid: 'WS270Z_____CK501',
                //     itemname: '中水回用量',
                //     tagAlias: '',
                //     itemtype: '自动上传',
                //     locateid: '公共'
                // }
            ],
            nameObj: {
                energytypeid: {
                    obj: {},
                    arr: []
                },
                energyid: {
                    obj: {},
                    arr: []
                },
                propertyid: {
                    obj: {},
                    arr: []
                },
                locateid: {
                    obj: {},
                    arr: []
                },
                networkid: {
                    obj: {},
                    arr: []
                },
                itemtype: {
                    obj: {
                        'AUTO': '自动上传',
                        'MANUAL': '手抄',
                        'VIRTUAL': '虚拟',
                        'IMMEDIATE': '瞬时点'
                    },
                    arr: [
                        {
                            id: 'AUTO',
                            name: '自动上传'
                        },
                        {
                            id: 'MANUAL',
                            name: '手抄'
                        },
                        {
                            id: 'VIRTUAL',
                            name: '虚拟'
                        },
                        {
                            id: 'IMMEDIATE',
                            name: '瞬时点'
                        }
                    ]
                }
            },
            pageNum: 1,
            pageSize: 20,
            total: 0,
            tableLoading: false,
            selectedData: [
                // {
                //     itemid: 'WI190VRS4CJYS501',
                //     itemname: '长江取水量'
                // },
                // {
                //     itemid: 'WS270Z_____CK501',
                //     itemname: '中水回用量'
                // }
            ],
            bf_data: [],
            loading: false
        }
    },
    computed: {
        selectedObj: function () {
            let that = this;
            let obj = {};
            for (let item of that.selectedData) {
                obj[item.itemid] = item.itemname;
            }
            return obj;
        }
    },
    mounted () {
        let that = this;
        that.getEnergyTypeIdData();
        that.getEnergyIdData();
        that.getPropertyIdData();
        that.getLocateIdData();
        that.getNetworkIdData();
        that.getTableData();
    },
    methods: {
        // 获取能介类型
        getEnergyTypeIdData () {
            let that = this
            let url = 'pass/ems/v1/trmenergytypes/selectNameAndId/';
            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;
                        }
                        that.nameObj.energytypeid.arr = arr;
                        that.nameObj.energytypeid.obj = obj;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        // 获取能介
        getEnergyIdData () {
            let that = this;
            let url = 'pass/ems/v1/trmenergys/selectNameAndId/';
            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,
                                energytypeid: item.energytypeid,
                                unitid: item.unitid
                            })
                            obj[item.id] = {
                                name: item.name,
                                unitid: item.unitid
                            }
                        }
                        that.nameObj.energyid.arr = arr;
                        that.nameObj.energyid.obj = obj;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        // 获取属性
        getPropertyIdData () {
            let that = this
            let url = 'pass/ems/v1/trmenergypropertys/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;
                        }
                        that.nameObj.propertyid.arr = arr;
                        that.nameObj.propertyid.obj = obj;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        // 获取位置
        getLocateIdData () {
            let that = this
            let url = 'pass/ems/v1/trmlocations/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;
                        }
                        that.nameObj.locateid.arr = arr;
                        that.nameObj.locateid.obj = obj;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        // 获取站所
        getNetworkIdData () {
            let that = this
            let url = 'pass/ems/v1/trmstations/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;
                        }
                        that.nameObj.networkid.arr = arr;
                        that.nameObj.networkid.obj = obj;
                    } else {
                        that.$message.error(res.message);
                    }
                });
        },
        // 获取表格中的数据
        getTableData (pageNum) {
            let that = this,
                params = {
                    energytypeid: that.filterForm.data.energytypeid,
                    energyid: that.filterForm.data.energyid,
                    propertyid: that.filterForm.data.propertyid,
                    itemtype: that.filterForm.data.itemtype,
                    locateid: that.filterForm.data.locateid,
                    itemid: that.filterForm.data.itemid,
                    itemname: that.filterForm.data.itemname,
                    networkid: that.filterForm.data.networkid,
                    tagAlias: that.filterForm.data.tagAlias,
                    useflag: '1'
                };
            that.pageNum = pageNum || that.pageNum;
            that.tableLoading = true;
            let url = 'pass/ems/v1/trmcalpoints/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({
                                itemid: item.itemid,
                                itemname: item.itemname,
                                tagAlias: item.tagAlias,
                                itemtype: item.itemtype,
                                locateid: item.locateid
                            })
                        }
                        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);
        },
        rowAdd (row) {
            let that = this;
            that.selectedData.push({
                itemid: row.itemid,
                itemname: row.itemname,
                tagAlias: row.tagAlias
            })
        },
        rowDel (row) {
            let that = this;
            for (let i = 0; i < that.selectedData.length; i++) {
                if (row.itemid === that.selectedData[i].itemid) {
                    that.selectedData.splice(i, 1);
                    break;
                }
            }
        },
        // 清除所有选择
        empty () {
            let that = this;
            that.selectedData = [];
            that.bf_data = [];
            that.z_data.codes = '';
            that.z_data.names = '';
        },
        // 取消时将数组还原
        but_cancel () {
            let that = this;
            that.selectedData = JSON.parse(JSON.stringify(that.bf_data));
        },
        // 确定时修改返回代码串，并将数组保存
        but_save () {
            let that = this;
            let codes = '',
                names = '';
            for (let item of that.selectedData) {
                if (codes !== '') {
                    codes += ',';
                    names += ',';
                }
                codes += item.itemid;
                names += item.itemname;
            }
            that.z_data.codes = codes;
            that.z_data.names = names;
            that.bf_data = JSON.parse(JSON.stringify(that.selectedData));
        }
    }
}
</script>

<style lang="less">
.measurementPlaceChoose {
    min-width: 700px;
    height: 100%;
    .box {
        height: 100%;
        padding: 15px 15px 0 15px;
        .box-top {
            .el-form-item {
                margin-bottom: 7px;
            }
            .box-top-gjl {
                margin-top: -7px;
                padding: 7px 0;
                border-top: 1px solid #ccc;
                // border-bottom: 1px solid #ccc;
                // margin-bottom: 6px;
            }
        }
        .box-bottom {
            overflow: hidden;
            .box-left {
                width: 60%;
                float: left;
                padding-right: 3px;
            }
            .box-right {
                width: 40%;
                float: left;
                padding-left: 3px;
            }
        }
    }
}
</style>
