<template>
  <!-- 跟踪设置 -->
  <div>
    <el-dialog
      width="50%"
      :title="$t('task.TrackingSettings')"
      :visible.sync="showFllowSetting"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="container">
        <div class="label">{{ $t('task.TrackingNode') }}</div>

        <div class="node-list">
          <el-checkbox-group v-model="checkedNodes">
            <el-checkbox
              v-for="node in nodes"
              :key="node.nodeId"
              :label="node.nodeId"
              @change="handleCheck(node.nodeId)"
            >
              {{ node.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <div slot="footer">
        <el-button @click="cancel">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="primary" @click="confirm">
          {{ $t('Common.Confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { taskFollowSave } from '@/api/process'
  export default {
    name: 'FllowSetting',
    props: {
      defId: {
        type: String,
        default: '',
      },
      instId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        showFllowSetting: false,
      }
    },
    computed: {
      nodes() {
        return this.$store.state.process.nodes
      },
      checkedNodes: {
        get() {
          return this.$store.state.process.checkedNodes
        },
        set() {},
      },
    },
    methods: {
      cancel() {
        this.showFllowSetting = false
      },
      confirm() {
        const { length } = this.checkedNodes
        if (!length) {
          this.$message.warning('请选择跟踪节点')
          return
        }
        const data = { taskId: '' }
        for (let i = 0; i < length; i++) {
          data.taskId = data.taskId + this.checkedNodes[i] + ','
        }
        data.proInst = this.instId
        taskFollowSave(data, (res) => {
          if (res.state) {
            this.showFllowSetting = false
            this.$message.success(res.message)
          }
        })
      },
      handleCheck(nodeId) {
        const index = _.findIndex(this.checkedNodes, (item) => item == nodeId)
        if (index != -1) {
          this.$store.dispatch('process/setCheckedSplice', index)
        } else {
          this.$store.dispatch('process/setCheckedPush', nodeId)
        }
      },
      handleOpen() {
        this.showFllowSetting = true

        const data = {
          defId: this.defId,
          proInst: this.instId,
        }
        this.$store.dispatch('process/getTaskNodeById', data)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    align-items: center;
    border: 1px solid #ebeef5;
    height: 100%;
    .label {
      width: 80px;
      padding: 20px;

      &::before {
        display: inline-block;
        content: '*';
        color: #f50;
        margin-right: 2px;
      }
    }
    .node-list {
      padding: 20px;
      border-left: 1px solid #ebeef5;
    }
  }
  ::v-deep .el-dialog__footer {
    // border: none;
  }
</style>
