<template>
  <div class="from-clues">
    <!-- 表单部分 -->
    <div class="from-clues-header">
      <div class="title">请选择要退回到的环节：</div>
      <el-form ref="queryForm" label-width="90px">
        <ul style="margin-bottom: 15px">
          <li
            v-for="(item, index) in dataList"
            class="listDetail"
            :key="index"
            @click="changeSelectItem(item)"
          >
            <p class="icon">
              <el-radio
                v-model="selectActivity"
                :label="item.activityId"
                @change="changeSelectItem(item)"
              ></el-radio>
            </p>
            <p>{{ item.activityName }}</p>
            <p v-for="(child, childIndex) in item.userInfos" :key="childIndex">
              {{ child.name }}
            </p>
          </li>
        </ul>
        <div class="title">退回意见：</div>
        <el-form-item>
          <el-input
            class="textArea"
            type="textarea"
            v-model="outstepopinion"
            placeholder="请输入退回意见"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="float:right" @click="cancelBack">取消</el-button>
          <el-button type="primary" @click="onSubmit" style="float:right">退回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import { getTaskBackNode, sendBackTask } from "@/api/fqsq.js"
import { popupCacel } from "@/utils/popup.js";

export default {
  props: {
    formData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      selectActivity: "",
      dataList: [],
      outstepopinion: "",
      selectItem: {},
    };
  },
  created() {
    this.getBackNode();
  },
  methods: {
    onSubmit() {
      this.selectItem.outstepopinion = this.outstepopinion;
      sendBackTask({
        bsmSlsq: this.formData.bsmSlsq,
        backNodeList: [this.selectItem],
      }).then((res) => {
        this.$message.success("退回成功");
        setTimeout(() => {
          // window.opener.location.reload(); //刷新父窗口
          if (window.opener && window.opener.getBpageList) {
            window.opener.getBpageList();
          } else {
            window.opener.frames[0].getBpageList();
          }
          window.close();
          this.$emit("input", false);
        }, 1000);
      });
    },
    changeSelectItem(item) {
      this.selectItem = item;
      this.selectActivity = item.activityId;
    },
    //获取可回退环节信息
    getBackNode() {
      getTaskBackNode(this.formData).then((res) => {
        if (res.code == 200) {
          this.dataList = res.result;
          if (res.result) {
            this.selectActivity = res.result[0].activityId;
            this.selectItem = res.result[0];
          }
        }
      });
    },

    cancelBack(){
      popupCacel();
    }
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";

.listDetail {
  display: flex;
  align-items: center;
  width: 100%;

  p {
    line-height: 30px;
    height: 30px;
    @include flex-center;
    flex: 1;
    width: 100%;
    border: 1px solid rgb(233, 235, 237);
    margin-top: -1px;
    margin-left: -1px;
  }

  .icon {
    flex: 0 0 60px;
  }
}

.title {
  margin-bottom: 10px;
}

.textArea {
  /deep/.el-textarea__inner {
    min-height: 90px !important;
  }
}
/deep/.el-radio .el-radio__label {
  display: none;
}
</style>