<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="选择店铺" prop="storeId">
        <el-select
          v-model="form.storeId"
          placeholder="请选择店铺"
          filterable
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="store in storeOptions"
            :key="store.storeId"
            :label="store.storeName"
            :value="store.storeId"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {changeStore} from "@/api/bst/device";
import { listStore } from "@/api/bst/store"; // 假设获取店铺列表的API

export default {
  name: 'ChangeStoreDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    device:{
      type: Object,
      default:() => ({})
    }

  },
  data() {
    return {
      storeOptions: [], // 店铺列表
      loading: false,
      form: {
        storeId: null,
      },
      rules: {
        storeId: [
          { required: true, message: "请选择店铺", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.getStoreList();
  },
  computed: {
    title() {
      return '更换所属店铺';
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  },
  methods: {
    handleDialogOpen() {
      this.form.storeId = this.device.storeId;
    },
    // 初始化时获取店铺列表
     getStoreList() {
       this.loading = true;
        listStore().then (response => {
        this.storeOptions = response.rows;
      })
    },

    // 提交表单
    // 提交表单
    async submitForm() {
      try {
        // 先进行表单验证
        const valid = await this.$refs.form.validate();
        if (!valid) return;

        // 添加二次确认
        const confirm = await this.$confirm(
          '更改店铺后设备需要重新绑定卡座，是否确定更改店铺？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(() => { /* 点击取消不执行操作 */ });

        if (!confirm) return;

        // 执行实际修改操作
        await changeStore({
          deviceId: this.device.deviceId,
          deviceNo: this.device.deviceNo,
          storeId: this.form.storeId
        });

        this.$message.success('店铺更换成功');
        this.dialogVisible = false;
        this.$emit('success');
      } catch (error) {
        // 统一错误处理（包含表单验证错误和API错误）
        if (error !== 'cancel') {
          this.$message.error(error.message || '操作失败');
        }
      }
    },
    cancel() {
      this.dialogVisible = false;
      this.form.storeId = null;
      this.form.storeNo = null;
    }
  },

};
</script>
