<template>
  <div>
    <el-dialog
      title="输入店铺ID/名称搜索,将店铺添加为连锁店铺,已成为连锁店铺的不可添加"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="68px"
          @submit.prevent
        >
          <el-form-item label="" prop="key">
            <el-input
              v-model="queryParams.key"
              placeholder="请输入店铺名称/ID搜索"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >查询</el-button
            >
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="list"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="rowSelectable"
          >
          </el-table-column>
          <el-table-column label="店铺ID" align="center" prop="id" />
          <el-table-column
            label="店铺名称"
            align="center"
            prop="storeName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="店铺地址"
            align="center"
            prop="storeCity"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="联系方式" align="center" prop="storePhone" />
          <el-table-column
            label="营业状态"
            align="center"
            prop="businessStatus"
            width="180"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.businessStatus == 0">未营业</span>
              <span v-if="scope.row.businessStatus == 1">营业中</span>
              <span v-if="scope.row.businessStatus == 2">禁用</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { storeInfo, storeMultipleShopSave } from "@/api/chain/index";
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      list: [],
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        key: "",
      },
      ids: [],
    };
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      storeInfo(this.queryParams).then((response) => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    submit() {
      console.log(1);

      if (this.ids.length < 1) {
        this.$message({
          type: "error",
          message: "请选择要添加的店铺！",
        });
        return;
      }
      this.$confirm("是否确认添加所选店铺为连锁店?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          storeMultipleShopSave({ multipleShopIds: this.ids.toString() }).then(
            (res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.closeDialog();
                this.$emit("submit", true);
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    handleSelectionChange(select) {
      this.ids = select.map((item) => item.id);
      console.log(this.ids);
    },

    rowSelectable(row) {
      if (row.flag == 0) {
        return !row.disabled;
      }
      console.log(row);

      // return
    },
    openDialog() {
      this.getList();
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
