<template>
  <div v-loading="loading">
    <div class="heior_box">
      <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="goAdd">新建套餐</el-button> -->
      <div class="search-box">
        <el-input v-model="searchModel.keyWord" placeholder="请输入套餐名称/标题" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="get"></el-button>
        </el-input>
      </div>
    </div>
    <div>
      <el-tabs tab-position="left" :style="$getStyleHeight(100)">
        <el-tab-pane :label="item.Product.Name" v-for="(item,index) in product" :key="index">
          <el-table
            :data="item.Packages"
            row-key="Id"
            border
            size="medium"
            :height="$getHeight(100)"
          >
            <el-table-column prop="Name" label="套餐名称"></el-table-column>
            <el-table-column prop="Title" label="套餐标题"></el-table-column>
            <el-table-column prop="Price" label="价格"></el-table-column>
            <el-table-column prop="LinePrice" label="划线价"></el-table-column>
            <el-table-column prop="DayPrice" label="价格/天"></el-table-column>
            <el-table-column prop="MinPrice" label="最低价"></el-table-column>
            <el-table-column prop="Profile" label="期限说明"></el-table-column>
            <el-table-column prop="Status" label="上架状态" width="100">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.Status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6"
                  @change="changeLineStatus(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <!-- <el-table-column label="包含基本套餐">
              <template slot-scope="scope">
                <span class="handel cursor edit" @click="bindCourse(scope.row)">套餐</span>              
              </template>
            </el-table-column>-->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="handel cursor edit" @click="goEdit(scope.row)">编辑</span>
                <!-- <span class="handel cursor del" @click="del(scope.row)">删除</span> -->
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="套餐维护" :visible.sync="showDialog" width="400px">
      <el-form
        :model="currentPackage"
        :rules="rules"
        ref="inputPackageForm"
        label-width="80px"
      >
        <el-form-item prop="Name" label="套餐名称">
          <el-input v-model="currentPackage.Name" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Price" label="套餐价格">
          <el-input v-model="currentPackage.Price" type="number" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="LinePrice" label="划线价格">
          <el-input v-model="currentPackage.LinePrice" type="number" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="MinPrice" label="最低价格">
          <el-input v-model="currentPackage.MinPrice" type="number" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Profile" label="说明">
          <el-input v-model="currentPackage.Profile" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {},
  data() {
    return {
      loading: false,
      showDialog:false,
      retData: { TotalCount: 0, Data: [] },
      searchModel: {
        PageIndex: 1,
        keyWord: ""
      },
      product:[],
      currentPackage: {},
      rules:{}
    };
  },
  created() {
    this.$store.commit("setCurrentNav", "产品管理>>套餐管理");
    this.get();
  },
  methods: {
    get() {
      this.$api.get("course/v1/product/ProductWithPackage").then(res => {
        this.product = res.Data;
      });
    },
    del(item) {
      var that = this;
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this.$api.post("course/v1/package/Delete?id=" + item.Id).then(res => {
          this.get();
        });
      });
    },
    goEdit(item) {
      this.currentPackage =clone(item);
      this.showDialog = true;
    },
    save() {
      this.$api
        .post("course/v1/product/PutPackage", this.currentPackage)
        .then(res => {
          this.resetForm();
             this.get();
         // this.currentPackage = res.Data;
        });
    },
    changeLineStatus(item) {
      this.$api
        .post("course/v1/product/SetPackageLine?id=" + item.Id)
        .then(res => {
          item.Status = res.Data;
        });
    },
    resetForm() {
      this.$refs["inputPackageForm"].resetFields();
      this.showDialog = false;
    }
  }
};
</script>
<style scoped>
</style>
