<template>
  <div class="app-container">
    <el-row :gutter="20">

      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item>
          <el-input v-model="queryParams.schoolName" placeholder="请输入驾校名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button v-hasPermi="['sch:school:add']" type="primary" icon="el-icon-plus" @click="addOrUpdateHandle(undefined)">新增</el-button>
          <!-- <el-button type="danger" icon="el-icon-delete" @click="handleDelete" :disabled="multiple" v-hasPermi="['sch:school:remove']">删除</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>

    <el-table v-loading="loading.tableLoading" :data="tableDataList" stripe>
      <!-- <el-table-column type="selection" width="50" align="center" /> -->
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="驾校名称" prop="schoolName" />
      <el-table-column label="负责人" prop="leader" />
      <el-table-column label="联系方式" prop="phone" />
      <el-table-column label="备注" prop="remark" />
      <el-table-column label="创建时间" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="130">
        <template slot-scope="scope">
          <el-button v-hasPermi="['sch:school:edit']" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)">修改</el-button>
          <el-button v-hasPermi="['sch:school:remove']" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getPageList" />

    <!-- 驾校弹框 -->
    <school-form v-if="dialogVisible" ref="dialogForm" :dialog-visible="dialogVisible" @refreshDataList="getPageList" />
  </div>
</template>

<script>
import schoolForm from './components/schoolForm.vue';
import schoolApi from '@/api/sch/school';

export default {
  name: 'School',
  components: {
    schoolForm
  },
  data() {
    return {
      total: 0,
      queryParams: {
        schoolName: undefined,
        pageNum: 1,
        pageSize: 10
      },
      tableDataList: [],
      loading: {
        tableLoading: false
      },
      dialogVisible: false
    };
  },
  created() {
    // 页面初始化加载
    this.getPageList();
  },
  methods: {
    // 查询列表数据
    getPageList() {
      schoolApi.pageList(this.queryParams).then((resp) => {
        if (resp.code === 200) {
          this.tableDataList = resp.rows;
          this.total = resp.total;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getPageList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.queryParams = {
        schoolName: undefined,
        pageNum: 1,
        pageSize: 10
      };
      this.handleQuery();
    },
    // 新增和修改操作
    addOrUpdateHandle(item) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dialogForm.init(item);
      });
    },
    // 删除操作
    handleDelete(item) {
      this.$modal
        .confirm('删除驾校信息，同时会删除该驾校下的场地信息和班型信息，是否确认名称为"' + item.schoolName + '"的数据项？')
        .then(function () {
          return schoolApi.delete(item.schoolId);
        })
        .then((resp) => {
          if (resp.code === 200) {
            this.getPageList();
            this.$modal.msgSuccess('删除成功');
          }
        })
        .catch(() => {});
    }
  }
};
</script>
