<template>
  <div>
    
    <div class="transport-box">
      
      <div class="fahuo">
        <ul class="ul-list">
          <li
            v-for="(item, index) in addlist"
            :key="index"
            :class="active == index ? 'liks' : 'lik'"
            @click="li(index)"
          >
            <img
              :src="item.activeUrl"
              class="fa-img"
              alt=""
              v-if="active == index"
            />
            <img :src="item.url" class="fa-img" alt="" v-else />

            {{ item.text }}
          </li>
        </ul>
      </div>
    </div>
    <Tabbar :actives="2"></Tabbar>
    <Fa v-if="fai"></Fa>
    <Pei v-if="peii"></Pei>
    <Pai v-if="paii"></Pai>
    <Zhuan v-if="zhuan"></Zhuan>
    <Fayun v-if="fayun"></Fayun>
    <Zaitu v-if="zaitu"></Zaitu>
    <Sonda v-if="sonda"></Sonda>
    <Jie v-if="jies"></Jie>
  </div>
</template>

<script>
import Tabbar from "./tabbar.vue";
import Fa from "./yunshu/fa.vue";
import Pei from "./yunshu/pei.vue";
import Pai from "./yunshu/pai.vue";
import Zhuan from "./yunshu/zhuan.vue";
import Fayun from "./yunshu/fayun.vue";
import Zaitu from './yunshu/zaitu.vue';
import Sonda from './yunshu/sonda.vue';
import Jie from './yunshu/jie.vue';
export default {
  components: {
    Tabbar,
    Fa,
    Pei,
    Pai,
    Zhuan,
    Fayun,
    Zaitu,
    Sonda,
    Jie
  },
  data() {
    return {
      addlist: [
        {
          url: require("../assets/21.png"),
          activeUrl: require("../assets/9.png"),
          text: "发货计划",
        },
        {
          url: require("../assets/14.png"),
          activeUrl: require("../assets/4.png"),
          text: "配车计划",
        },
        {
          url: require("../assets/20.png"),
          activeUrl: require("../assets/8.png"),
          text: "派车管理",
        },
        {
          url: require("../assets/17.png"),
          activeUrl: require("../assets/3.png"),
          text: "装车作业",
        },
        {
          url: require("../assets/12.png"),
          activeUrl: require("../assets/7.png"),
          text: "发运管理",
        },
        {
          url: require("../assets/16.png"),
          activeUrl: require("../assets/2.png"),
          text: "在途管理",
        },
        {
          url: require("../assets/15.png"),
          activeUrl: require("../assets/5.png"),
          text: "送达作业",
        },
        {
          url: require("../assets/13.png"),
          activeUrl: require("../assets/6.png"),
          text: "结项管理",
        },
      ],
      active: "0",
      fai: true,
      peii: false,
      paii: false,
      zhuan:false,
      fayun:false,
      zaitu:false,
      sonda:false,
      jies:false
    };
  },
  methods: {
    //tab切换
    li(index) {
     
      this.active = index;
      if (this.active == 0) {
        this.fai = true;
        this.peii = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      } else if (this.active == 1) {
        this.peii = true;
        this.fai = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      } else if (this.active == 2) {
        this.fai = false;
        this.peii = false;
        this.paii = true;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      }else if(this.active == 3){
        this.fai = false;
        this.peii = false;
        this.paii = false;
        this.zhuan = true
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      }else if(this.active == 4){
        this.fai = false;
        this.peii = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = true
        this.zaitu = false
        this.sonda = false
        this.jies = false
      }else if(this.active == 5){
        this.fai = false;
        this.peii = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = false
        this.zaitu = true
        this.sonda = false
        this.jies = false
      }else if(this.active == 6){
        this.fai = false;
        this.peii = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = true
        this.jies = false
      }else if(this.active == 7){
        this.fai = false;
        this.peii = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = true
      }
      console.log(index);
    },
  },
};
</script>

<style scoped>
@import "../css/transport.css";
</style>