<template>
  <div class="container">
    <!-- 顶部内容框 -->
    <div class="topButton">
      <!-- 左侧业务功能按钮 -->
      <ul>
        <li
          @click="operation(index, item)"
          v-for="(item, index) in leftButtonList"
          :key="index"
        >
          <svg-icon :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
      <!-- 右侧流程按钮 -->
      <ul>
        <li
          @click="operation(index, item)"
          v-for="(item, index) in rightButtonList"
          :key="index"
        >
          <svg-icon class="icon" :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <!-- 内容框架 -->
    <div id="ContainerFrame">
      <!-- 左侧菜单栏 -->
      <div id="leftmenu">
        <div class="title">申请单元列表({{ unitData.length }})</div>
        <!-- <ul>         
          <div v-for="(item, index) in unitData" :key="index">
            <li @click="unitClick(item)">
              <p>{{ item.bdcdyh }}</p>
              <p>{{ item.zl }}</p>
            </li>           
          </div>
        </ul> -->
        <el-menu default-active="0" @select="selectItems">
          <el-menu-item
            v-for="(item, index) in unitData"
            :index="index.toString()"
            :key="index"
          >
            <i>
              <p>{{ item.bdcdyh }}</p>
              <p>{{ item.zl }}</p>
            </i>
          </el-menu-item>
        </el-menu>
        
      </div>
      <!-- 表单内容区域 -->
      <div id="rightContainer">
        <div class="tabDiv">
          <el-tabs v-model="tabName" @tab-click="tabClick">
            <el-tab-pane
              :label="item.name"
              :name="item.value"
              v-for="(item, index) in tabList"
              :key="index"
            >
            </el-tab-pane>
          </el-tabs>
          <component
            :key="fresh"
            :is="componentTag"
            v-bind="currentSelectProps"
          />
        </div>
        <!-- <div style="width: 100%">
         
        </div> -->
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import "./workFrame.scss";
</style>

<script>
import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
export default {
  components: {
    //注册表单组件，后期改为路由模式
    slxx: () => import("./components/slxx.vue"),
    spyj: () => import("./components/spyj.vue"),
    zdjbxx: () => import("../../zhcx/djbcx/components/zdxx.vue"),
    qlxx: () => import("../../zhcx/djbcx/components/jsydsyq.vue"),
  },
  data() {
    return {      
       //受理申请标识码
      bsmSlsq: "",
       //当前流程所在环节
      bestepid: "",
       //顶部左侧按钮集合
      leftButtonList: [],
       //顶部右侧按钮集合
      rightButtonList: [],
       //左侧菜单数据集合
      unitData: [],
       //设置那个表单选中
      tabName: "",      
       //表单集合
      tabList: [],
       //选择加载哪一个组件
      componentTag: "",
      //设置表单组件是否刷选值
      fresh: 0,
      //设置表单传递数据
      currentSelectProps: {},
    };
  },
  mounted() {
    this.bsmSlsq = this.$route.query.bsmSlsq;
    this.bestepid = this.$route.query.bestepid;
    this.loadBdcdylist();
    this.flowInitParam();
  },
  methods: {
    selectItems(index) {
      //this.$alert(this.unitData[index].bsmSldy);
      //this.$store.state.adminleftnavnum = index;

      if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
        this.currentSelectProps = this.unitData[index];
        this.fresh += 1;
      }

    
      //按钮选中之后设置当前的index为store里的值。
    },
    //加载流程初始参数
    flowInitParam() {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
      stepExpandInfo(formdata).then((res) => {
        if (res.code === 200) {
          this.leftButtonList = res.result.button;
          this.rightButtonList = res.result.operation;
          this.tabList = res.result.form;
          //默认选择第一个选项卡内容
          this.tabName = res.result.form[0].value;
          //默认加载第一个选项卡的组件内容
          this.componentTag = res.result.form[0].value;
        }
      });
    },
    //流程环节操作按钮
    operation(index, item) {
      let that = this;
      switch (item.value) {
        case "zsyl":
          this.zsylFlag = true;
          break;
        case "clfp":
          this.key++;
          this.issplitScreen = !this.issplitScreen;
          this.flag = !this.flag;
          if (this.issplitScreen) {
            this.tabList.splice(1, 1);
          } else {
            this.tabList = [...this.tabList1];
          }
          break;
        case "th":
          this.thflag = true;
          this.$nextTick(() => {
            this.$refs.thdialogRef.tablelistFn();
          });
          break;
        case "zc":
          this.zcDialog = true;
          this.$refs.zcDialogRef.tablelistFn();
          break;
        case "tc":
          window.close();
          break;
        case "db":
          var formdata = new FormData();
          formdata.append("bsmSlsq", this.bsmSlsq);
          formdata.append("bestepid", this.bestepid);
          // comMsg;
          this.$confirm("请确认是否登簿", "提示", {
            iconClass: "el-icon-question", //自定义图标样式
            confirmButtonText: "确认", //确认按钮文字更换
            cancelButtonText: "取消", //取消按钮文字更换
            showClose: true, //是否显示右上角关闭按钮
            type: "warning", //提示类型  success/info/warning/error
          }).then(function () {
            record(formdata).then((res) => {
              if (res.code === 200 || res.code === 2002) {
                that.$alert(res.message);
              }
            });
          });
          break;
      }
    },
    loadBdcdylist() {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
      leftMenu(formdata).then((res) => {
        if (res.code === 200) {
          this.unitData = res.result;
          // this.unitData.push({
          //   bsmSldy: "edd5ffc12c8dcc237ad06447618dcddc",
          //   bsmBusiness: "ee5187fa978c9002c3a2991ae5d70482",
          //   bsmSsql: null,
          //   ybdcqzsh: null,
          //   bdcdyid: "dded1d6615be4fbf02de75c93bb5084e",
          //   bdcdyh: "610102123666GB10165W00000000",
          //   bdcdylx: null,
          //   xmmc: null,
          //   jzwmc: null,
          //   fh: null,
          //   zl: "陕西省新城区大庆路1号村",
          //   bglx: "0",
          //   wqhtid: null,
          //   wqhtbh: null,
          //   htlx: null,
          //   wqsj: null,
          //   ydybh: null,
          //   djyy: "GYJSY2222D",
          //   qllx: "A03",
          //   djlx: "200",
          //   sqzsbs: null,
          //   gyfs: null,
          //   sqfbcz: null,
          //   sfxysczs: null,
          //   sfxyffzs: null,
          //   issave: null,
          //   taskId: null,
          // });
          // this.unitData.push(res.result[0]);
          // this.unitData.push(res.result[0]);
          this.currentSelectProps = res.result[0];
          //debugger;
          //this.$alert(res.result[0].bsmSldy);
          // setTimeout(() => {
          //   that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
          //   this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
          // }, 300);
        }
      });
    },
    //  左侧列表点击调用接口
    unitClick(item) {
      // this.bsmBusiness = item.bsmBusiness
      // var activeTabName = this.activeName
      // if(activeTabName == 'slxx'){
      //   //受理信息页面接口调取
      //   this.$nextTick(() => {
      //     this.$refs.slxx[0].list(item.bsmSldy)
      //   })
      // }else if(activeTabName == 'spyj'){
      //   //审批页面接口调取
      //   this.$nextTick(() => {
      //     this.$refs.spyj[0].list(this.bsmBusiness,this.queryForm.bestepid)
      //   })
      // }
    },
    tabClick(tab, event) {
      this.componentTag = tab.name;
    },
  },
};
</script>