<template>
  <div class="myproject">
    <page-panel :pages='pages' :curIndex.sync = 'curIndex'>
      <template v-if="curIndex == 'x1'" >
        <keep-alive>
          <tab :tem='tem' :parkey='parkey'/>
        </keep-alive>
      </template>
      <template  v-if="curIndex == 'x2'">
        <keep-alive>
          <curve :txt='txt'/>
        </keep-alive>
      </template>
      <template  v-if="curIndex == 'x3'">
        <keep-alive>
          <durtime :startTm='start' :endTm='end' :secFun='secFun'/>
        </keep-alive>
        <keep-alive>
          <chat :optionConfig='optionConfig' :swData='swData' :wid='wid' :heig='heig' :isRR='isRR'/>
        </keep-alive>
      </template>
    </page-panel>
  </div>
</template>
<script>
/**
 * module:配置参数，调用页签组件的demo
 * author:lwt
 */
import pagePanel from '../../src/components/pagePanel/pagePanel'
import tab from '../../src/components/tab/tab'
import curve from '../../src/components/capacityCurve/capacityCurve'
import chat from '../../src/components/chartProfile/chartProfile'
import durtime from '../../src/components/durTime/durTime'
export default {
  name: 'Myproject',
  props: {
  },
  components: {
    pagePanel,
    'tab': tab,
    'curve': curve,
    'chat': chat,
    'durtime': durtime
  },
  data () {
    return {
      curIndex: 'x3',
      pages: [
        { title: '基础信息', type: 'x2', style: { width: '33%' } },
        { title: '计划进度', type: 'x1', style: { width: '33%' } },
        { title: '投资情况', type: 'x3', style: { width: '34%' } }
      ],
      model: 'x3',
      parkey: { 'b1': 'c66ddd', 'b2': '3fdded', 'b3': 'fkf9rrkr' },
      tem: [
        {
          style: { color: 'orange' },
          tds: [
            {
              bindkey: '工程jk名称', style: { width: '25%', fontWeight: 'bold' }
            },
            {
              bindkey: '@{b1}', style: { }, colSpan: 3
            }
          ]
        }
      ],
      txt: {
        sw: 40.5, // 当前水位
        kr: 192, // 当前库容
        tm: '11-02 23:32', // 当前时间
        flood_val: 45, // 汛限水位
        dsflz: 35, // 设计洪水位
        stcd: '90000122',
        normz: 34, // 正常高水位
        ddz: 30, // 死水位
        width: 1000, // 报图的宽
        height: 432, // 报图的高
        countPath: '/webapi/api/v1/water/d2/count-storagecurve', // 水位-库容计算的接口
        krvalPath: '/webapi/api/v1/water/d2/zvarl_b' // 库容曲线的接口
      },
      start: '2018-12-03 12:12', // 默认开始时间
      end: '2019-01-12 09:34', // 默认结束时间
      wid: 550, // 报图的宽
      heig: 420, // 报图的高
      isRR: false, // true：水库，false：河道
      swData: {
        bdgc: { val: 400.6, lineColor: '#000000', txtColor: '#000000', text: '坝顶高程' }, // 坝顶高程
        xxsw: { val: 47, lineColor: '#E62BB1', txtColor: '#E62BB1', text: '汛限水位' }, // 汛限水位
        sw: { val: 235, lineColor: '#2D6DC7', txtColor: '#2D6DC7', text: '水位' }, // 水位
        ssw: { val: 134, lineColor: '#112DE2', txtColor: '#112DE2', text: '死水位' }, // 死水位
        sjsw: { val: 98, lineColor: '#000000', txtColor: '#000000', text: '设计水位' }, // 设计水位
        fshg: { val: 187, lineColor: '#000000', txtColor: '#000000', text: '放水涵管' }, // 放水涵管
        jjsw: { val: 500, lineColor: '#C138B9', txtColor: '#C138B9', text: '警戒水位' },
        bzsw: { val: 157, lineColor: '#EB382A', txtColor: '#EB382A', text: '保证水位' },
        kr: 76.985, // 库容
        zxtm: 'xx' // 最新水位时间
      },
      optionConfig: {
        legend: {
          data: ['水位', '汛限水位', '正常水位']
        },
        xAxis: {
          data: ['周一2', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '水位',
          type: 'line',
          data: [120, 132, 101, 134, null, 230, 210]
        },
        {
          name: '汛限水位',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '正常水位',
          type: 'line',
          data: [150, 232, 201, 154, 190, 330, 410]
        }]
      }
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  beforeDestroy () {
  },
  methods: {
    secFun: function (da) { // 点击查询的回调
    }
  },
  watch: {
    curIndex (newV, oldV) { // 点击页签的监听事件
      // console.log(newV, oldV)
      this.curIndex = newV
    }
  }
}
</script>

<style lang="scss">
  // .myproject{
  //   margin-top: 100px;
  // }
</style>
