<template>
    <el-dialog :title="$t('firmware.deviceList.index.222542-0')" :visible.sync="openDeviceList" width="810px" append-to-body>
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item prop="deviceName">
                <el-input v-model="queryParams.query" style="width: 196px" :placeholder="$t('firmware.deviceList.index.222542-12')" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="version">
                <el-input
                    :placeholder="$t('firmware.deviceList.index.222542-13')"
                    v-model="queryParams.version"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    class="input-with-select"
                    style="vertical-align: middle; width: 318px"
                    :disabled="!versionType"
                >
                    <el-select v-model="versionType" slot="prepend" size="small" :placeholder="$t('firmware.deviceList.index.222542-14')" style="width: 126px">
                        <el-option :label="$t('firmware.deviceList.index.222542-15')" :value="1"></el-option>
                        <el-option :label="$t('firmware.deviceList.index.222542-16')" :value="2"></el-option>
                    </el-select>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="deviceList" @select="handleSelectionChange" @select-all="handleSelectionAll" ref="multipleTable" size="small" :border="false">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column :label="$t('firmware.deviceList.index.222542-1')" align="left" prop="deviceName" min-width="160" />
            <el-table-column :label="$t('firmware.deviceList.index.222542-5')" align="left" prop="serialNumber" min-width="140" />
            <el-table-column :label="$t('firmware.deviceList.index.222542-15')" align="center" prop="firmwareVersion" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.firmwareVersion === 0">-</span>
                    <span>Version {{ scope.row.firmwareVersion }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('firmware.deviceList.index.222542-16')" align="center" prop="wirelessVersion" width="110">
                <template slot-scope="scope">
                    <span v-if="scope.row.wirelessVersion === 0">-</span>
                    <span v-else>Version {{ scope.row.wirelessVersion }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('firmware.deviceList.index.222542-6')" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.isOwner == 0">{{ $t('firmware.deviceList.index.222542-7') }}</el-tag>
                    <el-tag type="primary" v-else>{{ $t('firmware.deviceList.index.222542-8') }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column :label="$t('firmware.deviceList.index.222542-9')" align="center" prop="status" width="100">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.iot_device_status" :value="scope.row.status" />
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" layout="prev, pager, next" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleDeviceSelected">{{ $t('confirm') }}</el-button>
            <el-button @click="closeSelectDeviceList">{{ $t('cancel') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listDeviceByGroup } from '@/api/iot/device';
import { deepClone } from '@/utils';

export default {
    name: 'device-list',
    dicts: ['iot_device_status'],
    props: {
        upGrade: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            // 设备分组
            formUpGrade: {},
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 是否显示设备列表
            openDeviceList: false,
            // 总条数
            total: 0,
            // 设备表格数据
            deviceList: [],
            // 查询参数
            queryParams: {
                query: '',
                pageNum: 1,
                pageSize: 10,
            },
            versionType: null,
        };
    },
    watch: {
        // 获取到父组件传递的group后，刷新列表
        upGrade: {
            handler(newVal, oldVal) {
                if (newVal.flag) {
                    this.formUpGrade = newVal;
                    this.queryParams.productId = this.formUpGrade.productId;
                    this.queryParams.firmwareVersion = this.formUpGrade.firmwareVersion;
                    this.ids = this.formUpGrade.deviceList;
                    // this.queryParams.pageNum = 1;
                    // this.getList();
                }
            },
            immediate: true,
            deep: true,
        },
        openDeviceList(val) {
            if (val) {
                this.queryParams.pageNum = 1;
                this.resetQueryParamsHandle();
                this.getList();
            }
        },
    },
    created() {},
    methods: {
        /** 查询设备列表 */
        getList() {
            this.loading = true;
            let queryParams = deepClone(this.queryParams);
            queryParams.firmwareVersion = this.versionType === 1 ? this.queryParams.version : null;
            queryParams.wirelessVersion = this.versionType === 2 ? this.queryParams.version : null;
            listDeviceByGroup(queryParams).then((response) => {
                this.deviceList = response.rows;
                this.total = response.total;
                this.loading = false;
                // 设置分组关联的设备选中
                this.deviceList.forEach((row) => {
                    this.$nextTick(() => {
                        if (this.ids.some((x) => x === row.serialNumber)) {
                            this.$refs.multipleTable.toggleRowSelection(row, true);
                        }
                    });
                });
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection, row) {
            // 设备ID是否存在于原始设备ID数组中
            let index = this.ids.indexOf(row.serialNumber);
            // 是否选中
            let value = selection.indexOf(row);
            if (index == -1 && value != -1) {
                // 不存在且选中
                this.ids.push(row.serialNumber);
            } else if (index != -1 && value == -1) {
                // 存在且取消选中
                this.ids.splice(index, 1);
            }
        },
        // 全选事件处理
        handleSelectionAll(selection) {
            for (let i = 0; i < this.deviceList.length; i++) {
                // 设备ID是否存在于原始设备ID数组中
                let index = this.ids.indexOf(this.deviceList[i].serialNumber);
                // 是否选中
                let value = selection.indexOf(this.deviceList[i]);
                if (index == -1 && value != -1) {
                    // 不存在且选中
                    this.ids.push(this.deviceList[i].serialNumber);
                } else if (index != -1 && value == -1) {
                    // 存在且取消选中
                    this.ids.splice(index, 1);
                }
            }
        },
        // 关闭选择设备列表
        closeSelectDeviceList() {
            this.openDeviceList = false;
            this.formUpGrade.flag = false;
        },
        // 更新分组下的设备
        handleDeviceSelected() {
            this.formUpGrade.deviceList = this.ids;
            this.formUpGrade.deviceAmount = this.ids.length;
            this.formUpGrade.flag = false;
            // this.$emit();
            this.$modal.msgSuccess(this.$t('firmware.deviceList.index.222542-10'));
            this.openDeviceList = false;
        },
        // 重置搜索条件
        resetQueryParamsHandle() {
            this.queryParams.firmwareVersion = null;
            this.queryParams.query = null;
            this.versionType = null;
        },
    },
};
</script>
