<template>
  <div>
    <!-- <div class="banner">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/business/index">业务中心</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/business/index">内部事务</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/business/listmanagement">事项清单管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>事项清单变更</a-breadcrumb-item>
      </a-breadcrumb>
    </div>-->

    <div class="content">
      <div class="view">
        <div class="form-item-title" id="anchor-one">
          <span class="bar"></span>
          <span class="text">基本信息</span>
        </div>
        <p class="basicInfo">
          <span>发起单位 :{{infoobj.departmentname}}</span>
          <span>发起人 :{{infoobj.username}}</span>
          <span>发起时间 : {{infoobj.starttime}}</span>
          <span>当前节点 : {{infoobj.currentnode}}</span>
        </p>
        <div class="form-item-title" id="anchor-one">
          <span class="bar"></span>
          <span class="text">当前办件信息</span>
        </div>
        <a-alert :message="tyeText" type="info" showIcon />
        <div class="list">
          <ul>
            <li>
              <div class="row header">
                <span class="index">序号</span>
                <span class="name">当前事项名称</span>
                <span class="latername">调整后事项名称</span>
                <!-- <span class="operation">操作</span> -->
              </div>
            </li>
            <!-- <li class="loading" v-if="spinning">
              <a-spin :spinning="spinning"/>
            </li>-->
            <template>
              <li class="item" v-for="(item, index) in currentDoThingList" :key="index">
                <div class="row">
                  <span class="index">{{item.index}}</span>
                  <span class="name">
                    <p>主项 ：{{item.currentBusiness.mainBusiness.name}}</p>
                    <p
                      v-if="item.currentBusiness.childBusiness.name==''?false:true"
                    >子项 ：{{item.currentBusiness.childBusiness.name}}</p>
                    <p>事项编码 ：3</p>
                  </span>
                  <span class="latername">
                    <!-- //调整后事项名称 -->
                    主项 ：
                    <!-- {{item.afterBusiness.mainBusiness.name}} -->
                    <a-input
                      v-if="item.afterBusiness.mainBusiness.name==''?true:false"
                      @change="changeList"
                      style="margin-bottom: 5px;width: 60%;"
                      :data-suoyin="item.index"
                      :placeholder="item.afterBusiness.mainBusiness.name"
                    />
                    <!-- <a-input-group compact> -->
                    <!-- <a-select
                      @change="changeList3"
                      :data-suoyin="item.index"
                      v-if="item.afterBusiness.mainBusiness.name==''?false:true"
                      style="margin-bottom: 5px;width: 60%;"
                    >
                      <a-select-option
                        v-for="(item, index) in dataSource"
                        :key="index"
                        :value="item"
                      >{{item}}</a-select-option>
                      <a-select-option value="Jiangsu">Jiangsu</a-select-option>
                    </a-select>-->

                    <a-select
                      style="margin-bottom: 5px;width: 60%;"
                      @change="changeList3(item.index)"
                      v-model="selectVal[index]"
                      :data-suoyin="item.index"
                      :placeholder="item.afterBusiness.mainBusiness.name"
                      v-if="item.afterBusiness.mainBusiness.name==''?false:true"
                    >
                      <a-select-option
                        v-for="(item, index) in dataSource"
                        :key="index"
                        :value="item"
                      >{{item}}</a-select-option>
                    </a-select>

                    <!-- </a-input-group> -->
                    <br />
                    <br />
                    <span v-if="item.afterBusiness.mainBusiness.name==''?false:true">
                      子项 ：
                      <a-input
                        @change="changeList1"
                        style="width: 60%;"
                        :data-suoyin="item.index"
                        :placeholder="item.afterBusiness.childBusiness.name"
                      />
                    </span>
                  </span>
                  <!-- <span class="operation">删除</span> -->
                </div>
              </li>
            </template>
          </ul>
        </div>
        <!-- //审批记录 -->
        <div v-if="HaveToDealWith==1?false:true" class="form-item-title" id="anchor-one">
          <span class="bar"></span>
          <span class="text">审批记录</span>
        </div>
        <div v-if="HaveToDealWith==1?false:true">
          <a-steps :current="1">
            <a-popover slot="progressDot" slot-scope="{index, status, prefixCls}">
              <template slot="content">
                <span>
                  经办人 : {{index}}
                  <br />
                  经办时间: {{status}}
                  <br />
                  返回理由:{{prefixCls}}
                </span>
              </template>
              <span :class="`${prefixCls}-icon-dot`"></span>
            </a-popover>
            <a-step title="提交申请" description />
            <a-step title="退回" description />
            <a-step title="提交申请" description />
            <a-step title="审核通过" description />
          </a-steps>
        </div>
        <!-- //按钮 -->
        <div v-if="aaa==1" class="button" style="marginTop:20px;">
          <a-button @click="auditPass" type="primary" style="margin-right: 15px;">提交申请</a-button>
          <a-button @click="sendBack">取消</a-button>
        </div>
      </div>
    </div>
    <!-- //对话框 -->
    <div>
      <!-- <a-button type="primary" @click="showModal">Open Modal with async logic</a-button> -->
      <a-modal
        title="审核信息确认"
        :visible="visible"
        @ok="handleOk"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
      >
        <p>{{ModalText}}</p>
      </a-modal>
      <!-- //取消框输入信息 -->
      <a-modal
        title="取消申请提交"
        :visible="visible1"
        @ok="handleOk1"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel1"
      >
        <p>
          <a-input placeholder="请填写取消建议" v-model="backinfo" />
        </p>
      </a-modal>
    </div>
  </div>
</template>
<script>
import { passOrBack, namelike, detail, resubmit } from "@/api/approvalist";
export default {
  name: "IistIndex",
  data() {
    return {
      HaveToDealWith: this.$route.params.HaveToDealWith,
      buttonShow: this.$route.params.buttonShow, //备注已办都不需要按钮 所以隐藏
      dataSource: ["q", "w", "e", "r"],
      listChange: this.$route.params.listChange,
      id: this.$route.params.id,
      isadd: 1,
      selectVal: [],
      infoobj: {
        id: "", //当前变更ID
        currentnode: "", //当前节点
        starttime: "", //发起时间
        username: "", //发起人
        departmentname: "", //发起单位
        mainbusinessnumber: "", //主项
        childbusinessnumber: "", //子项
        businessnumber: "" //主项个数
      }, //信息对象
      examineList: [], //审批记录数组
      currentDoThingList: [], //当前办件信息数组
      condition: true, //控制dislogo
      ModalText: "请确认是否通过审核",
      visible: false,
      visible1: false, //控制退回
      confirmLoading: false,
      backinfo: "", //退回信息
      aaa: this.$route.params.aaa,
      businessListBeans: [
        {
          childBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          },
          mainBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          }
        },  {
          childBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          },
          mainBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          }
        }
      ]
    };
  },
  created() {
    this.detaily();
    setTimeout(() => {
      this.namelikey();
    }, 200);
  },
  watch: {},
  methods: {
    changeList(e) {
      //输入框的回调事件  主项 的 输入框
      console.log(e.target.value, "主项");
      // console.log(this.currentDoThingList)
      this.currentDoThingList.forEach((item, index) => {
        if (e.target.dataset.suoyin == item.index) {
          this.businessListBeans[index].mainBusiness.name = e.target.value; //输入框  主项变更后的名字
          this.businessListBeans[index].mainBusiness.id = item.currentBusiness.mainBusiness.id;
          this.businessListBeans[index].mainBusiness.code = item.currentBusiness.code;
        }
      });
    },
    changeList3(e) { 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//主要下拉框 这里后台数据和返回的数据不一所以  这里也可以动态创建一个对象businessListBeans//=》push数组里面
      //这里有问题 内部需要一个判断 拿不到id 或者 index  主项的下拉框
      this.currentDoThingList.forEach((item, index) => {
        if (e - 1 == index) {
          this.businessListBeans[index].mainBusiness.name = this.selectVal[index]; //下拉框  主项变更后的名字
           console.log(index)
          console.log(this.businessListBeans,"左边")
          console.log(this.currentDoThingList,"右边")
          this.businessListBeans[index].mainBusiness.id = item.currentBusiness.mainBusiness.id;
          this.businessListBeans[index].mainBusiness.code = item.currentBusiness.mainBusiness.code;
        }
      });
    },
    changeList1(e) {
      //输入框的回调事件  子项
      // console.log(e.target.value, "子项");
      this.currentDoThingList.forEach((item, index) => {
        if (e.target.dataset.suoyin == item.index) {
          this.businessListBeans[index].childBusiness.name = e.target.value; //子项变更后的名字
          this.businessListBeans[index].childBusiness.id = item.currentBusiness.childBusiness.id;
          this.businessListBeans[index].childBusiness.code = item.currentBusiness.childBusiness.code;
        }
      });
    },
    namelikey() {
      namelike().then(res => {
        console.log(res, "根据事项名称模糊查询");
        this.dataSource = res.result;
        //  如果=当前事项名称=只有主项没有子项的话 右边的 =调整后事项名称= 也只有主项 无子项 只能手动输入
        console.log(this.currentDoThingList);
        // this.currentDoThingList.forEach(item => {
        //   if (item.childBusiness.name == "") {
        //     this.dataSource = [];
        //     return;
        //   }
        // });
      });
    },
    tyeText() {                                           　　　　　　　　　　　　　　　　　　//通过函数放置字符串
      if (this.isadd) {
        var tex = `新增 ${this.infoobj.businessnumber} 项`;
      } else {
        var tex = `新增1项`;
      }
      return tex;
    },
    detaily() {
      detail(this.id).then(res => {
        console.log(res, "获取变更的申请记录详细信息");
        this.infoobj.id = res.result.id;
        this.infoobj.currentnode = res.result.currentnode;
        this.infoobj.starttime = res.result.starttime;
        this.infoobj.username = res.result.username;
        this.infoobj.departmentname = res.result.departmentname;
        this.infoobj.mainbusinessnumber = res.result.mainbusinessnumber;
        this.infoobj.childbusinessnumber = res.result.childbusinessnumber;
        this.infoobj.businessnumber = res.result.businessnumber;
        //当前办件信息数组
        res.result.businessListUpdateBeans.forEach((item, index) => {
          item.index = index + 1;
        });
        this.currentDoThingList = res.result.businessListUpdateBeans;
        // let info = [{name:'',id:''}]
        //  this.currentDoThingList.forEach(item=>{
        //    itme.name = info
        //  })
        // 审批记录数组
        // this.examineList = res.result.approvalrecords;
        // console.log(this.examineList, "0909");
      });
    },
    auditPass() {
      //审核通过
      this.showModal();
    },
    sendBack() {
      //退回
      //   passOrBack(this.id, false, "").then(res => {
      //     console.log(res);
      //   });
      this.visible1 = true;
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      //弹框的ok
      // if (this.resubmitVo.length == 0) {
      //   this.$notification.open({
      //     message: "提交失败",
      //     description: "表单内容为空,请重新尝试",
      //     onClick: () => {
      //       console.log("提交失败");
      //     }
      //   });
      //   return;
      // }
      // if (this.isCL == 101) {
      //   this.XZadd = 1;
      // } else if (this.isCL == 102) {
      //   console.log("撤销");
      //   this.XZadd = 2;
      // }
      // resubmit(this.resubmitVo, this.XZadd, this.recordid).then(res => {
      //   if (res.code == "form_valid_failed") {
      //     this.$notification.open({
      //       message: "提交失败",
      //       description: "表单内容重复,请重新尝试",
      //       onClick: () => {
      //         console.log("提交失败");
      //       }
      //     });
      //   }
      //   console.log(
      //     this.resubmitVo,
      //     this.XZadd,
      //     this.recordid,
      //     "这里看完成后的数据"
      //   );
      //   console.log(res, "更改成功");
      // });
      // this.$router.push({ name: "listrecord" });
      resubmit(this.businessListBeans, 3, this.id).then(res => {
        console.log(res, "结果集");
      });
    },
    handleCancel(e) {
      //弹框的取消
      console.log("审核未通过");
      this.visible = false;
    },
    //退回
    handleOk1(e) {
      //弹框的退回
      passOrBack(this.id, true, this.backinfo).then(res => {
        // console.log(res);
        this.ModalText = "退回成功";
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible1 = false;
          this.confirmLoading = false;
        }, 2000);
      });
      this.$router.push({ name: "listrecord" });
    },
    handleCancel1(e) {
      //弹框的取消
      //   console.log("退回未通过");
      this.visible1 = false;
    }
  }
};
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  padding: 24px;
  background: #fff;
}
.content {
  padding: 0px 12px;
  .view {
    margin-top: 12px;
    padding: 24px 24px;
    overflow: hidden;
    justify-content: left;
    background: #fff;
    .statistics {
      padding: 5px;
      display: flex;
      align-items: center;
      background-color: #e9f7fa;
      border-radius: 2px;
      border: solid 2px #0f6ddc;
      p {
        margin-bottom: 0;
      }
      span {
        color: #0f6ddc;
      }
    }
  }
}
.list {
  width: 100%;
  margin-top: 24px;
  ul {
    margin: 0px;
    padding: 0px;
    li {
      height: 42px;
      transition: ease-out 0.3s all;
      list-style: none;
      &.active {
        height: auto;
      }
      &.loading {
        text-align: center;
        padding: 30px;
      }
      .row {
        width: 100%;
        height: 42px;
        line-height: 42px;
        display: flex;
        // justify-content: space-between;
        color: #171717;
        border-bottom: 1px solid #f3f3f3;
        &:hover {
          background: #f3f3f3;
          cursor: pointer;
        }
        &.header {
          font-size: 15px;
          color: #595959;
          background: #f6f6f6;
          .release {
            color: #595959;
          }
        }
        span {
          &.name {
            width: 40%;
          }
          &.latername {
            width: 40%;
          }
          &.index {
            width: 10%;
            padding-left: 15px;
          }
          &.operation {
            width: 10%;
          }
        }
      }
    }
  }
}
.item {
  height: 90px !important;
  .row {
    height: 90px !important;
    line-height: 15px !important;
    display: flex;
    align-items: center;
  }
  p {
    margin-bottom: 8px;
  }
  .operation {
    padding-left: 15px;
    color: #0f6ddc;
  }
}
.plus {
  margin: 20px 0;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: dashed 1px #c6c6c6;
  &:hover {
    border: dashed 1px #0f6ddc;
    color: #0f6ddc;
    cursor: pointer;
  }
}
.form-item-title {
  margin-top: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  span {
    &.bar {
      width: 3px;
      height: 15px;
      background: #1890ff;
    }
    &.text {
      font-size: 16px;
      color: #1890ff;
      margin-left: 10px;
    }
  }
}
// .basicInfo {
//   span:nth-of-type(1) {
//     margin-right: 150px;
//   }
//   span:nth-of-type(2) {
//     margin-right: 150px;
//   }
//   span:nth-of-type(3) {
//     margin-right: 150px;
//   }
// }
</style>