<template>
    <el-dialog :title="$t('product.product-edit.473153-88')" :visible.sync="open" width="900px">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <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')" style="width: 300px" />
                    </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" :filterable="true" clearable style="width: 300px">
                            <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 v-model="form.deviceType" :placeholder="$t('product.product-edit.473153-13')" :filterable="true" clearable @change="handleDeviceTypeChange" style="width: 300px">
                            <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 v-model="form.firmwareType" :placeholder="$t('product.product-edit.473153-13')" :filterable="true" clearable style="width: 300px">
                            <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')" clearable style="width: 300px">
                            <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-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">
                            <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-col>

                <el-col :span="12">
                    <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')" @change="handleProductCodeChange" :filterable="true" clearable style="width: 300px">
                            <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')" clearable style="width: 300px">
                            <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')" clearable style="width: 300px">
                            <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">
                        <el-select v-model="form.locationWay" :placeholder="$t('product.product-edit.473153-24')" clearable style="width: 300px">
                            <el-option v-for="dict in dict.type.iot_location_way" :key="dict.value" :label="dict.label" :value="Number(dict.value)"></el-option>
                        </el-select>
                    </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" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="submitForm" type="primary">{{ $t('device.product-list.058448-14') }}</el-button>
            <el-button @click="closeDialog">{{ $t('device.product-list.058448-15') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listProtocol } from '@/api/iot/protocol';
import { listShortCategory } from '@/api/iot/category';
import { addProduct } from '@/api/iot/product';

export default {
    name: 'ProductAdd',
    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'],
    data() {
        return {
            // 打开新增产品对话框
            open: false,
            //协议列表
            protocolList: [],
            // 查询参数
            form: {},
            categoryShortList: [], //分类列表
            // 表单校验
            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',
                    },
                ],
            },
        };
    },
    created() {
        this.getProtocol();
        this.getShortCategory();
    },
    computed: {
        networkOptions() {
            return this.form.deviceType == 4 ? this.dict.type.sub_gateway_type : this.dict.type.iot_network_method;
        },
    },
    methods: {
        // 获取简短分类列表
        getShortCategory() {
            const data = {
                pageSize: 999,
            };
            listShortCategory(data).then((response) => {
                this.categoryShortList = response.data;
            });
        },
        //获取设备协议
        getProtocol() {
            const data = {
                protocolStatus: 1,
                pageSize: 99,
                display: 1,
            };
            listProtocol(data).then((res) => {
                this.protocolList = res.rows;
            });
        },
        // 通讯协议改变
        handleProductCodeChange(val) {
            if (val == 'MODBUS-TCP') {
                this.form.transport = 'TCP';
            }
        },
        // 设备类型改变
        handleDeviceTypeChange(val) {
            if (val === 3) {
                this.form.transport = 'GB28181';
                this.form.locationWay = 3;
            } else if (val === 4) {
                this.form.transport = '';
            } else {
                this.form.transport = 'MQTT';
            }
        },
        // 表单重置
        reset() {
            this.form = {
                productId: null,
                productName: '',
                categoryId: null,
                categoryName: '',
                status: 1, // 默认未发布
                tslJson: null,
                isAuthorize: 0,
                deviceType: 1,
                transport: 'MQTT',
                networkMethod: 1,
                vertificateMethod: 3,
                mqttAccount: null,
                mqttPassword: null,
                mqttSecret: null,
                remark: null,
                imgUrl: '',
                locationWay: 1,
                isSys: 0,
            };
            this.resetForm('form');
        },
        // 选择分类
        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;
                }
            }
        },
        // 提交按钮
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log(this.form, JSON.stringify(this.form));
                    
                    addProduct(this.form).then((res) => {
                        if (res.code === 200) {
                            this.$modal.msgSuccess(this.$t('product.product-edit.473153-64'));
                            this.$parent.getList();
                        }
                        this.open = false;
                    });
                }
            });
        },
        // 关闭对话框
        closeDialog() {
            this.open = false;
        },
    },
};
</script>
