<template>
  <manager-dialog
    :title="title"
    icon="el-icon-plus"
    :visible.sync="dialogVisible"
    width="50%"
    :close-on-click-modal="false"
    :append-to-body="true"
    @opened="open"
    @close="close"
  >
    <el-form
      ref="form"
      v-loading="loading"
      :rules="command === 'detail' ? null : rules"
      :model="form"
      size="small"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="字段名称:" prop="fieldName">
            <el-input
              v-if="command !== 'detail'"
              v-model="form.fieldName"
              placeholder="请输入"
            /><span v-else>{{ form.fieldName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段编码:" prop="fieldCode">
            <el-input
              v-if="command !== 'detail'"
              v-model="form.fieldCode"
              placeholder="请输入"
            /><span v-else>{{ form.fieldCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{
        command === 'detail' ? '关闭' : '取消'
      }}</el-button>
      <el-button v-if="command !== 'detail'" @click="resetForm">重置</el-button>
      <el-button
        v-if="command !== 'detail'"
        type="primary"
        @click="submit"
      >提交</el-button>
    </span>
  </manager-dialog>
</template>

<script>
import { addObject, editObject } from '../api/dataSourceField'
export default {
  name: 'Dialog',
  props: {
    command: String,
    data: Object,
    row: Object,
    statics: Object
  },
  data() {
    return {
      id: null,
      dialogVisible: false,
      loading: false,
      staticsData: this.statics,
      form: {
        fieldName: null,
        fieldCode: null,
        resourceId: null,
      },
      rules: {
        fieldName: [
          { required: true, message: '请输入字段名称', trigger: 'blur' }
        ],
        fieldCode: [
          { required: true, message: '请选择字段编码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.command === 'add'
        ? '新增'
        : this.command === 'modify'
          ? '修改'
          : '查看'
    }
  },
  methods: {
    close() {
      this.$refs.form.resetFields()
    },
    open() {
      this.loading = true
      this.$refs.form.resetFields()
      if (this.command === 'add') {
        this.form = this.$options.data().form
      } else if (this.command === 'modify') {
        const form = JSON.parse(JSON.stringify(this.row))
        Object.assign(this.form, form)
      } else {
        Object.assign(this.form, this.row)
      }
      this.loading = false
    },
    submit() {
      const dataResourceField = JSON.parse(JSON.stringify(this.form))
      dataResourceField.resourceId = this.$route.params.id
      this.$refs.form.validate((valid, fields) => {
        if (valid) {
          if (this.command === 'add') {
            addObject({
              dataResourceField
            })
              .then((resp) => {
                if (resp.data.returnCode == '0') {
                  this.$message.success(resp.data.returnMsg)
                  this.$emit('success')
                  this.dialogVisible = false
                }
              })
          } else {
            editObject({
              dataResourceField
            })
              .then((resp) => {
                if (resp.data.returnCode == '0') {
                  this.$message.success(resp.data.returnMsg)
                  this.$emit('success')
                  this.dialogVisible = false
                }
              })
          }
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
      if (this.command === 'add') {
        this.form = this.$options.data().form
      } else if (this.command === 'modify') {
        const form = JSON.parse(JSON.stringify(this.row))
        Object.assign(this.form, form)
      }
    },
  }
}
</script>