<template>
  <div class="page-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>品牌信息设置</span>
        </div>
      </template>
      <el-form :model="brandForm" label-width="120px" class="brand-form">
        <el-form-item label="品牌Logo">
          <el-avatar v-if="brandForm.logo" :size="100" shape="square" :src="brandForm.logo" />
        </el-form-item>

        <el-form-item label="品牌名称" required>
          <el-input v-model="brandForm.name" style="width: 400px" disabled />
        </el-form-item>

        <el-form-item label="商户账号" required>
          <el-input v-model="brandForm.account" placeholder="用于商户后台登录" style="width: 400px" disabled />
        </el-form-item>

<!--        <el-form-item label="登录密码" required>-->
<!--          <el-input v-model="brandForm.password" type="password" show-password placeholder="若留空则不修改密码" style="width: 400px" />-->
<!--        </el-form-item>-->

        <el-form-item label="联系人">
          <el-input v-model="brandForm.contactPerson" style="width: 400px" />
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input v-model="brandForm.contactPhone" style="width: 400px" />
        </el-form-item>

        <el-form-item label="总部地址">
          <el-input v-model="brandForm.address" style="width: 600px" />
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="brandForm.description" type="textarea" :rows="4" style="width: 600px" />
        </el-form-item>

        <!-- Keep this original requirement from before -->
<!--        <el-form-item label="合同有效期至">-->
<!--          <el-input :model-value="brandForm.validUntil" disabled style="width: 300px" />-->
<!--        </el-form-item>-->

        <el-form-item>
          <el-button v-hasPermi="['merchant:brand:save']" type="primary" @click="handleSave">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getTenantInfo, editOnMerchant } from '@/api/system/tenant';

const brandForm = reactive({
  id: '',
  logo: '',
  name: '',
  account: '',
  password: '',
  contactPerson: '',
  contactPhone: '',
  address: '',
  status: true,
  description: '',
  validUntil: ''
});

const getInfo = async () => {
  try {
    const res = await getTenantInfo();
    const data = res.data;
    if (data) {
      brandForm.id = data.id || '';
      brandForm.logo = data.logoUrl || '';
      brandForm.name = data.companyName || '';
      brandForm.account = data.username || '';
      brandForm.contactPerson = data.contactUserName || '';
      brandForm.contactPhone = data.contactPhone || '';
      brandForm.address = data.address || '';
      brandForm.description = data.intro || '';
      brandForm.validUntil = data.expireTime || '';
    }
  } catch (error) {
    console.error('获取品牌信息失败:', error);
  }
};

onMounted(() => {
  getInfo();
});

const handleSave = async () => {
  try {
    const params = {
      id: brandForm.id,
      contact: brandForm.contactPerson,
      phoneNumber: brandForm.contactPhone,
      address: brandForm.address,
      remark: brandForm.description
    };
    await editOnMerchant(params);
    ElMessage.success('品牌信息已更新');
    getInfo(); // 重新加载数据
  } catch (error) {
    console.error('保存 brand 失败:', error);
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
}
.brand-form {
  margin-top: 20px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.avatar-uploader-icon:hover {
  border-color: #409eff;
}
</style>
