<template>
  <div>
    <ht-sidebar-dialog
      width="28%"
      title="绑定关系"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <el-row></el-row>
      <template v-if="data.flow">
        <el-col :span="6">
          流程：
        </el-col>
        <el-col :span="18">
          <router-link
            :to="{path: 'defManager', query: {bpmId: data.flow.id}}"
            >{{ data.flow.name }}</router-link
          >
        </el-col>
      </template>
      <template v-if="data.boDef">
        <el-col :span="6">
          建模：
        </el-col>
        <el-col :span="18">
          <router-link
            :to="{path: '/businessObj', query: {id: data.boDef.id}}"
            >{{ data.boDef.description }}</router-link
          >
        </el-col>
      </template>
      <template v-if="data.mobileForm">
        <el-col :span="6">
          移动端表单：
        </el-col>
        <el-col :span="18">
          <router-link
            :to="{
              path: 'mobileFormManager',
              query: {
                formId: data.mobileForm.id,
                defId: data.mobileForm.defId
              }
            }"
            >{{ data.mobileForm.name }}</router-link
          >
        </el-col>
      </template>
      <template v-if="data.form">
        <el-col :span="6">
          PC表单：
        </el-col>
        <el-col :span="18">
          <router-link
            replace
            :to="{
              path: 'formManager',
              query: {
                formId: data.form.id,
                defId: data.form.defId
              }
            }"
            >{{ data.form.name }}</router-link
          >
        </el-col>
      </template>
    </ht-sidebar-dialog>
  </div>
</template>

<script>
import request from '@/request.js'
export default {
  data() {
    return {
      data: {},
      dialogVisible: false
    }
  },
  methods: {
    showDialog(row) {
      const {alias} = row
      request
        .get(
          `${
            context.form
          }/form/dataTemplate/v1/bindRelation?templateKey=${alias}`
        )
        .then(resp => {
          this.data = resp.data.value
          this.dialogVisible = true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-6 {
  min-width: 100px;
}
</style>
