<template>
  <el-container>
    <el-footer
      v-if="inputWriteable"
      style="height: 32px; line-height: 32px; padding: 0px; margin: 0"
    >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        plain
        round
        style="margin-left: 0; padding: 8px 15px"
        @click="flowSelected"
      >
        关联流程
      </el-button>
    </el-footer>
    <el-input
      v-model="inputVal"
      v-validate="inputValidate"
      :name="inputName"
      style="display: none"
    ></el-input>
    <el-table
      v-if="dataTable.length > 0"
      :data="dataTable"
      border
      style="width: 100%; margin-top: 4px"
      row-key="subject"
    >
      <el-table-column
        type="index"
        width="70"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          <span class="subject" @click="handleRowClick(scope.row)">
            {{ scope.row.subject }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        align="center"
        label="发起人"
        width="130"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        width="180"
        label="发起时间"
        sortable
      ></el-table-column>
      <el-table-column
        width="110"
        prop="status"
        label="审批状态"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="inputWriteable"
        prop
        label="操作"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            icon="el-icon-arrow-up"
            plain
            @click="up(scope.$index)"
          ></el-button>
          <el-button
            size="small"
            icon="el-icon-arrow-down"
            plain
            @click="down(scope.$index)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
            @click="remove(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗现在通过独立的 Vue 实例创建，完全避免嵌套问题 -->
  </el-container>
</template>

<script>
  import relevantFlow from './relevantFlow.js'

  export default {
    name: 'RelevantFlowPc',
    mixins: [relevantFlow],

    methods: {
      // 现在直接使用 mixin 中的 flowSelected 方法
      // 不需要重写，因为逻辑已经迁移到 relevantFlow.js 中
    },
  }
</script>

<style lang="scss" scoped>
  .subject {
    cursor: pointer;
    color: $base-color-blue;
  }
</style>
