<template>
  <div class="main-wrapper">

    <div class="row">
      <div class="col">
        <div class="card">
        <DataTable title="套餐管理" :headers="tableHeaders" :rows="tableData" :data-count="dataCount"
          @pageChanged="pageChangedHandle" @dataDelete="deleteHandle" @dataModify="modifyHandle" @dataAdd="addHandle" 
          />
          <card-loading v-if="!isLoaded"/>
          </div>
          
        <package-form-modal title="修改套餐" ref="userModal" />
        <package-form-modal title="添加套餐" formType="add" ref="addUserModal" />
      </div>
    </div>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable.vue';
import PackageFormModal from '../../components/PackageFormModal.vue';
import CardLoading from '../../components/CardLoading.vue';

export default {
  components: {
    DataTable,
    PackageFormModal,
    CardLoading
  },
  data() {
    return {
      dataCount: 0,
      isLoaded: false,
      tableHeaders: [
        { text: "编号", value: "id", width: "155px" },
        { text: "套餐名", value: "name", width: "214px" },
        { text: "套餐月限额", value: "callLimit", width: "48px" },
        { text: "价格", value: "price", width: "29px", type: "money" },
        { text: "限速", value: "oneMinuteLimit", width: "82px" },
      ],
      tableData: [],
    };
  },
  methods: {
    async loadPackageList(pageIndex = 1, pageSize = 10, desc = false) {
      this.isLoaded = false
      try {
        const res = await this.$api.getPackageList(pageIndex, pageSize, desc)
        if (res.code == '1000') {
          this.tableData = res.data
        }
      } catch (e) {
        this.$alert('套餐列表数据加载失败!', 'danger')
        console.error(e)
      }finally{
        this.isLoaded = true
      }
    },
    async pageChangedHandle(newval) {
      await this.loadPackageList(newval.pageIndex, newval.pageSize, false)
    },
    async deleteHandle(id) {
      const confirmRes = await this.$confirm('删除', '是否删除套餐？')
      if (!confirmRes) return;
      try {
        const res = await this.$api.deletePackage(id)
        if (res.code != 1000) {
          this.$alert(res.message, 'danger')
          return;
        }
        this.$alert('删除成功', 'success')

      } catch (e) {
        this.$alert(e, 'danger')
      }
    },
    async modifyHandle(id) {
      try {
        //加载用户信息到新窗口
        const packageInfoRes = await this.$api.getPackageInfoById(id)
        if(packageInfoRes.code != 1000){
          this.$alert(packageInfoRes.message,'danger')
          return
        }
        //拉起修改弹窗
        const res = await this.$refs.userModal.open(id,packageInfoRes.data)
        //弹窗返回为null表示用户关闭了窗口，不执行操作
        if(res == null) return
        const modifyRes = await this.$api.updatePackage(id,res)
        if(modifyRes.code != 1000){
          this.$alert(modifyRes.message, 'danger')
          return
        }
        this.$alert('修改成功', 'success')

      } catch (e) {
        this.$alert(e, 'danger')
      }
    },
    async addHandle(){
       //拉起添加弹窗
        const res = await this.$refs.addUserModal.open()
        if(res == null) return
        try{
        const modifyRes = await this.$api.addPackage(res)
        if(modifyRes.code != 1000){
          this.$alert(modifyRes.message, 'danger')
          return
        }
        this.$alert('添加成功', 'success')

      }catch (e) {
        this.$alert(e, 'danger')
      }
    }
  },
  async mounted() {
    await this.loadPackageList()
    this.dataCount = 10
    this.isLoaded = true
  }
};
</script>
