<template>
  <a-layout
    id="components-layout-demo-top"
    class="layout"
    :class="[warnTheme === 'dark' ? 'dark2021' : 'light2021']"
    style="height: 100%; max-height: 100%; min-height: 100%"
  >
    <a-layout-header class="headerSelf backFixWidth" :class="[warnTheme === 'light' ? 'lightBack_ignore' : 'darkBack']">
      <top-right-content :cur-jh="urlJh" topMenu="true" @cardCallapsedChanged="handleCardCallapsedChanged" />
      <top-left-content topMenu="true" />
    </a-layout-header>
    <a-layout-content class="backFixWidth" style="padding: 0; background-color: #f0f2f5; margin: 0px 8px 8px 8px">
      <a-layout style="padding: 0px; height: 100%">
        <a-layout-content style="height: 100%" :style="{ flex: collapsed ? '0 0 100%' : ' auto' }">
          <a-card style="height: 100%; border-radius: 10px 0px 10px 0px" :bodyStyle="{ height: '100%' }" size="small">
            <index-compare ref="indexChart" />
          </a-card>
        </a-layout-content>
        <a-layout-sider width="380px" collapsible v-model="collapsed" :trigger="null" style="background-color: #f0f2f5">
          <div :style="{ width: '100%', height: valueCardHeight + 'px', overflow: 'scroll' }">
            <value-card v-if="valueCardable" />
          </div>
          <a-card
            size="small"
            :tabList="cardTab.tabs"
            :activeTabKey="cardTab.active"
            @tabChange="(key) => (cardTab.active = cardTab.active === 'ljfz' ? 'yjxx' : 'ljfz')"
            :style="{ width: '100%', height: `calc(100% - ${valueCardHeight}px)`, overflow: 'scroll' }"
            :bodyStyle="{ height: 'calc(100% - 56px)' }"
          >
            <template v-if="wellRecord && cardTab.active === 'ljfz'">
              <stratum-card :widgetItemData="{ jhRecord: this.wellRecord }" :radius="radius" />
            </template>
            <template v-if="wellRecord && cardTab.active === 'yjxx'">
              <text-warn :widgetItemData="{ wellRecord: this.wellRecord }" />
            </template>
          </a-card>
        </a-layout-sider>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { baseMixin } from '@/store/app-mixin'
import TopRightContent from '@/components/GlobalHeader/TopRightContent'
import TopLeftContent from '@/components/GlobalHeader/TopLeftContent'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import IndexEChats from '@/views/part1/index'
import events from './events'
import _ from 'lodash'
import valuesMonitor from '@/views/tools/ValuesMonitor'
import derrick from '@/views/part2/Derrick'
import { mapState } from 'vuex'
import DvBorderBox10 from './sub/DvBorderBox10'
import DvBorderBox4 from './sub/DvBorderBox4'
import ValueCard from './sub/ValueCard'
import StratumCard from '@/views/tools/StratumCard'
import TextWarn from '@/views/tools/TextWarn'
import IndexCompare from '@views/part1/indexCompare.vue'
import { TOP_WELL_CHOOSEN } from '@/store/mutation-types'

const derrickFullWidth = 505
export default {
  name: 'First',
  mixins: [baseMixin],
  components: {
    IndexCompare,
    TopRightContent,
    TopLeftContent,
    Splitpanes,
    Pane,
    IndexEChats,
    valuesMonitor,
    derrick,
    DvBorderBox10,
    DvBorderBox4,
    ValueCard,
    StratumCard,
    TextWarn
  },
  data() {
    return {
      form: this.$form.createForm(this),
      roles: [],
      permissions: [],
      rightPane: { visible: false, key: 1 },
      paneToolsSize: 0,
      paneDerrickSize: 20,
      paneChartSize: 80,
      dockParts: [],
      layout: [],
      valueCardHeight: 245,
      cardTab: {
        tabs: [{ key: 'yjxx', tab: '预警信息' }, { key: 'ljfz', tab: '邻井复杂(扫描范围:5km)' }],
        active: 'yjxx'
      },
      valueCardable: true,
      showWarningPanel: false,
      isGettingWarningMsg: false,
      warningRespList: [],
      collapsed: true,
      urlJh:""
    }
  },
  created() {
    this.debounceResize = _.debounce(() => {
      this.$refs.indexChart.chartResize()
    }, 200)
    console.log('aa')
    events.$on('openDialog', val => {
      const width = _.max([800, document.body.clientWidth * 0.75])
      const height = _.max([650, document.body.clientHeight * 0.85])
      this.$dialog(() => import(`@/views/tools/${val.key}`), {
        widgetItemData: { jhRecord: this.wellRecord },
        showFooter: false,
        on: {
          ok(record) {
          },
          cancel() {
          },
          close() {
          }
        }
      }, {
        title: `${val.title}-【${this.wellRecord.JH}】 `,
        width: width,
        height: height,
        centered: true,
        maskClosable: false,
        okButtonProps: { style: { display: 'none' } },
        okText: '确定'
      })
    })
    this.$bus.on('onWarningMsg', this.handleWarningMSG)
    this.$bus.on('getWaringMsg', this.getWaringMsg)
    this.$bus.on('closeSideBar', this.onBtnClose)

  },
  methods: {
    tochart(e) {
      this.debounceResize()
    },
    setBorder4Rect(defaultWidth) {
      const derrickPaneWidth = !defaultWidth ? document.getElementById('derrickPane').offsetWidth : defaultWidth
      const derrickPaneHeight = document.getElementById('derrickPane').offsetHeight
      this.$refs.dvBorder4.setA({
        w: derrickPaneWidth,
        h: derrickPaneWidth > 500 ? derrickPaneHeight : derrickPaneHeight - 8
      })
    },
    getWaringMsg() {
      this.warningRespList = []
      this.isGettingWarningMsg = true
      this.showWarningPanel = true
    },
    handleWarningMSG(msgList) {
      // console.log(msgList)
      this.isGettingWarningMsg = false
      this.warningRespList = []
      this.warningRespList = msgList
      this.showWarningPanel = true
    },
    onBtnClose() {
      this.showWarningPanel = false;
    },
    handleCardCallapsedChanged(s) {
      this.collapsed = s
      this.$refs.indexChart.chartResize()
    }
  },
  computed: {
    ...mapState({
      warnTheme: state => state.app.warnTheme,
      wellRecord: state => state.topWellChoosen.wellRecord,
      radius: state => state.lineConfig.radius
    })
  },
  mounted() {
    let urlJh = this.$route.query.jh
    this.urlJh=this.$route.query.jh
    console.log(urlJh + 'urlJh-------  mounted ')
    if ((urlJh === null || urlJh === '' || urlJh === undefined)) {
      this.$router.push({ name: '/FocusWarningPage', params: { setid: 111222 } })
    }

    window.addEventListener('resize', () => {
      this.debounceResize()
    })
    if (this.warnTheme === 'dark') {
      this.$refs.h1Border.setA({ w: 360, h: 64 })
    }

    this.$store.commit(TOP_WELL_CHOOSEN, {ltd:this.$route.query.ltd})

  },
  watch: {
    wellRecord(val) {
      const type = this.cardTab.active
      this.cardTab.active = ''
      this.valueCardable = false
      this.$nextTick(() => {
        this.cardTab.active = type
        this.valueCardable = true
      })
    },
    warnTheme(val) {
      this.$message.info(`切换模式为${val === 'light' ? '亮色' : '暗色'}`)
      this.$nextTick(() => {
        if (val === 'dark') {
          this.$refs.h1Border.setA({ w: 360, h: 64 })
        }
        this.setBorder4Rect()
      })
    },
    radius(val) {
      // this.$set(this.cardTab[1].tabs,'tab','邻井复杂(扫描范围:'+val+')')
      let radius = '5km'
      if (val == 5000) {
        radius = '5km'
      } else if (val == '3000') {
        radius = '3km'
      } else if (val == '8000') {
        radius = '8km'
      } else if (val == '10000') {
        radius = '10km'
      }
      this.cardTab.tabs[1].tab = '邻井复杂(扫描范围:' + radius + ')'
      const type = this.cardTab.active
      if (type == 'ljfz') {
        this.cardTab.active = ''
        this.$nextTick(() => {
          this.cardTab.active = type
        })
      }
    }
  },
  beforeDestroy() {
    this.$bus.off('onWarningMsg', this.handleWarningMSG)
    this.$bus.off('getWaringMsg', this.getWaringMsg)
    this.$bus.off('closeSideBar', this.onBtnClose)

  }
}
</script>

<style lang="less" scoped>
@centerWidth: 360px;
@pp-purple: #4ca1af;
@pp-blue: #556270;
@pp-ltblue: #2b5876;
@sp-yellow: #054f7d;

.dark2021 {
  // transform: scale(1.001, 1.001);
  // background-image: url(/background.png);
  // background-position: 0% 0%;
  // background-size: 100% 100%;
  // background-repeat: initial;
  // background-attachment: initial;
  // background-origin: initial;
  // background-clip: initial;
  align-items: center;
  background-image: linear-gradient(to right, @pp-blue, @pp-ltblue, @sp-yellow, @pp-purple, @pp-blue);
  background-size: 600%;
  background-position: 0 0;
  box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);
  display: flex;
  font-family: 'Lato', Arial, sans-serif;
  height: 100%;
  justify-content: center;
  /* Animation */
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients;

  /deep/ .default-theme.splitpanes.splitpanes--vertical > .splitpanes__splitter {
    border-left: none;
    background-color: #0a447d85;
  }

  /deep/ .default-theme.splitpanes.splitpanes--vertical > .splitpanes__splitter:after,
  /deep/ .default-theme.splitpanes.splitpanes--vertical > .splitpanes__splitter:before {
    background-color: #ffffffaa;
  }

  .backFixWidth {
    width: 100%;
  }
}

.light2021 {
  background: #f0f2f5; /* fallback for old browsers */
  // background: -webkit-linear-gradient(260deg, #91eae4, #86a8e7, #7f7fd5); /* Chrome 10-25, Safari 5.1-6 */
  // background: linear-gradient(
  //   260deg,
  //   #91eae4,
  //   #86a8e7,
  //   #7f7fd5
  // ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  // background: #4ca1af;
  // background: -webkit-linear-gradient(290deg, #c4e0e5, #4ca1af);
  // background: linear-gradient(290deg, #c4e0e5, #4ca1af);
  // background: #00416a;
  // background: -webkit-linear-gradient(150deg, #e4e5e6, #00416a);
  // background: linear-gradient(150deg, #e4e5e6, #00416a);
}

@keyframes gradients {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 90% 0;
  }
  60% {
    background-position: 60%;
  }
  75% {
    background-position: 40%;
  }
  100% {
    background-position: 0 0;
  }
}

.headerSelf {
  height: 48px;
  line-height: 48px;
  padding: 0px;
  white-space: nowrap;
  background: transparent;
}

.headCenter {
  width: @centerWidth;
  white-space: nowrap;
  line-height: 64px;
  height: 64px;
  margin-left: 50%;
  left: -1 * @centerWidth / 2;
  text-align: center;
  position: absolute;
}

.headCenter h1 {
  display: inline-block;
  margin: 0px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  vertical-align: top;
  letter-spacing: 10px;
  padding-left: 5px;
}

.lightBack {
  background: #be93c5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #7bc6cc, #be93c5); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #7bc6cc,
    #be93c5
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

// .dark {
//   background: black;
// }
.layout-center {
  margin: -4px -12px;
  height: 100%;
  overflow-y: auto;
}

/deep/ .widget-header {
  height: 36px !important;
  line-height: 36px !important;
}

.splitpanes.default-theme .splitpanes__pane {
  background: transparent;
}

.fillWidth {
  width: 100% !important;
}

.fillWidth:first-child {
  width: 100% !important;
}

.fillWidth {
  /deep/ .widget-body__content {
    height: 100%;
  }
}

.derrickLight {
  background: #cccccc12 !important;
}

.derrickDark {
  background: transparent;
}

.chartLight {
  background: #f0f2f5 !important;
}

.chartDark {
  background: transparent;
}
/deep/ .ant-layout-sider-collapsed {
  flex: 0 0 0px !important;
  max-width: 0px !important;
  min-width: 0px !important;
  width: 0px !important;
}

///deep/ .ant-card-head-wrapper{
//  height: 40px;
//  display: flex;
//  flex-direction: row;
//  justify-content: space-between;
//}
///deep/ .ant-card-head-title{
//  padding: 0;
//  text-align: center;
//}
///deep/ .ant-card-head{
//  height: 40px;
//  min-height: 40px;
//}
</style>
