<template>
  <el-container>
    <el-footer
      v-if="inputWriteable"
      style="height: 32px; line-height: 32px; padding: 0px; margin: 0"
    >
      <el-button
        size="small"
        icon="el-icon-plus"
        round
        style="margin-left: 0; padding: 6px 15px; height: 30px"
        @click="flowSelected"
      >
        添加
      </el-button>
    </el-footer>
    <el-input
      v-model="inputVal"
      v-validate="inputValidate"
      :name="inputName"
      :data-vv-as="name"
      style="display: none"
    ></el-input>
    <el-table
      v-show="dataTable.length > 0"
      :data="dataTable"
      border
      style="width: 100%; margin-top: 4px"
      row-key="subject"
    >
      <template v-if="dataTable.length > 0">
        <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="110"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          width="160"
          label="发起时间"
        ></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>
      </template>
    </el-table>
    <el-dialog
      v-if="relatedInformationDialog"
      title="添加相关流程"
      :visible.sync="relatedInformationDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :width="isMobile ? '100%' : '60%'"
      :top="isMobile ? '0' : '8vh'"
      :custom-class="isMobile ? 'mobile-related-dialog' : ''"
      append-to-body
    >
      <el-col v-if="!isMobile" :span="24" class="searchStyle">
        <el-col :span="3" style="text-align: center">流程标题：</el-col>
        <el-col :span="5">
          <el-input
            v-model="subject"
            size="small"
            clearable
            placeholder="请输入流程标题"
            prefix-icon="el-icon-search"
          ></el-input>
        </el-col>
        <el-col :span="3" style="text-align: center">创建时间：</el-col>
        <el-col :span="9">
          <ht-date-picker
            v-model="createTime"
            style="width: 100%"
            placeholder="创建时间"
            arrow-control
            format="yyyy-MM-dd"
          ></ht-date-picker>
        </el-col>
        <el-button
          style="margin-left: 20px"
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search()"
        >
          查询
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="reset">
          重置
        </el-button>
      </el-col>
      <div v-else class="mobile-search">
        <el-input
          v-model="subject"
          class="mobile-search_input"
          clearable
          placeholder="请输入流程标题"
          prefix-icon="el-icon-search"
        ></el-input>
        <el-button
          style="margin-left: 10px"
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="search()"
        >
          查询
        </el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="reset">
          重置
        </el-button>
      </div>

      <div class="record-content">
        <el-table
          ref="flowTable"
          v-loading="tableLoading"
          :data="rows"
          style="width: 100%"
          stripe
          border
          header-cell-class-name="todo-header-row"
          row-class-name="todo-row"
          size="medium"
          :default-sort="{ prop: 'createTime', order: 'descending' }"
          :height="isMobile ? tableHeight : 450"
          @selection-change="handleChecked"
          @select="onTableSelect"
          @row-click="RowClick"
        >
          <el-table-column
            type="selection"
            width="60"
            align="center"
            sortable
          ></el-table-column>
          <el-table-column
            type="index"
            align="center"
            width="70"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="creator"
            width="120"
            label="创建人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="subject"
            width="400"
            label="流程标题"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="procDefName"
            width="280"
            label="流程名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
        </el-table>
        <div class="relevant-flow_page" :class="isMobile ? 'mobile' : ''">
          <el-pagination
            :current-page="pagination.page"
            :page-sizes="[10, 20, 50, 100, 300, 500]"
            :page-size="pagination.pageSize"
            :layout="
              isMobile
                ? 'prev, pager, next'
                : 'total, sizes, prev, pager, next, jumper'
            "
            :total="total"
            :pager-count="5"
            :small="isMobile"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button type="primary" size="small" @click="confirm">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

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

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

    data() {
      return {}
    },
    computed: {
      tableHeight() {
        return window.innerHeight - 250
      },
    },

    mounted() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 0px 20px;
    color: #666;
    font-size: 14px;
    word-break: break-all;

    .record-content {
      margin-top: 20px;
    }
    .relevant-flow_page {
      text-align: right;
      margin-top: 20px;
      &.mobile {
        text-align: center;
      }
    }
  }
  .searchStyle {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
  }
  .subject {
    cursor: pointer;
    color: $base-color-blue;
  }
  ::v-deep .mobile-related-dialog {
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .el-dialog__body {
      flex: 1;
      overflow: auto;
      .mobile-search {
        display: flex;
        align-items: center;
        padding-top: 20px;
        .mobile-search_input {
          flex: 1;
        }
      }
    }
    .dialog-footer {
      text-align: center;
    }
  }
  ::v-deep .el-pagination__editor.el-input {
    width: 50px !important;
  }
</style>
