<template>
  <div class="flow">

    <el-form :inline="true" size="small">
      <el-form-item label="模板名称">
        <el-input v-model="searchForm.templateName" placeholder="模板名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="el-icon-search" size="mini" @click="init('search')">搜索</el-button>
        <el-button type="warning" icon="el-icon-plus" size="mini" @click="show = true">新增模板</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="init()">刷新</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table max-height="700" border highlight-current-row :data="tableData"
        :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" style="width: 100%;">
        <el-table-column prop="templateName" label="模板名称" />
        <el-table-column prop="templateScene" label="应用场景" />
        <el-table-column prop="templateRemark" label="备注" />
        <el-table-column prop="createId" label="创建人">
          <template slot-scope="scope">
            <span>{{ getUser(scope.row.createId) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.templateStatus == 0" style="color:#F56C6C">未生效</span>
            <span v-else-if="scope.row.templateStatus == 1" style="color:#67C23A">生效</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="detailTemplate(scope.row)">流程详情</el-button>
            <el-button @click="editTemplate(scope.row)" type="text">编辑</el-button>
            <el-button @click="deleteTemplate(scope.row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="searchForm.pageSize">
        </el-pagination>
      </div>
    </div>

    <el-dialog :visible.sync="show" width="60%" top="6vh" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="false">
      <div class="title">
        <div class="left">
          · 流程设计
        </div>
        <div class="center">
          <el-steps :active="formType" finish-status="success" simple style="background:#fff">
            <el-step title="基础信息"></el-step>
            <el-step title="审核人员"></el-step>
          </el-steps>
        </div>
        <div class="right">
          <el-button size="mini" :disabled="formType == 0" @click="upClick">上一步</el-button>
          <el-button size="mini" :disabled="formType == 1" @click="nextClick">下一步</el-button>
          <el-button size="mini" type="primary" :disabled="formType == 0 || form.auditTemplateApprover.length == 0"
            @click="isEdit == 0 ? createTemplate() : updateTemplate()">{{ isEdit == 0 ? '创建' : '编辑' }}</el-button>
          <el-button size="mini" @click="cloaseShow()">取消</el-button>
        </div>
      </div>
      <div class="box" v-if="formType == 0">
        <el-form size="small" :model="form" label-width="80px">
          <el-form-item label="模板名称" required>
            <el-input type="text" v-model="form.templateName"></el-input>
          </el-form-item>
          <el-form-item label="模板场景">
            <el-input type="text" v-model="form.templateScene"></el-input>
          </el-form-item>
          <el-form-item label="模板备注">
            <el-input type="textarea" :rows="3" v-model="form.templateRemark"></el-input>
          </el-form-item>
          <el-form-item label="模板状态">
            <el-radio v-model="form.templateStatus" :label="0">失效</el-radio>
            <el-radio v-model="form.templateStatus" :label="1">生效</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div class="transfer" v-else>
        <div class="boxLeft">
          <el-input v-model="userVal" size="small" placeholder="搜索人员" @input="onSearchCategory"></el-input>
          <ul class="menuUl">
            <li v-for="(item, index) in userList" class="list">
              {{ item.name }}
              <el-button icon="el-icon-edit" type="primary" plain size="mini" @click="addUser(item)">添加</el-button>
            </li>
          </ul>
        </div>
        <div class="boxRight">
          <!--  -->
          <el-timeline>
            <el-timeline-item v-for="(item, index) in form.auditTemplateApprover" type='primary' size="large"
              timestamp="审核人" icon="el-icon-user-solid" placement="top">
              <div class="cardBox">
                <div style="display: flex;align-items: center;">
                  <el-avatar size="large" icon="el-icon-user-solid"></el-avatar>
                  <span style="margin-left:20px">{{ item[0].approverName }}</span>
                </div>
                <el-button size="mini" type="warning" @click="removeUser(index)">移除</el-button>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <el-drawer title="流程详情" :visible.sync="drawer" direction="rtl" size="30%">
      <div class="steps" v-if="drawer">
        <el-timeline style="margin:20px auto">
          <el-timeline-item icon="el-icon-s-custom" type='success' size="large" timestamp="创建人" placement="top">
            <el-card>
              <h4>{{ getUser(detailRow.createId) }}</h4>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(item, index) in detailRow.auditTemplateApprover" icon="el-icon-s-custom" type='primary'
            size="large" timestamp="审核人" placement="top">
            <el-card>
              <h4>{{ getUser(item[0].approverId) }}</h4>
            </el-card>
          </el-timeline-item>

        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { post, get } from "@/api/common";
export default {
  data () {
    return {
      show: false,
      drawer: false,
      formType: 0,
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        templateName: "",
      },
      total: 0,
      form: {
        templateName: "",
        templateScene: "",
        templateRemark: "",
        templateStatus: 1,
        createId: "",
        auditTemplateApprover: []
      },
      userId: "",
      userList: "",
      oldList: [],
      tableData: [],
      isEdit: 0,
      detailRow: {},
      userVal: ""
    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    onSearchCategory (k) {
      this.userList = this.oldList.filter((i) =>
        i.name.includes(k)
      );
    },
    removeUser (index) {
      this.form.auditTemplateApprover.splice(index, 1)
    },
    addUser (item) {
      let arr = []
      let obj = {
        templateLevel: this.form.auditTemplateApprover.length + 1,
        approverId: item.id,
        approverName: item.name,
        approverPhone: item.phone,
        createId: this.userId
      }
      arr.push(obj)
      this.form.auditTemplateApprover.push(arr)
    },
    init (val) {
      if (val == 'search') {
        this.getTemplatePage()
      } else {
        this.searchForm.pageNum = 1
        this.searchForm.pageSize = 10
        this.searchForm.templateName = ""
        this.getTemplatePage()
      }
    },
    detailTemplate (row) {
      this.drawer = true
      this.detailRow = row
    },
    editTemplate (row) {
      this.isEdit = 1
      this.show = true
      for (let key in this.form) {
        this.form[key] = row[key]
      }
      this.form.id = row.id

    },
    deleteTemplate (id) {
      this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post('/auditTemplate/delete/' + id, { id: id }).then(res => {
          if (res.code == 10000) {
            this.getTemplatePage()
          }
        })
      })
    },
    getUser (id) {
      let name = this.userList.find(val => id == val.id)
      if (name != undefined) {
        return name.name
      } else {
        return ''
      }
    },
    cloaseShow () {
      this.show = false
      this.formType = 0
      this.form.auditTemplateApprover = []
      this.form.templateName = ""
      this.form.templateScene = ""
      this.form.templateRemark = ""
      this.userData = []
      this.isEdit = 0
      if (this.form.id) {
        delete this.form.id
      }
    },
    // 创建模板
    createTemplate () {
      if (this.form.auditTemplateApprover.length < 1) {
        return this.$message.error('审核人列表不能为空')
      }
      this.form.createId = this.userId
      post('/auditTemplate/create', this.form).then(res => {
        this.$message.success('创建成功')
        this.cloaseShow()
        this.getTemplatePage()
      })
    },
    // 更新模板
    updateTemplate () {
      post('/auditTemplate/update', this.form).then(res => {
        this.$message.success('编辑成功')
        this.cloaseShow()
        this.getTemplatePage()
      })
    },
    getUserList () {
      get("/sysUser/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
        this.userList = JSON.parse(JSON.stringify(res.data.list))
        this.oldList = JSON.parse(JSON.stringify(res.data.list))
        res.data.list.forEach(val => {
          if (val.name == this.$store.state.user.name) {
            this.userId = val.id
          }
        })
        this.getTemplatePage()
      })
    },
    // 获取审核模板列表
    getTemplatePage () {
      post('/auditTemplate/page', this.searchForm).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        // console.log(res)
      })
    },
    handleSizeChange (val) {
      this.searchForm.pageNum = 1
      this.searchForm.pageSize = val
      this.getTemplatePage()
    },
    handleCurrentChange (val) {
      this.searchForm.pageNum = val
      this.getTemplatePage()
    },
    upClick () {
      if (this.isEdit == 0) {
        this.userData = []
        this.form.auditTemplateApprover = []
      }
      this.formType = this.formType - 1
    },
    nextClick () {
      if (this.form.templateName == '') {
        return this.$message.error('模板名称不能为空!')
      }
      this.formType++
    }
  }
}
</script>

<style lang="scss" scoped>
.flow {
  padding: 20px !important;

  ::v-deep.el-dialog__header {
    padding: 0;
  }

  ::v-deep.el-dialog__body {
    padding: 0;
    background-color: #ebeef5;
  }

  ::v-deep.el-transfer-panel {
    height: 400px;
  }
}

.title {
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: inherit;
  background: #fff;

  .left {
    // width: 220px;
  }

  .center {
    width: 350px;
    padding: 6px 20px;

    justify-items: flex-start;
  }

  .right {
    // width: 220px;
    text-align: right;
  }
}

.box {
  width: 800px;
  height: 800px;
  padding: 20px;
  box-sizing: border-box;
  margin: 30px auto;
  background-color: #fff;
}

.transfer {
  width: 800px;
  height: 800px;
  margin: 30px auto;
  background-color: #fff;
  // padding-top: 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;

  .boxLeft {
    width: 250px;
    height: 100%;
    overflow-y: auto;
    padding-top: 20px;
    border-right: 1px solid #ccc;

    .menuUl {
      list-style: none;
      padding: 0;
      cursor: pointer;

      .list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        line-height: 50px;
        padding: 0 5px 0 20px;
      }

      .list:hover {
        color: #409eff;
        background-color: #d4e9fd;
      }
    }
  }

  .boxRight {
    flex: 1;
    padding: 20px;
    overflow-y: auto;

    .cardBox {
      width: 300px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 0 20px;
    }
  }
}

.steps {
  width: 80%;
  height: 100%;
  padding: 0 20px;
  // overflow-y: scroll;
  box-sizing: border-box;
}</style>