<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="yqrange-index-content screenSet">
      <el-tabs v-model:value="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:value="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:value="searchForm.titleManager"
                    size="small"
                    placeholder="请输入后台标题"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="前台主标题">
                  <el-input
                    v-model:value="searchForm.titleViewMain"
                    size="small"
                    placeholder="请输入前台主标题"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="状态">
                  <el-select
                    v-model:value="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 v-slot="scope">
                <span>{{
                  $filters.liveDateFilter(scope.row.createdTime)
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template v-slot="scope">
                <span>{{ $filters.activityStatus(scope.row.status) }}</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 v-slot="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;
      }
    }
  }
}
</style>
