<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogOpen"
    width="1000px"
    append-to-body
    @opened="initData"
    @close="handleCancel"
  >
    <el-form ref="formData" :model="formData" :rules="rules" label-width="130px">
      <el-form-item label="故障模型名称" prop="modelName">
        <el-input v-model="formData.modelName" placeholder="请输入故障模型名称"/>
      </el-form-item>
      <el-form-item label="模型类型" prop="type">
        <el-select
          v-model="formData.modelType"
          placeholder="请选择故障模型类型"
          clearable
        >
          <el-option
            v-for="dict in dict.type.biz_model_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item  label="模型接口地址" prop="modelPath">
        <el-input v-model="formData.modelPath" placeholder="请输入故障模型接口地址"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="参数配置" prop="remark">
        <div class="body-toolbar">
          <el-button circle icon="el-icon-plus"
                     @click="openDialog">
          </el-button>
        </div>
        <el-table :data="formData.configData">
          <el-table-column prop="paramName" label="字段名称" min-width="60" header-align="center" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.paramName" placeholder="字段名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="paramChineseName" label="中文名称" min-width="60" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.paramChineseName" placeholder="中文名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="paramType" label="参数类型" header-align="center" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.paramType" placeholder="参数类型" >
                <el-option
                  v-for="dict in dict.type.param_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="paramDefaultValue" label="默认值" min-width="60" header-align="center" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.paramDefaultValue" placeholder="默认值"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="isRequired" label="是否必填" min-width="50" header-align="center" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isRequired"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="paramSort" label="排序号" header-align="center" align="center">
            <template slot-scope="scope">
              <el-input-number size="mini" v-model="scope.row.paramSort" :min="1" :max="10" label="排序号"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="paramDescription" label="字段说明" header-align="center" align="center">
            <template slot-scope="scope">
              <el-input type="textarea"  autosize v-model="scope.row.paramDescription" placeholder="字段说明"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addFaultPhysical,
  updateFaultPhysical,
  getFaultPhysical
} from "@/api/model/faultPhysical";
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    dataInfo: {
      type: Object,
      default: null
    },
    options: {
      type: String,
      default: 'add'
    },
  },
  dicts: ["biz_model_type","param_type"],
  data() {
    return {
      formData: {
        exeLocalPath:'',
        modelId: '',
        modelName: '',
        modelType: '',
        modelPath: '',
        modelDataParams: '',
        remark: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        modelAttribution:'',
        modelInputPath:'',
        modelOutputPath:'',
        configData:[]
      },
      rules: {
        localhostFileShow:[
          {required: true, message: '请输入文件输入地址', trigger: 'blur'}
        ],
        modelOutputPath:[
          {required: true, message: '请输入文件输出地址', trigger: 'blur'}
        ],
        modelName: [
          {required: true, message: '请输入故障模型名称', trigger: 'blur'}
        ],
        modelType: [
          {required: true, message: '请选择故障模型类型', trigger: 'blur'}
        ]
      },
      dialogOpen: false,
      apiShow:false,
      localhostFileShow:false,
      fileShow:false
    };
  },
  model: {
    prop: 'value',
    event: 'callback'
  },

  watch: {
    value(newVal) {
      this.dialogOpen = newVal;
    }
  },
  computed: {
    modelAtrtibution() {
      return this.$route.query.modelAttribution;
    },
    title() {
      if (this.options === 'add'&& this.$route.query.modelAttribution==='0') {
        return '添加故障物理模型管理';
      }
      if (this.options === 'add'&& this.$route.query.modelAttribution==='1') {
        return '添加诊断模型管理';
      }
      if (this.options === 'edit'&& this.$route.query.modelAttribution==='0') {
        return '编辑故障物理模型管理';
      }
      if (this.options === 'edit'&& this.$route.query.modelAttribution==='1') {
        return '编辑诊断模型管理';
      }
      if (this.options === 'info'&& this.$route.query.modelAttribution==='0') {
        return '查看故障物理模型详情';
      }
      if (this.options === 'info'&& this.$route.query.modelAttribution==='1') {
        return '查看诊断模型详情';
      }
    }
  },
  methods: {
    openDialog(){
      this.formData.configData.push(
        {
          modelId:'',
          paramName:'',
          paramChineseName:'',
          paramType:'',
          paramSort:'',
          paramDefaultValue:'',
          paramDescription:'',
          isRequired:false
        }
      )
    },
    initData() {
      this.formData.modelAttribution= this.modelAtrtibution;
      if (this.options!== 'add') {
        this.selectInfo(this.dataInfo.modelId);
      }
    },
    selectInfo(id){
      getFaultPhysical(id).then(res =>{
        console.log('返回详情信息',res.data)
        this.formData = res.data;
      })
    },
    handleSubmit() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          if (this.formData.modelId) {
            updateFaultPhysical(this.formData).then((response) => {
              this.$message.success("修改成功");
              this.handleCancel();
            });
          } else {
            addFaultPhysical(this.formData).then((response) => {
              this.$message.success("新增成功");
              this.handleCancel();
            });
          }
        }
      });
    },
    handleCancel() {
      this.formData = {
      };
      this.$emit('callback', false);
    }
  }
};
</script>
<style>
.body-toolbar {
  height: 40px;
  line-height: 40px;
  text-align: right;
  padding-right: 10px;;
}
</style>
