<template>
  <!-- 常用流程 -->
  <div class="flow">
    <i class="el-icon-setting" @click="handleOpen"></i>

    <div class="flow-often">
      <el-tag
        v-for="flow in oftenFlowList"
        :key="flow.defKey"
        @click="handleFlowClick(flow)"
      >
        {{ flow.name }}
      </el-tag>
    </div>

    <el-dialog
      width="60%"
      title="设置常用流程"
      :visible.sync="oftenFlowVisible"
      :close-on-click-modal="false"
    >
      <div class="flow-item">
        <div class="flow-item-header">
          <div class="title">常用流程</div>
          <span>点击"×"从常用流程中移除</span>
        </div>

        <div class="flow-item-content">
          <template v-if="oftenFlowList.length">
            <el-tag
              v-for="flow in oftenFlowListCopy"
              :key="flow.defKey"
              closable
              type="success"
              @close="delFromOften(flow)"
            >
              {{ flow.name }}
            </el-tag>
          </template>

          <div v-else style="line-heigth: 30px">暂未设置常用流程</div>
        </div>
      </div>

      <div class="flow-item">
        <div class="flex">
          <div class="flow-item-header">
            <div class="title">更多流程</div>
            <span>点击"+"添加至常用流程中</span>
          </div>

          <div class="search-input">
            <el-input
              v-model="searchKey"
              clearable
              size="mini"
              @keyup.enter.native="searchFlow"
            ></el-input>
            <el-button size="mini" type="primary" @click="searchFlow">
              搜索
            </el-button>
          </div>
        </div>

        <div class="flow-item-content">
          <div v-if="hasAuthFlowList.length">
            <div
              v-for="type in hasAuthFlowList"
              :key="type.typeKey"
              class="flow-type"
            >
              <div class="flow-type-name">{{ type.name }}</div>

              <div class="flow-container">
                <el-tooltip
                  v-for="flow in type.flowList"
                  :key="flow.id"
                  :content="flow.name"
                  :disabled="flow.name.length > 0"
                  placement="top"
                >
                  <el-tag v-if="flow.canAdd">
                    {{ flow.name }}
                    <i
                      class="el-icon-circle-plus el-icon--right"
                      @click="addFlow2Often(flow)"
                    ></i>
                  </el-tag>

                  <el-tag v-else type="success">
                    <span>{{ flow.name }}</span>
                    <i class="el-icon-check el-icon--right"></i>
                  </el-tag>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer">
        <el-button type="primary" @click="handleConfirm">保存</el-button>
        <el-button @click="oftenFlowVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveMyOftenFlow,
    getHasAuthFlowList,
    flowHasStartRights,
  } from '@/api/flow'
  export default {
    name: 'OftenFlow',
    data() {
      return {
        searchKey: '',
        oftenFlowList: [],
        oftenFlowListCopy: [],
        hasAuthFlowList: [],
        oftenFlowVisible: false,
      }
    },
    created() {
      this.oftenFlowList = [...this.$parent.oftenFlowList]
    },
    methods: {
      searchFlow() {
        let queryFilter = {}
        if (this.searchKey) {
          queryFilter = {
            querys: [
              {
                property: 'DEF_KEY_',
                value: this.searchKey,
                group: 'main',
                operation: 'LIKE',
                relation: 'OR',
              },
              {
                property: 'name_',
                value: this.searchKey,
                group: 'main',
                operation: 'LIKE',
                relation: 'OR',
              },
            ],
          }
        }
        this._getHasAuthFlowList(queryFilter)
      },
      handleFlowClick(flow) {
        const { account } = this.$store.state.user

        if (!account) return
        // 超级管理员账号不做判断
        if (account === 'admin') {
          this.startFlow(flow)
        } else {
          flowHasStartRights(flow.defKey).then((data) => {
            if (data.value) {
              this.startFlow(flow)
            } else {
              this.$message.warning('暂无流程启动权限，请联系管理员！')
            }
          })
        }
      },
      startFlow(flow) {
        const { leaders, defId } = flow
        if (!leaders || leaders.length === 0) {
          this.$router.push(`/matter/startProcess?defId=${defId}`)
        }
        // TODO: 有发起人的情况
      },
      handleOpen() {
        this.oftenFlowVisible = true
        this.oftenFlowListCopy = [...this.oftenFlowList]

        this._getHasAuthFlowList()
      },
      // 获取流程分类及分类下的流程
      _getHasAuthFlowList(filter) {
        getHasAuthFlowList(filter).then((data) => {
          if (data && data.length) {
            const { length } = this.oftenFlowList
            const oftenFlowKeys = []
            if (length) {
              this.oftenFlowList.forEach((item) => {
                oftenFlowKeys.push(item.defKey)
              })
            }

            data.forEach((item) => {
              const { flowList } = item
              if (flowList && flowList.length) {
                flowList.forEach((subItem) => {
                  if (
                    oftenFlowKeys.length &&
                    oftenFlowKeys.includes(subItem.defKey)
                  ) {
                    subItem['canAdd'] = false
                  } else {
                    subItem['canAdd'] = true
                  }
                })
              }
            })
            this.hasAuthFlowList = data
          } else {
            this.hasAuthFlowList = []
          }
        })
      },
      // 从常用流程中删除
      delFromOften(flow) {
        const index = _.findIndex(this.oftenFlowListCopy, { defKey: flow.defKey })
        if (index !== -1) {
          this.oftenFlowListCopy.splice(index, 1)
          this.setFlowItemStatus(flow.defKey)
        }
      },
      // 添加到常用流程
      addFlow2Often(flow) {
        const { length } = this.oftenFlowListCopy
        if (length >= 20) {
          this.$message.warning('最多可添加20个常用流程！')
          return
        }
        const { defKey, name } = flow
        this.oftenFlowListCopy.push({ defKey, name })
        flow.canAdd = false
      },
      // 从常用流程删除后，设置为可添加状态
      setFlowItemStatus(defKey) {
        this.hasAuthFlowList.forEach((item) => {
          item.flowList.forEach((subItem) => {
            if (subItem.defKey === defKey) {
              subItem.canAdd = true
              return
            }
          })
        })
      },
      handleConfirm() {
        this.oftenFlowList = [...this.oftenFlowListCopy]
        saveMyOftenFlow(this.oftenFlowList).then((data) => {
          if (data.state) {
            this.oftenFlowVisible = false
            this.$message.success(data.message)
            this.$parent._getMyOftenFlow()
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .flow {
    position: relative;
    .el-icon-setting {
      position: absolute;
      top: -10px;
      right: 0;
      color: var(--themeColor);
      font-size: $base-font-size-big;
      cursor: pointer;
    }
  }
  .flow-often {
    .el-tag {
      margin: 0 10px 10px 0;
      font-size: 12px !important;
      padding: 2px 12px;
      cursor: pointer;
      border: none !important;
      background-color: #f5f5f5 !important;
      color: #000 !important;
    }
    .el-tag:hover{
      background-color: #e5f2ff !important;
      border: 1px solid #0080fe !important;
      color: #0080fe !important;
    }
  }
  .flow-item {
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    &-header {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
      .title {
        font-size: $base-font-size-default;
        font-weight: bold;
        margin-right: 10px;
      }
      span {
        font-size: $base-font-size-small;
      }
    }
    &-content {
      min-height: 20px;
      max-height: 300px;
      overflow-y: auto;
      padding: 20px 20px 10px 20px;
      border: 1px solid #ddd;
      .el-tag {
        margin: 0 10px 10px 0;
      }
      .flow-type {
        .flow-type-name {
          font-size: $base-font-size-small;
          font-weight: bold;
          margin-bottom: 10px;
        }

        .el-icon-circle-plus {
          cursor: pointer;
        }
        &:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
  }
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search-input {
      display: flex;
      align-items: center;
      width: 300px;
      margin-bottom: 10px;
      .el-input {
        margin-right: 10px;
      }
    }
  }

  ::v-deep .el-dialog {
    .el-dialog__title {
      color: var(--themeColor);
    }
  }
</style>