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

{% block vue_template %}

<!-- 3 table 下  的单表 crud 页面 -->

<!--SQL START
-- 以下为 jianghu init 工具生成的参考 SQL，使用后删除
-- 创建 page
INSERT INTO `_page` (`pageId`,`pageName`,`pageType`,`sort`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT 'student3Management','页面','showInMenu','5','jhInsert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_page` WHERE `pageId`='student3Management');

-- 创建 resource
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'student3Management','selectItemList','✅查询-查询列表','sql','{}','{ \"table\": \"student3\", \"operation\": \"select\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='student3Management' AND `actionId`='selectItemList');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'student3Management','insertItem','✅查询-添加成员','sql','{}','{ \"table\": \"student3\", \"operation\": \"insert\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='student3Management' AND `actionId`='insertItem');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'student3Management','updateItem','✅查询-更新成员','sql','{}','{ \"table\": \"student3\", \"operation\": \"update\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='student3Management' AND `actionId`='updateItem');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'student3Management','deleteItem','✅查询-删除信息','sql','{}','{ \"table\": \"student3\", \"operation\": \"delete\" }','','','insert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='student3Management' AND `actionId`='deleteItem');
SQL END!-->

<jh-layout>


<!-- 页面主要内容 -->
<v-container class="fullScreen d-flex flex-column pa-xs-0 pa-0">
  <v-row class="ma-0 pa-xs-4 align-center flex-none pt-0 " :class="{'pa-4': !isMobile, 'pb-0': !isMobile, 'pa-2': isMobile}">
    <v-col cols="12" sm="12" md="3" xl="2" class="pa-xs-0  pb-3" :class="{'pb-xs-4': !isMobile}">
      <v-text-field v-model="serverSearchInput.studentId" label="学生ID" class="cus-v-input " :class="{'mr-2': !isMobile}" dense outlined></v-text-field>
    </v-col>
    <v-col cols="12" sm="12" md="3" xl="2" class="pa-xs-0 pb-3" :class="{'pb-xs-4': !isMobile, 'mt-2': isMobile}">
      <v-text-field v-model="serverSearchInput.classId" label="班级ID" class="cus-v-input" :class="{'mr-2': !isMobile}" dense outlined></v-text-field>
    </v-col>
    <v-col :class="{'pb-xs-4': !isMobile, 'pt-2': isMobile, 'pl-0': isMobile}" cols="12" md="2" sm="12" xl="3">
      <v-btn
          class="elevation-0"
          color="success"
          dark
          @click="doUiAction('refreshTableData')"
      >
        查询
      </v-btn>
    </v-col>
  </v-row>

  <v-divider></v-divider>
  <v-row class="ma-0 pa-xs-4 align-center flex-none pt-0 " :class="{'pa-4': !isMobile, 'pb-0': !isMobile, 'pa-2': isMobile}">

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

    <v-spacer></v-spacer>

    <v-col cols="12" xs="8" sm="4" md="3" xl="3" class="pa-xs-0 pa-xs-2 col-sm-8-flex">
      <v-text-field v-model="searchInput" label="表格过滤" class="cus-v-input" dense outlined></v-text-field>
    </v-col>

  </v-row>
  <v-data-table fixed-header
                :headers="headers"
                :items="tableData"
                :search="searchInput"
                :footer-props="{ itemsPerPageOptions: [20, 40, 60, 100, -1] }"
                :items-per-page="20"
                mobile-breakpoint="0"
                :loading="isTableLoading"
                checkbox-color="success"
                class="elevation-0 mt-0 mb-xs-4 flex-fill d-flex flex-column">
<!--    <template v-slot:item.level="{ item }">-->
<!--      {{ getConstantCollectionItemText('level', item.level) }}-->
<!--    </template>-->
    <template v-slot:item.action="{ item }">
      <v-btn small class="mr-2" :class="tableButton.color" v-for="tableButton of tableButtonList" @click="doUiAction(tableButton.action, {item})">
        {{ tableButton.text }}
      </v-btn>
    </template>
  </v-data-table>
</v-container>

<!-- 编辑抽屉 -->
<v-navigation-drawer v-model="isEditDrawerShow" absolute temporary right width="80%" hide-overlay class="elevation-24">
  <v-form v-model="isFormValid" v-if="isEditDrawerShow" ref="form" lazy-validation>
    <v-row>
      <span class="title pa-6">{{ currentClickButton.title }}信息</span>
      <v-spacer></v-spacer>
      <v-btn class="mt-7 mr-8 elevation-0" fab x-small @click="isEditDrawerShow = false">
        <v-icon dark>mdi-close</v-icon>
      </v-btn>
    </v-row>
    <v-row class="pa-0 ma-0 pa-xs-4 pb-xs-4 flex-none">
       
      <v-col cols="12" sm="12" md="4" xl="3" class="pa-xs-0 pb-xs-4 pb-3">
        <v-text-field class="cus-v-input mr-2" dense outlined label="学生名字" v-model="editItem['name']"></v-text-field>
      </v-col>
       
      <v-col cols="12" sm="12" md="4" xl="3" class="pa-xs-0 pb-xs-4 pb-3">
        <v-text-field class="cus-v-input mr-2" dense outlined label="性别" v-model="editItem['gender']"></v-text-field>
      </v-col>
       
<!--      <v-col cols="12" sm="12" md="4" xl="3" class="pa-xs-0 pb-xs-4 pb-3">-->
<!--        &lt;!&ndash; 必填字段样式 demo :rules="requireRules" &ndash;&gt;-->
<!--        <v-text-field class="cus-v-input mr-2" dense outlined label="学生ID" v-model="editItem.studentId" :rules="requireRules"></v-text-field>-->
<!--      </v-col>-->
<!--      &lt;!&ndash; select 字段 demo &ndash;&gt;-->
<!--      <v-col cols="12" sm="12" md="4" xl="3" class="pa-xs-0 pb-xs-4 pb-3">-->
<!--        <v-select class="cus-v-input mr-2" dense outlined clearable label="班级ID" v-model="editItem.classId" :items="constantCollection.classId"></v-select>-->
<!--      </v-col>-->
<!--      &lt;!&ndash; 日期选择 demo &ndash;&gt;-->
<!--      <v-col cols="12" sm="12" md="4" xl="3" class="pa-xs-0 pb-xs-4 pb-3">-->
<!--        <v-menu class="cus-v-input mr-2" offset-y max-width="290">-->
<!--          <template v-slot:activator="{ on, attrs }">-->
<!--            <v-text-field class="cus-v-input mr-2" dense outlined v-on="on" label="出生日期" v-model="editItem.dateOfBirth"></v-text-field>-->
<!--          </template>-->
<!--          <v-date-picker color="success" elevation="20" v-model="editItem.dateOfBirth"></v-date-picker>-->
<!--        </v-menu>-->
<!--      </v-col>-->
    </v-row>
    <v-row class="justify-end pr-6">
      <v-btn color="success" small @click="doUiAction(dialogSaveInfoAction)" :style="{width: isMobile ? 'calc(100% - 45px)' : '200px'}" :class="{'mb-2': isMobile, 'mr-4': isMobile}">保存</v-btn>
      <v-btn class="ml-2" small @click="isEditDrawerShow = false" :style="{width: isMobile ? 'calc(100% - 45px)' : '200px'}" :class="{'mr-4': isMobile}">取消</v-btn>
    </v-row>
  </v-form>
</v-navigation-drawer>

</jh-layout>

{% endblock %}

{% block vue_body %}

{% include 'layout/jhLayout.html' %}
{% include 'common/resetTableMaxHeight.html' %}

<script type="module">
new Vue({
  el: '#app',
  template: '#app-template',
  vuetify: new Vuetify(),
  mixins: [window.jianghuUiActionMixins],
  data: () => ({
    // 表格相关数据
    isFormValid: true,
    requireRules: [
      v => !!v || 'This is required',
    ],
    constantCollection: {
    },

    serverSearchInput: {
      studentId: null,
      classId: null
    },
    currentTableGenderType: 'all',
    isEditDrawerShow: false,
    searchInput: null,
    isTableLoading: true,
    tableDataFromBackend: [],
    headers: [
      {text: "ID", value: "id", width: 120, class: 'fixed', cellClass: 'fixed'},
       
      {text: "学生名字", value: "name", width: 120}, 
      {text: "性别", value: "gender", 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'},
    ],

    currentClickButton: {title: '新增', action: 'add'},
    editItem: {},
    tableButtonList: [
      {text: '修改', buttonType: 'edit', color: 'success', action: 'startUpdateItem'},
      {text: '删除', buttonType: 'delete', color: 'error', action: 'deleteItem'},
    ],
    dialogSaveInfoAction: ''
  }),
  computed: {
    isMobile() {
      return window.innerWidth < 600;
    },
    tableData() {
      if (!this.currentTableGenderType || this.currentTableGenderType === 'all') {
        return this.tableDataFromBackend;
      }
      return this.tableDataFromBackend.filter(({gender}) => gender === this.currentTableGenderType);
    },
    computedEditItem() {
      return this.editItem;
    },
  },
  watch: {},
  async created() {
    await this.doUiAction('refreshTableData');
  },
  mounted() {},
  methods: {
    /**
     * 获取表格数据
     */
    async refreshTableData() {
      this.isTableLoading = true;
      const serverSearchInput = _.pickBy(this.serverSearchInput, value=> !!value);
      const { data: { appData: { rows } } } = await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'student3Management',
            actionId: 'selectItemList',
            actionData: {},
            where: {},
            whereLike: serverSearchInput,
            orderBy: [{column: 'operationAt', order: 'desc'}]
          }
        }
      });

      this.tableDataFromBackend = rows;
      this.isTableLoading = false;
    },

    // startCreateItem
    async clearItemData() {
      this.editItem = {};
    },

    async openCreateItemDialog() {
      this.currentClickButton = {action: 'add', title: '新增'};
      this.isEditDrawerShow = true;
      this.dialogSaveInfoAction = 'createItem';
    },

    // createItem
    async confirmCreateItemDialog() {
      return window.confirmDialog({title: '新增', content: '确定新增吗？'})
    },

    /**
     * 新增数据
     */
    async doCreateItem() {
      delete this.computedEditItem.id;
      await window.vtoast.loading("新增数据");
      await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'student3Management',
            actionId: 'insertItem',
            actionData: this.computedEditItem
          }
        }
      })
      await window.vtoast.success("新增数据成功");
    },

    async closeDrawerShow() {
      this.isEditDrawerShow = false;
    },

    // startUpdateItem
    async prepareItemData({item}) {
      this.editItem = {...item};
    },

    async openUpdateDialog() {
      this.currentClickButton = {action: 'edit', title: '修改'};
      this.isEditDrawerShow = true;
      this.dialogSaveInfoAction = 'updateItem';
    },

    // updateItem
    async confirmUpdateItemDialog() {
      return window.confirmDialog({title: '修改', content: '确定修改吗？'});
    },

    /**
     * 保存数据
     */
    async doUpdateItem() {
      const id = this.computedEditItem.id;
      delete this.computedEditItem.id;
      await window.vtoast.loading("修改数据");
      await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'student3Management',
            actionId: 'updateItem',
            actionData: this.computedEditItem,
            where: {id: id}
          }
        }
      })
      await window.vtoast.success("修改数据成功");
    },

    // updateItem
    async confirmDeleteItemDialog() {
      return window.confirmDialog({title: '删除', content: '确定删除吗？'});
    },

    /**
     * 删除数据
     */
    async doDeleteItem({item}) {
      const { id } = item;
      await window.vtoast.loading("删除数据");
      await window.jianghuAxios({
        data: {
          appData: {
            pageId: 'student3Management',
            actionId: 'deleteItem',
            actionData: {},
            where: { id: id }
          }
        }
      });
      await window.vtoast.success("删除数据成功");
    },
    getConstantCollectionItemText(key, _value) {
      const constantCollectionItemFind = this.constantCollection[key].find(({value}) => value === _value);
      if(constantCollectionItemFind) {
        return constantCollectionItemFind.text;
      }
      return _value;
    }
  }
})
</script>

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