<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="yqrange-index-content screenSet">
      <el-tabs v-model="activeName" @tab-click="tabChangeHandler">
        <el-tab-pane label="活动管理" name="first" v-if="showAllFlag">
      <el-form ref="searchForm" :model="searchForm"  label-suffix=":" :inline="true">
        <el-row  type="flex" style="margin-top: 10px">
          <el-col :span="5">
            <el-form-item label="活动ID">
              <el-input v-model="searchForm.activityId" size="mini" placeholder="请输入活动ID"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="后台标题">
              <el-input v-model="searchForm.titleManager" size="small" placeholder="请输入后台标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="前台主标题">
              <el-input v-model="searchForm.titleViewMain" size="small" placeholder="请输入前台主标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态">
            <el-select
              v-model="searchForm.status"
              placeholder="请选择"
              size="mini"
              style="width: 100px;">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            </el-form-item>
        </el-col>
          <el-col :span="4" style="text-align: right">
            <el-button type="primary" size="small" @click="search">搜索</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="createActivity" >新建活动</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="activityId" label="活动ID"  align="center"></el-table-column>
        <el-table-column prop="titleManager" label="后台标题" width="175" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="titleViewMain" label="前台主标题" width="175" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createdName" label="创建者"  align="center"></el-table-column>
        <el-table-column prop="modifiedName" label="最后修改" align="center"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态"  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | activityStatus }}</span>
         
          </template>
        </el-table-column>
        <el-table-column prop="doctorCount" label="活动成员数" min-width="100" align="center"></el-table-column>
        <el-table-column label="操作" min-width="370" align="center">
          <template slot-scope="scope">
                    <el-button @click="editRange(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteActivity(scope.row)" type="text" size="small">删除</el-button>
              <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="activityManage(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, 200]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows"
        ></el-pagination>
      </div>
        </el-tab-pane>
        <el-tab-pane label="报名审核列表" name="second" v-if="showAllFlag">
          <range-apply></range-apply>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { getActivityList,removeActivity,updateActivityStatus} from '@/utils/activitymanagement/activitymanagementApi';
  import ElTabPane from "element-ui/packages/tabs/src/tab-pane";
  import RangeApply from "./range-apply";
export default {
  components: {
    RangeApply,
    ElTabPane,
    BreadCrumb
  },
  data(){
    return{
      curmbFirst: '活动管理',
      activeName: 'first',
      showAllFlag: false,
      searchForm: {
        activityId:"",//活动id
        titleManager: '',//后台标题方便管理
        titleViewMain: '',//前端主标题
        titleViewSub: '',//前端副标题
        createdTime: '',
        // endTime: '',
        userType: "", // 用户标识 1：内部用户 2：外部用户,
        status: "",
        pageNo: 1,
        pageSize: 10,
      },
      totalRows: 0,
      tableData: [],
      statusList: [
          {
            value: 1,
            label: "已发布"
          },
          {
            value: 2,
            label: "未发布"
          },
        ],
      idType: ""
    }
  },
  created() {
    this.initPrivilege();
    this.search();
  },
  methods: {

    tabChangeHandler(tab) {},

    initPrivilege(){
      this.idType = localStorage.getItem('storageIdType');
      this.searchForm.userType = this.idType;
      // 内部用户:运营人员
      if(this.idType == "1"){
        this.showAllFlag = true;
      }
    },


    // 搜索
    search(){
      this.searchForm.pageNo = 1;
      this.searchList();
    },

    searchList() {
      openLoading(this);
      let params = this.searchForm;
      getActivityList(params).then((res) => {
        closeLoading(this);
        if(res.code == "000000") {
          this.tableData = res.data.activityModelList;
          this.totalRows = res.data.total;
        } else {
          this.tableData = [];
        }
      }).catch((error) => {
        this.$message.error("请重试");
      })
    },
    //删除活动
    removeActivity(activityId){
      let params = {
        "activityId": activityId
      }
      openLoading(this);
      removeActivity(params).then((res) => {
      closeLoading(this);
      if(res.code == "000000"){
        this.$message.success("删除成功");
        this.searchList();
      }
      }).catch((error) => {
        this.$message.error("请重试");
      }

      )
    },
    resetForm() {
      this.searchForm.activityId = "";
      this.searchForm.titleManager = "";
      this.searchForm.titleViewMain = "";
      this.searchForm.status = "";
      this.search();
    },
    //新建活动
    createActivity() {
      let enterType = 1;//1:add 2 edit
      this.$router.push({
        path: `/create-activity?enterType=${enterType}`
      })
    },
    //发布
    publishRange(row) {
        this.updateStatus(row.activityId, 1);
    },
    //下线
    unPublishRange(row) {
      var content = '';
      if (row.doctorCount == 0){
        content = '确认要下线该活动吗?'
      }else if (row.doctorCount > 0){
        content = '该活动的' + row.doctorCount + '个成员将无法参与活动,确认下线吗?'
      }
      this.$confirm(`${content}`, '', {
        confirmButtonText: '下线',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'range-make-box',
      }).then(() => {
        this.updateStatus(row.activityId, 2);
        //  confirm
      }).catch(() => {
        //  cancel

      });
    },
    // 更新活动状态（上线，下线）
    updateStatus(id, status){
      let params = {"activityId": id, "deployFlag": status};
      updateActivityStatus(params).then((res) => {
        closeLoading(this);
        if(res.code == "000000") {
          if(status == 2){
            this.$message.success("下线成功");
          } else if(status == 1) {
            this.$message.success("发布成功!");
          } 
          this.searchList();
        } else {
          if(status == 2){
            this.$message.error("下线失败，请重试");
          } else if(status == 1) {
            this.$message.error("发布失败，请重试");
          } 
        }
      }).catch((error) => {
        if(status == 2){
          this.$message.error("下线失败，请重试");
        } else if(status == 1) {
          this.$message.error("发布失败，请重试");
        } 
      })


    },

    deleteActivity(row) {
      var content = '';
      if (row.doctorCount == 0){
        content = '确认要删除该活动吗?'
      }else if (row.doctorCount > 0){
        content = '该活动的' + row.doctorCount + '个成员将无法参与活动,确认删除吗?'
      }
      this.$confirm(`${content}`, '', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'range-make-box',
      }).then(() => {
        this.removeActivity(row.activityId);
        //  confirm
      }).catch(() => {
        //  cancel

      });
    },
    //编辑
    editRange(row) {
      let enterType = 2;//1:add 2 edit
      this.$router.push({
        path: `/create-activity?enterType`,
        query:{
          id:row.activityId,
          enterType:enterType,
          roleType: row.roleId
        }
      })
    },
    activityManage(row){
      this.$router.push({
        path: '/activity-member',
        query: {
          id: row.activityId,
          name: row.titleViewMain,
          activeName: 'first',
        }
      })
    },


    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.search();
    },
    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>
