<template>
  <div style="margin-top: -8px">
    <div class="label-title">
      {{ title }}({{ nodeId }})
      <el-button
        icon="el-icon-circle-plus-outline"
        @click="setNodeUser()"
        type="text"
        >新增</el-button
      >
    </div>
    <div class="alert-danger alert" v-if="!nodeUsers || nodeUsers.length == 0">
      &nbsp;&nbsp;尚未配置节点传阅人员，请添加人员设置
    </div>
    <div
      v-for="(nodeCondition, $index) in nodeUsers"
      :key="$index"
      class="alert"
    >
      <div style="float: left; margin-left: 10px; font-size: 13px">
        {{ nodeCondition.description }}
      </div>
      <div style="float: right !important">
        <el-button icon="el-icon-edit" @click="setNodeUser($index)"></el-button>
        <el-button
          icon="el-icon-arrow-up"
          @click="ArrayTool(nodeUsers, $index, 'up')"
        ></el-button>
        <el-button
          icon="el-icon-arrow-down"
          @click="ArrayTool(nodeUsers, $index)"
        ></el-button>
        <el-button
          icon="el-icon-delete"
          @click="nodeUsers.remove(nodeUsers[$index])"
        ></el-button>
      </div>
    </div>
    <FlowNodeUserCondition
      @nodeUserConditionConfirm="nodeUserConditionConfirm"
      ref="flowNodeUserCondition"
    />
  </div>
</template>

<script>
  import flow from '@/api/flow.js'
  import req from '@/request.js'
  import {mapState, mapActions} from 'vuex'
  const FlowNodeUserCondition = () =>
    import('@/components/flow/FlowNodeUserCondition.vue')
  import utils from '@/hotent-ui-util.js'
  export default {
    props: ['defId', 'title', 'nodeId', 'defkey'],
    components: {FlowNodeUserCondition},
    data() {
      return {
        nodeUsers: [],
        curSetIndex: '-1',
      }
    },
    computed: mapState({
      defConfigData: (state) => state.flow.defConfigData,
    }),
    watch: {
      nodeUsers: {
        handler(newValue, oldValue) {
          let path = 'nodeSetData.nodeReadUserMap.' + this.nodeId
          let obj = {}
          obj[path] = newValue
          this.$store.dispatch('flow/updateConfig', obj)
        },
        deep: true,
      },
    },
    methods: {
      dialogCancel() {},
      nodeUserConditionConfirm(res) {
        if (res.calcs) {
          if (this.curSetIndex != '-1') {
            this.nodeUsers.splice(this.curSetIndex, 1, res)
          } else {
            this.nodeUsers.push(res)
          }
        }
      },
      ArrayTool(ary, idx, direct) {
        direct = direct || 'down'
        let part = ary[idx]
        if (
          !part ||
          (part.constructor !== Object && part.constructor !== Array)
        ) {
          return ary
        }
        if (part.constructor === Object) {
          part = [part]
        }
        if (direct == 'up') {
          part.forEach((m) => {
            let index = ary.indexOf(m, 1)
            if (index > 0) {
              let t = ary[index - 1]
              ary.splice(index - 1, 1, ary[index])
              ary.splice(index, 1, t)
            }
          })
        } else if (direct == 'down') {
          for (var i = part.length - 1, m; (m = part[i--]); ) {
            let index = ary.indexOf(m, 0)
            if (index > -1 && index < ary.length - 1) {
              let t = ary[index + 1]
              ary.splice(index + 1, 1, ary[index])
              ary.splice(index, 1, t)
            }
          }
        }
      },
      setNodeUser(index) {
        let conf = {nodeId: this.nodeId}
        if (index || index === 0) {
          this.curSetIndex = index
          conf.userRule = JSON.parse(JSON.stringify(this.nodeUsers[index]))
        }
        this.$refs.flowNodeUserCondition.showDialog(conf)
      },
    },
    created() {
      this.utils = utils
      if (
        this.defConfigData.nodeSetData.nodeReadUserMap &&
        this.defConfigData.nodeSetData.nodeReadUserMap[this.nodeId]
      ) {
        this.nodeUsers = JSON.parse(
          JSON.stringify(
            this.defConfigData.nodeSetData.nodeReadUserMap[this.nodeId]
          )
        )
      }
    },
  }
</script>

<style lang="scss" scoped>
  .label-title {
    color: #333;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    button {
      margin-left: 8px;
    }
  }
  .alert {
    color: #a94442;
    background-color: #f5f5f5;
    border-color: #e3e3e3;
    padding: 10px 0px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    display: inline-block;
    width: 100%;
  }

  .alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
  }

  .alert ::v-deep .el-button {
    padding: 6px 8px;
    margin-left: 0px;
    margin-right: 5px;
  }
</style>