<template>
  <div class="company-edit-container">
    <!-- 顶部返回 -->
    <div class="page-header">
      <el-button link @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </el-button>
      <span class="page-title">完善企业信息</span>
    </div>

    <div class="form-content">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
        <!-- 工商信息 -->
        <div class="section">
          <div class="section-title"><i class="title-bar"></i>工商信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="企业名称" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码" prop="creditCode">
                <el-input v-model="form.creditCode" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="法人" prop="legalPerson">
                <el-input v-model="form.legalPerson" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册资本" prop="registeredCapital">
                <el-input v-model="form.registeredCapital" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="详细地址" prop="detailAddress">
                <el-input 
                  v-model="form.detailAddress" 
                  placeholder="请输入" 
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="经营范围" prop="businessScope">
                <el-input 
                  v-model="form.businessScope" 
                  type="textarea"
                  :rows="3"
                  placeholder="请输入" 
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 办公信息 -->
        <div class="section">
          <div class="section-title"><i class="title-bar"></i>办公信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="主要办公地址">
                <el-select v-model="form.officeProvince" placeholder="请选择" style="width: 100%">
                  <el-option label="广东省" value="广东省" />
                  <el-option label="北京市" value="北京市" />
                  <el-option label="上海市" value="上海市" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" ">
                <el-input v-model="form.officeAddress" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所属行业" prop="industry">
                <el-select v-model="form.industry" placeholder="请选择" style="width: 100%">
                  <el-option label="电力行业" value="电力行业" />
                  <el-option label="制造业" value="制造业" />
                  <el-option label="互联网" value="互联网" />
                  <el-option label="金融业" value="金融业" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业规模" prop="scale">
                <el-select v-model="form.scale" placeholder="请选择" style="width: 100%">
                  <el-option label="50人以下" value="50人以下" />
                  <el-option label="50-200人" value="50-200人" />
                  <el-option label="200-500人" value="200-500人" />
                  <el-option label="500-1000人" value="500-1000人" />
                  <el-option label="1000-5000人" value="1000-5000人" />
                  <el-option label="5000人以上" value="5000人以上" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="网址" prop="website">
                <el-input 
                  v-model="form.website" 
                  placeholder="请输入" 
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="营业执照" prop="businessLicense">
                <el-upload
                  class="upload-box"
                  action="#"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="(file: any) => handleUpload(file, 'businessLicense')"
                >
                  <div v-if="form.businessLicense" class="upload-preview">
                    <el-image :src="form.businessLicense" fit="cover" />
                  </div>
                  <div v-else class="upload-placeholder">
                    <el-icon :size="24"><Plus /></el-icon>
                    <span>上传</span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人身份证" prop="idCard">
                <el-upload
                  class="upload-box"
                  action="#"
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="(file: any) => handleUpload(file, 'idCard')"
                >
                  <div v-if="form.idCard" class="upload-preview">
                    <el-image :src="form.idCard" fit="cover" />
                  </div>
                  <div v-else class="upload-placeholder">
                    <el-icon :size="24"><Plus /></el-icon>
                    <span>上传</span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <!-- 底部按钮 -->
      <div class="form-footer">
        <el-button type="danger" @click="handleSave">保存</el-button>
        <el-button @click="handleBack">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const formRef = ref()

const form = reactive({
  companyName: '',
  creditCode: '',
  legalPerson: '',
  registeredCapital: '',
  detailAddress: '',
  businessScope: '',
  officeProvince: '',
  officeAddress: '',
  industry: '',
  scale: '',
  phone: '',
  email: '',
  website: '',
  businessLicense: '',
  idCard: ''
})

const rules = {
  companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  creditCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }]
}

const handleBack = () => {
  router.push('/enterprise/companyInfo')
}

const handleUpload = (file: any, field: string) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    (form as any)[field] = e.target?.result as string
  }
  reader.readAsDataURL(file.raw)
}

const handleSave = async () => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  
  // TODO: 调用保存接口
  ElMessage.success('保存成功')
  handleBack()
}
</script>

<style scoped lang="scss">
.company-edit-container {
  background: #f5f5f5;
  min-height: 100%;
}

.page-header {
  background: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #eee;

  .page-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}

.form-content {
  padding: 20px;
}

.section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.title-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #e60012;
  border-radius: 2px;
}

.upload-box {
  :deep(.el-upload) {
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;

    &:hover {
      border-color: #e60012;
    }
  }

  .upload-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    gap: 5px;
  }

  .upload-preview {
    width: 100%;
    height: 100%;
    
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}

.form-footer {
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}
</style>
