<template>
  <manager-dialog
    :title="title"
    icon="el-icon-plus"
    :visible.sync="dialogVisible"
    width="50%"
    :close-on-click-modal="false"
    @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="resourceName">
            <el-input
              v-if="command !== 'detail'"
              v-model="form.resourceName"
              placeholder="请输入"
            /><span v-else>{{ form.resourceName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据源状态:" prop="resourceStatus">
            <el-select
              v-if="command !== 'detail'"
              v-model="form.resourceStatus"
              :disabled="true"
              placeholder="请选择"
            >
              <el-option v-for="item in staticData.resourceStatusList" :key="item.value" :label="item.label" :value="+item.value" />
            </el-select>
            <span v-else>
              {{ form.resourceStatus | toCase(staticData.resourceStatusList,'value', 'label') }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据源类型:" prop="resourceType">
            <el-select
              v-if="command !== 'detail'"
              v-model="form.resourceType"
              placeholder="请选择"
            >
              <el-option v-for="item in staticData.resourceTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <span v-else>
              {{ form.resourceType | toCase(staticData.resourceTypeList,'value', 'label') }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据源表:" prop="resourceTable">
            <el-input
              v-if="command !== 'detail'"
              v-model="form.resourceTable"
              placeholder="请输入"
            /><span v-else>{{ form.resourceTable }}</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/dataSource'
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: {
        resourceName: null,
        resourceStatus: '1',
        resourceType: null,
        resourceTable: null,
      },
      rules: {
        resourceName: [
          { required: true, message: '请输入数据源名称', trigger: 'blur' }
        ],
        resourceStatus: [
          { required: true, message: '请选择数据源状态', trigger: 'change' }
        ],
        resourceType: [
          { required: true, message: '请选择数据源类型', trigger: 'change' }
        ],
        resourceTable: [
          { required: true, message: '请输入数据源表', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    staticData() {
      return {
        resourceStatusList: [
          { label: '可用', value: '1' },
        ],
        resourceTypeList: [
          {
            value: '1',
            label: 'MySQL'
          },
          {
            value: '2',
            label: 'ES'
          },
          {
            value: '3',
            label: 'CTGMQ'
          }
        ]
      }
    },
    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 dataResource = JSON.parse(JSON.stringify(this.form))
      this.$refs.form.validate((valid, fields) => {
        if (valid) {
          if (this.command === 'add') {
            addObject({
              dataResource
            })
              .then((resp) => {
                if (resp.data.returnCode == '0') {
                  this.$message.success(resp.data.returnMsg)
                  this.$emit('success')
                  this.dialogVisible = false
                }
              })
          } else {
            editObject({
              dataResource
            })
              .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>