<template>
  <div :class="wrpCls" style="width: 576px">
    <dv-decoration11 ref="backDv11" style="position: absolute" v-if="warnTheme === 'dark'" />

    <a-dropdown placement="bottomRight">
      <span class="ant-pro-account-avatar toolText">
        模板：
        <a-select
          style="width: 120px"
          v-model="chartPropsConfig.templateSelected"
          @change="handleConfigChange"
          :loading="chartPropsConfig.isLoading"
        >
          <a-select-option v-for="(item, index) in chartPropsConfig.data" :key="index" :value="item.id">
            {{ item.title }}
          </a-select-option>
        </a-select>
        <!--        <a-button type="link" icon="bar-chart" @click="gotoWorkCondition" class="toolText"> 周工况 </a-button>-->
        <!--        <a-button type="link" icon="bar-chart" @click="gotoWorkConditionByDay" class="toolText"> 日工况 </a-button>-->

        <a-button type="link" icon="setting" @click="() => (this.visible = true)" class="toolText"> 配置 </a-button>
        <a-button type="link" icon="bars" @click="fzqkVisible = true" class="toolText"> 案例管理 </a-button>
        <!--        <a-button type="link" icon="dashboard" @click="focusVisible = true" class="toolText"> 多井预警 </a-button>-->
        <a-button type="link" icon="dashboard" @click="toFocusWarning" class="toolText"> 多井预警 </a-button>
        <a-button type="link" icon="dashboard" @click="openCsyj" class="toolText" style="display: none">
          参数预警
        </a-button>
        <a-divider type="vertical" style="height: 1.8em" />
      </span>
    </a-dropdown>

    <a-popover placement="bottomRight" v-if="false">
      <span style="cursor: pointer" class="ant-pro-account-avatar toolText">
        <a-button type="link" icon="setting" class="toolText"> 工具集 </a-button>
      </span>

      <template slot="content">
        <div style="width: 840px; height: 405px; overflow-y: auto" class="project-list">
          <a-card-grid
            v-for="(item1, index1) in tools"
            :key="item1.key"
            class="project-card-grid"
            :style="{
              padding: '1px',
              paddingTop: '24px',
              marginBottom: index1 === tools.length - 1 ? '5px' : '0px',
              borderRight: index1 > 0 && index1 % 3 === 0 ? '1px solid #e8e8e8' : 'none',
            }"
          >
            <a-card v-if="index1 === 0" :bordered="false">
              <a-card-meta>
                <div slot="title" class="card-title">
                  <a-avatar :src="item1.img" />
                  <a>{{ item1.title }}</a>
                </div>
                <div slot="description" class="card-description">
                  {{ item1.description }}
                </div>
              </a-card-meta>
              <template slot="actions">
                <a-tooltip title="窗口" @click="fzqkVisible = true">
                  <a-icon type="select" />
                  窗口
                </a-tooltip>
              </template>
            </a-card>
            <a-card v-else :bordered="false">
              <a-card-meta>
                <div slot="title" class="card-title">
                  <a-avatar :src="item1.img" />
                  <a @click="handleTitleClick(item1)">{{ item1.title }}</a>
                </div>
                <div slot="description" class="card-description">
                  {{ item1.description }}
                </div>
              </a-card-meta>
              <template slot="actions">
                <a-tooltip v-if="item1.window" title="窗口" @click="openDialog(item1)">
                  <a-icon type="select" />
                  窗口
                </a-tooltip>
                <a-tooltip v-if="item1.dock" title="停靠" @click="dockInLayout(item1)">
                  <a-icon type="layout" />
                  停靠
                </a-tooltip>
              </template>
            </a-card>
          </a-card-grid>
        </div>
      </template>
    </a-popover>

    <a-dropdown placement="bottomRight" v-if="false">
      <span class="ant-pro-account-avatar toolText">
        <a-button
          type="link"
          :icon="isFullScreen ? 'fullscreen-exit' : 'fullscreen'"
          @click="toggleFullScreen"
          class="toolText"
        >
          {{ isFullScreen ? '恢复' : '全屏' }}
        </a-button>
      </span>
    </a-dropdown>

    <a-dropdown placement="bottomRight">
      <span class="ant-pro-account-avatar toolText">
        <a-button
          type="link"
          :icon="isCardCollapsed ? 'menu-unfold' : 'menu-fold'"
          @click="toggleCardCollapsed"
          class="toolText"
        >
          {{ isCardCollapsed ? '恢复' : '折叠' }}
        </a-button>
      </span>
    </a-dropdown>

    <a-dropdown placement="bottomRight" v-show="false">
      <span class="ant-pro-account-avatar toolText">
        <a-tooltip title="配色">
          <a-switch
            checked-children="亮"
            un-checked-children="暗"
            v-model="mainColor"
            style="margin-bottom: 5px"
            @change="changeTheme"
          />
        </a-tooltip>
        <a-divider type="vertical" style="height: 1.8em" />
      </span>
    </a-dropdown>
    <avatar-dropdown
      v-show="false"
      :menu="showMenu"
      :current-user="currentUser"
      :class="prefixCls"
      @showChangePass="updatePassword"
    />
    <select-lang :class="prefixCls" v-show="false" />

    <a-modal
      v-model="visible"
      destroyOnClose
      width="1000px"
      class="modal-reset"
      :title="dialogTitle"
      :footer="null"
      :okButtonProps="{ style: { display: 'none' } }"
    >
      <a-tabs default-active-key="1" @change="callback" style="margin-top: -10px">
        <a-tab-pane key="1" tab="曲线配置">
          <chart-options />
        </a-tab-pane>
        <a-tab-pane key="2" tab="预警模型配置">
          <warning style="overflow: scroll; height: 600px" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="工况参数配置" style="height: 600px">
          <mode />
        </a-tab-pane>
        <a-tab-pane key="4" tab="参数预警配置(新)" style="height: 600px">
          <el-tabs tab-position="left" style="height: 590px; margin-left: -5px">
            <el-tab-pane label="钩载阈值">
              <wohWarnTable ref="wohWarnTableRef" />
              <!-- <warn-mode-new warnType="qxz" @close="visible = false" /> -->
            </el-tab-pane>
            <el-tab-pane label="泵压阈值">
              <pumpingWarnTable ref="wohWarnTableRef" />
              <!-- <warn-mode-new warnType="by" @close="visible = false" /> -->
            </el-tab-pane>
            <el-tab-pane label="扭矩阈值">
              <torqueWarnTable ref="wohWarnTableRef" />
              <!-- <warn-mode-new warnType="nj" @close="visible = false" /> -->
            </el-tab-pane>
            <el-tab-pane label="总池体积阈值">
              <totalPoolWarnTable ref="wohWarnTableRef" />
              <!-- <warn-mode-new warnType="jl" @close="visible = false" /> -->
            </el-tab-pane>
            <!--            <el-tab-pane label="工况参数">-->
            <!--              <warn-mode-new warnType="gkcs" @close="visible=false" />-->
            <!--            </el-tab-pane>-->
          </el-tabs>
        </a-tab-pane>
        <a-tab-pane key="5" tab="工况参数" style="height: 600px">
          <work-condition-param />
        </a-tab-pane>

        <!-- <a-tab-pane key="5" tab="预警监测表">
          <warn-jh />
        </a-tab-pane>
        <a-tab-pane key="6" tab="新增预警监测表">
          <warn-jh-form />
        </a-tab-pane> -->
      </a-tabs>
    </a-modal>

    <a-modal
      v-model="fzqkVisible"
      destroyOnClose
      width="90%"
      class="al-modal-reset"
      :title="复杂案例数据"
      :okButtonProps="{ style: { display: 'none' } }"
    >
      <case-main />
    </a-modal>

    <a-modal
      v-model="focusVisible"
      destroyOnClose
      width="95%"
      :title="多井监控预警"
      :okButtonProps="{ style: { display: 'none' } }"
    >
      <focus-jh-warning @ok="focusVisible = false" />
    </a-modal>
    <warn-summary ref="warnSummary"></warn-summary>
    <user-password ref="userPassword"></user-password>
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
import chartOptions from '@/views/form/chartOptions'
import warning from '@/views/form/warning'
import mode from '@/views/form/mode'
import warnModeNew from '@/views/form/warnModeNew'
import warnJh from '@/views/part1/warning_table/warnJh'
import warnJhForm from '@/views/part1/warning_table/warnJhForm'
import { LINE_CONFIG_SELECTED, WARNING_THEME, TEMPLATE_ID_CHANGE } from '@/store/mutation-types'
import events from '@/views/top/events'
import moment from 'moment'
import { getTemplateList } from '@/api/api'
import CaseMain from '@/views/tools/complexCase/CaseMain'
import FocusJhWarning from '@/views/tools/FocusWarning'
import DvDecoration11 from '@/views/top/sub/DvDecoration11'
import { mapState, mapGetters } from 'vuex'
import UserPassword from '@/components/tools/UserPassword'
import warnSummary from '@/views/part1/warning_table/warn_summary'
import WorkConditionParam from '@views/form/workConditionParam.vue'
import wohWarnTable from '@/views/form/warnVlueTableJh/wohWarnTable.vue'
import totalPoolWarnTable from '@/views/form/warnVlueTableJh/totalPoolWarnTable.vue'
import torqueWarnTable from '@/views/form/warnVlueTableJh/torqueWarnTable.vue'
import pumpingWarnTable from '@/views/form/warnVlueTableJh/pumpingWarnTable.vue'
export default {
  name: 'TopRightContent',
  components: {
    WorkConditionParam,
    AvatarDropdown,
    SelectLang,
    chartOptions,
    warning,
    mode,
    CaseMain,
    DvDecoration11,
    UserPassword,
    FocusJhWarning,
    warnModeNew,
    warnJh,
    warnJhForm,
    warnSummary,
    wohWarnTable,
    totalPoolWarnTable,
    torqueWarnTable,
    pumpingWarnTable
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    },
    curJh: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      chartPropsConfig: {
        data: [],
        isLoading: false,
        templateSelected: undefined
      },
      showMenu: true,
      currentUser: { name: this.username },
      fzqkVisible: false,
      focusVisible: false,
      visible: false,
      dialogTitle: '配置',
      mainColor: true,
      isFullScreen: false,
      isCardCollapsed: true,
      tools: [{
        title: '复杂案例管理',
        description: '提供案例数据的搜索查询、增加、编辑及删除功能',
        key: 'CaseManage',
        path: '@/views/tools/complexCase/CaseMain',
        img: '/dm.png',
        window: true,
        dock: false
      }, {
        title: '重点关注',
        description: '高亮显示报警信息中需要关注的关键字',
        key: 'KeyFocus',
        path: '@/views/tools/KeyFocus',
        img: '/fc.png',
        config: true,
        window: false,
        dock: true
      }, {
        title: '数据项监测',
        description: '在配置窗口选取查看的参数数据，并按10秒的间隔自动刷新。',
        key: 'ValuesMonitor',
        path: '@/views/tools/ValuesMonitor',
        img: '/vm.png',
        config: true,
        window: false,
        dock: true
      }, {
        title: '报警实时统计',
        description: '获取所选井号的4种类型报警数据，以图表的形式合计数量',
        key: 'WarnReal',
        path: '@/views/tools/WarnReal',
        img: '/rd.png',
        config: false,
        window: false,
        dock: true
      }, {
        title: '历史报警数量分析',
        description: '系统后台任务计算5天内的数据，完成后显示图表统计数据',
        key: 'WarnHistory',
        path: '@/views/tools/WarnHistory',
        img: '/his.png',
        config: false,
        window: false,
        dock: true
      }, {
        title: '单井地层数据',
        description: '获取所选井的底层数据，并提取5000米范围内的案例数据',
        key: 'Stratum',
        path: '@/views/tools/Stratum',
        img: 'st.png',
        config: false,
        window: true,
        dock: false
      }]
    }
  },
  computed: {
    wrpCls() {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    },
    ...mapState({
      warnTheme: state => state.app.warnTheme
    })
  },
  mounted() {
    this.warnTheme === 'dark' && this.$refs.backDv11.setA([700, 90])
    this.currentUser = { name: this.username }
    this.$store.commit(LINE_CONFIG_SELECTED, { key: this.lineNameKey })

    this.loadTemplateListData()
  },
  methods: {
    handleConfigChange(v, opts) {
      this.$store.commit(TEMPLATE_ID_CHANGE, v)
      //events.$emit('templateIdChangedAtTop', v)
    },
    toggleFullScreen() {
      this.isFullScreen = !this.isFullScreen
      if (this.isFullScreen) {
        var a = document.documentElement
        a.requestFullscreen ? a.requestFullscreen() : a.msRequestFullscreen ? a.msRequestFullscreen() : a.mozRequestFullScreen ? a.mozRequestFullScreen() : a.webkitRequestFullScreen && a.webkitRequestFullScreen()
      } else {
        document.exitFullscreen ? document.exitFullscreen() : document.msExitFullscreen ? document.msExitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
      }
    },
    openDialog(tool) {
      events.$emit('openDialog', { ...tool, tid: moment().unix() })
    },
    dockInLayout(tool) {
      events.$emit('dockInLayout', { ...tool, tid: moment().unix() })
    },
    changeTheme(checked) {
      this.$store.commit(WARNING_THEME, checked ? 'light' : 'dark')
    },
    loadTemplateListData() {
      this.chartPropsConfig.isLoading = true
      getTemplateList().then(res => {
        if (res.success) {
          this.chartPropsConfig.data = [...res.result]
          const exist = res.result.find(p => p.title === '综合v2.0')
          if (exist) {
            this.chartPropsConfig.templateSelected = exist.id
          } else {
            this.chartPropsConfig.templateSelected = res.result[0].id
          }
        } else {
          this.$message.error('获取可用模板数据时出错，请重试')
        }
        this.chartPropsConfig.isLoading = false

        this.$store.commit(TEMPLATE_ID_CHANGE, this.chartPropsConfig.templateSelected)
      }).catch(e => {
        this.$message.error('获取可用模板数据时出错，请重试')
        this.chartPropsConfig.isLoading = false
      })
    },
    handleTitleClick(src) {
      if (src.window) {
        this.openDialog(src)
      } else if (src.dock) {
        this.dockInLayout(src)
      }
    },
    openCsyj() {
      this.$refs.warnSummary.init()
      //this.$router.push({ name: '/warnSummary', params: { setid: 111222 } })
      // this.$dialog(
      //   () => import('../../views/part1/warning_table/warn_summary'),
      //   {
      //     title: `参数预警信息`,
      //     width: document.body.offsetWidth * 0.75,
      //     height: document.body.offsetHeight * 0.85,
      //     centered: true,
      //     maskClosable: true,
      //     okButtonProps: { style: { display: 'none' } },
      //     cancelText: '关闭'
      //   }
      // )
    },
    toFocusWarning() {

      this.$router.push({ name: '/FocusWarningPage', params: { setid: 111222 } })
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    updatePassword() {
      let username = this.userInfo().username
      this.$refs.userPassword.show(username)
    },
    toggleCardCollapsed() {
      this.isCardCollapsed = !this.isCardCollapsed
      this.$emit('cardCallapsedChanged', this.isCardCollapsed)
    },
    gotoWorkCondition() {
      this.$router.push({ name: '/workConditionsPage', params: { curJh: this.curJh } })
    },
    gotoWorkConditionByDay() {
      this.$router.push({ name: '/dayWorkConditionsPage', params: { curJh: this.curJh } })
    }
  },
  watch: {
    warnTheme(val) {
      this.$nextTick(() => {
        val === 'dark' && this.$refs.backDv11.setA([700, 90])
      })
    }
  }
}
</script>
<style lang="less" scoped>
.toolText {
  color: #000000ee;
  font-size: 16px;
  padding-right: 4px;

  /deep/ i {
    color: #337ab7;
  }
}

.popClass {
  width: 700px;
  height: 500px;
}

.project-list {
  .card-title {
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.85);
      margin-left: 12px;
      line-height: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;

      &:hover {
        color: #1890ff;
      }
    }
  }

  .card-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }

  .project-item {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    height: 20px;
    line-height: 20px;

    a {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      flex: 1 1 0;

      &:hover {
        color: #1890ff;
      }
    }

    .datetime {
      color: rgba(0, 0, 0, 0.25);
      flex: 0 0 auto;
      float: right;
    }
  }

  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;

  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.members {
  a {
    display: block;
    margin: 12px 0;
    line-height: 24px;
    height: 24px;

    .member {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      line-height: 24px;
      max-width: 100px;
      vertical-align: top;
      margin-left: 12px;
      transition: all 0.3s;
      display: inline-block;
    }

    &:hover {
      span {
        color: #1890ff;
      }
    }
  }
}

.modal-reset {
  /deep/ .ant-modal-header {
    padding: 10px 24px;
  }

  /deep/ .ant-modal-body {
    padding: 0 24px;
  }

  /deep/ .ant-tabs-bar {
    margin-bottom: 5px;
  }

  /deep/ .ant-modal-footer {
    padding: 3px 24px;
  }
}

.al-modal-reset {
  /deep/ .ant-modal-body {
    padding: 0 24px;
  }

  /deep/ .ant-card-body {
    padding: 0 24px;
  }
}
</style>
