<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-01 09:29:52
 * @Description: file content
 -->
<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="40%">
    <a-form :inline="true" :model="formData" :rules="rules" ref="formRef" :label-col="{span: 4}"
      :wrapper-col="{span:18}">
      <a-form-item label="应用名称" name="appName">
        <a-input :maxlength="20" placeholder="请输入应用名称" show-word-limit v-model:value="formData.appName"></a-input>
      </a-form-item>
      <a-form-item label="应用编码" name="appCode">
        <a-input :maxlength="20" placeholder="请输入应用编码" show-word-limit v-model:value="formData.appCode"></a-input>
      </a-form-item>
      <!-- <a-form-item label="应用状态" v-if="addType ==='edit'">
        <obit-switch v-model:value="formData.appEnable" unCheckedChildren="停用" checkedChildren="启用" activeValue="1"
          inactiveValue="0" @change="onChange(value)">
        </obit-switch>
      </a-form-item> -->
      <a-form-item label="应用图标" name="appIcon">
        <a-input placeholder="请输入应用图标" readonly v-model:value="formData.appIcon">
          <template #prefix>
            <i class="iconfont " :class="'icon-'+formData.appIcon"></i>
          </template>
          <template #suffix>
            <obitIconShow v-model:icon="formData.appIcon"></obitIconShow>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item label="应用类型" name="appType">
        <obit-dict dictCode="system_service_type" placeholder="请选择应用类型" v-model:value="formData.appType"></obit-dict>
      </a-form-item>
      <a-form-item label="登录路径" name="linkUrl">
        <a-input placeholder="应用单点登录路径" v-model:value="formData.linkUrl"></a-input>
      </a-form-item>
      <a-form-item label="应用描述" name="appDesc">
        <a-textarea :maxlength="100" placeholder="请输入应用描述" show-word-limit v-model:value="formData.appDesc">
        </a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { computed, inject, reactive, ref, toRefs, watch, getCurrentInstance } from 'vue'
import obitIconShow from '../../../components/obit-icon-show/obit-icon-show.vue'
export default {
  components: { obitIconShow },
  // inheritAttrs: false,
  props: {
    open: {
      type: Boolean
    },
    addType: {
      type: String,
    },
    detailsInfo: {
      type: Object,
    },
  },
  setup (props, context) {
    let { proxy } = getCurrentInstance()
    let http = inject('http')
    let util = inject('util')
    let _data = reactive({
      showModal: props.open,
      checked1: true,
      formData: {},
      // form组件  ref绑定  需要内部定义才可以调用  没有$refs
      formRef: null,
      rules: {
        appName: [
          { required: true, message: '请输入应用名称', trigger: 'blur' },
        ],
        appCode: [
          { required: true, message: '请输入应用编码', trigger: 'blur' },
        ],
        appIcon: [
          { required: true, message: '请输入应用图标', trigger: 'blur' },
        ],
        appType: [
          { required: true, message: '请选择应用类型', trigger: 'blur' },
        ],
        linkUrl: [
          { required: true, message: '请输入应用单点登录路径', trigger: 'blur' },
        ],
      },
    })
    let _computed = {
      showTitle: computed(() => props.addType === 'add' ? '新增应用' : '修改应用')
    }
    let _methods = {
      saveInfo () {
        _data.formRef.validate().then(() => {
          let param = util.util.cloneObj(_data.formData)
          if (props.addType === 'add') {
            delete param.appEnable
            delete param.appId
            delete param.createTime
            delete param.params
          }
          console.log(param)
          http.addSystemAppInfo(param, props.addType).then((res) => {
            context.emit('reload')
            _methods.closeDialog()
            _data.formData = {}
          })
        })
      },
      onChange (item) {
        console.log('item', item, _data.formData.appEnable)
        let contents = ''
        if(_data.formData.appEnable){
          contents = '您确认启用'+ _data.formData.appName + '吗？'
        }else{
          contents = '您确认停用'+ _data.formData.appName + '吗？'
        }
        proxy.$confirm({
          title: '提示',
          content: contents,
          onOk () {
            console.log('是否切换')
            if (_data.formData.appEnable == 0) {
              _data.formData.appEnable = false
            }
            if (_data.formData.appEnable == 1) {
              _data.formData.appEnable = true
            }
          },
          onCancel () {
            _data.formData.appEnable =  _data.formData.appEnable === '1' ? '0' : '1'
          }
        })
      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
    }
    watch(() => props.open, (value) => {
      if (value && props.addType === 'edit') {
        _data.formData.appEnable = 1
        _data.formData = util.util.cloneObj(props.detailsInfo)
        console.log('🚀 ~ file: appAdd.vue ~ line 139 ~ watch ~ props.detailsInfo', props.detailsInfo)
      } else {
        util.util.cleanObj(_data.formData)
      }
      console.log(_data.formData)
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>