<template>
  <div class="memberGroupList-wrap common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="common-wrap__opt">
          <el-input
            class="w-184"
            placeholder="请输入标签"
            prefix-icon="el-icon-search"
            v-model="tagSearch"
            @keyup.enter.native="searchEnterFun">
          </el-input>
          <el-button type="primary" @click="toAddGroup" class="fr">新增分组</el-button>
        </div>
        <div class="common-wrap__table m-t-20">
          <el-table
            ref="multipleTable"
            :data="tagTableData"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="分组名称"
              width="150px"
              show-overflow-tooltip>
              <!-- <template slot-scope="scope">{{ scope.row.name }}</template> -->
            </el-table-column>
            <el-table-column
              label="是否实时"
              width="100px"
              >
              <template slot-scope="scope">
                {{scope.row.isRealTime == 1? '实时':'非实时'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="recentUpdateDate"
              label="最近更新时间"
              width="150px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="recentUpdateDate"
              label="更新频率"
              width="150px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="50px"
              >
              <template slot-scope="scope">
                {{scope.row.state == 1? '有效':'失效'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="peopleCover"
              label="覆盖人数"
              width="150px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="150px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="recentUpdateDate"
              label="到期时间"
              width="150px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" class="" @click="toInvalid(scope.row.id)">失效</el-button>
                <router-link :to="{path:'/memberGroupDetail',query:{name:scope.row.id}}" class="edit-btn el-button--text p-l-20">详情</router-link>

                <router-link :to="{path:'/memberGroupEdit',query:{name:scope.row.id}}" class="edit-btn el-button--text p-l-20">编辑</router-link>
                <el-popover
                  placement="top"
                  width="160"
                  v-model="scope.row.popVisible">
                  <p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="cancelDelTag(scope.$index,scope.row)">取消</el-button>
                    <el-button type="primary" size="mini" @click="toDelTag(scope.$index,scope.row)">确定</el-button>
                  </div>
                  <el-button slot="reference" class="p-l-20" type="text">
                    删除
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block common-wrap__page text-right" v-if="tagTableData.length!=0">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
  import navCrumb from '@/components/nav/nav.vue';
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: 'memberGroupList',
      data() {
        return {
          // 面包屑参数
          navpath: [
            {
              name: '首页',
              path: ''
            },
            {
              name: '会员标签',
              path: ''
            }
          ],

          tagSearch: '', // 搜索值绑定的参数

          // 标签列表数据
          tagTableData:[
            {
              id: 1,
              name: '123',
              isRealTime: 1,
              recentUpdateDate: '2018-09-30 14:30:28',
              updateRate: '-',
              state: 1,
              peopleCover: '456566',
              createTime: '2018-09-30 14:30:28',
              expiredTime: '2018-09-30 14:30:28',
              popVisible: false,
            }
          ],

          // 分页参数
          currentPage: 1,
          pageSize: 20,
          total: 0,
        }
      },
      methods: {
        /**
         * 路由跳转
         */
        changeRoute(route) {
          this.$router.push(route);
        },

        /**
         * 新增分组
         */
        toAddGroup() {
          var that = this
          that.changeRoute('/memberGroupEdit')
        },

        /**
         * 搜索标签
         */
        searchEnterFun(e) {
          var that = this
          console.log(e)
        },

        /**
         * 分页---页码变化
         */
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        /**
         * 分页---当前页变化
         */
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },

        /**
         * 点击失效
         */
        toInvalid(id) {
          var that = this
        },

        /**
         * 删除当前标签 -- 取消
         */
        cancelDelTag(index,row) {
          var that = this
          row.popVisible = false
        },

        /**
         * 删除当前标签 -- 取消
         */
        toDelTag(index,row) {
          var that = this
          that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.tagTableData.splice(index,1)
          }).catch(() => {

          });

        },

      },
      mounted() {

      },
      components: {
        navCrumb
      }
    }
</script>
<style lang="scss" scoped>


</style>
