
<template>
    <div>
        <el-card shadow="never" style="margin-top: 20px;">
            <template #header>
                <slot name="header">
                    <vxe-toolbar :print="isHasAuth('print')" custom ref="toolbar">
                        <template #toolSuffix>
                            <vxe-button style="margin-right: 10px;" v-if="isHasAuth('export')" icon="vxe-icon-download" circle @click="exportMethod"></vxe-button>
                        </template>
                        <template #buttons>
                            <el-button
                                    v-if="isHasAuth('create')"
                                    icon="el-icon-plus"
                                    type="primary"
                                    size="small"
                                    @click="isShowAdd = true"
                            >新增</el-button
                            >
                            <el-button
                                    v-if="isHasAuth('search')"
                                    icon="el-icon-search"
                                    type="primary"
                                    plain
                                    size="small"
                                    @click="getList"
                            >搜索</el-button
                            >
                        </template>
                    </vxe-toolbar>
                </slot>
            </template>

            <vxe-table
                    ref="table"
                    stripe
                    style="margin-top: 10px"
                    :loading="loading"
                    :height="tableHeight"
                    keep-source
                    show-overflow
                    :menu-config="{
                      className: 'my-menus',
                      body: {
                        options: [
                          [
                            { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
                            { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
                          ],
                        ]
                      }
                    }"
                    @menu-click="contextMenuClickEvent"
                    :row-config="{ isCurrent: true, isHover: true }"
                    :column-config="{ resizable: true }"
                    :export-config="{}"
                    :edit-rules="validRules"
                    :edit-config="{
          trigger: 'manual',
          mode: 'row',
          showStatus: true,
          isHover: true,
          autoClear: false,
        }"
                    
                    :align="allAlign"
                    :data="tableData"
            >
                <vxe-column type="checkbox" width="50" align="center" />
                <vxe-column type="seq" width="58" align="center"  />
                
                    
                    
                        
                        <vxe-column
                                header-align="center"
                                field="name"
                                width="160"
                                title="名称"
                                :edit-render="{ name: 'input', attrs: { type: 'text' } }"
                        />
                        
                    
                    
                        
                        <vxe-column
                                align="center"
                                field="aspiration_id"
                                width="180"
                                title="归属总表"
                                :edit-render="{ name: 'VxeSelect', options: aspiration, props: { multiple: false }, optionProps: { value: 'id', label: 'name' } }"
                        />
                        
                    
                    
                        
                        <vxe-column
                                header-align="center"
                                align="right"
                                field="sort"
                                width="160"
                                title="排序"
                                :edit-render="{ name: 'input', attrs: { type: 'number' } }"
                        />
                        
                <vxe-column field="operate" header-align="center" title="操作" min-width="220" fixed="right">
                    <template #default="{ row }">
                        <template v-if="isActiveStatus(row)">
                            <el-button size="small" type="primary" @click="saveRowEvent(row)"
                            >保存</el-button
                            >
                            <el-button
                                    size="small"
                                    type="primary"
                                    plain
                                    @click="cancelRowEvent(row)"
                            >取消</el-button
                            >
                        </template>
                        <template v-else>
                            <el-button v-if="isHasAuth('detail')" size="small" type="primary" plain @click="detail(row)"
                            >查看</el-button
                            >
                            <el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)"
                            >编辑</el-button
                            >
                            <el-button
                                    v-if="isHasAuth('delete')"
                                    size="small"
                                    type="danger"
                                    @click="destroyRowEvent(row)"
                            >删除</el-button
                            >
                        </template>
                    </template>
                </vxe-column>
            </vxe-table>

            
                <el-pagination
                        style="margin-top: 10px;display: flex;justify-content: flex-end;"
                        :current-page.sync="select.page"
                        :page-sizes="[20, 30, 40, 50]"
                        :page-size.sync="select.page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="
          (e) => {
            select.page_size = e;
            select.page = 1;
            getList();
          }
        "
                        @current-change="
          (e) => {
            select.page = e;
            getList();
          }
        "
                />
            
        </el-card>

        <AddBatch
                ref="AddBatch"
                
                    :aspiration="aspiration"
                  
                :is-show.sync="isShowAdd"
                @refresh="getList"
        />
        <ShowBatch
                ref="ShowBatch"
        
                :aspiration="aspiration"
                
                :is-show.sync="isShowDetail"
        />
        
    </div>
</template>

<script>
  import VxeUI from "vxe-pc-ui";
  
  import { authMixin } from "@/mixin/authMixin"
  import { uploadSize } from "@/settings";
  import { deepCopy } from "@/utils";
  import { download } from "@/utils/downloadRequest";
  import { destroy, index, save } from "@/api/batch/batch";
  import AddBatch from "./components/AddBatch.vue";
  import ShowBatch from "./components/ShowBatch.vue";
  import axios from "axios";
  import { getToken } from "@/utils/auth";
  
        import { index as aspirationIndex } from '@/api/aspiration/aspiration';
      
  export default {
    name: "Batch",
    mixins: [authMixin],
    components: {
        
      AddBatch,
      ShowBatch,
    },
    data() {
      return {
        uploadSize,
        examineKey: 0,
        isShowAdd: false,
        isShowDetail: false,

        loading: false,
        tableHeight: 400,
        select: {
          page: 1,
          page_size: 20,
          keyword: '',
          show_relation: [],
          
        },
        total: 0,
        allAlign: null,
        tableData: [],
        form: {
          id: '',
          
            name: '',
          
            aspiration_id: '',
          
            sort: '',
          
        },
      validRules: {
          
          aspiration_id: [
            
          {
            required: true,
            message: '归属总表'+'必填'
          },
          
        ],
          
      },

        
               aspiration: [],
             
      };
    },
    computed: {
      isActiveStatus() {
        return function (row) {
          if (this.$refs["table"]) {
            return this.$refs["table"].isEditByRow(row);
          }
        };
      },
      isHasAuth() {
        return function (auth) {
          return this.auths_auth_mixin.indexOf(auth) !== -1
        }
      }
    },
    created() {
      
         this.getAspiration()
         
      this.getList();
    },
    mounted() {
      this.bindToolbar()
      this.calcTableHeight()
    },
    methods: {
      exportMethod() {
        this.$confirm("请选择导出方式", "提示", {
          confirmButtonText: "全量导出",
          cancelButtonText: "部分导出",
          distinguishCancelAndClose: true
        }).then(_ => {
          download('/api/admin/school/index', 'get', {
            ...this.select,
            page: 1,
            page_size: 9999,
            is_export: 1,
            export_fields: Object.keys(this.form)
          })
        }).catch(action => {
          if (action === 'cancel' && this.$refs['table']) {
            this.$refs['table'].openExport()
          }
        });
      },
      calcTableHeight() {
        let clientHeight = document.documentElement.clientHeight;
        let cardTitle = document.querySelector(".el-card__header")?.getBoundingClientRect()?.height;
        let search = document.querySelector(".vxe-toolbar")?.getBoundingClientRect()?.height;
        let paginationHeight = (document.querySelector(".el-pagination")?.getBoundingClientRect()?.height ?? 0) + 10; //分页的高度
        let topHeight = 50; //页面 头部
        let padding = 80;
        let margin = 20;
        this.tableHeight =
          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin;
      },
      contextMenuClickEvent ({ menu, row, column }) {
        switch (menu.code) {
          case 'copy':
            // 示例
            if (row && column) {
              if (VxeUI.clipboard.copy(row[column.field])) {
                this.$message.success('已复制到剪贴板！')
              }
            }
            break
          case 'remove':
            if (row && column) {
              this.destroyRowEvent(row)
            }
          default:
        }
      },
      async detail (row) {
        await this.$refs["ShowBatch"].getDetail(row.id)
        this.isShowDetail = true
      },

      
           async getAspiration() {
             try {
               const res = await aspirationIndex({
                 page: 1,
                 page_size: 999,
                 
               }, false)
               this.aspiration = res.data
             } catch(err) {
               console.error(err)
             }
           },
         

      uploadMethod(file) {
        const formData = new FormData()
        formData.append('file', file)
        window.$_uploading = true
        return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
          headers: {
            Authorization: `Bearer ${getToken()}`,
          }
        }).then((response) => {
          window.$_uploading = false
          if (response.status === 200 && !response.data.code) {
            return {
              response: response.data,
              name: response.data.original_name,
              url: response.data.url
            }
          } else {
            this.$message.error("上传失败")
          }
        }).catch(_ => {
          window.$_uploading = false
        })
      },
      bindToolbar() {
        this.$nextTick(() => {
          if (this.$refs["table"] && this.$refs["toolbar"]) {
            this.$refs["table"].connect(this.$refs["toolbar"]);
          }
        });
      },

      editRowEvent(row) {
        if (this.$refs["table"]) {
          this.$refs["table"].setEditRow(row);
        }
      },
      cancelRowEvent(row) {
        if (this.$refs["table"]) {
          this.$refs["table"].clearEdit().then(() => {
            // 还原行数据
            this.$refs["table"].revertData(row);
          });
        }
      },

      async getList() {
        this.loading = true;
        try {
          const res = await index(this.select, false);
          this.tableData = res.data;
          this.total = res.total;
          this.loading = false;
        } catch (err) {
          console.error(err);
          this.loading = false;
        }
      },

      async saveRowEvent(row) {
        if (window.$_uploading) {
          this.$message.warning("文件正在上传中")
          return
        }
        try {
          const errMap = await this.$refs["table"].validate();
          if (errMap) {
            throw new Error(errMap);
          }
          await this.$confirm("确认保存？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
          });
          await this.$refs["table"].clearEdit();
          let form = deepCopy(this.form);
          for (const key in form) {
            form[key] = row[key];
          }
          
          this.loading = true;
          await save(form, false);
          await this.getList();
          this.loading = false;
        } catch (err) {
          this.loading = false;
        }
      },
      async destroyRowEvent(row) {
        try {
          await this.$confirm("确认删除？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
          });
          this.loading = true;
          if (row.id) {
            await destroy({
              id: row.id,
            },false);
            await this.getList();
          } else {
            console.log(row);
            this.tableData.splice(
              this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
              1
            );
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
        }
      },

    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .el-card__header {
    padding: 6px 20px;
  }
  ::v-deep .el-tag + .el-tag {
    margin-left: 4px;
  }
</style>
