<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="8">
                        <a-form-item  label="手机号：">
                            <a-input  placeholder="手机号" v-model="queryParam.accNbr"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                      <a-form-item label="旧套餐：">
                        <a-select
                            v-model="queryParam.cdmaDiscDesc"
                        >
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option :title="item.name" v-for="(item, index) in packageList" :value="item.id" :key="item.id">{{item.packageName}}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="8">
                      <a-form-item  label="新套餐：">
                        <a-select
                            v-model="queryParam.wxcl"
                        >
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option :title="item.name" v-for="(item, index) in packageList" :value="item.id" :key="item.id">{{item.packageName}}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="6" :sm="24">
                            <a-button @click="search()" type="primary">查询</a-button>
                             <a-divider type="vertical"/>
                            <a-button @click="add()" type="primary">添加</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
           </div>

        <!--列表-->
        <s-table  :locale="emptyText" :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
            <template slot="operation" slot-scope="text,record">
                    <a-popconfirm title="是否要删除此行？" @confirm="deleteActivity(record.accNbr)">
                        <a>删除</a>
                    </a-popconfirm>
<!--                <a-divider type="vertical"/>-->
            </template>
        </s-table>

        <!--添加----弹框-->
        <a-modal :title="titleName" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="840px">
            <a-form :form="Formtable">
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="手机号码">
                    <a-input  placeholder="手机号码" v-model="modifyForm.accNbr"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="旧套餐">
                  <a-select
                      v-model="modifyForm.cdmaDiscDesc"
                  >
                    <a-select-option value>请选择</a-select-option>
                    <a-select-option :title="item.name" v-for="(item, index) in packageList" :value="item.id" :keys="item.id">{{item.packageName}}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="新套餐">
                  <a-select
                      v-model="modifyForm.wxcl"
                  >
                    <a-select-option value>请选择</a-select-option>
                    <a-select-option :title="item.name" v-for="(item, index) in packageList" :value="item.id" :key="item.id">{{item.packageName}}</a-select-option>
                  </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {cloneObject} from '@/utils/util';
    import {
      listData,
      addData,
      deleteData,
      getPackage,
    } from "../../../api/school-center/broadbandList/packageUpgradeAPI";
    export default {
        name: "packageUpgradeList",
        components: {
            STable,cloneObject
        },
        data: function () {
            return {
                emptyText: {emptyText: '暂无数据'},
                apis:'',
                // form
                Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                packageList:[],
                titleName:"",
                modifyForm: {
                  accNbr: '',
                  cdmaDiscDesc: '',
                  wxcl:'',
                },
                //输入框列表
                queryParam: {
                  accNbr: '',
                  cdmaDiscDesc: '',
                  wxcl:'',
                },
                modifyvisible: false,
                columns: [
                    {dataIndex: 'accNbr', width: 200, title: '手机号', align: "center"},
                    {dataIndex: 'cdmaDiscDesc', width: 200, title: '旧套餐', align: "center"},
                    {dataIndex: 'wxcl', width: 200, title: '新套餐', align: "center"},
                    {
                        dataIndex: 'operation',
                        width: 200,
                        title: '操作',
                        align: "center",
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                  const env = process.env.NODE_ENV; //获取当前环境
                  if (env === 'development') {     //测试环境默认添加前缀
                    this.apis = '/api/';
                  }
                  let params = {
                    pageNo: parameter.pageNo,
                    pageSize: parameter.pageSize
                  };
                  let obj = cloneObject(this.queryParam);
                  //表示
                  return listData(Object.assign(params, obj)).then(res => {
                    let data = {};
                    if (res.page.state !== "success") {
                      this.$message.error("查询失败！", 5);
                      this.emptyText.emptyText = '查询失败！'
                      data = {
                        data: [],
                        pageSize: parameter.pageSize,
                        pageNo: 1,
                        totalCount: 0
                      };
                    } else {
                      data = {
                        data: res.page.data.records,
                        pageSize: parameter.pageSize,
                        pageNo: parameter.pageNo,
                        totalCount: res.page.data.total
                      };
                    }
                    return data;
                  });
                }
            }
        },
        methods:{
          search() {
              this.$refs.table.refresh({search: true});
          },
          add(){
              this.titleName="添加"
              this.modifyForm.accNbr = "";
              this.modifyForm.cdmaDiscDesc = "";
              this.modifyForm.wxcl = "";
              setTimeout(()=>{
                  this.Formtable.setFieldsValue({
                    accNbr:"",
                    cdmaDiscDesc:"",
                    wxcl:"",
                  })
              },0)
              this.modifyvisible=true;
          },
          //提交表单
          createfunctionOk(){
            let obj = cloneObject(this.modifyForm);
            addData(obj).then(res => {
              if (res.state == "success") {
                this.$notification.success({
                  message: "添加成功！",
                  description: "",
                  duration: 4
                });
              } else {
                let msg = res.msg != undefined ? res.msg : "删除成功！";
                this.$notification.error({
                  message: msg,
                  description: "",
                  duration: 4
                });
              }
              this.search();
            });
            this.modifyvisible=false;
          },
          createfunctionCancel(){
            this.modifyvisible=false;
          },
          deleteActivity(accNbr){
            deleteData({accNbr:accNbr}).then(res => {
              if (res.state == "success") {
                this.$notification.success({
                  message: "删除成功！",
                  description: "",
                  duration: 4
                });
              } else {
                this.$notification.error({
                  message: "删除失败！",
                  description: "",
                  duration: 4
                });
              }
              this.search();
            });
          },
          getPackageList(){
            getPackage().then(res=>{
              this.packageList = res.data;
            })
          }
        },
      mounted() {
        this.getPackageList();
      }
    }
</script>

<style scoped>

</style>

