<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag title="适用门店" :visible.sync="dialogVisible" width="600px">
    <el-table ref="list" :data="list" max-height="600" v-loading="listLoading" :element-loading-text="elementLoadingText" @selection-change="handleSelect" @row-click="handleRowClick" @row-dblclick="confirm">
      <el-table-column align="center" width="60" type="selection"></el-table-column>
      <el-table-column align="center" width="100" prop="storeNum" label="门店编码"></el-table-column>
      <el-table-column align="center" min-width="120" prop="storeName" label="门店名称"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="close">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm">确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { organizations } from "@/api/storeManage.js";
export default {
  data() {
    return {
      // 表格
      list: [],
      listLoading: false,
      elementLoadingText: '正在加载...',
      // 其它
      mulSelect: [],
      dialogVisible: false,
    };
  },
  methods: {
    // ======================== 弹窗 ======================== //
    // 打开
    show(list) {
      this.dialogVisible = true
      this.fetchData()
    },
    close() {
      this.list = Array.from([]);
      this.mulSelect = Array.from([]);
      this.dialogVisible = false
    },
    // ======================== 查询 ======================== //
    async fetchData() {
      let { code, rows, message } = await organizations({ storeRequest: null })
      if (code == '000000') {
        this.list = Array.from(rows);
      }
      if (code == '010000') {
        this.$message({
          message: message,
          type: 'error'
        });
      }
    },
    // ======================== 其它 ======================== //
    handleSelect(data) {
      this.mulSelect = Array.from(data);
    },
    handleRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    // 确定
    confirm(row) {
      if (row.id) {
        this.$emit('call-back-store', [{ storeId: row.id, storeNum: row.storeNum, storeName: row.storeName }]);
      } else {
        let list = this.mulSelect.map((item) => {
          return { storeId: item.id, storeNum: item.storeNum, storeName: item.storeName }
        })
        this.$emit('call-back-store', list);
      }
      this.close()
    }
  },
};
</script>

<style>
</style>
