<template>
<div>
  <div class="op">
 
<el-button type="primary" @click="showadd(1)" size="mini" style="background:#148A9B;margin-left:10px" icon="el-icon-circle-plus-outline">新增</el-button>
 <el-button type="danger" @click="delet(1)" size="mini" style="background:#148A9B;margin-left:10px" icon="el-icon-delete">已作废</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="flowNo"
      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" @click="showadd(2,scope.row)" icon="el-icon-edit-outline">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="已作废流程" width="70%" :visible.sync="dialogTableVisible">
  <el-table
    :data="detableData"
    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="flowNo"
      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="dehandle(scope.$index, scope.row)">详情</el-button>
          </el-popover>
      </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"
       @current-change="current_change"
     
>
    </el-pagination>
</el-dialog>
   <el-dialog
  :title="flowTitle"
  :visible.sync="dialogVisible"
  width="60%"
 
  >
  <el-select v-model="title" clearable placeholder="请选择标题" style="margin-bottom:10px;width:100%">
    <el-option
      v-for="item in titleList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      >
    </el-option>
  </el-select>
   <el-select
   style="width:100%"
    v-model="value"
    multiple
    filterable
     @visible-change="toshow"
    default-first-option
    placeholder="请编辑流程">
    <el-option
    
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <div class="iii" v-show="showiii"></div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="del">取 消</el-button>
    <el-button type="primary" @click="addflow(1)">确 定</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
  }
  .iii{
    height: 200px
  }
</style>

<script>
 import CryptoJS from 'crypto-js'
 import {format} from "../../utils/datetime"
 console.log(format)
// import baseUrl from "../../globe/globeUrl"
  export default {
       data() {
      return {
        dialogTableVisible:false,
        flowTitle:"",
        showiii:false,
        //标题
        title:"",
        titleList:[],
        flowname:"",
        dialogVisible: false,
        step:'',
        Page:1,
        totals:0,
        input:"",
        info:'',
        tableData: [],
        detableData:[],
         options: [],
        value: [],
        oldvalue:[],
        flaa:""
      }
    },
    methods:{
      //作废
      delet(){
        var data={
           pageNum:1,
           pageSize:10
        }
this.$api.getlist.selectflowState(data).then((res) => {
          this.detableData=res.data.result
          this.totals=res.data.total
        this.dialogTableVisible=true
        
        }).catch((res) => {
          
        });
      },
      //加载流程列表
      loadFlow(){
          this.$api.getlist.selectflowlist().then((res) => {
          this.tableData=res.data
          console.log(this.tableData)
        
        }).catch((res) => {
          
        });
      },
      current_change(s){
   var data={
           pageNum:s,
           pageSize:10
        }
this.$api.getlist.selectflowState(data).then((res) => {
          this.detableData=res.data.result
          this.totals=res.data.total
        this.dialogTableVisible=true
        
        }).catch((res) => {
          
        });
      },
      toshow(s){
        this.showiii=s
        
      },
      del(){
        this.dialogVisible = false
      },
      //获取流程
      showadd(s,d){
        this.value=[]
         this.titleList=[]
        this.oldvalue=[]
        console.log(d)
        if(s==1){
          this.flowTitle="新增流程"
         for(var i =1;i<=6;i++){
           this.titleList.push({
             label:this.getType(i),
             value:i+","+this.getType(i)
           })
         }
        }else if(s==2){
          this.titleList=[{
             label:d.flowname,
             value:d.type+","+d.flowname
          }]
          this.title=d.type+","+d.flowname
            this.flowTitle="修改流程"
       var par={
           flowNo:d.flowNo
         }
        this.$api.getlist.selectRoleremark(par).then((res) => {
         
          var dd=0
          
         for(dd in res.data){
            this.oldvalue.push(res.data[dd].id)
           this.value.push(res.data[dd].id)
         
         }
        
        }).catch((res) => {
          
        });
          
        }
        this.flaa=s
        this.options=[]
        this.dialogVisible = true
          this.$api.getlist.selectRoleName().then((res) => {
            if(res.code==200){
         for(var i in res.data){
           this.options.push({
             label:res.data[i].name,
             value:res.data[i].id
           })
         }
         }else{
           alert(JSON.stringify(res))
         }
        
        }).catch((res) => {
          
        });
      },
      //新增更新流程
      addflow(){
        
        this.addflows(this.flaa)
      },
       addflows(s) {
      console.log(this.value)
        if(s==1){
        for(var d in this.tableData){
          
          
          if(this.tableData[d].type==this.title.split(",")[0]){
            this.$message.error('流程已存在,请选择其它流程!');
            return
          }
        
        }
        }else{
         
          if(this.oldvalue.toString()==this.value.toString()){
            this.$message.error('流程不能与原流程相同!');
            return
          }
        }
          var par={
            type:this.title.split(",")[0],
            flowName:this.title.split(",")[1],
            roleIds:this.value.join(","),
            state:s
          }
          this.$api.getlist.insertFolwCourse(par).then((res) => {
          if(res.code==200){
              this.loadFlow()
             this.$message.success('操作成功');
          }else{
            this.$message.error(res.message);
          }
        
        }).catch((res) => {
          this.$message.error('操作失败');
        });
        this.dialogVisible = false
       
      },
       indexMethod(index) {
        return index +1;
      },
       handle(s,d){
         var par={
           flowNo:d.flowNo
         }
        this.$api.getlist.selectRoleremark(par).then((res) => {
          this.step=res.data
         console.log( this.step)
        
        }).catch((res) => {
    
        });
        },
        dehandle(s,d){
          console.log(d)
          var par={
           flowNo:d.flowNo
         }
        this.$api.getlist.selectRoleflowNo(par).then((res) => {   
        this.step=res.data
        }).catch((res) => {
          
        });
        }
       
    },
    created(){
       this.loadFlow()
        
    }
  }
    
</script>
