<template>
  <div class="company-management">
    <!-- 操作栏 -->
    <div class="header">
      <el-button type="primary" @click="handleAdd" :icon="Plus">添加企业</el-button>
    </div>

    <!-- 企业表格 -->
    <el-table :data="companies" border style="width: 100%" v-loading="loading" empty-text="暂无数据">
      <el-table-column label="操作" width="102">
        <template #default="{ row }">
          <el-button type="info" :icon="Edit" circle plain @click="handleEdit(row)" />
          <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(row)" />
        </template>
      </el-table-column>
      <el-table-column prop="code" label="公司代码" width="100" />
      <el-table-column prop="nameCn" label="中文名称" width="180" />
      <el-table-column prop="nameEn" label="英文名称" width="180" />
      <el-table-column prop="industry" label="所属行业" width="120" />
      <el-table-column prop="identity" label="身份" width="120" />
      <el-table-column prop="region" label="地区" width="120" />
      <!--<el-table-column prop="licenseCode" label="营业执照" width="220" />-->
    </el-table>

    <!-- 添加/编辑对话框 -->
    <el-dialog v-model="dialogVisible"
               :title="isEdit ? '编辑企业' : '添加企业'"
               width="800px">
      <el-form :model="form"
               :rules="rules"
               ref="formRef"
               label-width="120px"
               label-position="right">

        <el-form-item label="中文名称" prop="nameCn">
          <el-input v-model="form.nameCn" placeholder="请输入中文名称" />
        </el-form-item>

        <el-form-item label="英文名称" prop="nameEn">
          <el-input v-model="form.nameEn" placeholder="请输入英文名称" />
        </el-form-item>

        <el-form-item label="所属行业" prop="industry">
          <el-select v-model="form.industry" placeholder="请选择行业">
            <el-option v-for="item in industryOptions"
                       :key="item"
                       :label="item"
                       :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="公司身份" prop="identity">
          <el-select v-model="form.identity" placeholder="请选择身份">
            <el-option v-for="item in identityOptions"
                       :key="item"
                       :label="item"
                       :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属地区" prop="region">
          <el-select v-model="form.region" placeholder="请选择地区">
            <el-option v-for="(key,item) in regionOptions"
                       :key="item"
                       :label="item"
                       :value="item" />
          </el-select>
        </el-form-item>
        <!--
                <el-form-item label="营业执照代码" prop="licenseCode">
                  <el-input v-model="form.licenseCode" placeholder="请输入营业执照代码" />
                </el-form-item>-->
        <!--<el-form-item label="营业执照" prop="licenseImage">
          <el-upload class="license-uploader"
                     drag
                     action="/api/upload"
                     :show-file-list="false"
                     :on-change="handleLicenseChange"
                     :auto-upload="false">-->
        <!-- 预览区域 -->
        <!--<div v-if="form.licenseImage || form.licensePreview" class="image-preview">
          <img v-if="isImageFile(form.licenseImageFile)"
               :src="form.licensePreview || getFullUrl(form.licenseImage)"
               class="preview-image" />
          <div v-else class="file-preview">
            <el-icon size="33"><DocumentChecked /></el-icon>
            <div>营业执照文件 <span style="color: #409EFF">√已上传</span></div>
            <div class="file-name">{{ getFileName(form.licenseImage) }}</div>
          </div>
          <div class="preview-mask">
            <el-icon><UploadFilled /></el-icon>
            <div>点击更换文件</div>
          </div>
        </div>-->
        <!-- 未上传状态 -->
        <!--<template v-else>
              <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
              <div class="el-upload__text">
                拖拽文件到此 或 <em>点击上传</em>
              </div>
              <div class="el-upload__tip">
                支持JPG/PNG/PDF格式，大小不超过5MB
              </div>
            </template>
          </el-upload>
        </el-form-item>-->

        <el-form-item label="公司Logo" prop="logo">
          <el-upload class="logo-uploader"
                     drag
                     action="/api/upload"
                     :show-file-list="false"
                     :on-change="handleLogoChange"
                     :auto-upload="false">
            <!-- 预览区域 -->
            <div v-if="form.logoaddress || form.logoPreview" class="image-preview">
              <img :src="form.logoPreview || getFullUrl(form.logoaddress)"
                   class="preview-image" />
              <div class="preview-mask">
                <el-icon><UploadFilled /></el-icon>
                <div>点击更换Logo</div>
              </div>
            </div>

            <!-- 未上传状态 -->
            <template v-else>
              <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
              <div class="el-upload__text">
                拖拽图片到此 或 <em>点击上传</em>
              </div>
              <div class="el-upload__tip">
                支持JPG/PNG格式，大小不超过5MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, inject, onUnmounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Plus, Delete, Edit, UploadFilled, DocumentChecked } from '@element-plus/icons-vue'

  const $http = inject('$http')
  const ajaxfile = inject('ajaxfile');
  const config = inject('config');

  // 数据列表
  const companies = ref([])
  const loading = ref(false)

  // 对话框相关
  const dialogVisible = ref(false)
  const isEdit = ref(false)
  const currentCompanyId = ref(null)
  const formRef = ref(null)

  // 表单初始数据
  const defaultForm = {
    code: '',
    nameCn: '',
    nameEn: '',
    industry: '',
    identity: '',
    region: '',
    licenseCode: '',
    logoaddress: '',
    licenseImage: ''
  }

  const form = reactive({ ...defaultForm })

  // 选项数据
  const industryOptions = ref([]);
  const getIndustry = () => {
    try {
      const rs = $http.post('ConfigPY/GetSingleValue', {
        VarName: "行业分类",
      }).then(rs => {
        //console.log(JSON.parse(rs.data.response));
        industryOptions.value = JSON.parse(rs.data.response)
      })
    } catch (error) {
      console.log(error);
    }
  };


  const identityOptions = ref([]);
  const getIdentity = () => {
    try {
      const rs = $http.post('ConfigPY/GetSingleValue', {
        VarName: "公司身份",
      }).then(rs => {
        //console.log(JSON.parse(rs.data.response));
        identityOptions.value = JSON.parse(rs.data.response)
      })
    } catch (error) {
      console.log(error);
    }
  };

  const regionOptions = ref([]);
  const getRegion = () => {
    try {
      const rs = $http.post('ConfigPY/GetSingleValue', {
        VarName: "区域",
      }).then(rs => {
        //console.log(JSON.parse(rs.data.response));
        regionOptions.value = JSON.parse(rs.data.response)
      })
    } catch (error) {
      console.log(error);
    }
  };

  // 验证规则
  const rules = reactive({
    nameCn: [
      { required: true, message: '请输入中文名称', trigger: 'blur' }
    ],
    industry: [
      { required: true, message: '请选择所属行业', trigger: 'change' }
    ],
    identity: [
      { required: true, message: '请选择所属身份', trigger: 'change' }
    ],
    region: [
      { required: true, message: '请选择所属地区', trigger: 'change' }
    ]/*,
    licenseCode: [
      { required: true, message: '请输入营业执照代码', trigger: 'blur' }
    ]*/
  })

  // 获取企业列表
  const getCompanies = async () => {
    try {
      loading.value = true
      const rs = await $http.post('Company/GetComInfo', {
        IsAll: true,
        ID: 0,
      })
      if (rs.data.isok) {
        companies.value = rs.data.response
        //console.log(companies.value);
      } else {
        ElMessage.error(rs.data.message)
      }
    } catch (error) {
      ElMessage.error('获取企业列表失败')
      console.error(error)
    } finally {
      loading.value = false
    }
  }

  // 获取完整图片URL
  const getFullUrl = (filename) => {
    //console.log(config.httpAds + `${filename}`);
    if (!filename) return '';
    // 如果已经是完整URL直接返回
    if (filename.startsWith('http')) return filename;
    // 根据实际存储路径拼接
    return config.httpAds + `${filename}`;
  }

  const beforeImageUpload = (file) => {
    const isImage = file.type.startsWith('image/')
    const isLt5M = file.size / 1024 / 1024 < 5

    if (!isImage) {
      ElMessage.error('只能上传图片文件!')
      return false
    }
    if (!isLt5M) {
      ElMessage.error('文件大小不能超过5MB!')
      return false
    }
    return true
  }
  const beforeImageUploadPDF = (file) => {
    const isImageOrPDF = file.type.startsWith('image/') || file.type === 'application/pdf';
    const isLt5M = file.size / 1024 / 1024 < 5;

    if (!isImageOrPDF) {
      ElMessage.error('只能上传图片文件或PDF文件!');
      return false;
    }
    if (!isLt5M) {
      ElMessage.error('文件大小不能超过5MB!');
      return false;
    }
    return true;
  }
  // 添加公司
  const handleAdd = () => {
    Object.assign(form, defaultForm);
    isEdit.value = false;
    dialogVisible.value = true;
  };

  // 编辑公司
  const handleEdit = (row) => {
    Object.assign(form, row);
    isEdit.value = true;
    currentCompanyId.value = row.id;
    dialogVisible.value = true;
  };

  // 删除公司
  const handleDelete = (row) => {
    ElMessageBox.confirm('确定删除该公司吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        //console.log(row.id);
        const rs = await $http.post('Company/DelCom', { Id: row.id });
        if (rs.data.isok) {
          ElMessage.success('删除成功');
          await getCompanies();
        } else {
          ElMessage.error(rs.data.message);
        }
      } catch (error) {
        ElMessage.error('删除失败');
        console.error(error);
      }
    }).catch(() => { });
  };

  const handleLogoChange = (file) => {
    form.logoFile = file.raw;
    // 生成本地预览图URL
    form.logoPreview = URL.createObjectURL(file.raw); // 新增预览字段
  };

  const handleLicenseChange = (file) => {
    form.licenseImageFile = file.raw;
    // 生成本地预览图URL
    form.licensePreview = URL.createObjectURL(file.raw); // 新增预览字段
  };

  const submitForm = async () => {
    await formRef.value.validate();

    try {
      // 上传Logo
      if (form.logoFile) {
        const logoFileData = {
          File: form.logoFile,
          Folder: "companylogo" // 根据实际存储目录调整
        };
        const logoUploadRes = await ajaxfile(logoFileData);
        if (logoUploadRes?.fileName) {
          form.logoaddress = "Uploads/companylogo/" + logoUploadRes.fileName;
        } else {
          ElMessage.error('上传Logo失败: ' + logoUploadRes);
          return;
        }
      } else if (form.logoaddress) { // 保留已有Logo逻辑
        form.logoaddress = form.logoaddress.substring(form.logoaddress.lastIndexOf('/') + 1);
      }

      /*      // 上传营业执照
            if (form.licenseImageFile) {
              const licenseFileData = {
                File: form.licenseImageFile,
                Folder: "businesslic" // 根据实际存储目录调整
              };
              const licenseUploadRes = await ajaxfile(licenseFileData);
              if (licenseUploadRes?.fileName) {
                form.licenseImage = licenseUploadRes.fileName;
              } else {
                ElMessage.error('上传营业执照失败: ' + licenseUploadRes);
                return;
              }
            } else if (form.licenseImage) { // 保留已有营业执照逻辑
              form.licenseImage = form.licenseImage.substring(form.licenseImage.lastIndexOf('/') + 1);
            }*/

      // 提交表单数据
      const api = isEdit.value ? 'Company/EditCom' : 'Company/AddCom';
      const data = isEdit.value ? { ...form, id: currentCompanyId.value } : form;

      const rs = await $http.post(api, data);
      if (rs.data.isok) {
        ElMessage.success(isEdit.value ? '修改成功' : '添加成功');
        dialogVisible.value = false;
        await getCompanies();
      } else {
        ElMessage.error(rs.data.message);
      }
    } catch (error) {
      ElMessage.error('操作失败');
      console.error(error);
    }
  };

  const isImageFile = (url) => {
    return /\.(jpe?g|png|gif|webp)$/i.test(url)
  }

  const getFileName = (url) => {
    return url.split('/').pop()
  }
  // 其他操作函数（handleAdd/handleEdit/handleDelete）与公司管理页面逻辑类似
  // 此处省略，保持与公司管理页面相同逻辑即可

  onMounted(() => {
    getCompanies()
    getIndustry()
    getIdentity()
    getRegion()
  })
  // 在组件卸载时释放对象URL
  onUnmounted(() => {
    if (form.logoPreview) URL.revokeObjectURL(form.logoPreview);
    if (form.licensePreview) URL.revokeObjectURL(form.licensePreview);
  })
</script>

<style scoped>
  .company-management {
    padding: 12px;
  }

  .header {
    margin-bottom: 10px;
  }

  .logo-uploader,
  .license-uploader {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
  }

  .logo-uploader {
    width: 300px;
    height: 180px;
  }

  .license-uploader {
    width: 300px;
    height: 180px;
  }

    .logo-uploader:hover,
    .license-uploader:hover {
      border-color: var(--el-color-primary);
    }

  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .license-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .upload-tip {
    font-size: 12px;
    color: #606266;
    margin-top: 8px;
  }

  /* 通用上传样式 */
  .logo-uploader :deep(.el-upload-dragger),
  .license-uploader :deep(.el-upload-dragger) {
    width: 100%;
    min-height: 180px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* 预览区域公共样式 */
  .image-preview {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .preview-image {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
  }



  /* 遮罩层样式 */
  .preview-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .image-preview:hover .preview-mask {
    opacity: 1;
  }


  .el-icon--upload {
    font-size: 36px;
    color: var(--el-text-color-secondary);
    margin-bottom: 12px;
  }

  .el-upload__text {
    font-size: 14px;
    color: var(--el-text-color-regular);
    text-align: center;
  }

  .el-upload__tip {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    margin-top: 8px;
  }
</style>
