<template>
  <div class="content">
    <van-tabs class="label" type="card">
      <van-tab @click="manufacturing_trial_click" title="制造业试算">
        <manufacturing-trial></manufacturing-trial>
      </van-tab>
      <van-tab @click="unmanufacturing_trial_click" title="非制造业试算">
        <un-manufacturing-trial></un-manufacturing-trial>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Tab, Tabs } from "vant";
import ManufacturingTrial from "@/components/workbench/company-common-functions/auxiliary-tools/financial-trial/ManufacturingTrial.vue";
import UnManufacturingTrial from "@/components/workbench/company-common-functions/auxiliary-tools/financial-trial/UnManufacturingTrial.vue";
/**
 * @Description 财务试算
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:36
 */
Vue.use(Tab);
Vue.use(Tabs);

@Component({
  name: "FinancialTrial",
  components: { ManufacturingTrial, UnManufacturingTrial },
})
export default class FinancialTrial extends Vue {
  manufacturing_trial = true;
  un_manufacturing_trial = false;
  manufacturing_trial_click() {
    // console.log("aaaaaaaaaaa");
    this.manufacturing_trial = true;
    this.un_manufacturing_trial = false;
  }
  unmanufacturing_trial_click() {
    // console.log("bbbbbbbbbbbbb");
    this.manufacturing_trial = false;
    this.un_manufacturing_trial = true;
  }
}
</script>

<style scoped>
.content {
  width: 90%;
  margin: 0 auto;
  margin-top: 2%;
}
.label {
  width: 30%;
  margin: 0 auto;
  margin-bottom: 4%;
}
::v-deep .van-tabs {
  margin: 0;
  width: 98%;
}
::v-deep .van-tabs--card > .van-tabs__wrap {
  width: 300px;
  margin: 0 auto;
}
::v-deep .van-tab__text--ellipsis {
  font-size: 16px;
}
::v-deep .van-tabs__wrap,
::v-deep .van-tabs__nav--card {
  height: 40px;
}

::v-deep .van-tabs--card > .van-tabs__wrap {
  margin-bottom: 4%;
}
</style>