<template>
  <el-drawer
    :title="drawerTitle"
    :visible.sync="visible"
    :width="600"
    :before-close="handleBeforeClose"
    class="analysis-label-drawer"
  >
    <!-- 标题下方添加分隔线 -->
    <div class="title-divider"></div>

    <!-- 表单内容区 -->
    <div class="drawer-content">
      <el-form
        ref="labelForm"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        class="form-container"
      >
        <el-form-item label="标签组名称" prop="analysisLabelName" required>
          <el-input
            v-model="formData.analysisLabelName"
            placeholder="请输入"
            maxlength="128"
            clearable
          />
        </el-form-item>
        <el-form-item label="行业类型" prop="industryType" required>
          <el-select
            v-model="formData.industryType"
            placeholder="请选择行业类型"
            clearable
          >
            <el-option
              v-for="item in industryTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 底部操作栏 -->
    <div class="drawer-footer">
      <el-button @click="handleCancel" :disabled="showSaveAnimation">取消</el-button>
      <el-button
        type="primary"
        @click="handleSave"
        :loading="showSaveAnimation"
      >
        保存
      </el-button>
    </div>

    <!-- 保存动画遮罩 -->
    <div v-if="showSaveAnimation" class="save-animation">
      <div class="animation-mask"></div>
      <div class="animation-content">
        <div class="spinner"></div>
        <div class="animation-text">数据保存中</div>
        <div class="animation-subtext">请稍候，正在处理...</div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {
  addAnalysisLabel,
  updateAnalysisLabel,
  checkLabelNameUnique
} from '@/api/template/analysisLabel/analysisLabel'

export default {
  name: 'AnalysisLabelForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    industryTypeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showSaveAnimation: false,
      formData: {
        analysisLabelId: null,
        useState: '0',
        analysisLabelName: '',
        industryType: '',
        templateId: '',
      },
      formRules: {
        analysisLabelName: [
          { required: true, message: '请输入标签组名称', trigger: 'blur' },
          { max: 128, message: '标签组名称长度不能超过128个字符', trigger: 'blur' }
        ],
        industryType: [
          { required: true, message: '请选择行业类型', trigger: 'change' }
        ]
      }
    }
  },

  computed: {
    drawerTitle() {
      return this.type === 'add' ? '新增标签组' : '修改标签组'
    }
  },

  watch: {
    type: {
      handler(newVal) {
        this.initFormData()
      },
      immediate: true
    }
  },

  methods: {
    initFormData() {
      if (this.type === 'add') {
        this.formData = {
          analysisLabelId: null,
          analysisLabelName: '',
          industryType: '',
          templateId: this.rowData.templateId || '',
          useState: '0'
        }
      } else {
        this.formData = { ...this.rowData }
      }
      this.$nextTick(() => {
        if (this.$refs.labelForm) {
          this.$refs.labelForm.resetFields()
        }
      })
    },

    async handleSave() {
      this.$refs.labelForm.validate(async (valid) => {
        if (!valid) return

        this.showSaveAnimation = true
        try {
          const checkParams = {
            analysisLabelName: this.formData.analysisLabelName,
            templateId: this.formData.templateId,
            analysisLabelId: this.type === 'edit' ? this.formData.analysisLabelId : ''
          }
          // const uniqueRes = await checkLabelNameUnique(checkParams)
          // if (uniqueRes.data > 0) {
          //   this.$message.error('同一模板下标签组名称已存在')
          //   return
          // }

          if (this.type === 'add') {
            await addAnalysisLabel(this.formData)
            this.$message.success('新增成功')
          } else {
            await updateAnalysisLabel(this.formData)
            this.$message.success('修改成功')
          }

          this.$emit('save-success')
          this.$emit('close')
        } catch (error) {
          this.$message.error(error.message || '操作失败')
        } finally {
          this.showSaveAnimation = false
        }
      })
    },

    handleCancel() {
      this.$emit('close')
    },

    handleBeforeClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.analysis-label-drawer {

  .el-drawer__header {
    padding: 16px 24px; // 调整标题区内边距
    margin: 0;
  }

  .el-drawer__body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100% - 56px); // 减去标题栏高度
  }

  // 标题下方分隔线
  .title-divider {
    height: 1px;
    background-color: #e8e8e8;
    width: 100%;
  }

  // 表单内容区（让内容区占满剩余空间，推挤按钮到底部）
  .drawer-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto; // 内容过多时可滚动
  }

  .form-container {
    margin-top: 8px;
  }

  // 底部操作栏（固定在抽屉底部）
  .drawer-footer {
    margin-top: 590px;
    padding: 16px 24px;
    border-top: 1px solid #e8e8e8; // 与正文区分的线
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background-color: #fff; // 确保背景色一致
  }
}

// 保存动画样式
.save-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  .animation-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
  }

  .animation-content {
    position: relative;
    text-align: center;
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    .spinner {
      width: 40px;
      height: 40px;
      margin: 0 auto 16px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #1F72EA;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .animation-text {
      font-size: 16px;
      color: #1F72EA;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .animation-subtext {
      font-size: 14px;
      color: #666;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
