<template>
    <div class="product-edit">
        <el-card class="top-card" :body-style="{ padding: '26px 20px' }">
            <div class="title-wrap">
                <el-button class="top-button" type="info" size="small" @click="goBack()">
                    <i class="el-icon-arrow-left"></i>
                    {{ $t('product.product-edit.473153-44') }}
                </el-button>
                <span class="info-item">{{ $t('product.product-edit.473153-1') }}：{{ form.productName }}</span>
                <span class="info-item">
                    {{ $t('product.product-edit.473153-85') }}：
                    <el-button :disabled="form.isOwner === 0" v-if="form.status == 1" @click="changeProductStatus(1)" type="primary" size="small" plain style="height: 24px; padding: 0 10px">
                        {{ $t('product.product-edit.473153-86') }}
                    </el-button>
                    <el-button :disabled="form.isOwner === 0" v-if="form.status == 2" @click="changeProductStatus(2)" type="danger" size="small" plain style="height: 24px; padding: 0 10px">
                        {{ $t('product.product-edit.473153-87') }}
                    </el-button>
                </span>
            </div>
        </el-card>
        <el-card style="padding-bottom: 100px">
            <el-tabs class="custom-tabs" v-model="activeName" tab-position="top" style="min-height: 400px" @tab-click="tabChange">
                <el-tab-pane name="basic">
                    <span slot="label">
                        {{ $t('product.product-edit.473153-0') }}
                    </span>
                    <el-form class="basic-span" ref="form" :model="form" :rules="rules" label-width="100px">
                        <el-row :gutter="100">
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                                <el-form-item :label="$t('product.product-edit.473153-1')" prop="productName">
                                    <el-input v-model="form.productName" :placeholder="$t('product.product-edit.473153-2')" :readonly="form.status == 2 || form.isOwner == 0" />
                                </el-form-item>
                                <el-form-item :label="$t('product.product-edit.473153-3')" prop="categoryId">
                                    <el-select
                                        v-model="form.categoryId"
                                        :placeholder="$t('product.product-edit.473153-4')"
                                        @change="selectCategory"
                                        style="width: 100%"
                                        :disabled="form.status == 2 || form.isOwner == 0"
                                        :filterable="true"
                                    >
                                        <el-option v-for="category in categoryShortList" :key="category.id" :label="category.name" :value="category.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('product.product-edit.473153-78')" prop="deviceType">
                                    <el-select
                                        style="width: 100%"
                                        v-model="form.deviceType"
                                        :placeholder="$t('product.product-edit.473153-13')"
                                        :disabled="form.status == 2 || form.isOwner == 0 || !!form.productId"
                                        filterable
                                    >
                                        <el-option v-for="dict in dict.type.iot_device_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('product.product-edit.473153-91')" prop="firmwareType">
                                    <el-select style="width: 100%" v-model="form.firmwareType" :placeholder="$t('product.product-edit.473153-92')" :disabled="form.status == 2 || form.isOwner == 0" filterable>
                                        <el-option v-for="dict in dict.type.iot_firmware_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('product.product-edit.473153-16')" prop="networkMethod">
                                    <el-select v-model="form.networkMethod" :placeholder="$t('product.product-edit.473153-17')" style="width: 100%" :disabled="form.status == 2 || form.isOwner == 0">
                                        <el-option v-for="dict in networkOptions" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="$t('product.product-edit.473153-25')" prop="productId">
                                    <el-input v-model="form.productId" :placeholder="$t('product.product-edit.473153-26')" readonly />
                                </el-form-item>
                                <el-form-item :label="$t('product.product-edit.473153-18')">
                                    <template slot="label">
                                        <span>{{ $t('product.product-edit.473153-18') }}</span>
                                        <el-tooltip style="cursor: pointer; margin-left: 5px" effect="light" placement="bottom">
                                            <div slot="content">
                                                {{ $t('product.product-edit.473153-19') }}
                                                <br />
                                            </div>
                                            <i class="el-icon-question" />
                                        </el-tooltip>
                                    </template>
                                    <el-radio-group v-model="form.isSys" :disabled="form.status == 2 || form.isOwner == 0">
                                        <el-radio :label="1">{{ $t('product.product-edit.473153-89') }}</el-radio>
                                        <el-radio :label="0">{{ $t('product.product-edit.473153-90') }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="$t('product.product-edit.473153-32')" prop="remark">
                                    <el-input
                                        v-model="form.remark"
                                        type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 5 }"
                                        :placeholder="$t('product.product-edit.473153-33')"
                                        :disabled="form.status == 2 || form.isOwner == 0"
                                    />
                                </el-form-item>
                            </el-col>

                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                                <el-form-item v-if="form.deviceType !== 3" :label="$t('product.product-edit.473153-81')" prop="protocolCode">
                                    <el-select
                                        v-model="form.protocolCode"
                                        :placeholder="$t('product.product-edit.473153-82')"
                                        style="width: 100%"
                                        :disabled="form.status == 2 || form.isOwner == 0 || !!form.productId"
                                        @change="handleProductCodeChange"
                                        :filterable="true"
                                    >
                                        <el-option v-for="p in protocolList" :key="p.protocolCode" :label="p.protocolName" :value="p.protocolCode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="form.deviceType !== 4" :label="$t('product.product-edit.473153-14')" prop="transport">
                                    <el-select v-model="form.transport" :placeholder="$t('product.product-edit.473153-15')" style="width: 100%" :disabled="form.status === 2 || form.isOwner === 0">
                                        <el-option
                                            v-for="dict in dict.type.iot_transport_type"
                                            :key="dict.value"
                                            :label="dict.label"
                                            :value="dict.value"
                                            :disabled="(form.deviceType === 3 && dict.value !== 'GB28181') || (form.protocolCode === 'MODBUS-TCP' && dict.value !== 'TCP')"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-21')" prop="vertificateMethod">
                                    <el-select v-model="form.vertificateMethod" :placeholder="$t('product.product-edit.473153-22')" style="width: 100%" :disabled="form.status == 2 || form.isOwner == 0">
                                        <el-option v-for="dict in dict.type.iot_vertificate_method" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="form.deviceType !== 4" :label="$t('product.product-edit.473153-23')" prop="locationWay" :disabled="isEditing">
                                    <el-select style="width: 100%" v-model="form.locationWay" :placeholder="$t('product.product-edit.473153-24')" clearable :disabled="form.status == 2 || form.isOwner == 0">
                                        <el-option v-for="dict in dict.type.iot_location_way" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-27')" prop="mqttAccount">
                                    <el-input
                                        style="width: 100%"
                                        v-model="form.mqttAccount"
                                        :placeholder="$t('product.product-edit.473153-28')"
                                        :type="accountInputType"
                                        :readonly="form.status === 2 || form.isOwner == 0"
                                    >
                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px" @click="changeInputType('account')"></el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-29')" prop="mqttPassword">
                                    <el-input
                                        style="width: 100%"
                                        v-model="form.mqttPassword"
                                        :placeholder="$t('product.product-edit.473153-30')"
                                        :type="passwordInputType"
                                        :readonly="form.status === 2 || form.isOwner == 0"
                                    >
                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px" @click="changeInputType('password')"></el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item v-if="form.transport === 'MQTT' && form.vertificateMethod !== 1" :label="$t('product.product-edit.473153-31')" prop="mqttSecret">
                                    <el-input style="width: 100%" v-model="form.mqttSecret" :placeholder="$t('product.product-edit.473153-26')" :type="keyInputType" readonly>
                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px" @click="changeInputType('key')"></el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-20')" prop="networkMethod">
                                    <el-switch v-model="form.isAuthorize" @change="changeIsAuthorize(form.isAuthorize)" :active-value="1" :inactive-value="0" :disabled="form.status == 2 || form.isOwner == 0" />
                                </el-form-item>
                            </el-col>

                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                                <el-form-item :label="$t('product.product-edit.473153-34')">
                                    <div v-if="form.status === 2 && !form.imgUrl && form.isOwner != 0">
                                        <el-image
                                            style="height: 145px; height: 145px; border-radius: 10px"
                                            :preview-src-list="[require('@/assets/images/gateway.png')]"
                                            :src="require('@/assets/images/gateway.png')"
                                            fit="cover"
                                            v-if="form.deviceType == 2"
                                        ></el-image>
                                        <el-image
                                            style="height: 145px; height: 145px; border-radius: 10px"
                                            :preview-src-list="[require('@/assets/images/video.png')]"
                                            :src="require('@/assets/images/video.png')"
                                            fit="cover"
                                            v-else-if="form.deviceType == 3"
                                        ></el-image>
                                        <el-image
                                            style="height: 145px; height: 145px; border-radius: 10px"
                                            :preview-src-list="[require('@/assets/images/product.png')]"
                                            :src="require('@/assets/images/product.png')"
                                            fit="cover"
                                            v-else
                                        ></el-image>
                                    </div>
                                    <div v-else>
                                        <imageUpload ref="image-upload" :disabled="form.status === 2 ? true : false" :value="form.imgUrl" :limit="1" :fileSize="1" @input="getImagePath($event)"></imageUpload>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-col :span="20">
                            <el-form-item style="text-align: center; margin: 40px 0px">
                                <el-button v-show="!!form.productId && form.status != 2 && form.isOwner != 0" type="primary" @click="handleSubmitForm" v-hasPermi="['iot:product:edit']">
                                    {{ $t('update') }}
                                </el-button>
                                <el-button v-show="!form.productId && form.status != 2" type="primary" @click="handleSubmitForm" v-hasPermi="['iot:product:add']">{{ $t('add') }}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="" name="things">
                    <span slot="label">{{ $t('product.product-edit.473153-38') }}</span>
                    <product-things-model ref="productThingsModel" :product="form" @updateModel="updateModel" />
                </el-tab-pane>
                <!-- 子产品 -->
                <el-tab-pane
                    name="productSub"
                    v-if="form.deviceType == 2 && (form.protocolCode == 'MODBUS-RTU' || form.protocolCode == 'MODBUS-TCP' || form.protocolCode == 'MODBUS-JSON-HP' || form.protocolCode == 'MODBUS-JSON-ZQWL')"
                    lazy
                >
                    <span slot="label">{{ $t('product.product-edit.473153-83') }}</span>
                    <product-sub ref="productSub" :product="form" />
                </el-tab-pane>
                <el-tab-pane
                    name="productModbus"
                    v-if="
                        (form.deviceType == 1 || form.deviceType == 4) &&
                        (form.protocolCode == 'MODBUS-RTU' || form.protocolCode == 'MODBUS-TCP' || form.protocolCode == 'MODBUS-JSON-HP' || form.protocolCode == 'MODBUS-JSON-ZQWL')
                    "
                >
                    <span slot="label">
                        {{ $t('product.product-edit.473153-80') }}
                    </span>
                    <product-modbus ref="productModbus" :product="form" @sendPollType="sendPollType" />
                </el-tab-pane>
                <!-- 轮询任务 -->
                <el-tab-pane name="productModbusTask" v-if="form.deviceType !== 3 && form.deviceType !== 2 && polltype === 0 && (form.protocolCode == 'MODBUS-RTU' || form.protocolCode == 'MODBUS-TCP')" lazy>
                    <span slot="label">{{ $t('product.product-edit.473153-84') }}</span>
                    <product-modbus-task ref="productModbusTask" :product="form" @getSendData="getData($event)" />
                </el-tab-pane>
                <el-tab-pane name="productAuthorize" v-if="form.deviceType !== 3 && form.transport === 'MQTT'">
                    <span slot="label" v-hasPermi="['iot:authorize:query']">{{ $t('product.product-edit.473153-40') }}</span>
                    <product-authorize ref="productAuthorize" :product="form" />
                </el-tab-pane>
                <el-tab-pane label="" name="sipConfig" v-if="form.deviceType === 3">
                    <span slot="label">{{ $t('product.product-edit.473153-41') }}</span>
                    <config-sip ref="configSip" :product="form" />
                </el-tab-pane>
                <el-tab-pane name="scada" v-if="form.deviceType !== 3 && isShowScada == true" lazy>
                    <span slot="label">{{ $t('device.device-edit.148398-73') }}</span>
                    <product-scada ref="productScada" :product="form" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import productThingsModel from './product-things-model';
import productApp from './product-app';
import productAuthorize from './product-authorize';
import imageUpload from '../../../components/ImageUpload/index';
import configSip from '../sip/sipconfig.vue';
import productScada from './product-scada';
import productModbus from './product-modbus';
import { listProtocol } from '@/api/iot/protocol';
import productSub from './product-sub'; //子产品
import productModbusTask from './product-modbus-task'; //轮询任务
import { listShortCategory } from '@/api/iot/category';
import { getProduct, addProduct, updateProduct, changeProductStatus, deviceCount } from '@/api/iot/product';
import { getAllPoints } from '@/api/iot/template';
import ProductModbus from '@/views/iot/product/product-modbus';
import { checkPermi } from '@/utils/permission';
import defaultSettings from '@/settings';

export default {
    name: 'ProductEdit',
    dicts: ['iot_device_type', 'iot_network_method', 'iot_vertificate_method', 'iot_transport_type', 'data_collect_type', 'iot_location_way', 'sub_gateway_type', 'iot_firmware_type'],
    components: {
        ProductModbus,
        productThingsModel,
        productApp,
        productModbus,
        productAuthorize,
        imageUpload,
        configSip,
        productScada,
        productSub,
        productModbusTask,
    },
    data() {
        return {
            // 输入框类型
            keyInputType: 'password',
            accountInputType: 'password',
            passwordInputType: 'password',
            // 选中选项卡
            activeName: 'basic',
            // 分类短列表
            categoryShortList: [],
            //协议列表
            protocolList: [],
            //组态相关按钮是否显示，true显示，false不显示
            isShowScada: defaultSettings.isShowScada,
            // 表单参数
            form: {
                networkMethod: 1,
                deviceType: 1,
                vertificateMethod: 3,
                transport: 'MQTT',
                imgUrl: '',
                locationWay: 3,
                isSys: 0,
            },
            isEditing: false, //是否可以选择定位方式
            // 表单校验
            rules: {
                productName: [
                    {
                        required: true,
                        message: this.$t('product.product-edit.473153-58'),
                        trigger: 'blur',
                    },
                ],
                categoryId: [
                    {
                        required: true,
                        message: this.$t('product.product-edit.473153-59'),
                        trigger: 'blur',
                    },
                ],
                deviceType: [
                    {
                        required: true,
                        message: this.$t('product.product-edit.473153-13'),
                        trigger: 'blur',
                    },
                ],
                firmwareType: [
                    {
                        required: true,
                        message: this.$t('product.product-edit.473153-92'),
                        trigger: 'blur',
                    },
                ],
                protocolCode: [
                    {
                        required: true,
                        message: this.$t('product.product-edit.473153-60'),
                        trigger: 'blur',
                    },
                ],
                transport: [
                    {
                        required: true,
                        message: this.$t('product.product-edit.473153-61'),
                        trigger: 'blur',
                    },
                ],
                isSys: [
                    {
                        required: true,
                        message: this.$t('product.product-edit.473153-61'),
                        trigger: 'blur',
                    },
                ],
            },
            // 查询参数
            queryParams: {
                tenantName: null,
            },
            pointList: [],
            open: false,
            // 弹出层标题
            title: '',
            loading: true,
            tempList: [],
            // 总条数
            total: 0,
            tempTotal: 0,
            // 查询参数
            pointsParams: {
                pageNum: 1,
                pageSize: 8,
                templateId: 0,
            },
            tempParams: {
                pageNum: 1,
                pageSize: 10,
            },
            currentRow: {},
            selectRowData: {},
            polltype: '',
        };
    },

    computed: {
        networkOptions() {
            return this.form.deviceType == 4 ? this.dict.type.sub_gateway_type : this.dict.type.iot_network_method;
        },
    },
    created() {
        // 获取产品信息
        const productId = this.$route.query && this.$route.query.productId;
        this.form.productId = productId;
        if (!!this.form.productId) {
            this.getProductData();
        } else {
            this.form.locationWay = 3;
            this.isEditing = true;
        }
        // 切换选项卡
        const tabPanelName = this.$route.query && this.$route.query.tabPanelName;
        if (tabPanelName != null && tabPanelName != '') {
            this.activeName = tabPanelName;
        }
        // 获取分类信息
        this.getShortCategory();
        // 设置账号密码输入框类型,新增时为text，查看时为password
        if (!this.form.productId || this.form.productId == 0) {
            this.accountInputType = 'text';
            this.passwordInputType = 'text';
        }
        this.getProtocol();
    },
    activated() {
        const time = this.$route.query.t;
        if (time != null && time != this.uniqueId) {
            this.uniqueId = time;
        }
        // 获取产品信息
        let productId = this.$route.query.productId;
        if (productId) {
            this.form.productId = Number(productId);
            this.getProductData();
            this.getShortCategory();
        }
        // 切换选项卡
        const tabPanelName = this.$route.query && this.$route.query.tabPanelName;
        if (tabPanelName != null && tabPanelName != '') {
            this.activeName = tabPanelName;
        }
    },
    methods: {
        // 获取简短分类列表
        getShortCategory() {
            const data = {
                pageSize: 999,
            };
            listShortCategory(data).then((response) => {
                this.categoryShortList = response.data;
            });
        },
        //接收网关子设备配置的参数，为了轮询任务页签的显示
        sendPollType(value) {
            this.polltype = value;
        },
        //获取选项卡名称
        getData(data) {
            this.activeName = data;
        },
        /** 返回按钮 */
        goBack() {
            this.$router.go(-1);
        },
        // 获取产品信息
        getProductData() {
            getProduct(this.form.productId).then((res) => {
                if (res.code === 200) {
                    this.form = res.data;
                }
            });
        },
        // 表单重置
        reset() {
            this.form = {
                productId: 0,
                productName: null,
                categoryId: null,
                categoryName: null,
                status: 0,
                tslJson: null,
                isAuthorize: 0,
                deviceType: 1,
                networkMethod: 1,
                vertificateMethod: 3,
                mqttAccount: null,
                mqttPassword: null,
                mqttSecret: null,
                remark: null,
                imgUrl: '',
                locationWay: 1,
                isSys: 0,
            };
            this.resetForm('form');
        },
        // 提交按钮
        handleSubmitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (!!this.form.productId) {
                        updateProduct(this.form).then((res) => {
                            if (res.code === 200) {
                                this.$modal.alertSuccess(this.$t('product.product-edit.473153-62'));
                            }
                        });
                    } else {
                        addProduct(this.form).then((res) => {
                            if (res.code === 200) {
                                this.form = res.data;
                                this.$modal.alertSuccess(this.$t('product.product-edit.473153-64'));
                            }
                        });
                    }
                }
            });
        },
        /**同步获取产品下的设备数量**/
        getDeviceCountByProductId(productId) {
            return new Promise((resolve, reject) => {
                deviceCount(productId)
                    .then((res) => {
                        resolve(res);
                    })
                    .catch((error) => {
                        reject(error);
                    });
            });
        },
        /** 更新产品状态 */
        async changeProductStatus(status) {
            let message = this.$t('product.product-edit.473153-66');
            if (status == 1) {
                // 发布
                let hasPermission = ['iot:product:add'];
                if (!hasPermission) {
                    this.$modal.alertError(this.$t('product.index.091251-31'));
                    return;
                }
                message = this.$t('product.product-edit.473153-67');
            } else if (status == 2) {
                // 取消发布
                let hasPermission = checkPermi(['iot:product:edit']);
                if (!hasPermission) {
                    this.$modal.alertError(this.$t('product.index.091251-31'));
                    return;
                }
                let result = await this.getDeviceCountByProductId(this.form.productId);
                if (result.data > 0) {
                    message = this.$t('product.product-edit.473153-68', [result.data]);
                }
            }
            this.$confirm(message, this.$t('product.product-edit.473153-69'), {
                confirmButtonText: this.$t('product.product-edit.473153-70'),
                cancelButtonText: this.$t('product.product-edit.473153-71'),
                type: 'warning',
            })
                .then(() => {
                    let params = {
                        productId: this.form.productId,
                        status: status === 1 ? 2 : 1,
                        deviceType: this.form.deviceType,
                    };
                    changeProductStatus(params).then((res) => {
                        if (res.code === 200) {
                            this.$modal.alertSuccess(res.msg);
                            this.getProductData();
                        }
                    });
                })
                .catch(() => {
                    this.activeName = 'basic';
                });
        },
        /** 选择分类 */
        selectCategory(val) {
            for (var i = 0; i < this.categoryShortList.length; i++) {
                if (this.categoryShortList[i].id == val) {
                    this.form.categoryName = this.categoryShortList[i].name;
                    return;
                }
            }
        },
        /**获取上传图片的路径 */
        getImagePath(data) {
            this.form.imgUrl = data;
        },
        /**改变输入框类型**/
        changeInputType(name) {
            if (name == 'key') {
                this.keyInputType = this.keyInputType == 'password' ? 'text' : 'password';
            } else if (name == 'account') {
                this.accountInputType = this.accountInputType == 'password' ? 'text' : 'password';
            } else if (name == 'password') {
                this.passwordInputType = this.passwordInputType == 'password' ? 'text' : 'password';
            }
        },
        // 授权码状态修改
        changeIsAuthorize() {
            let text = this.form.isAuthorize == '1' ? this.$t('product.product-edit.473153-72') : this.$t('product.product-edit.473153-74');
            this.$modal
                .confirm(this.$t('product.product-edit.473153-75', [text]))
                .then(() => {
                    if (!!this.form.productId) {
                        updateProduct(this.form).then((response) => {
                            this.$modal.alertSuccess(this.$t('product.product-edit.473153-77') + text);
                        });
                    }
                })
                .catch(() => {
                    this.form.isAuthorize = 0;
                });
        },
        //获取设备协议
        getProtocol() {
            const data = {
                protocolStatus: 1,
                pageSize: 99,
                display: 1,
            };
            listProtocol(data).then((res) => {
                this.protocolList = res.rows;
            });
        },

        // 取消按钮
        cancel() {
            this.open = false;
            // this.reset();
        },

        getList() {
            getAllPoints(this.pointsParams).then((response) => {
                this.pointList = response.rows;
                this.total = response.total;
            });
        },

        /*确认选择*/
        submitSelect() {
            this.open = false;
            this.form.templateId = this.selectRowData.templateId;
        },
        getCurrentRow(val) {
            if (val != null) {
                this.selectRowData = val;
            }
            this.pointsParams.templateId = val.templateId;
            this.getList();
        },
        deleteData() {
            this.selectRowData = {};
            this.form.templateId = null;
        },
        // 通讯协议改变
        handleProductCodeChange(val) {
            if (val == 'MODBUS-TCP') {
                this.form.transport = 'TCP';
            }
        },
        /**选项卡切换事件**/
        tabChange(tabItem) {
            // 切换到告警配置，获取物模型
            if (tabItem.paneName == 'alert') {
                this.$refs.productAlert.getCacheThingsModel(this.form.productId);
            }
        },

        /*按照模板名查询*/
        queryTemp() {
            this.getTempList();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.tempParams.pageNum = 1;
            this.getTempList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('tempParams');
            this.handleQuery();
        },

        /**刷新产品模型 */
        updateModel() {
            this.$refs.productThingsModel.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
.product-edit {
    padding: 20px;

    .top-card {
        margin-bottom: 10px;

        .title-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;

            .top-button {
                height: 22px;
                color: #909399;
                background: #f4f5f7;
                padding: 0px 8px;
                border: none;
            }

            .info-item {
                font-weight: normal;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                margin-left: 36px;
            }
        }
    }

    .custom-tabs {
        .basic-span {
            margin-top: 16px;
        }

        ::v-deep .el-card__body {
            padding: 0 20px;
        }

        ::v-deep .el-tabs__active-bar {
            background-color: transparent;
        }

        ::v-deep.el-tabs__nav {
            margin-bottom: 12px;
        }

        ::v-deep .el-tabs__item {
            padding: 0px 25px !important;
            box-sizing: border-box;
            display: inline-block;
            list-style: none;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            position: relative;
        }

        ::v-deep .el-tabs__item.is-active {
            color: #fff;
            background-color: #486ff2;
            border-radius: 4px;
            height: 32px;
            line-height: 34px;
        }
    }
}
</style>
