<template>
  <el-dialog :title="title" v-model="visible" width="680px" append-to-body draggable>
    <el-form ref="tenantRef" class="master-container" :model="form" :rules="rules" label-width="140px">
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="logo：" prop="logo">
            <image-upload v-if="editStatus" :limit="1" :isShowTip="false" v-model="form.logo" />
            <image-preview v-else :width="100" :height="100" :src="form.logo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col>
          <el-form-item label="企业全称：" prop="name">
            <el-input v-if="editStatus" v-model="form.orgName" placeholder="请输入企业全称" />
            <span v-else>{{ form.orgName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col>
          <el-form-item label="统一社会信用编码：" prop="orgCrtCode">
            <el-input v-if="editStatus" v-model="form.orgCrtCode" placeholder="请输入统一社会信用编码" />
            <span v-else>{{ form.orgCrtCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col>
          <el-form-item label="详细地址：" prop="orgAddr">
            <el-input v-if="editStatus" v-model="form.orgAddr" placeholder="选择省市区" />
            <span v-else>{{ form.orgAddr }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col>
          <el-form-item label="联系人：" prop="contactName">
            <el-input v-if="editStatus" v-model="form.contactName" placeholder="请输入联系人" />
            <span v-else>{{ form.contactName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col>
          <el-form-item label="联系电话：" prop="contactPhone">
            <el-input v-if="editStatus" v-model="form.contactPhone" placeholder="请输入联系电话" />
            <span v-else>{{ form.contactPhone }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col>
          <el-form-item label="电子邮箱：" prop="contactEmail">
            <el-input v-if="editStatus" v-model="form.contactEmail" placeholder="请输入电子邮箱" />
            <span v-else>{{ form.contactEmail }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="editStatus" type="primary" icon="Finished" @click="submitForm">保存</el-button>
        <el-button v-else type="warning" icon="Edit" @click="editStatus = true">编辑</el-button>
        <el-button v-if="form.id && editStatus" type="info" icon="Close" @click="editStatus = false">取消编辑</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { getTenant, saveTenant } from '@/api/business/tenant'
const { proxy } = getCurrentInstance()
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => {}
  }
})
const { getList } = toRefs(props)
/** 字典数组区 */
/** 表单抽屉 页变量 */
const title = ref('')
const loading = ref(false)
const multiple = ref(true)
const visible = ref(false)
const editStatus = ref(false)
const isFullscreen = ref(false)
const rotationChartList = ref([])
const data = reactive({
  form: {},
  rules: {}
})
const { form, rules } = toRefs(data)
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
  reset()
  visible.value = true
  if (id) {
    getTenant(id).then((response) => {
      form.value = response.data
      editStatus.value = false
      title.value = '修改项目信息'
    })
  } else {
    editStatus.value = true
    title.value = '添加项目信息'
  }
}

/** 取消按钮 */
function cancel() {
  visible.value = false
  reset()
}

/** 表单重置 */
function reset() {
  form.value = {}
  proxy.resetForm('tenantRef')
}

/** 全屏缩放 */
function handleScreen() {
  const dom = document.querySelector('.column-container > .el-drawer__wrapper > .el-overlay')
  isFullscreen.value = !isFullscreen.value
  dom.style.position = isFullscreen.value ? 'fixed' : 'absolute'
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['tenantRef'].validate((valid) => {
    if (valid) {
      saveTenant(form.value).then((res) => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess('操作成功')
          editStatus.value = false
          getList.value()
        }
      })
    }
  })
}

/** 暴露给父组件的方法 */
defineExpose({
  open
})
</script>
