<template>
  <el-dialog
    :visible.sync="visible"
    width="640px"
    :close-on-click-modal="false"
    append-to-body
    @close="handleClose"
  >
    <div slot="title" class="dialog-title">
      <i class="el-icon-shop"></i>
      <span>快捷录单型号店铺选项</span>
    </div>

    <div v-loading="loading">
      <el-alert
        type="info"
        :closable="false"
        show-icon
        title="每行一条，格式：短前缀（完整店名）。录单时仅将短前缀拼接到型号末尾。"
        style="margin-bottom: 12px;"
      />
      <el-input
        v-model="configText"
        type="textarea"
        :rows="8"
        placeholder="海尔官旗（海尔官方旗舰店）&#10;海尔厨房（海尔厨房电器官方旗舰店）"
      />
      <p class="hint">参数键名：quickRecord.modelShopOptions（保存至系统参数）</p>
    </div>

    <div slot="footer">
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button type="primary" size="small" :loading="saveLoading" @click="handleSave">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listConfig, addConfig, updateConfig } from '@/api/system/config'

const CONFIG_KEY = 'quickRecord.modelShopOptions'
const CONFIG_NAME = '快捷录单型号店铺选项'

export default {
  name: 'QuickRecordModelShopConfig',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      saveLoading: false,
      configText: '',
      configId: null
    }
  },
  watch: {
    value(val) {
      this.visible = val
      if (val) {
        this.loadConfig()
      }
    },
    visible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    async loadConfig() {
      this.loading = true
      try {
        const res = await listConfig({
          configKey: CONFIG_KEY,
          pageNum: 1,
          pageSize: 10
        })
        const row = res && res.rows && res.rows.find(r => r && r.configKey === CONFIG_KEY)
        if (row) {
          this.configId = row.configId
          this.configText = row.configValue || ''
        } else {
          this.configId = null
          this.configText = ''
        }
      } catch (e) {
        this.configId = null
        this.configText = ''
      } finally {
        this.loading = false
      }
    },
    async handleSave() {
      this.saveLoading = true
      try {
        const payload = {
          configName: CONFIG_NAME,
          configKey: CONFIG_KEY,
          configValue: (this.configText || '').trim(),
          configType: 'N'
        }
        if (this.configId) {
          payload.configId = this.configId
          await updateConfig(payload)
        } else {
          await addConfig(payload)
        }
        this.$modal.msgSuccess('店铺选项已保存')
        this.$emit('saved')
        this.handleClose()
      } catch (e) {
        this.$modal.msgError('保存失败，请确认有参数管理权限')
      } finally {
        this.saveLoading = false
      }
    },
    handleClose() {
      this.visible = false
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped>
.dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

.hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #909399;
}
</style>
