<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-02 14:24:20
-->
<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.assignee" :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/workFlow.js"
  import { popupCacel } from "@/utils/popup.js";

  export default {
    props: {
      formData: {
        type: Object,
        default: {},
      },
    },
    data () {
      return {
        selectActivity: "",
        dataList: [],
        outstepopinion: "",
        selectItem: {},
      };
    },
    created () {
      this.getBackNode();
    },
    methods: {
      /**
       * @description: onSubmit
       * @author: renchao
       */
      onSubmit () {
        if (!this.outstepopinion) {
          this.$message.error("请填写退回意见");
        } else {
          sendBackTask({
            bsmSlsq: this.formData.bsmSlsq,
            backNodeList: [this.selectItem],
            message: this.outstepopinion
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("退回成功");
              setTimeout(() => {
                if (window.opener && window.opener.getBpageList) {
                  window.opener.getBpageList();
                } else {
                  window.opener.frames[0].getBpageList();
                }
                window.close();
                this.$emit("input", false);
              }, 1000);
            } else {
              this.$message.error(res.message);
            }
          });
        }
      },
      /**
       * @description: changeSelectItem
       * @param {*} item
       * @author: renchao
       */
      changeSelectItem (item) {
        this.selectItem = item;
        this.selectActivity = item.activityId;
      },
      //获取可回退环节信息
      /**
       * @description: 获取可回退环节信息
       * @author: renchao
       */
      getBackNode () {
        getTaskBackNode(this.formData).then((res) => {
          if (res.code == 200) {
            this.dataList = res.result;
            console.log("this.dataList", this.dataList);
            if (res.result) {
              this.selectActivity = res.result[0].activityId;
              this.selectItem = res.result[0];
            }
          }
        });
      },

      /**
       * @description: cancelBack
       * @author: renchao
       */
      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>