<template>
  <div class="page">
    <!-- <header>
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      应用管理—{{status}}
    </header> -->
    <el-form ref="appForm"
             class="form"
             :model="form"
             :rules="rules"
             label-width="100px">
      <!-- <el-form-item label="系统ID"
                    prop="systemId"
                    class="dataItem">
        <el-input v-model="form.systemId"
                  :disabled="isShow"
                  size="small"></el-input>
      </el-form-item> -->
      <el-form-item label="系统编码"
                    prop="systemCode"
                    class="dataItem">
        <el-input v-model="form.systemCode"
                  :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="系统名称"
                    prop="systemName"
                    class="dataItem">
        <el-input v-model="form.systemName"
                  :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="系统描述"
                    prop="systemDesc"
                    class="dataItem">
        <el-input v-model="form.systemDesc"
                  :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item label="系统类型"
                    prop="systemType"
                    class="dataItem">
        <el-select size="small"
                   v-model="form.systemType"
                   :disabled="isShow"
                   class="dataItem">
          <el-option v-for="item in sysType"
                     :key="item.index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="IP地址"
                    prop="ipAddr"
                    class="dataItem">
        <el-input v-model="form.ipAddr"
                  :disabled="isShow"
                  size="small"></el-input>
      </el-form-item>
      <div class="searchButton"
           v-if="!isShow">
        <el-button type="primary"
                   @click="saveData"
                   size="small"
                   icon="el-icon-document">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { checkCharLength,
        checkCharLength2,
        checkCharNoChinese,
        checkCharNoChinese2,
        checkCharNoChinese3,
        checkIpAddress,
        checkChar,
        checkChinese,
        checkURL} from '@/utils/validator.js';
import qs from 'qs';
export default {
    props: {
        code: String,
        item: Object,
        dialogColose: {
            type: Boolean,
            default: function () {
                return false;
            }
        }
    },
  data () {
    return {
      isShow: false,
      status: '查看',
      form: {
        id: '',
        systemId: '',
        systemCode: '',
        systemName: '',
        systemDesc: '',
        systemType: '',
        ipAddr: ''
      },
      rules: {
            systemCode: [
                { required: true, message: '请输入系统编码', trigger: 'blur' },
                { validator: checkCharLength, max: 36, trigger: 'change' },
                { validator: checkCharNoChinese, trigger: 'change' }
            ],
            systemName: [
                { required: true, message: '请输入系统名称', trigger: 'blur' },
                { validator: checkCharLength2, max: 100, trigger: 'change' },
                { validator: checkChar, trigger: 'change' }
            ],
            systemType: [
                { required: true, message: '请选择系统类型', trigger: 'blur' }
            ],
            ipAddr: [
                { required: true, message: '请输入IP地址', trigger: 'blur' },
                { validator: checkCharLength, max: 100, trigger: 'change' },
                { validator: checkIpAddress, trigger: 'change' }
            ],
            systemDesc: [
                { validator: checkCharLength, max: 255, trigger: 'change' },
                { validator: checkChar, trigger: 'change' }
            ]
        },
      sysType: [{
        label: '源系统',
        value: '1'
      }, {
        label: '目标系统',
        value: '2'
      }]
    }
  },
  mounted: function () {
    this.clearForm();
    if (this.code === 'show') {
        this.isShow = true;
        this.status = '查看'
        this.setForm(this.item)
    } else if (this.code === 'add') {
        this.status = '新增';
    } else {
        this.status = '修改';
        this.isEdit = true;
        this.setForm(this.item)
    }
  },
  watch: {
        dialogColose: function (newValue) {
            if (!newValue) {
                this.clearForm();
                if (this.code === 'show') {
                    this.isShow = true;
                    this.status = '查看'
                    this.setForm(this.item)
                } else if (this.code === 'add') {
                    this.status = '新增';
                } else {
                    this.status = '修改';
                    this.isEdit = true;
                    this.setForm(this.item)
                }
            } else {
                this.isShow = false;
            }
        }
    },
  methods: {
    setForm (data) {
      let that = this;
      for (let i in that.form) {
        that.form[i] = data[i]
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    saveData () {
      let that = this;
      this.$refs['appForm'].validate((valid) => {
        if (valid) {
            if (this.isEdit) {
                that.axios.put('pass/v1/mdsystems/' + that.form.id,
                that.form
                ).then(function (response) {
                    if (response.code === '0') {
                        that.$message.success('编辑成功');
                        that.$emit('save', response.data);
                        that.clearForm();
                    } else {
                        that.$message.error(response.message);
                    }
                }).catch(function () {
                    that.clearForm();
                });
            } else {
                delete that.form.id;
                that.axios.post('pass/v1/mdsystems/', that.form).then(function (response) {
                    if (response.code === '0') {
                        that.$message.success('新增成功');
                        that.$emit('add', response.data);
                        that.clearForm();
                    } else {
                        that.$message.error(response.message);
                    }
                }).catch(function () {
                    that.clearForm();
                });
            }
        }
      })
    },
    clearForm () {
            for (let item in this.form) {
                this.form[item] = ''
            }
            this.form['status'] = '1'
        },
    cancel () { }
  }
}
</script>
<style scoped>
.page {
  padding: 10px;
}
header {
  width: 100%;
  height: 50px;
  background: rgb(248, 248, 248);
  padding-left: 60px;
  font-size: 15px;
  color: #000;
  line-height: 50px;
  position: relative;
}
header i {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  line-height: 50px;
  font-size: 25px;
  cursor: pointer;
}
header i:hover {
  color: #70baf2;
}
.form {
  width: 100%;
  height: auto;
  padding: 10px 0;
  text-align: left;
}
.dataItem {
  width: 48%;
  display: inline-block;
}
.el-select--small {
  width: 100% !important;
}
.dataRow {
  width: 96.4%;
}
.searchButton {
  width: 100%;
  text-align: center;
}
.searchButton button {
  display: inline-block;
}
</style>
