<template>
  <div class="app-container">
    <div class="counts">
      <div class="title">短信统计</div>
      <div class="items">
          <div class="item">
            <div class="name">
              公司余额
            </div>
            <div class="count green">
              <span  >{{money}}</span>元
            </div>
          </div>
          <div class="item">
            <div class="name">
              剩余短信
            </div>
            <div class="count red">
              <span  >{{remainSmsCount}}</span>条
            </div>
          </div>
          <div class="item">
            <div class="name">
              累计短信
            </div>
            <div class="count green">
              <span  >{{totalSmsCount}}</span>条
            </div>
          </div>
      </div>
    </div>
    <el-tabs v-model="activeName"  >
      <el-tab-pane label="套餐购买" name="first">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="套餐" prop="packageId" >
                  <div class="package">
                      <div  @click="selectItem(item)"  v-for="(item,index) in packages">
                          <el-card shadow="hover" :class="form.packageId!=null&&form.packageId.toString()==item.packageId.toString()?'item active':'item'"  >
                            <div>套餐名:{{item.title}}</div>
                            <div>价格:{{item.price}}元</div>
                          </el-card>
                      </div>
                  </div>
                </el-form-item>
                <div class="footer-btn">
                  <el-button type="primary" @click="submitForm">立即购买</el-button>
                </div>
            </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getSmsPackage, buySmsPackage } from "@/api/company/companySmsPackage";
import { getCompanyInfo,getCompanySms } from "@/api/company/company";
export default {
  name: "CompanySmsPackage",
  data() {
    return {
      activeName:"first",
      remainSmsCount:0,
      totalSmsCount:0,
      packages:[],
      money:0,
      // 表单参数
      form: {
        packageId:null,
      },
      // 表单校验
      rules: {
        packageId: [
          { required: true, message: "套餐不能为空", trigger: "blur" },
        ],
      }
    };
  },
  created() {
    this.getCompanyInfo();
    this.getCompanySms()
    this.getSmsPackage();
  },
  methods: {
    selectItem(item){
      this.form.packageId=item.packageId;
      console.log(this.form.packageId)
    },
    getCompanyInfo(){
      getCompanyInfo().then(response => {
        this.money = response.data.money;
      });
    },
    getCompanySms(){
      getCompanySms().then(response => {
        this.remainSmsCount = response.data.remainSmsCount;
        this.totalSmsCount = response.data.totalSmsCount;
      });
    },
    /** 查询短信套餐包列表 */
    getSmsPackage() {
      getSmsPackage( ).then(response => {
        this.packages = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      var that=this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$confirm('确定购买此套餐?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return buySmsPackage(that.form)
          }).then(function(res) {
            that.msgSuccess("购买成功");
            that.getCompanyInfo();
            that.getCompanySms()
          }).catch(function(error) {
          });
           
        }
      });
    },
     
  }
};
</script>

<style  lang="scss" scoped>
.package{
  display: flex;
  .item{
    width:200px;
    margin: 0px 10px;
    cursor: pointer;
    
  }
  .active{
    border: 1px solid #13c2c2;;
  }


}
 
.footer-btn{
  padding-top: 30px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}
 
.counts{
  padding: 15px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  .title{
    margin-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  .items{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    .item{
      padding: 0px 30px;
      border-right: 1px solid #eee;
      &:last-child{
        border-right: none;
      }
      .name{
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 5px;
      }
      .count{
        font-size: 14px;
        font-weight: normal;
      }
      .red{
        color: red;
      }
      .green{
        color: #13c2c2;
      }
    }
  }
}
</style>
