<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">取消</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"
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(); //刷新父窗口
            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]
          }
        }
      })
    },
  }
}
</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>