<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;
  }

</style>
<template>
  <div class="page-body activeType">
    <div class="page-search row items-center">
      <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.TypeName" label="类型名称"
            @clear="resetSearch" maxlength="20" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-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-CoverImage="props">
          <q-td :props="props">
            <div class="app-image"
                :style="{backgroundImage:'url(' + props.row.CoverImage + ')',backgroundSize:'cover'}">
              </div>
          </q-td>
        </template>
        <template v-slot:body-cell-label="props">
          <q-td :props="props">
            <span v-for="(LItem,Lindex) in props.row.LableNameList" style=""
                :key="Lindex">{{LItem}}{{Lindex+1 == props.row.LableNameList.length ?'':'、'}}</span>
          </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="delType(props.row)" />
            </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>
    <!-- 新增修改活动类型 -->
     <ActiveTypeForm v-if="showForm" @close="closeruleset" :save-obj="typeObj" @success="resetSearch">
     </ActiveTypeForm>
  
  </div>
</template>
<script>
import ActiveTypeForm from '../../components/activity/activeType-from'
  export default {
    meta: {
      title: "活动类型"
    },
    components: {
        ActiveTypeForm
    },
    data() {
      return {
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 5,
          TypeName: '',
        },
        pageCount: 0,
        columns: [{
            name: "Id",
            label: "编号",
            field: "Id",
            align: "left"
          },
          {
            name: "TypeName",
            label: "类型名称",
            field: "TypeName",
            align: "left"
          },
          {
            name: "CoverImage",
            required: true,
            label: "封面图",
            align: "left",
          },
          {
            name: "label",
            label: "标签",
            align: "left"
          },
          {
            name: 'optioned',
            label: '操作',
            align: "left"
          }
        ],
        showForm:false,
        typeObj:{}
      }
    },

    mounted() {
      this.getList();
    },
    methods: {
        getList(){
            this.loading = true;
            this.apipostDS("/api/Education/GetActivityTypePage",this.msg,(res)=>{
                this.loading = false
                if(res.data.resultCode===1){
                    this.data = res.data.data.pageData;
                    this.pageCount = res.data.data.pageCount;
                }
            })
        },
       delType(item){
            let that = this;
            that.Confirm("是否删除?", function () {
              that.apipostDS(
                "/api/Education/RemoveCommerceActivityType", {
                  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;
      },

    }
  }

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

</style>
