<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>
        <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">
            <div class="splitScreen-con">
              <component ref='slxx' v-if='index == 0' :is="editItem" :flag="flag" :key="key" />
              <component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" />
              <component :is="editItem" v-else :key="key" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' />
    <thDialog ref='thdialogRef' v-model="thflag" :taskId='taskId' :bsmBusiness='bsmBusiness' :queryForm='queryForm' />
    <zsylDialog v-model='zsylFlag' />
  </div>
</template>
<script>
import { leftMenu, stepExpandInfo } from "@/api/fqsq.js"
import zc from "./components/zc.vue"
import thDialog from "./components/th.vue"
import zsylDialog from './components/zsyl'
export default {
  /**注册组件*/
  components: { zc, thDialog, zsylDialog },
  data () {
    return {
      zsylFlag: false,
      zcDialog: false,
      thflag: false,
      queryForm: {
        bsmSlsq: "",
        bestepid: "",
      },
      isShowdrawer: true,
      key: 0,
      flag: false,
      headerleftList: [],
      headerRightList: [
        {
          name: '登簿',
          icon: 'fqsq2',
          value: 'db'
        },
        {
          name: '退回',
          icon: 'fqsq8',
          value: 'th'
        },
        {
          name: '转出',
          icon: 'fqsq9',
          value: 'zc'
        },
        {
          name: '退出',
          icon: 'del',
          value: 'tc'
        }
      ],
      activeName: 'slxx',
      tabList1: [],
      tabList: [],
      editItem: '',
      issplitScreen: false,
      unitData: [],
      taskId: "",
      bsmBusiness: "",
      id: "",
    };
  },
  watch: {
    activeName: {
      handler (newName, oldName) {
        this.editItem = this.loadView(newName)
      },
      immediate: true
    }
  },
  mounted () {
    if (this.$route.query.bsmSlsq) {
      this.expandInfo(this.$route.query.bsmSlsq, this.$route.query.bestepid);
      this.list(this.$route.query.bsmSlsq)
      this.queryForm.bsmSlsq = this.$route.query.bsmSlsq
      this.queryForm.bestepid = this.$route.query.bestepid
    }
  },
  methods: {
    // 获取左侧列表
    list (id) {
      let that = this
      that.id = id
      var formdata = new FormData();
      formdata.append("bsmSlsq", id);
      leftMenu(formdata).then(res => {
        console.log(res, 'eeeeeeeeeeee');
        if (res.code === 200) {
          this.unitData = res.result ? res.result : []
          setTimeout(() => {
            that.$refs?.slxx[0].list(that.unitData && that.unitData[0].bsmSldy)
            this.taskId = that.unitData[0].taskId
            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.headerleftList = res.result.button
        }
      })
    },
    activeClick (tab, event) {
      if (tab.name == 'slxx') {
        this.list(this.id)
      }
    },
    //  左侧列表点击调用接口
    unitClick (item) {
      this.taskId = item.taskId
      this.bsmBusiness = item.bsmBusiness
      this.$nextTick(() => {
        this.$refs.slxx[0].list(item.bsmSldy)
      })
    },
    operation (index, item) {
      if (item.value == 'zsyl') {
        this.zsylFlag = true

      } else if (item.value == 'clfp') {
        this.key++
        this.issplitScreen = !this.issplitScreen
        this.flag = !this.flag
        if (this.issplitScreen) {
          this.tabList.splice(1, 1)
        } else {
          this.tabList = [...this.tabList1]
        }
      } else if (item.value == 'th') {
        this.thflag = true
        this.$nextTick(() => {
          this.$refs.thdialogRef.tablelistFn()
        })
      }
      else if (item.value == 'zc') {
        this.zcDialog = true
        this.$refs.zcDialogRef.tablelistFn()
      } else if (item.value === 'tc') {
        window.close()
      }
    },
    loadView (view) {
      return r => require.ensure([], () => r(require(`./components/${view}.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__content {
  height: calc(100vh - 135px) !important;
}

.splitScreen-con {
  padding: 0 15px;
  box-sizing: border-box;
}

.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: 999;
    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;
      width: 250px;
      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>