<template>
  <div class="table-form">
    <Form :model="model" :ref="action" :rules="rules" :label-width="labelWidth">
        <Row :gutter="10">
            <Col span="24">
            <Form-item label="设备类型" prop="typeName" v-validate:typeName.required.@change="rules">
                <Select v-model="model.typeName" placeholder="请选择设备类型"  :disabled="disabled" @on-change="changeType">
                    <Option  v-for="item in devices" :value="item.name">{{item.name}}</Option>
                </Select>
            </Form-item>
            </Col>
        </Row>
      <Row :gutter="10">
        <Col span="24">
           <Form-item label="设备名称" prop="name" v-validate:name.required.maxInputLength="rules">
            <Input v-model="model.name" placeholder="请输入设备名称" :disabled="disabled"></Input>
            </Form-item>
        </Col>
      </Row>

      <Row :gutter="10">
        <Col span="24">
            <FormItem label="指标名称" prop="indicatorKey" v-validate:indicatorKey.required.@change="rules">
                <Select v-model="model.indicatorKey" placeholder="请选择指标关键字" :disabled="disabled">
                    <Option v-for="item in indicators" :value="item.responseKey">{{item.nameZh}}({{item.responseKey}})</Option>
                </Select>
            </FormItem>
        </Col>
      </Row>
       <Row :gutter="10">
        <Col span="24">
           <FormItem label="指标参数" prop="indicatorParam"  v-validate:indicatorParam.required.maxInputLength="rules">
                <Input v-model="model.indicatorParam"  placeholder="请输入指标参数" :disabled="disabled"></Input>
            </FormItem>
        </Col>
      </Row>
      <Row class="buttonDiv">
        <Button :loading="loading"
          @click="submitForm(action)"
          type="primary"
          v-if="!(action == 'detail')"
        >确&nbsp;&nbsp;定</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";


@Component
export default class DeviceInstanceForm extends Vue {
   
    loading : boolean = false;
    devices : Array<any> = [];
    indicators : Array<any> = [];
    @Prop() private model!:any;
    @Prop(String) private action!:string;
    @Prop() private tableVm!:any;

    labelWidth:number =120;
    rules : any={};
    @Emit('close-modal') close(){}
    cancel () {
        this.close();
        (this.$refs[this.action] as any).resetFields();
    }

    getDeviceTypes(){
        let url = this.$msPrefix.psem+"/api/v1/data/all/PSEMDeviceType";
        this.getApiData("get", url + "?size=10000", {}, res => {
            if (res.data.content.length > 0) {
                this.devices = res.data.content;
            }else{
                this.devices =[]
            }
        })
    }

     changeType(val){
      if(val&&val){
          this.getIndexData(val)
      }
    }

    getIndexData(val){
      this.model.indicatorKey="";
      let url =this.$msPrefix.psem+"/api/v1/data/list/PSEMIndicator";
      this.getApiData("post", url + "?size=10000", {typeName:[val]}, res => {
            if (res.data.content.length > 0) {
                this.indicators = res.data.content;
            }else{
                this.indicators =[]
            }

      })
    }

    save(){
        this.getApiData('post',this.$msPrefix.psem+'/api/v1/data/save/PSEMDeviceInstance',this.model,res=>{
            this.loading=!1;
            if (res.rtnCode == 0) {
                this.tableVm.getData();
                this.cancel();
                this.$tools.message('success',(this.action == 'update'?'修改':'新增')+'成功！')
            }else{
               this.$Message.error(res.msg);
            }
        },err=>{
          this.loading=!1;
        })
    }
    /*提交*/
      submitForm (action) {
      	
        (this.$refs[action] as any).validate((valid) => {
          if (valid) {
           if(!this.loading){
                this.loading=!0;
                this.save()
            }
          } else {
           this.$tools.message('info',"请完善必填项!")
          }
        });
      }

      mounted(){
          this.getDeviceTypes();
      }

       get disabled(){
        return this.action=='detail'
      }

      
}
</script>

