<template>
  <el-container>
    <el-header>
      <div style="display: flex; padding:12px 12px 0 0px;">
        <div style="display: flex;justify-content:flex-start;">
          <div class="one_search">
            <el-input v-model="query.name" placeholder="名称" clearable></el-input>
          </div>
          <div class="two_search">
            <el-select v-model="query.status" clearable placeholder="全部" style="margin-left: 10px;">
              <el-option label="未发布" value="0"></el-option>
              <el-option label="已发布" value="1"></el-option>
              <el-option label="已停用" value="2"></el-option>
            </el-select>
          </div>
          <el-button type="primary" style="margin-left: 10px;" @click="queryData()" icon="el-icon-search">搜索</el-button>
        </div>
         <div style="margin-left: 10px;"><el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button></div>
          <div>
          <el-button type="primary"  style="margin-left: 10px;" @click="jumpRouter(1)" icon="el-icon-plus">添加受众</el-button>
        </div>
      </div>
    </el-header>
    <el-container style="margin-left:20px">
      <el-main >
        <el-table :data="tableData" border v-loading="loading" style="width: 100%">
          <el-table-column prop="name" label="名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="previewStyle" @click="viewDetail(scope.row)">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sysCreateTime" label="创建日期" align="center" width="160px"></el-table-column>
          <el-table-column prop="users" label="人数" width="50px" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">已发布</span>
              <span v-if="scope.row.status == 0">未发布</span>
              <span v-if="scope.row.status == 2" style="color: #da0000;">已停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="gtype" label="类型" width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.gtype == 1">普通受众</span>
              <span v-if="scope.row.gtype == 2">自动受众</span>
            </template>
          </el-table-column>
          <el-table-column  label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button type="text"  @click="editRouter(1,scope.row)">修改</el-button>
              <el-button type="text"  @click="copyDialog(scope.row)">复制</el-button>
              <el-button type="text"  v-if="scope.row.status == 0" @click="publish(1,scope.row)">发布</el-button>
              <el-button type="text"  v-if="scope.row.status == 1" @click="publish(2,scope.row)">停用</el-button>
              <el-button type="text"  v-if="scope.row.status == 2" @click="publish(1,scope.row)">启用</el-button>
              <el-button v-if="scope.row.deletable" type="text"  @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-main>
    <el-dialog title="复制受众" :visible.sync="copyUserGroupShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
        <el-form ref="copyForm" :rules="copyRules" :model="copyForm" label-width="100px">
          <el-form-item label="受众名称:" prop="name">
            <el-input
              v-model="copyForm.name"
              placeholder="请输入受众名称"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="copyUserGroupShow= false">取 消</el-button>
          <el-button type="primary" @click="copy">复制受众</el-button>
        </span>
    </el-dialog>
  </el-container>
   <div v-if="tableData.length > 0" style="text-align: center; margin-top:50px">
           <!-- <el-pagination
           @current-change="handleCurrentPushChange"
            @size-change="handleSizePushChange"
            background
            :total="page.total"
            :current-page.sync="page.pageIndex"
             :page-size="page.pageSize"
            :page-sizes="[10, 20, 30, 40]"


            layout="total, prev, pager, next"
            ></el-pagination> -->
       <el-pagination background
      @size-change="handleSizePushChange"
      @current-change="handleCurrentPushChange"
      :current-page.sync="page.pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.pageSize"
      layout="total,sizes, prev, pager, next,jumper"
      :total="page.total">
    </el-pagination>
        </div>

  </el-container>
</template>

<script>
  import usergroupApi from "@/api/modules/usergroup";
  import apiDeleteCheck from "@/api/modules/course";

  export default {
    data() {
      return {
        query:{
          name:'',
          status:'',
        },
        loading:true,
        page:{
          total:0,
          pageSize:10,
          pageIndex:1
        },
        // 表格数据
        tableData: [],
        copyUserGroupShow:false,
        copyRules:{ name: [{ required: true, message: "请输入名称", trigger: "blur" }]},
        copyForm:{name:'',id:''},
      }
    },
    mounted() {
      this.loadData(this.page,this.query);
    },
    methods: {
      reset(){
        this.query.name = ''
        this.query.status = ''
        this.loadData(this.page,this.query);
      },
      handleSizePushChange(val){

      this.page.pageSize = val
      this.page.pageIndex = 1
      this.loadData(this.page,this.query);
    },
    handleCurrentPushChange(val) {
      this.page.pageIndex = val
      this.loadData(this.page,this.query);
    },
    viewDetail(row){
      this.$router.push({path:'/manage/viewugroup', query: {id: row.id}})
    },
      jumpRouter(type){
        if(type==1){
          this.$router.push({path:'/manage/addaudiences'})
        }
        if(type==2){
          this.$router.push({path:'/manage/autoaddaudiences'})
        }
      },
      editRouter(type,row){
        if(type==1){
          this.$router.push({path:'/manage/addaudiences', query: {id: row.id}})
        }
        if(type==2){
          this.$router.push({path:'/manage/autoaddaudiences'})
        }
      },
      queryData(){
        this.page.pageIndex = 1;
        this.loadData(this.page, this.query);
      },
      loadData(page, params = {}){
        this.loading = true;
        params.pageIndex = page.pageIndex;
        params.pageSize = page.pageSize;
        usergroupApi.list(Object.assign(params, this.query)).then((res) => {
          if (res.status == 200) {
            const result = res.result;
            let ids=[];
            result.list.forEach(item=>{
              item.deletable=false;
              ids.push(item.id);
            })
            this.tableData = result.list;
            this.page.total = result.count;
            if(ids.length>0){
              this.checkAllowDelete(ids);
            }
            this.loading = false;
          }else{
            this.$message({ type: "error", message: "查询失败:"+res.message,offset:50});
          }
        });
      },
      checkAllowDelete(ids){
        if(ids.length==0){
          return;
        }
        apiDeleteCheck.queryCrowd(ids).then(rs=>{
           if(rs.status==200){
              this.tableData.forEach((item=>{
                  if(rs.result[item.id]){
                    item.deletable=true;
                  }
              }))
           }
        })
      },
      currentChange(pageIndex){
        this.page.pageSize = pageIndex
        this.page.pageIndex = pageIndex;
        this.loadData(this.page,this.query);
      },
      del(row){
        this.$confirm('您确定要删除所选受众吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          usergroupApi
          .del(row.id)
          .then((res) => {
            if (res.status == 200) {
              this.loadData(this.page,this.query);
              this.$message({ type: "success", message: "删除受众成功",offset:50});
            }
          })
          .catch((res) => {
            this.$message({ type: "error", message: res.message,offset:50 });
          });
        })
      },
      publish(status,row){
        let opt = "发布";
        if(status === 0){
          opt = "取消发布";
        }else if(status === 1){
          opt="启用";
        }else if(status === 2){
          opt="停用";
        }
        this.$confirm('您确定要'+opt+'所选受众吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          usergroupApi.publish(status,row.id).then((res) => {
            if (res.status == 200) {
              row.status=status;
              this.$message({ type: "success", message: opt+"受众成功",offset:50});
            }else{
              this.$message({ type: "error", message: res.message ,offset:50});
            }
          }).catch((res) => {
            this.$message({ type: "error", message: res.message ,offset:50});
          });
        })
      },
      copyDialog(row){
        this.copyUserGroupShow = true;
        this.copyForm.id = row.id;
        this.copyForm.name = row.name;
      },
      copy(){
        this.$refs.copyForm.validate((valid) => {
          if (valid) {
              usergroupApi.copy(this.copyForm).then((res) => {
                  if (res.status == 200) {
                    this.$message({ type: "success", message: "复制受众成功" ,offset:50});
                    this.loadData(this.page,this.query);
                    this.copyUserGroupShow = false;
                  }
                })
                .catch((res) => {
                  this.$message({ type: "error", message: res.message ,offset:50});
                });
            }
        });
      },
    },
  }
</script>

<style>
  .el-aside{
    padding: 0px 2px 10px 0px;
  }
  .el-main{
    padding: 0px 0px;
  }
  .one_search {
    display: flex;
  }

  .big_box_person {
    display: flex;
  }

  .box-card {
    margin-top: 20px;
    ;
  }

  .newdata_from {
    margin-top: 20px;
    margin-left: 50px;
  }

  .organization {
    display: inline-block;
    width: 120px;
  }

  .new_select {
    width: 400px;
  }
  .content_big{
    display: flex;
  }

</style>
