<style>
  li {
    list-style-type: none;
  }

  .activeType ul {
    padding: 0px;
  }

  .activeType li {
    background: rgba(221, 222, 224, 0.2);
    border-radius: 4px;
    margin-top: 15px;
  }

  .activeType li .dline {
    display: table;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .activeType li .d1,
  .activeType li .d2,
  .activeType li .d3,
  .activeType li .d4,
  .activeType li .d5 {
    width: 18%;
    padding: 20px 20px 10px;
  }

  .activeType li .d7 {
    flex: 1;
    width: 1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .activeType li .d1 .di-title {
    font-size: 16px;
    color: #111111;
  }

  .activeType li .d1 .di-c {
    font-size: 14px;
    display: flex;
    line-height: 28px;
    color: #111111;
  }

  .activeType li .d6 {
    padding: 10px 20px;
    width: 100%;
    height: inherit;
    position: relative;
    border-top: 1px solid #dddee0;
  }

  .activeType li .d6 .progress {
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .activeType li .d2 div {
    margin: 2px 0;
    font-size: 14px;
    color: #111111;
  }

  .activeType li .d2-n {
    font-size: 12px;
    color: #999999;
    margin-right: 20px;
  }

  .activeType li .d3 .d3-s {
    color: var(--q-color-negative);
    font-weight: bold;
  }

  .activeType li .d3 div {
    margin: 2px 0;
    font-size: 14px;
  }

  .activeType li .d4 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .activeType li .d5 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .activeType .myCourseNName {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff !important;
    text-align: center;
    line-height: 25px;
    background-color: #004d40;
  }

  .activeType .app-image {
    background-position: center center;
    width: 50px;
    height: 50px;
    border-radius: 0%;
    float: left;
    margin-right: 8px;
  }

  .Sysuser_Date .el-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .Sysuser_Date .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .syster_qDropdown .q-btn__wrapper {
    padding: 0 3px;
    min-height: 0 !important;
  }

</style>
<template>
  <div class="page-body activeType">
    <div class="page-search row items-center flex">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ActivityName"
            label="活动名称" @clear="resetSearch" maxlength="20" />
        </div>

        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="msg.SelectStartTimeStr" type="date" placeholder="选择开始日期"
                value-format="yyyy-MM-dd" @change="resetSearch">
              </el-date-picker>    
            </template>
          </q-field>
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="msg.SelectEndTimeStr" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"
                @change="resetSearch">
              </el-date-picker>    
            </template>
          </q-field>
        </div>
        <div class="col-3 ">
          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.SelectIsEnd"
            class="col-6 q-pr-lg q-pr-lg" :options="statusOpts" emit-value map-options label="状态"
             />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-tow-column-table sticky-right-column-table" separator="none" :data="data" :columns="columns"
        row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">活动列表</div>
        </template>
        <template v-slot:body-cell-activeName="props">
          <q-td :props="props">
            <div style="display:flex;align-items:center">
              <div class="app-image"
                :style="{backgroundImage:'url(' + props.row.CoverImg + ')',backgroundSize:'cover'}">
              </div>
              {{props.row.ActivityName}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-ActivityTime="props">
          <q-td :props="props">
            <div>
              <div>活动时间：</div>
              <div>{{props.row.StartTimeStr}}~{{props.row.EndTimeStr}}</div>
              <div>报名时间：</div>
              <div>{{props.row.SignStartTimeStr}}</div>
              <div>{{props.row.SignEndTimeStr}}</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-AgeAndPeopleNum="props">
          <q-td :props="props">
            <div>
              <div v-if="props.row.Distinguish ==1">总人数:{{props.row.ManNum}}人</div>
              <div v-if="props.row.Distinguish ==0">男性:{{props.row.ManNum}}人 <span
                  style="margin-left:10px">女性:{{props.row.WoManNum}}人</span> </div> 
              <div >
                已报入:{{props.row.JoinNum}}人
              </div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-activePrice="props">
          <q-td :props="props">
            <div>
              <div v-if="props.row.IsFree==1" style="color:green;">免费</div>
              <div v-if="props.row.IsFree==2" style="color:red;">现金价格:{{props.row.Price}}元</div>
              <div>报名取消确认:{{props.row.IsCancelConfirm==1?'是':'否'}}</div>
              <div>内部限制:{{props.row.IsCancelConfirm==1?'是':'否'}}</div>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-LocationName="props">
          <q-td :props="props">
            <div style="width:200px;white-space: pre-line;">
              {{props.row.LocationName}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div>
              <q-btn flat size="xs" color="accent" style="font-weight:400" label="报名列表"
                @click="goUrl1('/activity/activeSignUpList',props.row)" />
              <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
                <q-list>
                  <q-item clickable v-close-popup @click="goUrl('/activity/activeDetail',props.row)">
                    <q-item-section>
                      <q-item-label>活动详情</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="goUrl('/activity/activeSummary',props.row)"
                    v-if="props.row.ActivityStatus==2">
                    <q-item-section>
                      <q-item-label>活动总结</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="goUrl('/activity/materialMan',props.row)"
                    v-if="props.row.ActivityStatus==2">
                    <q-item-section>
                      <q-item-label>活动图片与视频</q-item-label>
                    </q-item-section>
                  </q-item>

                </q-list>
              </q-btn-dropdown>
            </div>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
    <!-- 新增修改活动类型 -->
    <!-- <ActiveForm v-if="showForm" @close="closeruleset" :save-obj="typeObj" :activeTypeOptions="activityTypeList" @success="resetSearch">
     </ActiveForm> -->

  </div>
</template>
<script>
  import ActiveForm from '../../components/activity/active-from'
  export default {
    meta: {
      title: "活动列表"
    },
    components: {
      ActiveForm
    },
    data() {
      return {
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          ActivityName: '',
          SelectStartTimeStr: "",
          SelectEndTimeStr: "",
          SelectIsEnd: -1,
          rowsPerPage: 10
        },
        pageCount: 0,
        statusOpts: [{
            label: "全部",
            value: -1
          },
          {
            label: "未开始",
            value: 0
          },
          {
            label: "已结束",
            value: 1
          },
          {
            label: "进行中",
            value: 2
          },
        ],

        columns: [{
            name: "Id",
            label: "编号",
            field: "Id",
            align: "left",
            required: true,
          },
          {
            name: "activeName",
            label: "活动名称",
            align: "left",
            required: true,
          },
          {
            name: "ActivityTypeName",
            label: "活动类型",
            align: "left",
            field: "ActivityTypeName"
          },
          {
            name: "ActivityTime",
            label: "活动时间",
            align: "left"
          },
          {
            name: "AgeAndPeopleNum",
            label: "总人数/已报入",
            align: "left"
          },
          {
            name: "activePrice",
            label: "活动费用",
            align: "left"
          },
          {
            name: "LocationName",
            label: "位置",
            field: "LocationName",
            align: "left",
            style: "width:100px"
          },
          {
            name: "activeStutes",
            label: "活动状态",
            field: "ActivityStatusStr",
            align: "left"
          },
          //  {
          //   name: "JoinNum",
          //   label: "报名人数",
          //   field:"JoinNum",
          //   align: "left"
          // },
          {
            name: 'optioned',
            label: '操作',
            required: true,
            align: "left"
          }
        ],
        // //报名列表
        // dialogTableVisible: false, //是否显示弹窗
        // joinData: [], //报名信息
        // joinMsg: {
        //   LinkMan: '',
        //   EnrollState: 1,
        //   ActivityId: 0
        // },

        showForm: false,
        typeObj: {}
      }
    },

    mounted() {
      this.getList();
    },
    methods: {
      // getItem(item) {
      //     this.joinMsg.ActivityId = item.Id;
      //     this.getJoinData();
      // },



      getList() {
        this.loading = true;
        this.apipostDS("/api/Education/GetActivityPage", this.msg, (res) => {
          this.loading = false
          if (res.data.resultCode === 1) {
            this.data = res.data.data.pageData;
            this.pageCount = res.data.data.pageCount;
          }
        })
      },
      delActive(item) {
        let that = this;
        that.Confirm("是否删除?", function () {
          that.apipostDS(
            "/api/Education/RemoveActivity", {
              Id: item.Id,
              Status: 1
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
          );
        })
      },
      //刷新页面
      refreshPage() {
        this.showForm = false;
        this.getList();
      },
      //显示修改
      editQuotation(item) {
        this.showForm = true;
        if (item) {
          this.typeObj = item;
        } else {
          this.typeObj = {};
        }
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      //关闭弹窗
      closeruleset() {
        this.showForm = false;
      },
      goUrl(url, item) {
        if (item) {
          this.$router.push({
            path: url,
            query: {
              Id: item.Id
            }
          })
        } else {
          this.$router.push({
            path: url,
            query: {
              Id: 0
            }
          })
        }
      },
      goUrl1(url,item){
        this.$router.push({
            path: url,
            query: {
              Id: item.Id,
              name:item.ActivityName
            }
          })
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
