<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <div class="header-title">云鹊小圈</div>
      <el-form ref="searchForm" :model="searchForm" label-width="75px" label-suffix=":" :inline="true">
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="圈子名称">
              <el-input v-model="searchForm.name" size="small" placeholder="请输入圈子名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间">
              <el-date-picker
                  v-model="searchForm.createTime"
                  size="small"
                  type="datetime"
                  placeholder="请选择创建时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-button type="primary" size="small" @click="searchList">查询</el-button>
            <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" size="small" @click="createRange">新建小圈</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
        <el-table-column prop="id" label="圈子ID" min-width="100" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="100" align="center"></el-table-column>
        <el-table-column prop="name" label="圈子名称" min-width="100" align="center"></el-table-column>
        <el-table-column prop="num" label="圈子人数" min-width="100" align="center"></el-table-column>
        <el-table-column prop="publishRole" label="内容发布权限" min-width="100" align="center"></el-table-column>
        <el-table-column prop="status" label="圈子状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | rangeStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="370" align="center">
          <template slot-scope="scope">
            <el-button @click="publishRange(scope.row)" v-if="scope.row.status == 2" type="text" size="small">上线</el-button>
            <el-button @click="unPublishRange(scope.row)" v-if="scope.row.status == 1" type="text" size="small">下线</el-button>
            <el-button @click="liveManage(scope.row)" type="text" size="small">直播管理</el-button>
            <el-button @click="roleManage(scope.row)" type="text" size="small">成员管理</el-button>
            <el-button @click="editRange(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteRange(scope.row)" type="text" size="small">解散圈子</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleNumChange"
            :current-page="searchForm.pageNo"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
export default {
  components: {
    BreadCrumb
  },
  data(){
    return{
      curmbFirst: '云鹊小圈',
      searchForm: {
        name: '',
        createTime: '',
        pageNo: 1,
        pageSize: 10,
      },
      totalRows: 0,
      tableData: [
        {
          id: 123,
          createTime: '',
          name: '浙江基础疾病',
          num: 12,
          publishRole: '所有人可发布动态',
          status: 1,
        }
      ],
    }
  },
  methods: {
    searchList() {
      console.log('查询')
    },
    resetForm() {
      console.log('重置')
    },
    //新建小圈
    createRange() {
      let enterType = 1;//1:add 2 edit
      this.$router.push({
        path: `/create-range?enterType=${enterType}`
      })
    },
    //上线
    publishRange(row) {
      this.$confirm(`确定上线“${row.name}”吗？`, '', {
        confirmButtonText: '上线',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'range-make-box',
      }).then(() => {
        //  confirm
      }).catch(() => {
        //  cancel

      });
    },
    //下线
    unPublishRange(row) {
      this.$confirm(`确定下线“${row.name}”吗？`, '', {
        confirmButtonText: '下线',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'range-make-box',
      }).then(() => {
        //  confirm
      }).catch(() => {
        //  cancel

      });
    },
    //直播管理
    liveManage(row) {
      this.$router.push({
        path: '/live-manage?id=' + row.id,
      })
    },
    //成员管理
    roleManage(row) {
      this.$router.push({
        path: '/role-manage?id=' + row.id,
      })
    },
    //编辑
    editRange(row) {
      let enterType = 2;//1:add 2 edit
      this.$router.push({
        path: `/create-range?enterType`,
        query:{
          id:row.id,
          enterType:enterType
        }
      })
    },
    //解散圈子
    deleteRange(row) {
      this.$confirm(`确定解散“${row.name}”吗？`, '', {
        confirmButtonText: '解散',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'range-make-box',
      }).then(() => {
        //  confirm
      }).catch(() => {
        //  cancel
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.searchForm.pageNo = 1;
      this.searchList();
    },
    handleNumChange(val) {
      this.searchForm.pageNo = val;
      this.searchList();
    },
  },
}
</script>
<style lang="scss">
  .yqrange-index-wrapper{
    .yqrange-index-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 12px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
  .range-make-box{
    .el-message-box__btns{
      margin-top: 30px;
    }
  }
</style>
