<template>
  <div class="fullheight">
    <ht-table @load="loadData" :data="data" :pageResult="pageResult" :selectable="false" quick-search-props="simpleName" :show-export="false" :show-custom-column="false" ref="htTable">
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column width="300" prop="simpleName" label="类名" :sortable="true" :show-overflow-tooltip="true"></ht-table-column>
        <ht-table-column prop="path" label="类全路径" :sortable="true" :show-overflow-tooltip="true"> </ht-table-column>
        <ht-table-column width="140" prop="type" label="类型" :sortable="true">
          <template v-slot="{ row }">
            <el-tag type="success" v-if="row.type == '1'">常用脚本</el-tag>
            <el-tag type="primary" v-if="row.type == '2'">人员脚本</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column prop="md5" label="MD5版本号" :sortable="true" :show-overflow-tooltip="true"> </ht-table-column>
        <ht-table-column width="250" align="center" prop="jarId" label="所属Jar包描述" :sortable="true" :show-overflow-tooltip="true"> </ht-table-column>
      </template>
    </ht-table>
    <ht-sidebar-dialog width="28%" title="扩展jar包class管理模块" class="sp-manager__dialog" :visible="dialogVisible" :before-close="beforeCloseDialog">
      <el-form v-form data-vv-scope="bpmExtendClassForm">
        <ht-form-item label="">
          <ht-input v-model="bpmExtendClass.id" validate="required" />
        </ht-form-item>
        <ht-form-item label="所属jar包id">
          <ht-input v-model="bpmExtendClass.jarId" validate="required" />
        </ht-form-item>
        <ht-form-item label="类名首字母小写，即beanId">
          <ht-input v-model="bpmExtendClass.simpleName" validate="required" />
        </ht-form-item>
        <ht-form-item label="类名全路径">
          <ht-input v-model="bpmExtendClass.path" validate="required" />
        </ht-form-item>
        <ht-form-item label="类描述">
          <ht-input v-model="bpmExtendClass.desc" validate="required" />
        </ht-form-item>
        <ht-form-item label="MD5版本号">
          <ht-input v-model="bpmExtendClass.md5" validate="required" />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="beforeCloseDialog">{{ $t('eip.common.cancel') }}</el-button>
        <ht-submit-button url="${bpmRunTime}/bpmExtendClass/v1/" :model="bpmExtendClass" :request-method="saveMethod" scope-name="bpmExtendClassForm" @after-save-data="afterSaveData">{{ $t('eip.common.save') }}</ht-submit-button>
      </div>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      bpmExtendClass: {},
      saveMethod: 'POST',
    };
  },
  mounted() {
    this.$validator = this.$root.$validator;
  },
  methods: {
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT';
        this.$http.get('${bpmRunTime}/bpmExtendClass/v1/' + id).then(
          (resp) => {
            this.bpmExtendClass = resp.data;
            this.dialogVisible = true;
          },
          (error) => {
            reject(error);
          }
        );
      } else {
        this.saveMethod = 'POST';
        this.dialogVisible = true;
      }
    },
    beforeCloseDialog() {
      this.bpmExtendClass = {};
      this.dialogVisible = false;
    },
    loadData(param, cb) {
      this.$http
        .post('${bpmRunTime}/bpmExtendClass/v1/query', param)
        .then(
          (resp) => {
            let response = resp.data;
            this.data = response.rows;
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            };
          },
          (error) => {
            reject(error);
          }
        )
        .finally(() => cb());
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog();
        this.$refs.htTable.load();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
</style>
