<template>
  <div class="ele-body ele-body-card" style="max-width: 1000px">
    <a-card
      :bordered="false"
      :body-style="{ paddingTop: '0px', minHeight: '800px' }"
    >
      <a-tabs v-model:active-key="active" size="large">
        <a-tab-pane tab="基本信息" key="info">
          <a-form
            :label-col="
              styleResponsive
                ? { lg: 2, md: 6, sm: 4, xs: 24 }
                : { flex: '100px' }
            "
            :wrapper-col="styleResponsive ? { offset: 1 } : { offset: 1 }"
            style="margin-top: 20px"
          >
            <a-form-item labelAlign="right" label="企业logo">
              <ele-image-upload
                v-model:value="logo"
                :accept="'image/*'"
                :item-style="{ width: '50px', height: '50px' }"
                :limit="1"
                @upload="onUpload"
                @remove="onClose"
              />
            </a-form-item>
            <a-form-item label="企业简称">
              <a-space size="middle">
                <span>{{ form.shortName }}</span>
                <a @click="onEdit('企业简称', 'shortName', form.shortName)"
                  >修改</a
                >
              </a-space>
            </a-form-item>
            <a-form-item label="企业全称">
              <a-space size="middle">
                <span>{{ form.companyName }}</span>
                <a-tag color="green" v-if="form.authentication"
                  >已认证</a-tag
                >
                <a-tag color="orange" v-else>未认证</a-tag>
                <a @click="onEdit('企业全称', 'companyName', form.companyName)"
                >修改</a
                >
              </a-space>
<!--              <div class="position-right">-->
<!--                <a-button v-if="!form.authentication" @click="onEdit('企业全称', 'companyName', form.companyName)">前往认证</a-button>-->
<!--              </div>-->
            </a-form-item>
            <a-form-item label="主体类型">
              <a-tag>{{ form.companyType }}</a-tag>
              <a @click="onEdit('主体类型', 'companyType', form.companyType)">修改</a>
            </a-form-item>
            <a-divider style="padding-bottom: 20px" />
            <a-form-item label="所属地区">
              <a-space size="middle">
                <span
                  >{{ form.province }} {{ form.city }} {{ form.region }}</span
                >
                <a @click="onEdit('所属地区', 'city', form.city)">修改</a>
              </a-space>
            </a-form-item>
            <a-form-item label="企业地址">
              <a-space size="middle">
                <span>{{ form.address }}</span>
                <a @click="onEdit('企业地址', 'address', form.address)">修改</a>
              </a-space>
            </a-form-item>
            <a-form-item label="联系电话">
              <a-space size="middle">
                <span>{{ form.phone }}</span>
                <a @click="onEdit('联系电话', 'phone', form.phone)">修改</a>
              </a-space>
            </a-form-item>
            <a-form-item label="企业域名">
              <a-space size="middle">
                <span>{{ form.domain }}</span>
                <a @click="onEdit('企业域名', 'domain', form.domain)">修改</a>
              </a-space>
            </a-form-item>
            <a-divider style="padding-bottom: 20px" />
            <a-form-item label="企业成员">
              <span>{{ form.users }}个成员</span>
            </a-form-item>
            <a-form-item label="企业部门">
              <span>{{ form.departments }}</span>
              <span>个部门</span>
            </a-form-item>
            <a-form-item label="人数上限">
              <span>{{ form.users }}/{{ form.members }}</span>
              <a-button type="link" v-if="form.authentication === false">
                去认证扩容
              </a-button>
            </a-form-item>
            <a-form-item label="存储空间">
              {{ getFileSize(form.storage) }}/{{
                getFileSize(form.storageMax)
              }}
            </a-form-item>
            <a-divider style="padding-bottom: 20px" />
            <a-form-item label="行业类型">
              <a-space size="middle">
                <span>{{ form.industryParent }} {{ form.industryChild }}</span>
                <a @click="onEdit('行业类型', 'industryParent', form.industryParent)"
                  >修改</a
                >
              </a-space>
            </a-form-item>
            <a-form-item label="应用版本">
              <span v-if="form.version === 10">体验版（试用期1个月）</span>
              <span v-if="form.version === 20">授权版</span>
              <div class="position-right">
                <a-button>前往升级</a-button>
              </div>
            </a-form-item>
            <a-form-item label="到期时间">
              <span>{{ form.expirationTime }}</span>
            </a-form-item>
            <a-form-item label="创建时间">
              <span>{{ form.createTime }}</span>
            </a-form-item>
            <a-divider style="padding-bottom: 20px" />
            <a-form-item label="tenantId">
              <span>{{ form.tenantId }}</span>
            </a-form-item>
            <a-form-item label="企业编号">
              <span>{{ form.tenantCode }}</span>
            </a-form-item>
            <a-form-item
              label="企业注销"
              extra="注销后，企业在当前应用的数据将会删除,且不可恢复，请谨慎操作"
            >
              <a-button>注销</a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <!-- 头像裁剪弹窗 -->
    <ele-cropper-modal
      :src="form.avatar"
      v-model:visible="visible"
      :to-blob="true"
      :options="{ autoCropArea: 1, viewMode: 1, dragMode: 'move' }"
      @done="onDone"
    />
    <Field
      v-model:visible="showEdit"
      :data="form"
      :title="title"
      :field="field"
      :content="content"
      @done="query"
    />
    <Markdown
      v-model:visible="showMarkdown"
      :data="data"
      :field="field"
      :content="markdown"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed } from 'vue';
  import { Form, message } from "ant-design-vue";
  import { useUserStore } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import { getCompany, updateCompany } from "@/api/system/company";
  import Field from './components/field.vue';
  import Markdown from './components/markdown.vue';
  import { FILE_SERVER } from '@/config/setting';
  import { assignObject } from 'ele-admin-pro';
  import { getFileSize } from '@/utils/common';
  import { Company } from '@/api/system/company/model';
  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
  import { uploadFile } from "@/api/system/file";

  const useForm = Form.useForm;

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const userStore = useUserStore();

  // tab 页选中
  const active = ref('info');

  // 保存按钮 loading
  const loading = ref(false);

  // 是否显示裁剪弹窗
  const visible = ref(false);
  const logo = ref<any>([]);
  const field = ref('');
  const title = ref('');
  // 是否显示编辑弹窗
  const showEdit = ref(false);
  const content = ref('请输入要修改的内容');
  const markdown = ref('请输入应用介绍');
  const showMarkdown = ref(false);
  // 登录用户信息
  const loginUser = computed(() => userStore.info ?? {});

  // 表单数据
  const form = reactive<Company>({
    companyId: undefined,
    shortName: '',
    companyName: '',
    companyType: undefined,
    companyLogo: '',
    domain: '',
    phone: '',
    InvoiceHeader: '',
    startTime: '',
    expirationTime: '',
    version: undefined,
    members: undefined,
    storage: undefined,
    storageMax: undefined,
    users: undefined,
    departments: undefined,
    country: '',
    province: '',
    city: '',
    region: '',
    address: '',
    comments: '',
    authentication: undefined,
    industryParent: undefined,
    industryChild: undefined,
    status: undefined,
    user_id: undefined,
    tenantId: undefined,
    tenantCode: '',
    code: undefined,
    createTime: '',
    updateTime: ''
  });
  // 省市区
  // const city = ref<string[]>([
  //   String(loginUser.value.province),
  //   String(loginUser.value.city),
  //   String(loginUser.value.region)
  // ]);

  // 省市区
  // const industry = ref<string[]>([
  //   String(loginUser.value.province),
  //   String(loginUser.value.city),
  //   String(loginUser.value.region)
  // ]);

  // 表单验证规则
  const rules = reactive({
    username: [
      {
        required: true,
        message: '请输入昵称',
        type: 'string'
      }
    ],
    phone: [
      {
        required: true,
        message: '请输入昵称',
        type: 'string'
      }
    ],
    nickname: [
      {
        required: true,
        message: '请输入昵称',
        type: 'string'
      }
    ],
    email: [
      {
        required: true,
        message: '请输入邮箱',
        type: 'string'
      }
    ]
  });

  const onEdit = (label, name, text) => {
    title.value = label;
    field.value = name;
    content.value = text;
    showEdit.value = true;
  };

  const onUpload = (d: ItemType) => {
    const file = d.file;
    if(file){
      if (file.size / 1024 > 100) {
        message.error('大小不能超过 100k');
        return;
      }
    }
    uploadFile(<File>d.file)
      .then((result) => {
        form.companyLogo = result.url;
        updateCompany(form).then(res => {
          message.success('上传成功');
        })

      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  /* 打开图片裁剪 */
  const openCropper = () => {
    visible.value = true;
  };

  const query = () => {
    logo.value = [];
    getCompany().then((response) => {
      if (response.companyLogo) {
        logo.value.push({
          uid: 1,
          url: response.companyLogo,
          status: ''
        });
      }
      assignObject(form, response);
    });
  };

  query();
</script>

<script lang="ts">
  export default {
    name: 'SystemProfile'
  };
</script>
<style>
  .position-right {
    position: absolute;
    right: 0;
    top: 0;
  }
</style>
