<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:41:57
-->
<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>