<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="状态" @change="resetSearch"/>
         </div>
      </div>
      <!-- <div class="col row wrap q-mr-lg q-col-gutter-md">
        
      </div>
       <div class="col row wrap q-mr-lg q-col-gutter-md">
         
      </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>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增" @click="editQuotation(null)" />
          </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>{{props.row.AgeLimit ==1?'不区分年龄':'区分年龄'}}</div>
                    <div v-if="props.row.AgeLimit==0">范围:{{props.row.StartAge}}岁~{{props.row.EndAge}}岁</div>
                    <div>报名人数</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>
          </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 v-if="props.row.IsFree==2" style="color:red;">现金点数:{{props.row.PointNum}}点</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-JoinNum="props">
          <q-td :props="props">
              <div>
                        {{props.row.JoinNum}} 人
              </div>
          </q-td>
        </template> -->
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div>
              <q-btn  flat size="xs" icon="edit"
                color="accent" style="font-weight:400" label="编辑" @click="editQuotation(props.row)" />
              <!-- <q-btn  flat size="xs" icon="edit"
                color="accent" style="font-weight:400" label="删除" @click="delActive(props.row)" /> -->
                <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
                <q-list>
                  <q-item clickable v-close-popup  @click="delActive(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/activeSignUpList',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/payment',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/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>
  
   <!-- 报名信息 -->
    <!-- <el-dialog title="报名信息" :visible.sync="dialogTableVisible" width="1100px">
      <el-table :data="joinData" style="width:100%;">
        <el-table-column property="LinkMan" label="联系人" width="100"></el-table-column>
        <el-table-column property="LinkTel" label="联系电话" width="120"></el-table-column>
        <el-table-column property="PeopleNum" label="人数" width="60"></el-table-column>
        <el-table-column property="Money" label="付款方式" width="180">
           <template slot-scope="scope">
             <span v-if="scope.row.PaymentWay==6">星星支付:{{scope.row.TotalPoint}}点</span>
             <span v-if="scope.row.PaymentWay==1">现金支付:{{scope.row.Money}}元</span>
          </template>
        </el-table-column>
        <el-table-column property="Remark" label="备注" width="150"></el-table-column>
        <el-table-column property="PaymentTime" label="报名时间" width="200"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.IsApplyForCancel==1">
              <el-button size="mini" type="primary" @click="agreeApply(scope.row)">同意</el-button>
              <el-button size="mini" type="danger" @click="jujueMsg(scope.row)">拒绝</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog> -->
    
  </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: 5,
          ActivityName: '',
          SelectStartTimeStr:"",
          SelectEndTimeStr:"",
          SelectIsEnd:-1,
        },
        pageCount: 0,
        activityTypeList:[],
         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();
      this.getActiveTypeList();
    },
    methods: {
        // getItem(item) {
        //     this.joinMsg.ActivityId = item.Id;
        //     this.getJoinData();
        // },
      
      
      //获取活动类型下拉
        getActiveTypeList(){
            this.apipostDS("/api/Education/GetCommerceActivityTypeList",{},(res)=>{
                if(res.data.resultCode===1){
                   this.activityTypeList = res.data.data;
                   this.activityTypeList.unshift({
                       Id:-1,
                       TypeName:"不限"
                   })
                }
            })
        },
        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,type=0){
        if(type===1){
          this.$router.push({
          path:url,
          query:{
            name:item.ActivityName
          }
        })
        }else{
          this.$router.push({
          path:url,
          query:{
            Id:item.Id
          }
        })
        }
        
      }
    }
  }

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

</style>
