<template>
  <!-- 新增表号-功能号 -->
  <div id="addTabFunNum">
    <el-form :model='form' label-width="150px" ref="ruleForm" :rules="rules" style="overflow:auto;">
      <el-form-item label="表号-功能号" prop="MeterFunc">
        <el-input v-model="form.MeterFunc" placeholder="请输入表号-功能号"></el-input>
      </el-form-item>
      <el-form-item label="设定采集间隔时间" prop="CollectInterval">
        <el-input v-model="form.CollectInterval" placeholder="设定时间不能小于10s"></el-input>
      </el-form-item>
      <el-form-item label="值单位" prop="Unit">
        <el-cascader :options='options' v-model='form.Unit'></el-cascader>
      </el-form-item>
      <el-form-item label="取值公式" prop="DataRuleContent">
        <el-input type="textarea" placeholder="请输入取值公式" v-model="form.DataRuleContent"></el-input>
      </el-form-item>
      <el-form-item label="" style="text-align:right;margin-bottom:0px">
        <el-button @click="$emit('closeDrawer')">取消</el-button>
        <el-button type="primary" @click="add()">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import {
  addTabFunNum
} from '@/api/scan/request'
import { batchQueryUnit } from '@/fetch/point_http'
export default {
  data() {
    return {
      form: {
        MeterFunc: '',//表号-功能号
        CollectInterval: '',//采集间隔时间
        DataRuleContent: '',//取值公式
        Unit: '',//值单位
      },
      //下拉框选项
      options: [],
      //验证规则
      rules: {
        MeterFunc: [
          { required: true, message: '请输入表号-功能号', trigger: 'blur' }
        ],
        CollectInterval: [
          { required: true, message: '请输入采集间隔时间', trigger: 'blur' }
        ],
        // Unit: [
        //   { required: true, message: '请选择值单位', trigger: 'change' }
        // ],
        DataRuleContent: [
          { required: true, message: '请填写取值公式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //添加
    add() {
      //验证参数
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.form.Unit = this.form.Unit.toString();
          addTabFunNum(this.form, res => {
            //成功提示
            Message.success('添加成功');
            //清楚当前表单数据，500ms后关闭
            let that = this;
            that.$emit('reloadData');
            setTimeout(() => {
              that.$emit('closeDrawer');
              that.form = {
                MeterFunc: '',
                CollectInterval: '',
                DataRuleContent: '',
                Unit: '',
              }
            }, 500);
          });
        } else {
          return false;
        }
      });
    },
    //加载下拉框
    initSelect() {
      batchQueryUnit({}, res => {
        let data = res.Content
        let arr = []
        data.forEach(item => {
          let first = {
            value: item.Type,
            label: item.Type,
            children: []
          }
          item.Units.forEach(ele => {
            let second = {}
            second = {
              value: ele.Name,
              label: ele.Name
            }
            first.children.push(second)
          })
          arr.push(first)
        })
        this.options = arr
      })
    }
  },
  mounted() {
    this.initSelect();
  }
}
</script>

<style lang="less" scoped>
</style>