<template lang="html">
<ifbp-page>
  <!-- <div class="applet"> -->
    <!-- <div class="apptitle ">
        <h2 class="name fl">磁贴管理</h2>
        <div class="fr">
          <el-button type="text" @click="showSearch">
            高级搜索
            <i class="el-icon-caret-bottom" v-if="this.isHide"></i>
            <i class="el-icon-caret-top" v-if="!this.isHide"></i>
          </el-button> -->
          <!-- <el-button type="primary" @click="goBack" style="float:right;margin-left:20px;">返回</el-button> -->
        <!-- </div> -->
    <!-- </div> -->
    <!-- <div class="apptitle">
      <h2 class="name">磁贴管理</h2>
    </div> -->
    <ifbp-breadcrumb name="磁贴注册"></ifbp-breadcrumb>
    <!--search-->
    <!-- <div id="search-container">
      <div class="fl">
        <el-button type="primary" class="legacy" @click="addApplet">新增</el-button>
      </div>
      <div class="fr">
        <el-button type="text" @click="showSearch">
          高级搜索
          <i class="el-icon-arrow-down" v-if="this.isHide"></i>
          <i class="el-icon-arrow-up" v-if="!this.isHide"></i>
        </el-button> -->
        <!-- <el-button type="primary" @click="backInfo" style="float:right;margin-left:20px;">返回</el-button> -->
      <!-- </div>
    </div> -->
    <ifbp-button-area>
        <el-button type="primary" class="legacy" @click="addApplet">新增</el-button>
        <ifbp-search class="fr"
          :template-code="searchCode"
          @search="handleSearch">
        </ifbp-search>
        <!-- 查询模板组件 -->
       <!-- <div class="fr">
          <el-button type="text" @click="showSearch">
          高级搜索
          <i id="appletUpDown" class="el-icon-arrow-down appletUpDown" v-if="isHide"></i>
          <i id="appletUpDown" class="el-icon-arrow-up appletUpDown" v-if="!isHide"></i>
        </el-button>
       </div> -->
    </ifbp-button-area>
    <div id="advanced-search1"  v-if="!isHide">
      <el-form ref="form" :model="form" inline label-width="110px">
        <el-form-item label="产品">
         <el-select v-model="proValue" placeholder="请选择产品" @change="appChange">
           <el-option v-for="item in proOptions" :value="item.id" :label="item.areaName">
             {{item.areaName}}
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="磁贴分组">
        <el-select v-model="appletGroupsValue" placeholder="请选择磁贴分组" @change="appletChange">
          <el-option v-for="item in appOptions2" :value="item.id" :label="item.name">
            {{item.name}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="磁贴编码/名称" >
       <el-input placeholder="请选择编码/名称" @keyup.enter.native="inputUp" v-model="input1"></el-input>
     </el-form-item>
     <div class=" appletSearch fr">
       <el-button @click="appletSearch">搜索</el-button>
     </div>
     <!-- <el-form-item label-width="10px"> -->

      <!-- <el-input placeholder="请选择编码/名称" @keyup.enter.native="inputUp" v-model="input1"></el-input> -->
    <!-- </el-form-item> -->
      </el-form>
    </div>
    <!-- <div id="search-container1">
        <i class="el-icon-plus"  @click="addApplet">新增</i>
    </div> -->
    <ifbp-main-area type="list">
    <!-- <div class="app-info"> -->
      <el-table ref="multipleTable" class="appletTable" :data="appData" style="width: 100%;"empty-text="无数据" >
        <el-table-column prop="areaName" label="产品">
        </el-table-column>
        <el-table-column prop="goupName" label="磁贴分组">
        </el-table-column>
        <el-table-column prop="appName" label="磁贴名称">
        </el-table-column>
        <el-table-column prop="appCode" label="磁贴编码">
        </el-table-column>
        <el-table-column fixed="right" width=152 class-name="table-operate-column">
        <template scope="scope">
          <i title="编辑" class="ifbp-icon-edit el-table-operate-icon" @click="handleEdit(scope.row)"></i>
          <i title="删除" class="ifbp-icon-delete el-table-operate-icon" @click="handleDelete(scope.row)"></i>
          <!-- <el-button size="small" type="text" class="no-min-width"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="text" class="no-min-width"
            @click="handleDelete(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        id="staff-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    <!-- </div> -->
    </ifbp-main-area>
    <el-dialog title="提示" v-model="delDialogVisible" :modal="true" size="tiny">
      <span>确认删除信息？删除后无法恢复。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteClick">确 定</el-button>
      </span>
    </el-dialog>
  <!-- </div> -->
  </ifbp-page>
</template>
<script>
export default {
  data() {
    return {
      isHide: true,
      appletAreas:'',
      appletGroups:'',
      proValue:'',
      appletGroupsValue:'',
      keyword:'',
      input1:'',
      proOptions:[],
      appOptions:[],
      appOptions2:[],
      totalPages: 0,
      pageSize: 10,
      pageNum: 1,
      totalCount: 0,
      arr:[],
      delId:'',
      appData:[],
      groupId : '',
      areaId: '',
      searchCode:'CT_SEARCH',
      searchData: null,
      delDialogVisible:false,
      form: {
        region: '',
      }
    };
  },
  methods: {
    handleSearch(searchData) {
      if (!searchData) {
        return;
      }
      this.searchData = searchData;
      this.requestApplet();
    },
    appletSearch() {
      this.keyword = this.input1;
      this.requestApplet();
    },
    backInfo() {
      this.$router.push("/appArea");
    },
    showSearch() {
      this.isHide = !this.isHide;
    },
    appChange(val){
      // debugger;
      this.appOptions2 = [{
        areaId:"",
        groupIndex:1,
        id:"",
        name:"选择分组"
      }].concat(this.appOptions.filter(item => (item.areaId === val)));
      this.appletGroupsValue = '';
      // this.proValue = val;
      this.areaId =val;
      this.requestApplet();
    },
    appletChange(val){
      this.groupId = val;
      this.requestApplet();
    },
    inputUp() {
      // debugger;
      this.keyword =this.input1;
      this.requestApplet();
    },
    loadList(){
      this.$http({
        url: '/wbalone/appArea/listWithGroup',
        type: 'GET',
        dataType: 'json',
        // data: data,
      }).then((res) => {
        // debugger;
        for (var i = 0; i < res.data.data.length; i++) {
          this.arr.push(res.data.data[i].area);
          // this.appOptions = res.data.data[i].group;
          this.appOptions = this.appOptions.concat(res.data.data[i].group);
        }
        this.proOptions = [{
          areaName:"全部分组",
          id:""
        }].concat(this.arr);
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    addApplet() {
      //location.hash= '/applet/add2';
      this.$router.push("/applet/add2");
    },
    handleEdit(row) {
      //location.hash= '/applet/edit2/'+ row.id;
      this.$router.push("/applet/edit2/"+ row.id);
    },
    handleDelete(row) {
      this.delDialogVisible = true;
      this.delId = row.id;
    },
    deleteClick() {
      this.$http({
        url: "/wbalone/appMGT/delete/" + this.delId,
        method: 'POST',
        dataType: 'json',
        contentType: 'application/json',
      }).then((res) => {
        if (res.data.status === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.delDialogVisible = false;
          this.requestApplet();
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          message: 'Network error',
          type: 'error'
        });
      });
    },
    requestApplet() {
      var options = {
        areaId:this.areaId,
        groupId:this.groupId,
        keyword: this.keyword,
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        searchData: this.searchData ? JSON.stringify(this.searchData): null,
      };
      this.$http({
        method: 'post',
        url: '/wbalone/appMGT/pagingList',
        dataType: 'json',
        data: options,
      }).then((res) => {
        if(res.data.status === 1){
          this.appData = res.data.data.content;
          this.totalCount = res.data.data.totalElements ;       // 总条数
          this.pageSize = res.data.data.size;
        }
                                 // 每页的条数
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });

    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.requestApplet();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.requestApplet();
    },

  },
  created() {
    this.requestApplet();

  },
  mounted() {
    this.loadList();

  }
};
</script>

<style lang="css">
</style>
