<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" min-width="120" prop="storeName" label="门店名称"></el-table-column>
      <el-table-column align="center" width="100" prop="projectNum" label="项目编码"></el-table-column>
      <el-table-column align="center" min-width="120" prop="projectName" 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 { propage, organizations } from "@/api/storeManage.js";
export default {
  data() {
    return {
      // 表格
      list: [],
      listLoading: false,
      elementLoadingText: '正在加载...',
      // 其它
      mulSelect: [],
      queryForm: {
        pageNum: 1,
        pageSize: 1000000,
        state: 1
      },
      dialogVisible: false,
    };
  },
  methods: {
    // ======================== 弹窗 ======================== //
    // 打开
    show(list) {
      this.dialogVisible = true
      this.fetchHeadStoreId()
    },
    close() {
      this.list = Array.from([]);
      this.mulSelect = Array.from([]);
      this.dialogVisible = false
    },
    // ======================== 查询 ======================== //
    // 查询当前账户所在组织的总店的ID
    async fetchHeadStoreId() {
      let { code, rows, message } = await organizations({ storeRequest: null })
      if (code == '000000') {
        rows.forEach((item) => {
          if (!item.parentId) {
            this.queryForm.storeId = item.id
            this.fetchData()
          }
        });
      }
      if (code == '010000') {
        this.$message({
          message: message,
          type: 'error'
        });
      }
    },
    // 根据总店ID查询总店的所有项目
    async fetchData() {
      let { code, pageInfo, message } = await propage(this.queryForm)
      if (code == '000000') {
        this.list = Array.from(pageInfo.list);
      }
      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-project', [{ storeId: row.id, storeName: row.storeName, projectId: row.id, projectNum: row.projectNum, projectName: row.projectName }]);
      } else {
        let list = this.mulSelect.map((item) => {
          return { storeId: item.id, storeName: item.storeName, projectId: item.id, projectNum: item.projectNum, projectName: item.projectName }
        })
        this.$emit('call-back-project', list);
      }
      this.close()
    }
  },
};
</script>

<style>
</style>
