<template>
  <ht-sidebar-dialog
    width="28%"
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      ref="htTable"
      :show-export="false"
      :show-custom-column="false"
      highlight-current-row
      quick-search-props="procDefName,procDefKey"
      v-if="dialogVisible">
      <ht-table-column type="index" width="50" align="center" label="序号" />
      <ht-table-column prop="procDefName" align="center" label="流程定义名称">
        <template v-slot="{row}">
          <el-tag class="proc-def-name-tag" v-if="row.procDefName">
            <router-link :to="{ path: 'defManager', query: { bpmId: row.procDefId } }">{{ row.procDefName }}
            </router-link>
          </el-tag>
        </template>
      </ht-table-column>
      <ht-table-column prop="procDefKey" align="center" label="流程定义Key" />
    </ht-table>
  </ht-sidebar-dialog>
</template>

<script>
export default {
  name: "matrix-flow-bind-relation-dialog",
  props: {
    matrixCode: String
  },
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      dialogVisible: false,
      title: "绑定的流程"
    };
  },
  methods: {
    loadData(param, cb) {
      if (!param.querys) {
        param.querys = [];
      }
      if (this.matrixCode) {
        param.querys.push({
          property: "MATRIX_CODE_",
          value: this.matrixCode,
          group: "filter",
          operation: "EQUAL",
          relation: "AND"
        });
      }
      const url = "${uc}/uc/matrixProcRelation/v1/listJson";
      this.$http.post(url, param).then(resp => {
        this.data = resp.data.rows;
        this.pageResult = {
          page: resp.data.page,
          pageSize: resp.data.pageSize,
          total: resp.data.total
        };
      }).finally(() => {
        cb && cb();
      });
    },
    showDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.proc-def-name-tag a {
  color: #409eff;
}
</style>
