<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      fullscreen
      append-to-body
      :show-close="false"
    >
      <div>
        <div class="steps">
          <el-steps :space="120" finish-status="success" align-center>
            <el-step
              :title="node.name"
              status="finish"
              icon="el-icon-edit"
            ></el-step>
            <el-step
              title="流转到下一节点"
              icon="el-icon-right"
              status="wait"
            ></el-step>
          </el-steps>
        </div>

        <el-divider></el-divider>

        <div class="next-nodes">
          <div class="next-nodes__label">下一节点</div>

          <div>
            <el-radio-group v-model="form.next_node_id">
              <el-radio v-for="node in node.nextNodes" :label="node.id">{{ node.name }}</el-radio>
            </el-radio-group>
          </div>
        </div>

        <el-divider></el-divider>

        <div class="users">
          <div class="users__label">承办人员</div>

          <div>

          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$emit('update:visible',false)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getNextNodeUsers } from "@/api/flow";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    config: Object,
    result: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        cc_users: [],
        user_id: "",
        next_node_id: "",
      },

      node2Users: new Map()
    };
  },
  methods: {
    async getNextNodesUsers() {
      try {

        const res = await Promise.all(this.node?.nextNodes?.map(node => getNextNodeUsers({
          id: this.result.id,
          next_node_id: node.id,
        },false)));
        console.log(res)
      } catch (err) {
        console.error(err)
      }
    }
  },
  computed: {
    title() {
      return this.config?.customModel?.name + '流转'
    },
    node() {
      return this.config?.currentNode || {};
    },
  },
  watch: {
    node: {
      handler:function (newVal) {
        if(newVal && newVal.nextNodes && newVal.nextNodes?.length > 0) {
          this.getNextNodesUsers()
        }
      }
    },
    immediate: true
  },
  created() {}
};
</script>

<style scoped lang="scss">
.next-nodes,.users {
  display: flex;

  &__label {
    flex-basis: 100px;
    font-weight: 600;
    color: #666;
  }
}
</style>
