<template>
  <div id="processTabMenu">
    <el-tabs v-model="processTabMenuValue" type="card" closable @tab-remove="removeTab" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in processTabMenus"
        :key="item.listid"
        :label="item.processName"
        :name="item.listid"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  isSameData
  } from '../../utils/utils'
export default {
  name: 'processTabMenu',
  data() {
    return {
      processTabMenuValue: sessionStorage.getItem('processInfo') ? JSON.parse(sessionStorage.getItem('processInfo')).listid : '',
      processTabMenus: JSON.parse(sessionStorage.getItem('processTabMenu')) || [],
      oldProcessTabMenuValue: ''
    };
  },
  watch: {
    processTabMenuValue (val, oldVal) {
      console.log(val, oldVal)
      this.oldProcessTabMenuValue = oldVal
    }
  },
  mounted() {
  },
  methods: {
    removeTab(targetName) {
      this.$confirm(`是否确定关闭?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let tabs = JSON.parse(JSON.stringify(this.processTabMenus));
          if (tabs.length <= 1) {
            this.$message({
              type: 'warning',
              message: '已打开的流程只剩一条，不能删除！'
            });
            return
          }
          let activeName = this.processTabMenuValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.listid === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.listid;
                  sessionStorage.setItem('processInfo', JSON.stringify(nextTab))
                }
              }
            });
            }
            this.processTabMenuValue = activeName;
            this.processTabMenus = tabs.filter(tab => tab.listid !== targetName);
            sessionStorage.setItem('processTabMenu', JSON.stringify(this.processTabMenus))
            window.getProcessJson('Update')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    handleClick(tab) {
      let chartJson = window.chartJson()
      console.log(chartJson, JSON.parse(sessionStorage.getItem('chartJson')), isSameData(chartJson, JSON.parse(sessionStorage.getItem('chartJson'))))
      if (isSameData(chartJson, JSON.parse(sessionStorage.getItem('chartJson')))) {
          this.updateChart(tab)
          this.processTabMenuValue = tab.name
      } else {
        this.$confirm('当前流程图还未保存，是否确定切换?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateChart(tab)
          this.processTabMenuValue = tab.name
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消切换'
          });
          this.processTabMenuValue = this.oldProcessTabMenuValue
        });
      }
    },
    updateChart (tab) {
        let processInfo = this.processTabMenus.filter(item => item.listid === tab.name)
        console.log(tab, tab.name, this.processTabMenus, processInfo, '1111111111111')
        if (!!processInfo[0].processType) {
          var resData = {}
          jq.ajax({
              type: "POST",
              url: basFlow.baseUrl + "/listhistory/getMyJson/" + processInfo[0].item.listid + '?username=' + getCookie("username"),
              async: false,
              success: function (data) {
                  if (data.data.json) {
                      resData = JSON.parse(data.data.json);
                      console.log(resData)
                  } else {
                      resData = null
                  }
                  if (!resData.controls || resData.controls.length === 0) {
                    return
                  }
                  resData.controls.forEach(item => {
                    if (item.id === tab.name) {
                      console.log(item.id, tab.name)
                      if (!item.busObjData || jq.isEmptyObject(item.busObjData)) { // 有了json里面的 没有去jession
                        // processInfo[0].busObjData = processInfo[0].busObjData
                      } else {
                        processInfo[0].busObjData = item.busObjData
                      }
                    }
                  })
                  console.log(resData, 'resDataresDataresData')
              }
          })
        } else if (!!processInfo[0].type) {

        }
        sessionStorage.setItem('processInfo', JSON.stringify(processInfo[0]))
        window.getProcessJson('Update')
    }
  }
};
</script>

<style lang='scss' scoped>
#processTabMenu {
  position: absolute;
  margin-top: 91px;
  height: 30px;
  left: 245px;
  right: 40px;
  /deep/.el-tabs {
    width: 100%;
    .el-tabs__item {
      height: 30px;
      line-height: 30px;
      background: #E8E8E8;
    }
    .el-tabs__item.is-active {
      background: #fff;
      color: #409EFF;
    }
    /deep/.el-tabs__nav-prev{
      line-height: 30px;
    }
    /deep/.el-tabs__nav-next {
      line-height: 30px;
    }
  }
  /deep/.el-tabs--card > .el-tabs__header{
    border-bottom: 1px solid #cccccc !important;
    .el-tabs__nav {
      border: 0!important;
    }
  }
  /deep/.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border: 0 none !important;
  }
}
</style>
