<!-- 简单的增删改查页面模板 -->
<template>
  <div class="main-content">
    <!--  S - 搜索表单  -->
    <!--  搜索表单不支持多行文本，如有需要，请单独布局  -->
    <el-card class="mb15 search-form">
      <el-form :model="searchParams" label-width="80px">
        <el-row :gutter="20">
          <el-col :lg="8" :xl="6">
            <el-form-item label="文本类型">
              <el-input v-model="searchParams.xxSearchValueA" v-jtrim placeholder="请输入" maxlength="16" />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="数值类型">
              <el-input v-model="searchParams.xxSearchValueB" placeholder="请输入" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="日期类型">
              <el-date-picker v-model="searchParams.xxSearchValueC" type="daterange" />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="下拉框">
              <el-select v-model="searchParams.xxSearchValueD" placeholder="请选择">
                <el-option v-for="item in xxSearchValueDOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6" class="text-right float-r mb10">
            <el-button @click="handleReset">重置</el-button>
            <el-button v-jclick type="primary" @click="handleSearch">查询 </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!--  E - 搜索表单  -->

    <!--  S - 表格展示  -->
    <el-card>
      <div class="mb15 flex jc-sb ai-c">
        <div class="fs16 fw600">这里是标题</div>
        <div>
          <el-button>导出</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
      </div>
      <el-table v-loading="loading" :data="tableList">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="handleEdit(row)">编辑 </el-button>
            <el-button type="text" size="small" @click="handleRemove(row)">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="searchParams.pageNum" :limit.sync="searchParams.pageSize" @pagination="getList" />
    </el-card>
    <!--  E - 表格展示  -->

    <!--  S - 新增修改弹窗  -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" class="dialog-form">
      <el-form ref="dialogForm" :model="dialogForm" label-width="80px" :rules="rules">
        <el-form-item key="xxDialogValueA" label="文本类型" prop="xxDialogValueA">
          <el-input v-model="dialogForm.xxDialogValueA" type="请输入" />
        </el-form-item>
        <el-form-item key="xxDialogValueB" label="文本类型" prop="xxDialogValueB">
          <el-input v-model="dialogForm.xxDialogValueB" type="请输入" />
        </el-form-item>
        <el-form-item key="xxDialogValueC" label="文本类型" prop="xxDialogValueC">
          <el-input v-model="dialogForm.xxDialogValueC" type="请输入" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-jclick type="primary" :disabled="saving" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!--  E - 新增修改弹窗  -->
  </div>
</template>

<script>
import api from '@/api/basePage';

export default {
  name: 'BasePage',
  data() {
    return {
      loading: false,
      saving: false,
      // 分页全部
      total: 10,
      // 查询参数
      searchParams: {},
      // 列表
      xxSearchValueDOptions: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '黄金糕1' },
        { value: '选项5', label: '双皮奶1' },
        { value: '选项6', label: '蚵仔煎1' }
      ],
      rules: {
        xxDialogValueA: [{ required: true, message: '请输入', trigger: 'blur' }],
        xxDialogValueB: [{ required: true, message: '请输入', trigger: 'blur' }],
        xxDialogValueC: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 表数据
      tableList: [],
      // 弹窗
      dialogVisible: false,
      dialogTitle: `新增${this.$route.meta.title}`,
      dialogForm: {}
    };
  },
  created() {
    this.resetSearchParams();
    this.initData();
  },
  methods: {
    initData() {
      this.getList();
    },
    resetSearchParams() {
      this.searchParams = {
        pageNum: 1,
        pageSize: this.defaultPageSize,
        xxSearchValueA: undefined,
        xxSearchValueB: undefined,
        xxSearchValueC: [this.parseTime(new Date(), '{y}-{m}-{d}'), this.parseTime(new Date(), '{y}-{m}-{d}')],
        xxSearchValueD: undefined
      };
      // const _options = this.$options.data();
      // debugger;
      // this.searchParams = this.$options;
    },
    handleReset() {
      this.resetSearchParams();
      this.getList();
    },
    // S - 增删改查
    handleSearch() {
      this.searchParams.pageNum = 1;
      this.getList();
    },
    handleAdd() {
      this.dialogTitle = `新增${this.$route.meta.title}`;
      this.resetDialogForm();
      this.dialogVisible = true;
    },
    handleEdit(val) {
      this.dialogTitle = `编辑${this.$route.meta.title}`;
      this.dialogForm = this.deepClone(val);
      this.resetDialogForm();
      this.dialogVisible = true;
    },
    handleRemove(row) {
      this.$modal.confirm(`是否确认删除数据项"${row.name}"的${this.$route.meta.title}？`).then(async () => {
        const params = {
          id: row.id
        };
        const resp = await api.remove(params);
        if (resp.code === this.$global.successCode) {
          this.$message.success('删除成功');
          this.getList();
        }
      });
    },
    // E - 增删改查
    // 获取表格列表
    async getList() {
      this.loading = true;
      const params = {
        ...this.queryParams
      };
      const resp = await api.pageList(params);
      this.loading = false;
      if (resp.code === this.$global.successCode) {
        this.tableList = resp.data.records;
        this.total = resp.data.total;
      }
      // 待删
      this.tableList = [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }
      ];
    },
    // S - 弹窗操作
    resetDialogForm() {
      this.dialogForm = {
        xxDialogValueA: undefined,
        xxDialogValueB: undefined,
        xxDialogValueC: undefined
      };
      this.resetForm('dialogForm');
    },
    handleConfirm() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (!valid) {
          return;
        }
        const params = this.deepClone(this.dialogForm);
        let resp;
        this.saving = true;
        if (params.id) {
          resp = await api.update(params);
        } else {
          resp = await api.insert(params);
        }
        this.saving = false;
        if (resp.code === this.$global.successCode) {
          this.$message.success(`${this.dialogTitle}成功`);
          this.dialogVisible = false;
          this.handleSearch();
        }
      });
    }
    // E - 弹窗操作
  }
};
</script>

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