<template>
  <el-dialog
    :visible.sync="visibleProxy"
    :show-close="false"
    width="92%"
    append-to-body
    :close-on-click-modal="false"
    custom-class="target-dialog"
  >
    <div class="dialog-inner">
      <!-- 头部 -->
      <div class="dialog-header">
        <div class="dialog-title">
          <i class="el-icon-aim title-icon"></i>
          {{ savedTarget ? '修改目标' : '设定目标' }}
          <span class="store-name-badge" v-if="currentStoreName">{{ currentStoreName }}</span>
        </div>
        <span class="dialog-close" @click="handleClose"><i class="el-icon-close"></i></span>
      </div>

      <!-- 次月提醒 Banner -->
      <div class="tip-banner">
        <i class="el-icon-bell tip-icon"></i>
        <span>
          当前正在设置 <b>{{ monthLabel }}</b> 门店目标，
          建议在本月结束前完成该月份的目标设定。
        </span>
      </div>

      <!-- 表单 -->
      <el-form :model="form" label-position="right" label-width="160px" class="target-form" size="small">
        <!-- 第1组：业绩目标 -->
        <div class="form-group">
          <div class="group-title">
            <i class="el-icon-trophy group-icon group-icon--blue"></i>
            业绩目标
          </div>
          <el-form-item label="科美业绩目标">
            <div class="input-with-unit">
              <el-input-number
                v-model="form.kemeiTarget"
                :min="0"
                :step="100"
                :precision="2"
                controls-position="right"
                :controls="false"
                placeholder="请输入"
              />
              <span class="unit">元</span>
            </div>
          </el-form-item>
          <el-form-item label="医美业绩目标">
            <div class="input-with-unit">
              <el-input-number
                v-model="form.yimeiTarget"
                :min="0"
                :step="100"
                :precision="2"
                controls-position="right"
                :controls="false"
                placeholder="请输入"
              />
              <span class="unit">元</span>
            </div>
          </el-form-item>
          <el-form-item label="生美业绩目标">
            <div class="input-with-unit">
              <el-input-number
                v-model="form.shengmeiTarget"
                :min="0"
                :step="100"
                :precision="2"
                controls-position="right"
                :controls="false"
                placeholder="请输入"
              />
              <span class="unit">元</span>
            </div>
          </el-form-item>
        </div>

        <!-- 第2组：其他指标 -->
        <div class="form-group">
          <div class="group-title">
            <i class="el-icon-data-analysis group-icon group-icon--green"></i>
            其他指标
          </div>
          <el-form-item label="门店里生命线">
            <div class="input-with-unit">
              <el-input-number
                v-model="form.lifeline"
                :min="0"
                :step="100"
                :precision="2"
                controls-position="right"
                :controls="false"
                placeholder="请输入"
              />
              <span class="unit">元</span>
            </div>
          </el-form-item>
          <el-form-item label="店助人头目标（阶段一）">
            <div class="input-with-unit">
              <el-input v-model.number="form.assistPhase1" type="number" placeholder="请输入正整数" min="0" step="1" />
              <span class="unit">人</span>
            </div>
          </el-form-item>
          <el-form-item label="店助人头目标（阶段二）">
            <div class="input-with-unit">
              <el-input v-model.number="form.assistPhase2" type="number" placeholder="请输入正整数" min="0" step="1" />
              <span class="unit">人</span>
            </div>
          </el-form-item>
        </div>
      </el-form>

      <!-- 底部按钮 -->
      <div class="dialog-footer">
        <button class="btn btn-cancel" @click="handleClose">取 消</button>
        <button class="btn btn-save" @click="handleSave">保 存目标</button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'StoreTargetDialog',
  props: {
    visible: { type: Boolean, default: false },
    currentStoreId: { type: String, default: '' },
    currentStoreName: { type: String, default: '' },
    // 目标所属月份（格式：yyyyMM），从金三角设置中透传
    monthValue: { type: String, default: '' }
  },
  data() {
    return {
      savedTarget: null,
      form: {
        kemeiTarget: null,
        yimeiTarget: null,
        shengmeiTarget: null,
        lifeline: null,
        assistPhase1: null,
        assistPhase2: null
      }
    }
  },
  computed: {
    visibleProxy: {
      get() { return this.visible },
      set(val) { this.$emit('update:visible', val) }
    },
    monthLabel() {
      // 优先使用外部传入的月份（yyyyMM），否则退化为下个月
      if (this.monthValue && this.monthValue.length === 6) {
        const y = this.monthValue.slice(0, 4)
        const m = this.monthValue.slice(4, 6)
        return `${y}年${m}月`
      }
      const now = new Date()
      const y = now.getFullYear()
      let m = now.getMonth() + 2
      if (m === 13) {
        m = 1
      }
      const mm = String(m).padStart(2, '0')
      return `${y}年${mm}月`
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.fillForm()
      }
    }
  },
  methods: {
    fillForm() {
      if (this.savedTarget) {
        this.form = { ...this.savedTarget }
      } else {
        this.form = {
          kemeiTarget: null,
          yimeiTarget: null,
          shengmeiTarget: null,
          lifeline: null,
          assistPhase1: null,
          assistPhase2: null
        }
      }
    },
    handleClose() {
      if (this.savedTarget) {
        this.form = { ...this.savedTarget }
      }
      this.visibleProxy = false
    },
    handleSave() {
      this.savedTarget = { ...this.form }
      this.$message.success('目标设定成功')
      this.$emit('saved')
      this.visibleProxy = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .target-dialog {
  max-width: 480px;
  border-radius: 20px;
  padding: 0;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.96) 0, rgba(248,250,252,0.98) 40%, rgba(241,245,249,0.98) 100%);
  box-shadow: 0 24px 48px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.9);
  backdrop-filter: blur(22px);
  .el-dialog__header { display: none; }
  .el-dialog__body { padding: 0; }
}

.dialog-inner {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.dialog-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}

.title-icon {
  font-size: 17px;
  color: #2563eb;
}

.store-name-badge {
  font-size: 12px;
  font-weight: 500;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0;
}

.dialog-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  font-size: 15px;
  &:hover {
    background: rgba(0,0,0,0.07);
    color: #0f172a;
  }
}

.tip-banner {
  margin: 14px 22px 0;
  padding: 10px 14px;
  background: rgba(37, 99, 235, 0.07);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 10px;
  font-size: 13px;
  color: #1e40af;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

.tip-icon {
  font-size: 15px;
  color: #2563eb;
  flex-shrink: 0;
}

.target-form {
  padding: 16px 22px 8px;
}

.form-group {
  margin-bottom: 16px;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 12px 14px 6px;

  &:last-child {
    margin-bottom: 0;
  }
}

.group-title {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  letter-spacing: 0.3px;
}

.group-icon {
  font-size: 14px;
  &--blue { color: #2563eb; }
  &--green { color: #16a34a; }
}

::v-deep .el-form-item {
  margin-bottom: 10px;
  .el-form-item__label {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    line-height: 32px;
    padding-right: 10px;
  }
}

.input-with-unit {
  display: flex;
  align-items: center;
  gap: 8px;

  ::v-deep .el-input,
  ::v-deep .el-input-number {
    flex: 1;
  }

  ::v-deep .el-input__inner,
  ::v-deep .el-input-number .el-input__inner {
    border-radius: 8px;
    border-color: rgba(0,0,0,0.12);
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    background: #fff;
    transition: border-color 0.2s;
    &:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
    }
  }
}

.unit {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
  width: 32px;
  text-align: right;
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 8px;
}

.btn {
  height: 34px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

.btn-cancel {
  background: #fff;
  color: #475569;
  border: 1px solid rgba(0,0,0,0.14);
  &:hover {
    background: #f1f5f9;
    border-color: rgba(0,0,0,0.2);
  }
}

.btn-save {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35), 0 1px 3px rgba(37, 99, 235, 0.2);
  &:hover {
    background: #1d4ed8;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45), 0 1px 4px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
  }
  &:active {
    transform: translateY(0);
  }
}
</style>
