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

{% block vueTemplate %}

<!-- 3 table：指定某个 <=$ tableA $=>，管理 <=$ tableB $=> 的页面 -->

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

-- 创建 resource
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'<=$ pageId $=>','selectCurrent<=$ CamelCaseTableA $=><=$ CamelCaseTableA $=>List','✅<=$ nameA $=>的<=$ nameB $=>管理-查询当前<=$ nameB $=>下的<=$ nameA $=>列表','sql','{}','{ \"table\": \"<=$ tableView $=>\", \"operation\": \"select\" }',NULL,NULL,'jhInsert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='<=$ pageId $=>' AND `actionId`='selectCurrent<=$ CamelCaseTableA $=><=$ CamelCaseTableA $=>List');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'<=$ pageId $=>','insertItem','✅<=$ nameA $=>的<=$ nameB $=>管理-建立关系','sql','{}','{ \"table\": \"<=$ tableMiddle $=>\", \"operation\": \"jhInsert\" }',NULL,NULL,'jhInsert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='<=$ pageId $=>' AND `actionId`='insertItem');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'<=$ pageId $=>','updateItem','✅<=$ nameA $=>的<=$ nameB $=>管理-更新数据','sql','{}','{ \"table\": \"<=$ tableMiddle $=>\", \"operation\": \"jhUpdate\" }',NULL,NULL,'jhInsert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='<=$ pageId $=>' AND `actionId`='updateItem');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'<=$ pageId $=>','deleteItem','✅<=$ nameA $=>的<=$ nameB $=>管理-删除信息','sql','{}','{ \"table\": \"<=$ tableMiddle $=>\", \"operation\": \"jhDelete\" }',NULL,NULL,'jhInsert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='<=$ pageId $=>' AND `actionId`='deleteItem');
INSERT INTO `_resource` (`accessControlTable`,`resourceHook`,`pageId`,`actionId`,`desc`,`resourceType`,`appDataSchema`,`resourceData`,`requestDemo`,`responseDemo`,`operation`,`operationByUserId`,`operationByUser`,`operationAt`) SELECT NULL,NULL,'<=$ pageId $=>','selectAll<=$ CamelCaseTableB $=>List','✅<=$ nameA $=>查询-查询列表','sql','{}','{ \"table\": \"<=$ tableB $=>\", \"operation\": \"select\" }',NULL,NULL,'jhInsert',NULL,NULL,NULL FROM DUAL WHERE NOT EXISTS (SELECT `pageId` FROM `_resource` WHERE `pageId`='<=$ pageId $=>' AND `actionId`='selectAll<=$ CamelCaseTableB $=>List');

SQL END!-->

<script type="text/html" id="app-template">
  <div>
    <v-app mobile-breakpoint="sm">
      <jh-menu />
      <v-main class="mt-15">
        <!-- 头部内容 >>>>>>>>>>>>> -->
        <div class="jh-page-second-bar px-8">
          <v-row class="align-center">
            <v-col cols="12" xs="12" sm="12" md="4" xl="3">
              <div class="py-4 text-body-1 font-weight-bold">{{ title }}的<=$ nameB $=>列表&nbsp;&nbsp;|&nbsp;&nbsp;{{ <=$ primaryFieldA $=> }}
                <!-- 帮助页按钮 -->
                <span role="button" class="success--text font-weight-regular jh-font-size-13 ml-2" @click="isHelpPageDrawerShown = true">
                  <v-icon size="13" class="success--text">mdi-help-circle-outline</v-icon>帮助
                </span>
              </div>
            </v-col>
          </v-row>
        </div>
        <!-- <<<<<<<<<<<<< 头部内容 -->

        <div class="jh-page-body-container px-8">
          <!-- 页面内容 >>>>>>>>>>>>> -->
          <v-card class="rounded-lg">
            <v-row class="ma-0 pa-4">
              <!-- 新增按钮 -->
              <v-btn color="success" dark class="elevation-0 mr-2" @click="doUiAction('startCreateItem')" small>新增</v-btn>
          
              <v-spacer></v-spacer>
              <v-col cols="12" xs="8" sm="4" md="3" lg="2" xl="2" class="pa-0">
                <v-text-field v-model="searchInput" label="表格过滤" class="jh-v-input" dense filled single-line></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], itemsPerPageText: '每页行数', itemsPerPageAllText: '所有'}"
                :items-per-page="20"
                mobile-breakpoint="0"
                :loading="isTableLoading"
                checkbox-color="success" 
                :class="{'zebraLine': isTableZebraLineShown }"
                class="jh-fixed-table-height elevation-0 mt-0 mb-xs-4 flex-fill d-flex flex-column">
              <template v-slot:item.action="{ item }">
                <!-- pc端 -->
                <template v-if="!isMobile">
                  <span role="button" class="success--text font-weight-medium font-size-2 mr-2" @click="doUiAction('startUpdateItem', item)">
                    <v-icon size="16" class="success--text">mdi-note-edit-outline</v-icon>修改
                  </span>
                  <span role="button" class="red--text text--accent-2 font-weight-medium font-size-2" @click="doUiAction('deleteItem', item)">
                    <v-icon size="16" class="red--text text--accent-2">mdi-trash-can-outline</v-icon>删除
                  </span>
                </template>
                <!-- 手机端 -->
                <v-menu offset-y v-if="isMobile">
                  <template v-slot:activator="{ on, attrs }">
                    <span role="button" class="success--text font-weight-medium font-size-2"
                      v-bind="attrs" v-on="on">
                      操作<v-icon size="14" class="success--text">mdi-chevron-down</v-icon>
                    </span>
                  </template>
                  <v-list dense>
                    <v-list-item @click="doUiAction('startUpdateItem', item)">
                      <v-list-item-title>修改</v-list-item-title>
                    </v-list-item>
                    <v-list-item @click="doUiAction('deleteItem', item)">
                      <v-list-item-title>删除</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
              </template>
              <!-- 没有数据 -->
              <template v-slot:loading>
                <div class="jh-no-data">数据加载中</div>
              </template>
              <template v-slot:no-data>
                <div class="jh-no-data">暂无数据</div>
              </template>
              <template v-slot:no-results>
                <div class="jh-no-data">暂无数据</div>
              </template>
              <!-- 表格分页 -->
              <template v-slot:footer.page-text="pagination">
                <span>{{pagination.pageStart}}-{{pagination.pageStop}}</span>
                <span class="ml-1">共{{pagination.itemsLength}}条</span>
              </template>
            </v-data-table>
          </v-card>
          <!-- 新增 -->
          <v-navigation-drawer v-model="isCreateDrawerShown" :permanent="isCreateDrawerShown" fixed temporary right width="80%" class="elevation-24">
            <v-form v-if="isCreateDrawerShown" ref="createForm" lazy-validation>
              <!-- 抽屉标题 -->
              <v-row no-gutters>
                <span class="text-h7 font-weight-bold pa-4">添加信息</span>
              </v-row>
              <v-divider class="jh-divider"></v-divider>
              <!-- 抽屉表单 -->
              <v-row class="mt-0 px-4">
                //===// <=% for f in tableBFields %=>
                <v-col cols="12" sm="12" md="4">
                  <span class="inputLabel"><=$ f.COLUMN_COMMENT.split(';')[0] $=></span>
                  <v-text-field class="jh-v-input " dense filled single-line v-model="createItem.<=$ f.COLUMN_NAME $=>"></v-text-field>
                </v-col>//===// <=% endfor %=>
              </v-row>
              <!-- 抽屉操作按钮 -->
              <v-row class="justify-end mx-0 my-8 px-4">
                <v-btn color="success" @click="doUiAction('createItem')" small>保存</v-btn>
                <v-btn class="ml-2" @click="isCreateDrawerShown = false" small>取消</v-btn>
              </v-row>
            </v-form>
            <!-- 抽屉关闭按钮 -->
            <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn"
              @click="isCreateDrawerShown = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </v-navigation-drawer>
          
          
          <!-- 编辑抽屉 -->
          <v-navigation-drawer v-model="isUpdateDrawerShown" :permanent="isUpdateDrawerShown" fixed temporary right width="80%" class="elevation-24">
            <v-form v-if="isUpdateDrawerShown" ref="updateForm" lazy-validation>
              <!-- 抽屉标题 -->
              <v-row no-gutters>
                <span class="text-h7 font-weight-bold pa-4">修改信息</span>
              </v-row>
              <v-divider class="jh-divider"></v-divider>
              <!-- 抽屉表单 -->
              <v-row class="mt-0 px-4">
                //===// <=% for f in tableBFields %=>
                <v-col cols="12" sm="12" md="4">
                  <span class="inputLabel"><=$ f.COLUMN_COMMENT.split(';')[0] $=></span>
                  <v-text-field class="jh-v-input " dense filled single-line v-model="updateItem.<=$ f.COLUMN_NAME $=>"></v-text-field>
                </v-col>//===// <=% endfor %=>
              </v-row>
              <!-- 抽屉操作按钮 -->
              <v-row class="justify-end mx-0 my-8 px-4">
                <v-btn color="success" small @click="doUiAction('updateItem')">保存</v-btn>
                <v-btn class="ml-2" small @click="isUpdateDrawerShown = false">取消</v-btn>
              </v-row>
            </v-form>
            <!-- 抽屉关闭按钮 -->
            <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn" @click="isUpdateDrawerShown = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </v-navigation-drawer>
          <!-- <<<<<<<<<<<<< 页面内容 -->
        </div>

        <!-- 帮助页抽屉 >>>>>>>>>>>>> -->
        <v-navigation-drawer v-model="isHelpPageDrawerShown" v-click-outside="drawerClickOutside" fixed temporary
        right width="80%" class="elevation-24">
        <iframe style="border: 0" :src="`/${appInfo.appId}/pageDoc?markdownPath#`" width="100%" height="100%"></iframe>

        <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn"
          @click="isHelpPageDrawerShown = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-navigation-drawer>
      <!-- <<<<<<<<<<<<< 帮助页抽屉 -->

      </v-main>
    </v-app>

    <jh-toast />
    <jh-mask />
    <jh-confirm-dialog />
  </div>
</script>

<div id="app">
</div>


{% endblock %}

{% block vueScript %}

<!-- 加载页面组件 >>>>>>>>>>>>> -->
{% include 'common/jianghuJs/fixedTableHeightV4.html' %}
<!-- <<<<<<<<<<<<< 加载页面组件 -->

<script type="module">

  new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: () => ({
      isHelpPageDrawerShown: false,
      isMobile: window.innerWidth < 500,

      // url传递的参数
      <=$ primaryFieldA $=>: null,
      title: null,

      // 表格相关数据
      isTableZebraLineShown: true,
      validationRules: {
        requireRules: [
          v => !!v || 'This is required',
        ],
      },
      searchInput: null,
      isTableLoading: true,
      tableData: [],
      headers: [
        //===// <=% for f in tableMiddleFields %=>
        { text: '<=$ f.COLUMN_COMMENT.split(\';\')[0] $=>', value: '<=$ f.COLUMN_NAME $=>', width: 120 },//===// <=% endfor %=>
        { text: "操作者", value: "operationByUser", width: 90 },
        { text: "操作时间", value: "operationAt", width: 150 },
        { text: '操作', value: 'action', sortable: false, align: 'center', width: window.innerWidth < 500 ? 60 : 120, class: 'fixed', cellClass: 'fixed' },
      ],

      // 操作相关
      isCreateDrawerShown: false,
      createItem: {},
      createActionData: {},
      isUpdateDrawerShown: false,
      updateItem: {},
      updateItemId: null,
      updateActionData: {},
      deleteItem: {},
      deleteItemId: null
    }),
    watch: {},
    async created() {
      await this.doUiAction('prepareUrlObj');
      await this.doUiAction('getTableData');
    },
    mounted() {
    },
    methods: {
      async doUiAction(uiActionId, uiActionData) {
        switch (uiActionId) {
          case 'prepareUrlObj':
            await this.prepareUrlObj();
            break;
          case 'getTableData':
            await this.getTableData();
            break;
          case 'startCreateItem':
            await this.prepareCreateFormData();
            await this.openCreateDrawer();
            break;
          case 'createItem':
            await this.prepareCreateValidate();
            await this.confirmCreateItemDialog();
            await this.prepareDoCreateItem();
            await this.doCreateItem();
            await this.closeCreateDrawer();
            await this.getTableData();
            break;
          case 'startUpdateItem':
            await this.prepareUpdateFormData(uiActionData);
            await this.openUpdateDrawer();
            break;
          case 'updateItem':
            await this.prepareUpdateValidate();
            await this.confirmUpdateItemDialog();
            await this.prepareDoUpdateItem();
            await this.doUpdateItem();
            await this.closeUpdateDrawer();
            await this.getTableData();
            break;
          case 'deleteItem':
            await this.prepareDeleteFormData(uiActionData);
            await this.confirmDeleteItemDialog();
            await this.prepareDoDeleteItem();
            await this.doDeleteItem();
            await this.clearDeleteItem();
            await this.getTableData();
            break;
          case 'redirect':
            await this.redirectToClassList();
            break;
          default:
            console.error("[doUiAction] uiActionId not find", { uiActionId });
            break;
        }
      },

      // ---------- 校验url传参 uiAction >>>>>>>>>> --------
      async prepareUrlObj() {
        const urlObj = new URLSearchParams(location.search);
        const <=$ primaryFieldA $=> = urlObj.get('<=$ primaryFieldA $=>');
        const title = urlObj.get('title');
        if (<=$ primaryFieldA $=> && title) {
          this.<=$ primaryFieldA $=> = <=$ primaryFieldA $=>;
          this.title = title;
        } else {
          setTimeout(() => {
            window.vtoast.fail('请从"<=$ nameA $=>列表"点击"<=$ nameB $=>"进入');
          }, 1000);
          return;
        }
      },
      // ---------- <<<<<<<<<<< 校验url传参 uiAction  --------

      // ---------- 获取数据 uiAction >>>>>>>>>> --------
      async getTableData() {
        this.isTableLoading = true;
        const rows = (await window.jianghuAxios({
          data: {
            appData: {
              pageId: '<=$ pageId $=>',
              actionId: 'selectCurrent<=$ CamelCaseTableA $=><=$ CamelCaseTableA $=>List',
              where: { <=$ primaryFieldA $=>: this.<=$ primaryFieldA $=> },
              orderBy: [{ column: 'operationAt', order: 'desc' }]
            }
          }
        })).data.appData.resultData.rows;

        rows.forEach(row => {
          row.operationAt = dayjs(row.operationAt).format('YYYY-MM-DD HH:mm:ss');
        })
        this.tableData = rows;
        this.isTableLoading = false;
      },
      // ---------- <<<<<<<<<<< 获取数据 uiAction  --------

      // ---------- 新增数据 uiAction >>>>>>>>>> --------
      async prepareCreateFormData() {
        this.createItem = {
          '<=$ primaryFieldA $=>': this.<=$ primaryFieldA $=>
        };
      },
      async openCreateDrawer() {
        this.isCreateDrawerShown = true;
      },
      async prepareCreateValidate() {
        if (await this.$refs.createForm.validate()) {
          return true;
        }
        throw new Error("请完善表单信息")
      },
      async confirmCreateItemDialog() {
        if (await window.confirmDialog({ title: "新增", content: "确定新增吗？" }) === false) {
          throw new Error("[confirmCreateFormDialog] 否");
        }
      },
      prepareDoCreateItem() {
        const { id, ...data } = this.createItem;
        this.createActionData = data;
      },

      async doCreateItem() {
        await window.jhMask.show();
        await window.vtoast.loading("新增学生");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: '<=$ pageId $=>',
              actionId: 'insertItem',
              actionData: this.createActionData
            }
          }
        })
        await window.jhMask.hide();
        await window.vtoast.success("新增学生成功");
      },
      async closeCreateDrawer() {
        this.isCreateDrawerShown = false;
        this.createItem = {};
        this.createActionData = null;
      },
      // ---------- <<<<<<<<<<< 新增数据 uiAction  --------

      // ---------- 修改数据 uiAction >>>>>>>>>>>> --------
      async prepareUpdateFormData(funObj) {
        this.updateItem = _.cloneDeep(funObj);
      },
      async openUpdateDrawer() {
        this.isUpdateDrawerShown = true;
      },
      async prepareUpdateValidate() {
        if (await this.$refs.updateForm.validate()) {
          return true;
        }
        throw new Error("请完善表单信息")
      },
      async confirmUpdateItemDialog() {
        if (await window.confirmDialog({ title: "修改", content: "确定修改吗？" }) === false) {
          throw new Error("[confirmUpdateItemDialog] 否");
        }
      },
      async prepareDoUpdateItem() {
        const { id, ...data } = this.updateItem;
        this.updateItemId = id;
        this.updateActionData = data;
      },
      async doUpdateItem() {
        await window.jhMask.show();
        await window.vtoast.loading("修改数据");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: '<=$ pageId $=>',
              actionId: 'updateItem',
              actionData: this.updateActionData,
              where: { id: this.updateItemId }
            }
          }
        })

        await window.jhMask.hide();
        await window.vtoast.success("修改数据成功");
      },

      async closeUpdateDrawer() {
        this.isUpdateDrawerShown = false;
        this.updateItem = {};
        this.updateActionData = null;
        this.updateItemId = null;
      },
      // ---------- <<<<<<<<<<< 修改数据 uiAction  --------

      // ---------- 删除数据 uiAction >>>>>>>>>>>> --------
      async prepareDeleteFormData(funObj) {
        this.deleteItem = _.cloneDeep(funObj);
      },
      async confirmDeleteItemDialog() {
        if (await window.confirmDialog({ title: "删除", content: "确定删除吗？" }) === false) {
          throw new Error("[confirmDeleteItemDialog] 否");
        }
      },
      async prepareDoDeleteItem() {
        const { id } = this.deleteItem;
        this.deleteItemId = id;
      },
      async doDeleteItem() {
        await window.vtoast.loading("删除学生");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: '<=$ pageId $=>',
              actionId: 'deleteItem',
              actionData: {},
              where: { id: this.deleteItemId }
            }
          }
        });
        await window.vtoast.success("删除学生成功");
      },
      async clearDeleteItem() {
        this.deleteItem = {};
        this.deleteItemId = null;
      },
      // ---------- <<<<<<<<<<< 删除数据 uiAction  --------

      // ---------- 班级列表 uiAction >>>>>>>>>>>> --------
      async redirectToClassList(funObj) {
        window.location.href = `/${window.appInfo.appId}/page/classList`
      },
      // ---------- <<<<<<<<<<< 班级列表 uiAction  --------
      dayjs: dayjs,
    }
  })
</script>
{% endblock %}