<template>
  <div class="fqsq">
    <div class="fqsq-header">
      <ul>
        <li
          @click="operation(index, item)"
          v-for="(item, index) in headerleftList"
          :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 headerRightList"
          :key="index"
        >
          <svg-icon class="icon" :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="tabsList">
      <div class="tabsList-left">
        <div
          class="map-drawer-click"
          v-if="!isShowdrawer"
          @click="
            () => {
              this.isShowdrawer = !this.isShowdrawer;
            }
          "
        ></div>
        <div
          class="map-drawer-expand"
          v-else
          @click="
            () => {
              this.isShowdrawer = !this.isShowdrawer;
            }
          "
        ></div>
        <ul v-if="this.isShowdrawer">
          <p class="title">申请单元列表({{ unitData.length }})</p>
          <div v-for="(item, index) in unitData" :key="index">
            <li @click="unitClick(item)">
              <p>{{ item.bdcdyh }}</p>
              <p>{{ item.zl }}</p>
            </li>
            <div class="xian"></div>
          </div>
        </ul>
      </div>
      <div class="tabsList-right">
        <div class="fenpin" v-show="issplitScreen">
          <p class="splitScreen tabsList-title">材料信息</p>
          <div class="splitScreen"></div>
        </div>
        <div style="width: 100%">
          <el-tabs v-model="activeName" @tab-click="activeClick">
            <el-tab-pane
              :label="item.name"
              :name="item.value"
              v-for="(item, index) in tabList"
              :key="index"
            >
            </el-tab-pane>
          </el-tabs>
          <div class="splitScreen-con">
            <component
              ref="slxx"
              v-if="activeName == 'slsq'"
              :is="editItem"
              :flag="flag"
              :fetch='fetch'
              :key="key"
            />
            <component :is="editItem" v-else :key="key" />
          </div>
        </div>
      </div>
    </div>
    <zc ref="zcDialogRef" v-model="zcDialog" :queryForm="queryForm" />
    <thDialog
      ref="thdialogRef"
      v-model="thflag"
      :bsmBusiness="bsmBusiness"
      :queryForm="queryForm"
    />
    <zslqDialog ref="zslqDialog" v-model="zslqDialog" />
    <zsylDialog v-model="zsylFlag" />
  </div>
</template>
<script>
import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
import comMsg from "@/views/components/comMsg.vue";
import zc from "./components/zc.vue";
import thDialog from "./components/th.vue";
import zsylDialog from "./components/zsyl";
import zslqDialog from "./components/zslq";
export default {
  /**注册组件*/
  components: { zc, thDialog, zsylDialog, comMsg,zslqDialog},
  data() {
    return {
      zsylFlag: false,
      zcDialog: false,
      thflag: false,
      zslqDialog: false,
      queryForm: {
        bsmSlsq: "",
        bestepid: "",
        bsmBusiness: ""
      },
      isShowdrawer: true,
      key: 0,
      flag: false,
      headerleftList: [],
      headerRightList: [],
      activeName: "",
      tabList1: [],
      tabList: [],
      editItem: "",
      issplitScreen: false,
      unitData: [],
      bsmBusiness: "",
      fetch: false
    };
  },
  watch: {
    activeName: {
      handler(newName, oldName) {
        if (newName === "qlxx") {
          this.editItem = this.loadViewSlsq();
        } else {
          this.editItem = this.loadView(newName);
        }
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.$route.query.bsmSlsq) {
      this.expandInfo(this.$route.query.bsmSlsq, this.$route.query.bestepid);
      this.queryForm.bsmSlsq = this.$route.query.bsmSlsq;
      this.queryForm.bestepid = this.$route.query.bestepid;
      this.queryForm.bsmBusiness = this.$route.query.bsmBusiness;
      this.list();
    }
  },
  methods: {
    // 获取左侧列表
    list() {
      let that = this;
      var formdata = new FormData();
      formdata.append("bsmSlsq", that.queryForm.bsmSlsq);
      formdata.append("bestepid", that.queryForm.bestepid);
      formdata.append("bsmBusiness", that.queryForm.bsmBusiness);
      leftMenu(formdata).then((res) => {
        if (res.code === 200) {
          this.unitData = res.result ? res.result : [];
          setTimeout(() => {
            that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
            this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
          }, 300);
        }
      });
    },
    //获取环节扩展信息
    expandInfo(bsmSlsq, bestepid) {
      let that = this;
      var formdata = new FormData();
      formdata.append("bsmSlsq", bsmSlsq);
      formdata.append("bestepid", bestepid);
      stepExpandInfo(formdata).then((res) => {
        if (res.code === 200) {
          this.tabList1 = [...res.result.form];
          this.tabList = res.result.form;
          this.activeName = res.result.form[0].value;
          this.headerleftList = res.result.button;
          this.headerRightList = res.result.operation;
        }
      });
    },
    activeClick(tab, event) {
      if (tab.name == "slxx") {
        this.list();
      }
    },
    //  左侧列表点击调用接口
    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)
        })  
      }
    },
    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 "zslq":
          this.zslqDialog = true;
          this.$refs.zslqDialog.tablelistFn();
          break;  
        case "db":
          var formdata = new FormData();
          formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
          formdata.append("bestepid", this.$route.query.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;
      }
    },
    loadView(view) {
      return (r) =>
       require.ensure([], () => r(require(`./components/${view}.vue`)));
    },
    loadViewSlsq() {
      return (r) =>
        require.ensure([], () =>
          r(require("../../components/jsydsyq/jsydsyq.vue"))
        );
    },
  },
};
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";

/deep/.svg-icon {
  width: 2.5em;
  height: 2.5em;
}

/deep/.el-tabs__nav-wrap {
  padding: 5px 0 0 15px;
}

/deep/.el-tabs__nav-wrap::after {
  height: 1px;
}

.iconName {
  line-height: 24px;
  font-size: 12px;
}

/deep/.el-tabs__header {
  margin: 0 !important;
}

.splitScreen-con {
  padding: 0 15px;
  box-sizing: border-box;
  height: calc(100% - 350px);
}

.fqsq {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;

  .splitScreen {
    min-width: 50%;
  }

  &-header {
    @include flex;
    width: 100%;
    height: 80px;
    background-color: #3498db;
    color: #ffffff;
    justify-content: space-between;
    padding-left: 15px;
    position: sticky;
    top: 0;
    z-index: 100;

    ul {
      @include flex;

      li {
        @include flex-center;
        cursor: pointer;
        flex-direction: column;
        margin-right: 15px;
        box-sizing: border-box;
        width: 70px;
        margin: 0 5px;
      }

      li:hover {
        border: 1px solid #ffffff;
        border-radius: 5px;
        //color: $light-blue ;

        .svg-icon {
          //color: $light-blue ;
        }
      }
    }
  }

  .map-drawer-expand {
    width: 20px;
    height: 77px;
    background: url("../../../image/right.png");
    background-size: cover;
    position: absolute;
    right: 0%;
    top: 30%;
    z-index: 99;
    cursor: pointer;
  }

  .map-drawer-click {
    width: 20px;
    height: 77px;
    background: url("../../../image/left.png");
    background-size: cover;
    position: absolute;
    left: 0%;
    top: 30%;
    z-index: 999;
    cursor: pointer;
  }

  .hide {
    display: none;
  }

  .tabsList {
    width: 100%;
    position: sticky;
    top: 80px;
    background-color: #ffffff;
    z-index: 100;
    @include flex;

    .tabsList-left {
      border-right: 1px solid #ebeef5;
      position: relative;
      box-sizing: border-box;

      ul {
        position: relative;

        .xian {
          background: #f2f2f2;
          padding: 2px;
        }

        .title {
          padding: 20px;
          text-align: center;
        }

        li {
          padding: 10px;
          font-size: 14px;
          color: #606266;
          line-height: 20px;
        }

        li:hover {
          color: #0f93f6;
          cursor: pointer;
        }
      }
    }

    .tabsList-right {
      .fenpin {
        min-width: 50%;
        border-right: 1px solid #ebeef5;
      }

      background-color: #ffffff;
      width: 100%;
      height: 100%;
      z-index: 100;
      @include flex;
    }
  }

  .tabsList-title {
    display: block;
    line-height: 59px;
  }

  /deep/.el-tabs {
    width: 100%;
  }
}
</style>