<div id="ProbeConfigDiv">
    <form action="" method="post" class="config-form">
        <div class="config-form-group">
            <label class="config-form-label">探棒序列号</label>
            <select class="config-form-select" v-model="values.DeviceId" @@change="changeSerial">
                <option v-for='item in values.atgList'>{{ item.DeviceId }}</option>
            </select>
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">请选择需要配置的序列号</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">探棒描述</label>
            <input class="config-form-input" v-model="descrip" readonly="readonly" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">自动读取，不可编辑</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">深度偏差</label>
            <input class="config-form-input" v-model.number="values.ProbeOffset" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">探棒距离油罐底部的高度 (毫米)</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">水位偏差</label>
            <input class="config-form-input" v-model.number="values.WaterOffset" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">油罐底部存留的水位高度 (毫米)</label>
        </div>
        <div class="config-form-submit-group">
            <label :class="show ? (result ? 'config-form-result' : 'config-form-result-fail') : 'color-transparent'">{{ result ? '提交完成' : '提交失败' }}</label>
        </div>
        <div class="config-form-submit-group">
            <label class="config-form-label"></label>
            <button class="config-form-submit" type="button" @@click="submit(event)" id="ProbeConfig" />
        </div>
    </form>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#ProbeConfigDiv',
        data: {
            values: { 'atgList': [{ 'DeviceId': 1, 'Name': '1号罐探棒' }, { 'DeviceId': 3, 'Name': '3号罐探棒' }], 'DeviceId': 3, 'ProbeOffset': 120, 'WaterOffset': 50 },
            descrip: '',
            show: false,
            result: false
        },
        mounted: function () {
            let path = '/sys/atg_classic_App/Application.ATG_Classic_App.App/thing/service/GetConfigAsync'
            this.changeSerial(0)
            Publish1(path)
        },
        methods: {
            changeSerial: function (ev) {
                let val = this.values.atgList.find((m) => m.DeviceId == this.values.DeviceId)
                this.descrip = val.Name
            },
            submit(e) {
                let path = '/sys/atg_classic_App/Application.ATG_Classic_App.App/thing/service/UpsertConfigAsync'
                Publish(e.target.id, JSON.stringify(this.values), path)
                return false
            }
        }
    })

    function OnReply(jsonObj) {
        console.log(jsonObj)
    }
</script>