<template>
  <!-- 添加或修改项目信息对话框 -->
  <div class="el-drawer__wrapper">
    <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
      <div class="page-container form-container">
        <div class="form-btns-container">
          <span class="title-label"
            ><el-icon>
              <Document />
            </el-icon>
            企业信息</span
          >
          <el-button
            v-if="editStatus"
            type="primary"
            size="small"
            icon="Finished"
            @click="submitForm"
            >保存</el-button
          >
          <el-button
            v-else
            type="warning"
            size="small"
            icon="Edit"
            @click="editStatus = true"
            >修改</el-button
          >
          <el-button
            v-if="form.id && editStatus"
            type="info"
            size="small"
            icon="Close"
            @click="editStatus = false"
            >取消修改</el-button
          >
          <el-button
            v-if="form.id"
            type="success"
            size="small"
            icon="Refresh"
            @click="getForm"
          >
            刷新
          </el-button>
          <div class="screen-btn" @click="handleScreen">
            <template v-if="!isFullscreen">
              <i class="fa fa-window-maximize" aria-hidden="true" />
              <!-- <span>全屏</span> -->
            </template>
            <template v-else>
              <i class="fa fa-window-restore" aria-hidden="true" />
              <!-- <span>还原</span> -->
            </template>
          </div>
          <div class="close-btn" @click="cancel">
            <i class="fa fa-times" aria-hidden="true" />
            <!-- <span>关闭</span> -->
          </div>
        </div>
        <div
          class="Y-scrollbar"
          style="position: absolute top: 32px bottom: 0 width: 100% overflow: auto"
        ></div>
        <el-form
          ref="tenantRef"
          class="master-container"
          size="default"
          :model="form"
          :rules="rules"
          label-width="140px"
        >
          <el-row :gutter="10">
            <el-col :span="12">
              <el-card
                class="card"
                style="margin-bottom: 10px"
                :body-style="{ padding: '20px', height: '280px' }"
              >
                <template #header><span>基本信息</span></template>
                <el-row :gutter="10">
                  <el-col :span="9">
                    <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-col :span="15">
                                        <el-form-item label="轮播图：" prop="rotationChart">
                                            <image-upload v-if="editStatus" :limit="3" v-model="form.rotationChart"
                                                :isShowTip="false" />
                                            <image-preview v-else :width="100" :height="100" :src="form.rotationChart" />
                                        </el-form-item>
                                    </el-col> -->
                  <!--
                                    <el-col :span="4">
                                        <img v-if="form.status === 1" src="../../../assets/images/1.png" width="200"
                                            height="80" />
                                        <img v-if="form.status === 2" src="../../../assets/images/2.png" width="200"
                                            height="80" />
                                    </el-col>
                                    -->
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="20">
                    <el-form-item label="公司名称" prop="name">
                      <el-input
                        v-if="editStatus"
                        v-model="form.companyName"
                        placeholder="请输入公司名称"
                      />
                      <span v-else>{{ form.companyName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="20">
                    <el-form-item label="系统简称" prop="name">
                      <el-input
                        v-if="editStatus"
                        v-model="form.accountName"
                        placeholder="请输入简称"
                      />
                      <span v-else>{{ form.accountName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="20">
                    <el-form-item label="系统版本" prop="name">
                      <el-select
                        v-if="editStatus"
                        v-model="form.versionId"
                        placeholder="请输入简称"
                      >
                        <el-option
                          v-for="item in versions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                      <span v-else>{{ form.versionName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>

              <el-card
                class="card"
                :body-style="{ padding: '20px', height: '180px' }"
              >
                <template #header><span>联系方式</span></template>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <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 :span="12">
                    <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 :span="12">
                    <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-card>
            </el-col>
            <el-col :span="12">
              <el-card
                class="card"
                :body-style="{ padding: '20px', height: '484px' }"
              >
                <template #header><span>企业介绍</span></template>
                <el-form-item label-width="10">
                  <editor
                    v-if="editStatus"
                    v-model="form.introduction"
                    style="height: 670px"
                  />
                  <div v-else v-html="form.introduction"></div>
                </el-form-item>
              </el-card>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { getTenant, addTenant, updateTenant } from "@/api/business/tenant";
import { listVersion } from "@/api/system/version";
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 versions = 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 = "添加项目信息";
  }
  listVersion({}).then((res) => {
    versions.value = res.rows;
  });
}

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

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

/** 全屏缩放 */
function handleScreen() {
  const dom = document.querySelector(
    ".list-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) {
      if (form.value.id != null) {
        updateTenant(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          editStatus.value = false;
          getForm();
          getList.value();
        });
      } else {
        addTenant(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          editStatus.value = false;
          form.value.id = response.data.id;
          getForm();
          getList.value();
        });
      }
    }
  });
}

/** 查询表单信息  */
function getForm() {
  loading.value = true;
  getTenant(form.value.id).then((response) => {
    loading.value = false;
    form.value = response.data;
  });
}

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