<template>
  <div>
    <h1>header 头部</h1>
    <p class="fbg-text">网站头部功能</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseHeaderStr" cssStyle="overflow:auto">
      <div class="fbg-header" style="width: 1200px;">
        <el-system-select v-model="selectedSystem" :data="selectDataList"/>
        <el-notice :data="dataList" class="fbg-header-notice"/>
        <div class="fbg-header-tools">
          <el-dropdown v-model="selectedValue" class="fbg-header-user" >
            <span slot="content">
              <i class="fbgiconfont icon-touxiang"/>
              <span>李治</span>
            </span>
            <el-dropdown-item @click="handleClick" v-for="(item, index) in menuList" :key="index" :label="item.label" :value="item.value" />
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <el-message-list :data="messageDataList" title="消息" listTitle="消息列表">
            <span slot="main">
            <el-badge :value="12" class="item">
              <i class="fbgiconfont icon-xinxiaoxi fbg-header-message"/>
            </el-badge>
            </span>
          </el-message-list>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown v-model="selectedLanguage" class="fbg-header-language">
            <span slot="content" slot-scope="data">{{data.data.label}}</span>
            <el-dropdown-item v-for="(item, index) in language" :key="index" :label="item.label" :value="item.value" />
          </el-dropdown>
          <i class="fbgiconfont icon-guanjituichudenglu fbg-header-loginout" />
        </div>
      </div>
    </demo>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      selectedSystem: 1,
      selectedValue: 1,
      selectedLanguage: 2,
      language: [
        {
          label: '中文',
          value: 2,
        },
        {
          label: '英文',
          value: 3,
        }
      ],
      menuList: [
        {
          label: '修改密码',
          value: 2,
        },
        {
          label: '退出',
          value: 3,
        }
      ],
      dataList: [
        {
          title: '中华人民共和国',
          content: '庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！',
          time: '2019-09-28 10:11:12'
        },
        {
          title: '70周年',
          content: '庆祝祖国70周年快乐！！！',
          time: '2019-09-28 10:11:12'
        }
      ],
      messageDataList: [
        {
          title: '中华人民共和国',
          content: '庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！',
          time: '2019-09-28 10:11:12'
        },
        {
          title: '70周年',
          content: '庆祝祖国70周年快乐！！！',
          time: '2019-09-28 10:11:12'
        }
      ],
      selectDataList: [
        {
          label: '仓配管理系统11121221',
          value: 1,
          icon: 'shoucang1'
        },
        {
          label: 'OMS',
          value: 2,
          icon: 'service'
        }
      ],
      baseHeaderStr: `
      <div class="fbg-header">
        <el-system-select v-model="selectedSystem" :data="selectDataList"/>
        <el-notice  class="fbg-header-notice"/>
        <div class="fbg-header-tools">
          <el-dropdown v-model="selectedValue" class="fbg-header-user" >
            <span slot="content">
              <i class="fbgiconfont icon-touxiang"/>
              <span>李治</span>
            </span>
            <el-dropdown-item v-for="(item, index) in menuList" :key="index" :label="item.label" :value="item.value" />
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <el-message-list :data="messageDataList" title="消息" listTitle="消息列表">
            <span slot="main">
            <el-badge :value="12" class="item">
              <i class="fbgiconfont icon-xinxiaoxi fbg-header-message"/>
            </el-badge>
            </span>
          </el-message-list>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown v-model="selectedLanguage" class="fbg-header-language">
            <span slot="content" slot-scope="data">{{data.data.label}}</span>
            <el-dropdown-item v-for="(item, index) in language" :key="index" :label="item.label" :value="item.value" />
          </el-dropdown>
          <i class="fbgiconfont icon-guanjituichudenglu fbg-header-loginout" />
        </div>
      </div>
      <script>

      export default {
        data() {
          return {
            selectedSystem: 1,
            selectedValue: 1,
            selectedLanguage: 2,
            language: [
              {
                label: '中文',
                value: 2,
              },
              {
                label: '英文',
                value: 3,
              }
            ],
            menuList: [
              {
                label: '修改密码',
                value: 2,
              },
              {
                label: '退出',
                value: 3,
              }
            ],
            messageDataList: [
              {
                title: '中华人民共和国',
                content: '庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！庆祝祖国70周年222222222222222222222222快乐！！！',
                time: '2019-09-28 10:11:12'
              },
              {
                title: '70周年',
                content: '庆祝祖国70周年快乐！！！',
                time: '2019-09-28 10:11:12'
              }
            ],
            selectDataList: [
              {
                label: '仓配管理系统11121221',
                value: 1,
                icon: 'shoucang1'
              },
              {
                label: 'OMS',
                value: 2,
                icon: 'service'
              }
            ]
          }
        },
        watch: {
          'selectedSystem': {
            immediate: true,
            handler(value) {
              // if (value === 1) {
              //   window.location.href = "http://192.168.107.238:8080/demo/#/table"
              // } else {
              //   window.location.href = "http://192.168.107.238:8081/demo/#/table"
              // }
            }
          }
        },
        mounted() {

        },
        methods: {

        }
      }
      <\/script>`
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  watch: {
    'selectedSystem': {
      immediate: true,
      handler(value) {
        // if (value === 1) {
        //   window.location.href = "http://192.168.107.238:8080/demo/#/table"
        // } else {
        //   window.location.href = "http://192.168.107.238:8081/demo/#/table"
        // }
      }
    }
  },
  methods: {
    handleClick(value) {
      console.log(value, 9999)
    }
  }
}
</script>