<template>
    <el-dialog
      :title="TerminalId?'编辑终端账号':'新增终端账号'"
      :visible.sync="show"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :center="true"
      v-dialogDrag
      custom-class="dialogclass"
      width="540px"
      @close="handleClose"
    >
        <el-form 
            :model="formState" 
            :rules="rules" 
            ref="formIns" 
            label-width="120px" 
            class="demo-ruleForm"
        >
            <el-form-item label="终端名称" prop="name">
                <el-input placeholder="请输入终端名称" v-model="formState.name" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="文件夹路径" prop="dirUrl">
                <el-input placeholder="请输入文件夹路径" v-model="formState.dirUrl"  style="width:300px" :disabled="TerminalId"></el-input>
            </el-form-item>
            <el-form-item label="终端地址" prop="url">
                <el-input placeholder="请输入终端地址" v-model="formState.url"  style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="终端token" prop="token">
                <el-input placeholder="请输入终端token" v-model="formState.token"  style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="数据源类型" prop="type">
                <el-select 
                    v-model="formState.type" 
                    placeholder="请选择数据源类型"
                    style="width:300px"
                    :disabled="TerminalId"
                >
                    <el-option 
                        v-for="item in dataSourceOpt"
                        :key="item.EdbSourceId"
                        :label="item.SourceName"
                        :value="item.EdbSourceId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="指标数据量" prop="num">
                <el-input placeholder="请输入指标数据量" type="number" min="0" v-model.number="formState.num"  style="width:300px"></el-input>
            </el-form-item>
        </el-form>
        <div style="text-align:center;margin:30px 0">
            <el-button type="primary" plain @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSave">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {apiDataSource} from '@/api/modules/dataSource.js'
import {dataBaseInterface} from '@/api/api.js'
export default {
    model:{
        prop:"show",
        event:'close'
    },
    props:{
        show:{
            type:Boolean,
            default:false
        },
        TerminalId:{
            type:Number,
            default:0
        },
        initData:{
            type:Object,
            default:{}
        }
    },
    watch: {
        show(n,o){
            if(n&&this.TerminalId){
                console.log('aa');
                console.log(this.initData);
                this.formState.name=this.initData.Name
                this.formState.url=this.initData.ServerUrl
                this.formState.dirUrl=this.initData.DirPath
                this.formState.type=this.initData.Source
                this.formState.num=this.initData.Num
                this.formState.token=this.initData.Value
            }
            if(!n){
                this.formState.name=''
                this.formState.url=''
                this.formState.dirUrl=''
                this.formState.type=''
                this.formState.num=''
                this.formState.token=''
            }
        }
    },
    data() {
        return {
            dataSourceOpt:[],
            formState:{
                name:'',
                url:'',
                token:'',
                dirUrl:'',
                type:'',
                num:''
            }
        }
    },
    created() {
        this.getTargetSource()
    },
    methods: {
        handleClose(){
            this.$emit('close', false)
        },

        async handleSave(){
            const params={
                TerminalId:this.TerminalId||0,
                Source:Number(this.formState.type),//终端类型
                Name:this.formState.name,
                ServerUrl:this.formState.url,
                DirPath:this.formState.dirUrl,
                Num:Number(this.formState.num),
                Value:this.formState.token
            }
            console.log(params);
            const res=await apiDataSource.accountSave(params)
            if(res.Ret===200){
                this.$message.success('保存成功')
                this.$emit('change')
                this.handleClose()
            }
        },

        // 获取数据源类型
        getTargetSource(){
			this.dataSourceOpt = []
			dataBaseInterface.getDataSource({IsBase:1}).then(res=>{
				if(res.Ret!==200) return
				if(res.Data){
					this.dataSourceOpt = res.Data||[]
				}
			})
		}
    },
}
</script>

<style>

</style>