<template>
  <el-card class="app-container">
    <div class="app-container__title">选座调价</div>
    <div class="app-container__body">
      <el-tabs v-model="adjust_type" type="card">
        <el-tab-pane label="影院调价" name="cinema">
          <adjust-custom @onSubmit="handleSubmit"></adjust-custom>
        </el-tab-pane>
        <el-tab-pane label="卡号调价" name="card_number">
          <adjust-card @onSubmit="handleSubmit"></adjust-card>
        </el-tab-pane>
        <el-tab-pane label="城市调价" name="city_code">
          <adjust-city @onSubmit="handleSubmit"></adjust-city>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
  import AdjustCard from "./components/AdjustCard";
  import AdjustCity from "./components/AdjustCity";
  import AdjustCustom from "./components/AdjustCustom";


  export default {
    name: "create",
    components: {
      AdjustCustom,
      AdjustCity,
      AdjustCard
    },
    data(){
      return {
        adjust_type: 'cinema'
      }
    },

    methods: {

      handleSubmit(params){
        console.log('handleSubmit',{...params, adjust_type: this.adjust_type})
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container {

    &__title {
      font-size: 16px;
      line-height: 24px;
      padding: 0 0 20px;
      font-weight: bold;
    }

    &__body {
      & ::v-deep .el-tabs__content{
        padding-top: 20px;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .app-container {
      &__title {
        padding: 0 0 10px;
      }

      & ::v-deep .el-card__body {
        padding: 10px;
      }

      &__body {
        & ::v-deep .el-tabs__content {
          padding-top: 10px;
        }
      }
    }
  }
</style>
