<template>
    <el-dialog v-drag-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="false"
      append-to-body
      :modal="true"
      style="text-align:left;"
      @close="closeDialog"
      :close-on-click-modal="false"
      width="970px"
    >
      <div>
        <!--
        要resetFields起作用，必须配置:model和prop
        -->
        <el-form
          ref="queryForm"
          :model="queryModel"
          inline
          class="demo-form-inline"
          label-width="100px"
        >
          <el-form-item label="停车场名称" prop="parkingName">
            <el-input type="text" size="mini" v-model="queryModel.parkingName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="ios-search"
              @click="changePage(1)"
              :loading="loading"
            >查询</el-button>&nbsp;
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-row class="button-group">
            <el-button type="primary" size="small" plain icon="el-icon-circle-plus" @click="handleAdd">分配停车场</el-button>
        </el-row>
        <el-table
          :data="tableData"
          style="min-height:400px;"
          v-loading="loading"
          stripe
        >
        <el-table-column  prop="image"  label="缩略图">
            <template slot-scope="{row}">
            <a v-if="row.image" :href="row.image" target="_blank">
              <el-image
              style="width: 50px; height: 50px"
              :src="row.image"
              fit="fit"></el-image>
            </a>
          </template>
        </el-table-column>
        <el-table-column  prop="parkingName"  label="停车场名称"></el-table-column>
        <el-table-column  prop="address"  label="停车场地址" width="230"></el-table-column>
        <el-table-column  prop="contacts"  label="联系人"></el-table-column>
        <el-table-column  prop="contactPhone"  label="联系电话"></el-table-column>
        <el-table-column  prop="openStatus"  label="对外开放状态">
          <template slot-scope="{row}">
            <span v-if="row.openStatus=='1'">对外开放</span>
            <span v-else-if="row.openStatus=='2'">不对外开放</span>
            <span v-else-if="row.openStatus=='3'">只对白名单用户开放</span>
          </template>
        </el-table-column>
          <el-table-column label="操作">
          <template slot-scope="{row}" >
            <el-link size="mini" type="danger" @click="handleDelete(row)">删除</el-link>
          </template>
        </el-table-column>
        </el-table>
        <el-pagination
            style="text-align:center"
          :current-page.sync="pageIndex"
          :total="totalElements"
          :page-sizes="pageSizeList"
          @current-change="changePage"
          @size-change="pageSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <userParking-detail
        v-if="showModal"
        :title="modalTitle"
        :userId="userId"
        @close="onDetailModalClose"
        ></userParking-detail>
      </div>
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import NProgress from "nprogress"; // progress bar
  import userParkingApi from "@/api/sys/userParking"; 
  import userParkingDetail from "./userParking-detail";
  import "nprogress/nprogress.css"; // progress bar style
  
  export default {
    props: ["businessKey", "title"],
    data() {
      var self = this;
  
      return {
        formModel: {},
        queryModel: {
            parkingName:"",
        },
        loading: false,
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        totalPages: 0,
        totalElements: 0,
        field: "",
        direction: "",
        pageSizeList: [10, 20, 30],
        multipleSelection: [],
        showModal: false,
        modalTitle: "",
        showDialog: true
      };
    },
    methods: {
      closeDialog() {
        this.$emit("close", false);
      },
      disableSelect(row, rowIndex) {
        //多选按钮是否禁用
        if (row.isBindPerson) {
          return false;
        } else {
          return true;
        }
      },
      changePage(pageIndex) {
        var self = this;
  
        self.loading = true;
  
        self.pageIndex = pageIndex;
        var formData = new FormData();
  
        formData.append("pageIndex", self.pageIndex);
        formData.append("pageSize", self.pageSize);
  
        formData.append("userId", self.businessKey);

        formData.append("parkingName", self.queryModel.parkingName);
  
        userParkingApi
          .pageList(formData)
          .then(function(response) {
            self.loading = false;
  
            var jsonData = response.data.data;
  
            self.tableData = jsonData.data;
            self.totalPages = jsonData.totalPages;
            self.totalElements = jsonData.recordsTotal;
          })
          .catch(error => {
            self.loading = false;
            // self.$message.error(error + "");
          });
      },
      pageSizeChange(pageSize) {
        this.pageSize = pageSize;
      },
      sortChange(data) {
        this.field = data.column.field;
        this.direction = data.order == "ascending" ? "asc" : "desc";
  
        this.changePage(this.pageIndex);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      },
      handleAdd() {
        var self = this;
        self.modalTitle = "添加";
        self.userId = self.businessKey;
        self.showModal = true;
      },
      handleDelete(record) {
        var self = this;
  
        this.$confirm("是否确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            userParkingApi.remove(record.id).then(function(response) {
            var jsonData = response.data;
  
            if (jsonData.result) {
              // var index = self.tableData.indexOf(record);
              // self.tableData.splice(index, 1);
              self.changePage(self.pageIndex);
  
              self.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        });
      },
      onDetailModalClose(refreshed) {
        //保存成功后回调
        this.showModal = false;
  
        if (refreshed) {
          this.changePage(this.pageIndex);
        }
      }
    },
    mounted: function() {
      this.changePage(1);
    },
    components: {
        "userParking-detail":userParkingDetail
    }
  };
  </script>
  <style lang="scss" scoped>
  .el-breadcrumb {
    margin: 10px;
    line-height: 20px;
  }
  
  .el-divider {
    margin: 5px 0;
  }
  
  .demo-form-inline {
    margin-left: 10px;
    text-align: left;
  }
  
  .button-group {
    margin-left: 10px;
    text-align: left;
  }
  </style>