{% extends 'template/jhTemplateV3.html'%}

{% block vue_template %}

<jh-layout-v3>

<!-- 页面主要内容 -->
<v-container class="fullScreen d-flex flex-column pa-0">
  <v-card :class="{'px-2': isMobile}">
    <v-row class="ma-0 align-center flex-none pt-0 "
           :class="{'pa-4': !isMobile, 'pb-0': !isMobile, 'pa-2': isMobile}">

      <v-col cols="12" xs="12" sm="4" md="4" xl="4" class="pl-0">
        <v-btn color="success" dark class="elevation-0 mr-2" @click="doUiAction('startInsertItem')">新增</v-btn>
        <span class="body-2">共{{ tableDataFromBackend.length }}条记录</span>
      </v-col>

      <v-spacer></v-spacer>

      <v-col cols="12" xs="8" sm="4" md="3" xl="3" class="px-0">
        <v-text-field v-model="searchInput" color="success" prefix="表格过滤：" class="cus-v-input" dense filled single-line></v-text-field>
      </v-col>

    </v-row>
    <v-data-table
        :headers="headers"
        :items="tableDataFromBackend"
        :search="searchInput"
        :footer-props="{ itemsPerPageOptions: [20, 40, 60, 100, -1] }"
        :items-per-page="20"
        mobile-breakpoint="0"
        :loading="isTableLoading"
        :class="{'mx-2': isMobile}"
        checkbox-color="success"
        class="elevation-0 mt-0 flex-fill d-flex flex-column">

      <template v-slot:item.action="{ item }">
        <v-btn small class="mr-2 success" @click="doUiAction('startUpdateItem', {item})">
          修改
        </v-btn>
        <v-btn small class="mr-2 error" @click="doUiAction('deleteItem', {item})">
          删除
        </v-btn>
      </template>
    </v-data-table>
  </v-card>
</v-container>
<v-overlay app :value="isCreateDrawerShow || isUpdateDrawerShow"></v-overlay>
<v-navigation-drawer v-model="isCreateDrawerShow" fixed temporary right width="80%" hide-overlay
                     v-click-outside="{ closeConditional: () => !dialogIsOpen(), }"
                     class="elevation-24">
  <v-form v-model="isFormValid" v-if="isCreateDrawerShow" ref="form" lazy-validation>
    <v-row class="pt-8">
      <span class="title pa-6" :class="{'pl-12': !isMobile, 'pl-6': isMobile}">添加信息</span>
      <v-spacer></v-spacer>
      <v-btn class="mt-6 elevation-0" :class="{'mr-16': !isMobile, 'mr-8': isMobile}" fab x-small @click="isCreateDrawerShow = false">
        <v-icon dark>mdi-close</v-icon>
      </v-btn>
    </v-row>
    <v-row  :class="{'px-10': !isMobile, 'px-3': isMobile, 'pb-7': isMobile}">
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">学生ID</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="学生ID" v-model="createItem.studentId"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">班级ID</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="班级ID"
                      v-model="createItem.classId"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">学生名字</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="学生名字"
                      v-model="createItem.name"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">年级</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="年级"
                      v-model="createItem.level"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">性别</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="性别"
                      v-model="createItem.gender"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">出生日期</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="出生日期"
                      v-model="createItem.dateOfBirth"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">身高</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="身高"
                      v-model="createItem.bodyHeight"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">学生状态</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="学生状态"
                      v-model="createItem.studentStatus"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="12" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">备注</span>
        <v-textarea class="cus-v-input mr-2" no-resize dense single-line filled label="备注"
                    v-model="createItem.remarks"></v-textarea>
      </v-col>
    </v-row>

    <v-row class="justify-end mx-0 mt-8" :class="{'px-10': !isMobile, 'px-4': isMobile, 'mb-8': isMobile}">
      <v-btn color="success elevation-0" @click="doUiAction('createItem')">保存
      </v-btn>
      <v-btn class="elevation-0 mr-2 ml-2"
             @click="isCreateDrawerShow = false">取消
      </v-btn>
    </v-row>
  </v-form>
</v-navigation-drawer>

<v-navigation-drawer v-model="isUpdateDrawerShow" fixed temporary right width="80%" hide-overlay
                     v-click-outside="{ closeConditional: () => !dialogIsOpen(), }"
                     class="elevation-24">
  <v-form v-model="isFormValid" v-if="isUpdateDrawerShow" ref="form" lazy-validation>
    <v-row class="pt-8">
      <span class="title pa-6" :class="{'pl-12': !isMobile, 'pl-6': isMobile}">修改信息</span>
      <v-spacer></v-spacer>
      <v-btn class="mt-6 elevation-0" :class="{'mr-16': !isMobile, 'mr-8': isMobile}" fab x-small @click="isUpdateDrawerShow = false">
        <v-icon dark>mdi-close</v-icon>
      </v-btn>
    </v-row>
    <v-row  :class="{'px-10': !isMobile, 'px-3': isMobile, 'pb-7': isMobile}">
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">学生ID</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="学生ID" v-model="updateItem.studentId"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">班级ID</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="班级ID" v-model="updateItem.classId"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">学生名字</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="学生名字"
                      v-model="updateItem.name"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">年级</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="年级" v-model="updateItem.level"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">性别</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="性别" v-model="updateItem.gender"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">出生日期</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="出生日期" v-model="updateItem.dateOfBirth"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">身高</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="身高" v-model="updateItem.bodyHeight"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="4" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">学生状态</span>
        <v-text-field class="cus-v-input mr-2" dense single-line filled label="学生状态" v-model="updateItem.studentStatus"
                      :rules="requireRules"></v-text-field>
      </v-col>
      <v-col cols="12" sm="12" md="12" :class="{'pa-0': isMobile, 'px-3': isMobile, 'pt-6': isMobile}">
        <span class="inputLabel">备注</span>
        <v-textarea class="cus-v-input mr-2" no-resize dense single-line filled label="备注"
                    v-model="updateItem.remarks"></v-textarea>
      </v-col>
    </v-row>

    <v-row class="justify-end mx-0 mt-8" :class="{'px-10': !isMobile, 'px-4': isMobile, 'mb-8': isMobile}">
      <v-btn color="success elevation-0" @click="doUiAction('updateItem')">保存
      </v-btn>
      <v-btn class="elevation-0 mr-2 ml-2"
             @click="isUpdateDrawerShow = false">取消
      </v-btn>
    </v-row>
  </v-form>
</v-navigation-drawer>

</jh-layout-v3>

{% endblock %}

{% block vue_body %}

<script type="module">
new Vue({
  el: '#app',
  template: '#app-template',
  vueComponent: 'page',
  vuetify: new Vuetify(),
  mixins: [window.jianghuUiActionMixins],
  data: {
    // 表格相关数据
    isFormValid: true,
    requireRules: [
      v => !!v || 'This is required',
    ],
    searchInput: null,
    isTableLoading: true,
    tableDataFromBackend: [],
    headers: [
      {text: "学生ID", value: "studentId", width: 120, class: 'fixed', cellClass: 'fixed'},
      {text: "班级ID", value: "classId", width: 140},
      {text: "学生名字", value: "name", width: 120},
      {text: "年级", value: "level", width: 120},
      {text: "性别", value: "gender", width: 120},
      {text: "出生日期", value: "dateOfBirth", width: 120},
      {text: "身高", value: "bodyHeight", width: 120},
      {text: "学生状态", value: "studentStatus", width: 120},
      {text: "备注", value: "remarks", width: 120},
      {text: "操作者", value: "operationByUser", width: 120},
      {text: "操作时间", value: "operationAt", width: 250},
      {text: '操作', value: 'action', align: 'center', sortable: false, width: 200, class: 'fixed', cellClass: 'fixed'},
    ],

    isCreateDrawerShow: false,
    createItem: {},
    isUpdateDrawerShow: false,
    updateItem: {},
  },
  computed: {
    isMobile() {
      return window.innerWidth < 600;
    },
  },
  watch: {},
  mounted() {
    this.doUiAction('refreshTableData');
  },
  methods: {

    async refreshTableData() {
      this.isTableLoading = true;
      const result = await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'uiAction',
            actionId: 'selectItemList',
            actionData: {},
            where: {},
            orderBy: [{column: 'operationAt', order: 'desc'}]
          }
        }
      });

      this.tableDataFromBackend = result.data.appData.resultData.rows;
      this.isTableLoading = false;
    },


    // ====================================Create Start===========================================
    async clearCreateForm() {
      this.createItem = {};
    },
    // validate
    prepareValidate() {
      return this.$refs.form.validate();
    },
    async openCreateDrawer() {
      this.isCreateDrawerShow = true;
    },
    async prepareCreateItem() {
      delete this.createItem.id;
    },
    async confirmCreateFormDialog() {
      // retrun false 会中断后面的 uiAction function
      return await window.confirmDialog({title: "新增", content: "确定新增吗？"});
    },
    async doCreateItem() {
      await window.vtoast.loading("新增学生");
      await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'uiAction',
            actionId: 'createItem',
            actionData: this.createItem
          }
        }
      })
      await window.vtoast.success("新增学生成功");
    },
    async closeCreateDrawer() {
      this.isCreateDrawerShow = false;
    },
    // ====================================Create End===========================================


    // ====================================Update Start===========================================
    async fillUpdateForm({item}) {
      this.updateItem = _.clone(item);
    },
    async openUpdateDrawer() {
      this.isUpdateDrawerShow = true;
    },
    async prepareUpdateItem() {
      // TODO: 对this.updateItem做一些数据处理
    },
    async confirmUpdateItemDialog() {
      // retrun false 会中断后面的 uiAction function
      return await window.confirmDialog({title: "修改", content: "确定修改吗？"});
    },
    async doUpdateItem() {
      const {id, ...actionData} = this.updateItem;
      await window.vtoast.loading("修改学生");
      await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'uiAction',
            actionId: 'updateItem',
            actionData: actionData,
            where: {id}
          }
        }
      })
      await window.vtoast.success("修改学生成功");
    },
    async closeUpdateDrawer() {
      this.isUpdateDrawerShow = false;
    },
    // ====================================Update End===========================================


    // ====================================Create Start===========================================
    async confirmDeleteItemDialog({item}) {
      if (!item || !item.id) {
        window.vtoast.fail("数据异常");
        return
      }
      return await window.confirmDialog({title: "删除", content: "确定删除吗？"});
    },
    async doDeleteItem({item}) {
      const {id} = item;
      await window.vtoast.loading("删除学生");
      await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'uiAction',
            actionId: 'deleteItem',
            actionData: {},
            where: {id}
          }
        }
      });
      await window.vtoast.success("删除学生成功");
    },
    // ====================================Update End===========================================


    dialogIsOpen() {
      return window.dialogIsOpen;
    },
  }
})
</script>

<style scoped>
</style>
{% endblock %}