<template>
  <div class="container">
    <!-- 顶部内容框 -->
    <div class="topButton">
      <!-- 左侧业务功能按钮 -->
      <ul>
        <li @click="operation(index, item)" v-for="(item, index) in leftButtonList" :key="index">
          <svg-icon class="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 class="containerFrame">
      <!-- 左侧菜单栏 -->
      <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
        <div v-if="this.isShowdrawer">
          <div class="title">
            申请单元列表({{ unitData.length }})
            <el-button type="text" class="batchDel" @click="handleBatchDel" v-if="unitData.length > 1">批量删除</el-button>
          </div>
          <el-menu :default-active="activeIndex" @select="unitClick">
            <el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index">
              <div>
                <p>{{ item.bdcdyh }}</p>
                <p class="title-detail">{{ item.zl }}</p>
              </div>
              <i class="el-icon-delete" v-if="unitData.length > 1" @click.stop="handleDel(item)"></i>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
        <div class="map-drawer-expand map-drawer" v-else @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
      </div>
      <div class="leftCon">
        <!-- 分屏左侧预览 -->
        <div v-if="splitScreen" class="splitScreen-con">
          <component :is="clxxForm" v-bind="currentSelectProps" :key="fresh" />
        </div>
        <!-- 表单内容区域 -->
        <div class="rightContainer">
          <el-tabs v-model="tabName" @tab-click="tabClick">
            <el-tab-pane :label="item.name" :name="item.value" v-for="item in tabList" :key="item.value">
            </el-tab-pane>
          </el-tabs>
          <component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
        </div>
      </div>
    </div>
    <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
  </div>
</template>

<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import "./workFrame.scss";
</style>
<script>
import {
  leftMenu,
  stepExpandInfo,
  record,
  getNextLinkInfo,
  completeTask,
} from "@/api/fqsq.js";
import { deleteBdcdy } from "@/api/ywbl.js";
import { getWorkFlowImage } from "@/api/jsydsyqFlow.js";
import { getForm } from "./flowform.js";
import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js";
export default {
  components: {
    fqsqDialog,
  },
  data () {
    return {
      isDialog: false,
      // 流程图
      imgSrc: "",
      // 折叠
      isShowdrawer: true,
      // 默认选中
      activeIndex: "0",
      //受理申请标识码
      bsmSlsq: this.$route.query.bsmSlsq,
      //当前流程所在环节
      bestepid: this.$route.query.bestepid,
      //顶部左侧按钮集合
      leftButtonList: [],
      //顶部右侧按钮集合
      rightButtonList: [],
      //左侧菜单数据集合
      unitData: [],
      //设置那个表单选中
      tabName: "",
      //表单集合
      tabList: [],
      //选择加载哪一个组件
      componentTag: "",
      //设置表单组件是否刷选值
      fresh: 10,
      //设置表单传递数据
      currentSelectProps: {},
      //是否开启材料分屏
      splitScreen: false,
      //材料分屏表单
      clxxForm: "",
      //材料信息选择卡索引
      clxxIndex: "",
      //材料信息选项卡对象
      clxxTab: {},
    };
  },
  mounted () {
    this.loadBdcdylist();
    this.flowInitParam();
  },
  methods: {
    // 更新列表
    updateDialog () {
      this.loadBdcdylist();
    },
    // 删除左侧列表
    handleDel (item) {
      this.$confirm("确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteBdcdy({
            bsmSlsq: this.bsmSlsq,
            bsmSldyList: item.bsmSldy.split(","),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.loadBdcdylist();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleBatchDel () {
      let that = this;
      this.$popup({
        title: "批量删除",
        width: "50%",
        btnShow: true,
        editItem: "workflow/components/batchDel",
        height: "600px",
        formData: {
          bsmSlsq: this.bsmSlsq,
          dataList: this.unitData,
        },
        cancel: function () { }, //取消事件的回调
        confirm: function () {
          that.loadBdcdylist();
        }, //确认事件的回调
      });
    },
    //加载流程初始参数
    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;
          let that = this;
          this.tabList.forEach(function (item, index) {
            if (item.value == "clxx") {
              that.clxxIndex = index;
              that.clxxForm = getForm(item.value,that.$route.query.sqywbm);
              that.clxxTab = item;
            }
          });
          //默认加载第一个选项卡的组件内容
          this.getFromRouter(res.result.form[0].value);
        }
      });
    },
    //流程环节操作按钮
    operation (index, item) {
      //按钮 B0:选择不动产单元 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书 B7:证书领取 B8:楼盘表 B9:登簿
      //操作按钮 登簿：record  转件：transfer  退回：back  退出：signout
      let that = this;
      switch (item.value) {
        case "B0":
          // let type = queueDjywmc(this.$route.query.sqywbm)
          this.isDialog = true;
          break;
        case "B1":
          getWorkFlowImage(this.bsmSlsq).then((res) => {
            this.imgSrc = URL.createObjectURL(res);
            this.$popup({
              title: "流程图",
              btnShow: true,
              height: '250px',
              editItem: "workflow/components/flowChart",
              formData: this.imgSrc,
            });
          });
          break;
        case "B2": //材料分屏按钮
          this.splitScreen = this.splitScreen ? false : true;
          this.$store.dispatch("app/settScreen", this.splitScreen);
          if (this.splitScreen) {
            //如果当前选项卡为材料信息内容，递减到上一个选项卡内容
            if (this.tabName == this.clxxTab.value) {
              this.tabName = this.tabList[this.clxxIndex - 1].value;
              this.getFromRouter(this.tabList[this.clxxIndex - 1].value);
            }
            //删除材料信息选项卡数据
            this.tabList.splice(this.clxxIndex, 1);
          } else {
            //新增材料信息选项卡数据
            this.tabList.splice(this.clxxIndex, 0, this.clxxTab);
          }
          break;
        case "B4":
          this.$popup({
            titleStyle: "left",
            title: "登记簿详情", // 弹窗标题
            editItem: "registerBook/djbFrame", // 弹窗内容
            formData: this.currentSelectProps,
            width: "1220px",
            height: "790px",
            // cancelText: '取消摆烂', // 右边按钮文本
            // confirmText: '确定点击', //左边按钮文本
            cancel: () => {
              console.log("取消回调");
            },
            confirm: () => {
              console.log("确认回调");
            },
          });
          break;
        case "B5":
          this.zsylFlag = true;
          break;
        case "B7":
          this.$popup({
            title: "证书领取",
            editItem: "workflow/components/zslq",
            height: "500px",
            formData: {},
            btnShow: true,
            cancel: () => {
              console.log("取消回调");
            },
            confirm: () => {
              console.log("确认回调");
            },
          })
          break;
        case "back": //退回按钮
          this.$popup({
            title: "退回",
            editItem: "workflow/components/th",
            height: "330px",
            width: '30%',
            formData: {
              bsmSlsq: this.bsmSlsq,
              bestepid: this.bestepid
            },
            btnShow: true,
            cancel: () => {
              console.log("取消回调");
            },
            confirm: () => {
              console.log("确认回调");
            },
          })
          break;
        case "transfer": //转件按钮
          getNextLinkInfo({
            bsmSlsq: this.bsmSlsq,
            bestepid: this.bestepid,
          }).then((res) => {
            if (res.code === 200) {
              this.send(res.result);
            }
          });
          break;
        case "signout":
          window.close();
          break;
        case "record":
          var formdata = new FormData();
          formdata.append("bsmSlsq", this.bsmSlsq);
          formdata.append("bestepid", this.bestepid);
          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.currentSelectProps = res.result[0];
        }
      });
    },
    //申请单元点击事件
    unitClick (index) {
      if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
        this.currentSelectProps = this.unitData[index];
        this.fresh += 1;
      }
    },
    //表单选项卡事件
    tabClick (tab, event) {
      this.getFromRouter(tab.name);
    },
    //切换选项卡内容组件
    getFromRouter (tabname) {
      this.componentTag = getForm(tabname,this.$route.query.sqywbm);
    },
    //发送下一个环节
    send (obj) {
      const h = this.$createElement;
      this.$msgbox({
        title: "您确定转出吗？",
        message: h("div", { style: "margin: auto" }, [
          h("span", null, "下个环节名称："),
          h("i", { style: "color: teal" }, obj.taskName),
          h("div", null, ""),
          h("span", null, "下个环节经办人： "),
          h("i", { style: "color: teal" }, obj.usernames.join("，")),
        ]),
        showCancelButton: true,
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            completeTask({
              bsmSlsq: this.bsmSlsq,
              shyj: "this.bestepid",
              stepform: JSON.stringify(this.tabList),
            }).then((res) => {
              if (res.code === 200) {
                instance.confirmButtonLoading = false;
                this.$message.success("转件成功");
                setTimeout(() => {
                  window.opener = null;
                  window.open("about:blank", "_self");
                  window.close();
                  this.$emit("input", false);
                }, 1000);
              }
            });
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "info",
          message: "action: " + action,
        });
      });
    },
  },
};
</script>