<template>
<div>
  <div class="op">
 
<el-button type="primary" @click="dialogVisible = true" size="mini" style="background:#148A9B;margin-left:10px" icon="el-icon-circle-plus-outline">新增</el-button>
 
</div>
  <el-table
    :data="tableData"
    style="width: 100%"
   >
     <el-table-column
      type="index"
      :index="indexMethod">
      </el-table-column>
    <el-table-column
      prop="flowname"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createby"
      label="创建人">
    </el-table-column>
     <el-table-column
      prop="createtime"
      label="创建时间">
    </el-table-column>
     
     <el-table-column label="操作">
      <template slot-scope="scope">
         <el-popover
          placement="right"
          width="200"
          trigger="click">
           <div class="step" style="height: 200px;">
            <el-steps direction="vertical" :active="7">
              
              <el-step v-for="index in step" :key="step[index]" :title="index.name"></el-step>
             
            </el-steps>
          </div>
        <el-button
          size="mini"
          slot="reference"
          @click="handle(scope.$index, scope.row)">详情</el-button>
          </el-popover>
       <el-button type="primary" size="mini" style="background:#148A9B" icon="el-icon-edit-outline">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  	class="pone"
      :page-size='10'
      layout="total, prev, pager, next, jumper"
      :total="totals"
      :current-page.sync="Page"
     
>
    </el-pagination>
   
   <el-dialog
  title="新增流程"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <el-input
  style="margin-bottom:20px"
  placeholder="请输入流程标题"
  v-model="flowname"
  clearable>
</el-input>
   <el-select
   style="width:100%"
    v-model="value"
    multiple
    filterable
    
    default-first-option
    placeholder="请编辑流程">
    <el-option
    
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="del">取 消</el-button>
    <el-button type="primary" @click="addflow">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<style>
.op{
  display: flex;
  align-items: center;
 
}
  .idc{
  
    width: 200px
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .step{
   margin: 0 auto;
   width:100px
  }
</style>

<script>
 import CryptoJS from 'crypto-js'
// import baseUrl from "../../globe/globeUrl"
  export default {
       data() {
      return {
        flowname:"",
        dialogVisible: false,
        step:'',
        Page:1,
        totals:0,
        input:"",
        info:'',
        tableData: [{
                id:1,
                name:"邹",
                creattime:"2019-1-1",
                person:'迪迪'
        }],
         options: [{
          value: '初审',
          label: '初审'
        }, {
          value: '复核',
          label: '复核'
        }, {
          value: '稽查',
          label: '稽查'
        },
        {
          value: '领导审核',
          label: '领导审核'
        }],
        value: []
      }
    },
    methods:{
      current_change(s){

      },
      del(){
        this.dialogVisible = false
      },
      //新增流程
       addflow() {
        this.dialogVisible = true
        console.log(this.value)
      },
       indexMethod(index) {
        return index +1;
      },
       handle(s,d){
         var par={
           type:d.type
         }
        this.$api.getlist.selectRoleinfo(par).then((res) => {
          this.step=res.data
         console.log( this.step)
        
        }).catch((res) => {
          
        });
        },
       
    },
    created(){
       
          this.$api.getlist.selectflowlist().then((res) => {
          this.tableData=res.data
        
        }).catch((res) => {
          
        });
    }
  }
    
</script>
