<template>
  <div class="no-close row android-hand-home">
    <div class="col-sm-2 col-xs-4  col-md-2"  >
      <ul class="nav nav-tabs nav-tabs-full" >
        <li  v-for="(key, value) in tabs" @click="tabSelect(key)"  :class="{active: key === componentName}">
          <a  v-if="value.show" href="#" :class="value.class">{{value.header}}</a>
        </li>
      </ul>
    </div>
    <div class="col-sm-10 col-xs-8 col-md-10 " style="overflow:auto;" >
      <route name='list' v-ref:phoneroute :reuse="true"></route>
    </div>
  </div>
</template>

<script>
  import UserInfo from './UserInfo'
  import MeterInfo from './MeterInfo'
  import HandPlanCheckInfo from './CheckInfo'
  import PhoneHandPlanInfo from './PhoneHandPlanInfo'
  import PhoneHand from './PhoneHand'

  export default {
    title: '维修单',
    props: {
      //分辨平板还是pc
      // system: '',
      // 要处理的工单
      param: {
        type: Object,
        default:function () {
          return {}
        }
      },
      show: true
    },

    data () {
      return {
        pipeline: {},
        model: {
          baseuserinfo:{},
          meterinfo:{},
          checkinfo:{},
          handinfo:{}
        },
        componentName: 'user-info',
        tabs: {
          // 参数全部设置成空，在ready时，等model处理好了，再添加
          'user-info': {
            header: '用户信息', class: 'user-info-class', props: null,show:1
          },
          'meter-info': {
            header: '表具信息', class: 'meter-info-class', props: null,show:1
          },
          'phone-handplan-info': {
            header: '抄表信息', class: 'hand-plan-class', props: null,show:1
          },
          'phone-hand': {
            header: '周检表记录', class: 'phone-hand-class', props: null,show:1
          },
          'handplan-check-info': {
            header: '周检表信息', class: 'chenck-info-class', props: null,show:1
          }
        }
      }
    },
    methods: {
      // 选择tab
      tabSelect (name) {
        this.componentName = name
        console.log('跳转的页面'+name)
        console.log('跳转的页面'+this.tabs[name].props)
        this.$refs.phoneroute.init(name, this.tabs[this.componentName].props)
      },
      setProps () {
        // 给各自组件添加参数
        this.tabs['user-info'].props = {data: this.param,showmessage:this.show}
        this.tabs['meter-info'].props = {data: this.param,showmessage:this.show}
        this.tabs['phone-handplan-info'].props = {data: this.param,showmessage:this.show}
        this.tabs['handplan-check-info'].props = {data: this.param,showmessage:this.show}
        this.tabs['phone-hand'].props = {user: this.param,showmessage:this.show}
        if(this.param.f_plan_type==='周检表计划'){
          this.tabs['handplan-check-info'].show = 1
          this.tabs['phone-hand'].show = 1
          this.tabs['phone-handplan-info'].show = 0

        }else{
          this.tabs['handplan-check-info'].show = 0
          this.tabs['phone-hand'].show = 0
          this.tabs['phone-handplan-info'].show = 1
        }

        // 参数设置成功，在转向第一个页签
        // this.$goto('user-info', this.tabs[this.componentName].props, 'list')
        this.$refs.phoneroute.init('user-info', this.tabs[this.componentName].props)
      },

      // 复制数据
      copy () {
        this.setProps()
      },
      back () {
        this.$back()
      }
    },
    watch: {
      'param.id' (val) {
          this.setProps()
        // }
      }
    },
    ready () {
    },
    components: {
      'user-info': UserInfo,
      'meter-info': MeterInfo,
      'phone-handplan-info': PhoneHandPlanInfo,
      'phone-hand': PhoneHand,
      'handplan-handplan-check-info': HandPlanCheckInfo
    }
  }
</script>
<style lang="less" scoped>
  @import "../../../src/bootstrap/less/variables.less";

  .tab-befor-img (@url) {
    content: '';
    background-image: url("@{url}");
    background-size: 30px;
    display: inline-block;
    margin-right: 8px;
    margin-top: 0.3em;
    height: 1.5em;
    width: 1.5em;
    vertical-align: -35%;
  }

  @media screen and (min-width: 768px) {
    .android-hand-home> div > ul a {
      font-size: 1em;
      margin: 0.3em 0;
    }
  }

  .user-info-class {
    &::before {
      .tab-befor-img("../../assets/用户信息.png")
    }
  }

  .meter-info-class {
    &::before {
      .tab-befor-img("../../assets/燃气表.png")
    }
  }

  .hand-plan-class {
    &::before {
      .tab-befor-img("../../assets/huneiweixiu.png")
    }
  }

  .chenck-info-class {
    &::before {
      .tab-befor-img("../../assets/guandao.png")
    }
  }

  .phone-hand-class {
    &::before {
      .tab-befor-img("../../assets/记录.png")
    }
  }
  .nav-tabs-full {
    background: #304A66;
    > li {
      width: 100%;
      padding: 0px;
    }
  }

</style>
