<template>
  <div class="app-container"><!--从这一层开始嵌入页面-->

    <el-card>
      <el-form label-width="80px">
        <div class="search">
          <el-form-item label="流程标题">
            <el-input placeholder="输入流程标题"></el-input>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button icon="el-icon-refresh-left">重置</el-button>
        </div><!--search 搜索-->
      </el-form><!--el-form-->
    </el-card><!--el-card-->

    <el-card>
      <el-tabs v-model="activeName3"  @tab-click="handleClick">
        <el-tab-pane label="待办(4)" name="first">
          <el-table :data="tableData5" style="width: 100%" height="529">
            <el-table-column prop="prop1" label="流程类型"></el-table-column>
            <el-table-column prop="prop2" label="流程标题">【使用申请】工具名称11</el-table-column>
            <el-table-column prop="prop3" label="当前环节"></el-table-column>
            <el-table-column prop="prop4" label="上一环节"></el-table-column>
            <el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
            <el-table-column prop="prop6" label="发起人"></el-table-column>
            <el-table-column prop="prop7" label="接收时间"></el-table-column>
            <el-table-column label="操作" width="100" >
              <el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
            </el-table-column>
          </el-table><!--el-table-->
          <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
        </el-tab-pane><!--el-tab-pane-->
        <el-tab-pane label="已办(10)" name="second">
          <el-table :data="tableData6" style="width: 100%" height="529">
            <el-table-column prop="prop1" label="流程类型"></el-table-column>
            <el-table-column prop="prop2" label="流程标题"><a>【使用申请】工具名称1</a></el-table-column>
            <el-table-column prop="prop8" label="流程状态">
              <template slot-scope="scope">
                <span :class="getClassName(scope.row.prop8)">{{ scope.row.prop8 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="prop3" label="处理环节"></el-table-column>
            <el-table-column prop="prop4" label="上一环节"></el-table-column>
            <el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
            <el-table-column prop="prop6" label="发起人"></el-table-column>
            <el-table-column prop="prop7" label="接收时间"></el-table-column>
            <el-table-column label="操作" width="100" >
              <el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
            </el-table-column>
          </el-table><!--el-table-->
          <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
        </el-tab-pane><!--el-tab-pane-->
        <el-tab-pane label="办结(10)" name="third">
          <el-table :data="tableData7" style="width: 100%" height="529">
            <el-table-column prop="prop1" label="流程类型"></el-table-column>
            <el-table-column prop="prop2" label="流程标题">【使用申请】工具名称1</el-table-column>
            <el-table-column label="流程状态">
              <template slot-scope="scope">
                <span :class="getClassName(scope.row.prop3)">{{ scope.row.prop3 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="prop4" label="发起人"></el-table-column>
            <el-table-column prop="prop5" label="发起时间"></el-table-column>
            <el-table-column prop="prop6" label="接收时间"></el-table-column>
            <el-table-column label="操作" width="100" >
              <el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
            </el-table-column>
          </el-table><!--el-table-->
          <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
        </el-tab-pane><!--el-tab-pane-->
      </el-tabs><!--el-tabs-->
    </el-card><!--el-card-->

    <el-drawer :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
      <template #title>
        <span>申请使用</span>
        <div class="drawer-head-btn">
          <el-button  @click="drawer2 = true">流程监控</el-button>
          <el-button type="primary" v-if="activeName3 == 'first'">提交</el-button>
          <el-button>取消</el-button>
        </div><!--drawer-head-btn 抽屉顶部按钮区域-->
      </template>
      <el-tabs v-model="activeName1"  @tab-click="handleClick">
        <el-tab-pane label="信息内容" name="first">
          <div class="el-form-border">
            <el-form ref="form" label-width="150px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="申请人">张莹</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="申请部门">信息部</el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="申请理由">
                    <el-input type="textarea"  maxlength="1000" placeholder="工作需要额外申请，请批准！" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form><!--el-form-->
          </div><!--el-form-border 表单-->
          <div class="divide double"></div><!--divide 分隔-->
          <div class="tboper">
            <div class="tit">申请工具</div>
          </div><!--tboper 标题与操作按钮-->
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="prop1"  label="工具编号"></el-table-column>
            <el-table-column prop="prop2" label="工具名称"></el-table-column>
            <el-table-column prop="prop5" label="工具类别"  ></el-table-column>
            <el-table-column prop="prop3" label="归属单位"> </el-table-column>
            <el-table-column prop="prop4" label="负责人"></el-table-column>
          </el-table><!--el-table-->
          <div class="divide double"></div><!--divide 分隔-->
          <div class="tboper" v-if="activeName3 == 'first'">
            <div class="tit">审批信息</div>
          </div><!--tboper 标题与操作按钮-->
          <div class="el-form-border" v-if="activeName3 == 'first'">
            <el-form ref="form" label-width="150px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="审批结论">
                    <el-radio-group v-model="radio1">
                      <el-radio label="1">通过</el-radio>
                      <el-radio label="2" >不通过</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="审批理由">
                    <el-input type="textarea" rows="4"  maxlength="1000" placeholder="请输入" show-word-limit></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form><!--el-form-->
          </div><!--el-form-border 表单-->
        </el-tab-pane><!--el-tab-pane-->
        <el-tab-pane label="审批记录" name="second">
          <el-table :data="tableData4" style="width: 100%">
            <el-table-column prop="prop4" label="处理人"></el-table-column>
            <el-table-column prop="prop3" label="处理环节"> </el-table-column>
            <el-table-column prop="prop2" label="接收人"></el-table-column>
            <el-table-column prop="prop1"  label="接收环节"></el-table-column>
            <el-table-column prop="prop7" label="处理时间" ></el-table-column>
            <el-table-column prop="prop5" label="审批意见" ></el-table-column>
          </el-table><!--el-table-->
        </el-tab-pane><!--el-tab-pane-->
      </el-tabs><!--el-tabs-->
    </el-drawer><!--el-drawer 申请详情-抽屉-->

    <el-drawer :visible.sync="drawer2" :direction="direction" :before-close="handleClose" size="75%">
      <template #title>
        <span>流程监控</span>
      </template>
      <div class="lctitle">流程标题：【申请使用】工具名称1 ，流程定义名称：申请使用流程</div><!--lctitle-->
      <img style="width:auto; max-width: 100%;" src="../../../../public/images/lcjk1.jpg" />
    </el-drawer><!--el-drawer 流程监控-抽屉-->
  </div><!--app-container-->
</template>

<script>
  export default {
    name: 'dispose',
    data() {
      return {
        drawer1: false,
        drawer2: false,
        activeName1: 'first',
        activeName2: 'second',
        activeName3: 'first',
        radio1: '1',
        tableData1: [
          {
            prop1: '使用申请',
            prop2: '进行中',
            prop3: '直接领导审核',
            prop4: '赵宇',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '已办结',
            prop3: '直接领导审核',
            prop4: '钱多多',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '进行中',
            prop3: '直接领导审核',
            prop4: '赵宇',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '已办结',
            prop3: '直接领导审核',
            prop4: '钱多多',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '进行中',
            prop3: '直接领导审核',
            prop4: '赵宇',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '已办结',
            prop3: '直接领导审核',
            prop4: '钱多多',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '进行中',
            prop3: '直接领导审核',
            prop4: '赵宇',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '已办结',
            prop3: '直接领导审核',
            prop4: '钱多多',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '进行中',
            prop3: '直接领导审核',
            prop4: '赵宇',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          },
          {
            prop1: '使用申请',
            prop2: '已办结',
            prop3: '直接领导审核',
            prop4: '钱多多',
            prop5: '2024/02/09 12:00',
            prop6: '2024/02/09 12:00',
          }
        ],
        tableData2: [
          {
            prop1: '0021',
            prop2: '工具名称1',
            prop3: '人力资源部/培训组',
            prop4: '赵宇',
            prop5: '网络工具',
          },
          {
            prop1: '0022',
            prop2: '工具名称2',
            prop3: '人力资源部/招聘组',
            prop4: '钱多多',
            prop5: '网络工具',
          },
          {
            prop1: '0023',
            prop2: '工具名称3',
            prop3: '人力资源部/薪资组',
            prop4: '孙瑶',
            prop5: '网络工具',
          }
        ],
        tableData3: [
          {
            prop1: '总监批准',
            prop2: '不通过',
            prop3: '赵宇 ',
            prop4: '总裁办',
            prop5: '2024/02/09 12:00',
          },
          {
            prop1: '部门领导审核',
            prop2: '通过',
            prop3: '钱多多',
            prop4: '设备部',
            prop5: '2024/02/09 12:00',
          },
          {
            prop1: '管理员审核',
            prop2: '通过',
            prop3: '孙瑶',
            prop4: '人力资源部',
            prop5: '2024/02/09 12:00',
          }
        ],
        tableData4: [
          {
            prop1: '部门领导审核',
            prop2: '张宇',
            prop3: '管理员审核 ',
            prop4: '赵定',
            prop5: '同意',
            prop6: '2024/02/09 12:00',
            prop7: '2024/02/09 12:03',
            prop8: '耗时0天',
            prop9: '已完成',
          },
          {
            prop1: '管理员审核',
            prop2: '赵定',
            prop3: '直接领导审核 ',
            prop4: '钱多多',
            prop5: '同意',
            prop6: '2024/02/09 12:00',
            prop7: '2024/02/09 12:03',
            prop8: '耗时0天',
            prop9: '已完成',
          }
        ],
        tableData5: [
          {
            prop1: '使用申请',
            prop3: '部门经理审核',
            prop4: '直接领导审核',
            prop5: '张鑫辉',
            prop6: '张慧玉',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '管理员审核',
            prop4: '总监审核',
            prop5: '柳青',
            prop6: '刘青',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '总经理审核',
            prop4: '直接领导审核',
            prop5: '张庆幸',
            prop6: '王慧',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '总监审核',
            prop4: '部门经理审核',
            prop5: '刘宁',
            prop6: '赵媛',
            prop7: '2022/10/10  12:00',
          }
        ],
        tableData6: [
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '部门经理审核',
            prop4: '直接领导审核',
            prop5: '张鑫辉',
            prop6: '张慧玉',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '管理员审核',
            prop4: '总监审核',
            prop5: '柳青',
            prop6: '刘青',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '总经理审核',
            prop4: '直接领导审核',
            prop5: '张庆幸',
            prop6: '王慧',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '总监审核',
            prop4: '部门经理审核',
            prop5: '刘宁',
            prop6: '赵媛',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '不通过',
            prop3: '部门经理审核',
            prop4: '直接领导审核',
            prop5: '张鑫辉',
            prop6: '张慧玉',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '管理员审核',
            prop4: '总监审核',
            prop5: '柳青',
            prop6: '刘青',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '不通过',
            prop3: '总经理审核',
            prop4: '直接领导审核',
            prop5: '张庆幸',
            prop6: '王慧',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '总监审核',
            prop4: '部门经理审核',
            prop5: '刘宁',
            prop6: '赵媛',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '部门经理审核',
            prop4: '直接领导审核',
            prop5: '张鑫辉',
            prop6: '张慧玉',
            prop7: '2022/10/10  12:00',
          },
          {
            prop1: '使用申请',
            prop8: '通过',
            prop3: '管理员审核',
            prop4: '总监审核',
            prop5: '柳青',
            prop6: '刘青',
            prop7: '2022/10/10  12:00',
          },
        ],
        tableData7: [
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '张鑫辉',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '不通过',
            prop4: '柳青',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '张庆幸',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '刘宁',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '不通过',
            prop4: '张鑫辉',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '柳青',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '张庆幸',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '刘宁',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '张鑫辉',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
          {
            prop1: '使用申请',
            prop3: '通过',
            prop4: '柳青',
            prop5: '2024/02/08  07:00',
            prop6: '2024/02/10  12:00',
          },
        ],
      }
    },
    methods: {
      getClassName(prop2) {
        // 根据不同的文本内容返回不同的类名
        if (prop2 === '进行中') {
          return 'blue';
        } else if (prop2 === '已办结') {
          return 'green';
        }else if (prop2 === '不通过') {
          return 'red';
        } else if (prop2 === '通过') {
          return 'green';
        }
      },
    }
  }
</script>

<style scoped>

</style>
