<template>
  <a-modal class="obit-modal-default" v-if="showModal" :maskClosable="false" :title="showTitle" v-model:visible="showModal"
    @cancel="closeDialog" @ok="saveInfo" cancelText="取消" okText="确认" width="50%">
    <a-form class="drag-form" :rules="rules" ref="formRef" layout="horizontal" :model="formData" :label-col="{span: 4}"
      labelAlign="right" :wrapper-col="{span:18}">
      <div class="drawing-board">
        <a-row :gutter="[24, 24]">
          <a-col :span="24">
            <a-form-item class="form-item" label="应用账户" name="appAccount" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <a-input v-model:value="formData.appAccount" placeholder="请输入应用账户应用账户" :allow-clear="true">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item class="form-item" label="应用编码" name="appCode" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <a-input v-model:value="formData.appCode" placeholder="请输入应用编码应用编码" :allow-clear="true">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item class="form-item" label="应用名称" name="appName" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <a-input v-model:value="formData.appName" placeholder="请输入应用名称应用名称" :allow-clear="true">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item class="form-item" label="应用图标路径" name="appIcon" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <a-input v-model:value="formData.appIcon" placeholder="请输入应用图标路径应用图标路径" :allow-clear="true">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item class="form-item" label="应用介绍" name="appDesc" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <a-input v-model:value="formData.appDesc" placeholder="请输入应用介绍应用介绍" :allow-clear="true">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item class="form-item" label="使用状态" name="useStatus" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <obit-dict v-model:value="formData.useStatus" placeholder="请选择使用状态使用状态" :allow-clear="true"
                dictCode="sys_common_status">
              </obit-dict>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item class="form-item" label="应用类型" name="appType" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <obit-dict v-model:value="formData.appType" placeholder="请选择应用类型应用类型" :allow-clear="true"
                dictCode="system_service_type">
              </obit-dict>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item class="form-item" label="单点登录路径" name="linkUrl" :labelCol="{span:4}" :wrapperCol="{span:18}">
              <a-textarea v-model:value="formData.linkUrl" placeholder="请输入单点登录路径单点登录路径"
                :autoSize="{minRows:3,maxRows:4}">
              </a-textarea>
            </a-form-item>
          </a-col>

        </a-row>
      </div>
    </a-form>
  </a-modal>
</template>
<script>
import { computed, inject, reactive, ref, toRefs, watch } from 'vue'
export default {
  props: {
    open: {
      type: Boolean
    },
    addType: {
      type: String,
    },
    detailsInfo: {
      type: Object,
    },
  },
  setup (props, context) {
    let http = inject('http')
    let util = inject('util')
    let _data = reactive({
      formData: {},
      // form组件  ref绑定  需要内部定义才可以调用  没有$refs
      formRef: null,
      rules: { 'appAccount': [], 'appCode': [{ 'required': true, 'message': '请输入应用编码' }], 'appName': [{ 'required': true, 'message': '请输入应用名称' }], 'appIcon': [{ 'required': true, 'message': '请输入应用图标路径' }], 'appDesc': [{ 'required': true, 'message': '请输入应用介绍' }], 'useStatus': [{ 'required': true, 'message': '请输入使用状态' }], 'appType': [], 'linkUrl': [] },
    })
    let _computed = {
      showTitle: computed(() => props.addType === 'add' ? '新增应用管理' : '修改应用管理')
    }
    let _methods = {
      saveInfo () {
        _data.formRef.validate().then(() => {
          let param = util.util.cloneObj(_data.formData)
          let url = props.addType === 'edit' ? 'saveXXXXXInfo' : ''
          http.commomPost(url, param).then((res) => {
            context.emit('reload')
            _methods.closeDialog()
          })
        })
      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
    }
    watch(() => props.open, (value) => {
      if (value && props.addType === 'edit') {
        _data.formData = util.util.cloneObj(props.detailsInfo)
      } else {
        util.util.cleanObj(_data.formData)
      }
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
    </script>