<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="活动列表" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />
            <Button type="primary" @click="getActivities">查询</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;" @click="$refs['addActivity'].isShow = true,$refs['addActivity'].type = 'add'">添加</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :list="list"
      :total="total"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange"
      :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" size="small" @click="editorActivity(scope.row.id,'editor')">编辑</Button>
             <Button v-if="scope.row.audit_status==0" style="margin-left: 10px;" type="primary" size="small" @click="checkActivity(scope.row.id)">审核</Button>
            <Button type="primary" size="small" style="margin-left: 10px;" @click="editorActivity(scope.row.id,'copy')">复制新增</Button>
            <Poptip
              transfer
              confirm
              title="确认要删除吗？"
              @on-ok="deleteActivity(scope.row)">
              <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>

      </xy-table>

    <addActivity ref="addActivity" @refresh="getActivities"></addActivity>
    <checkActivity ref="checkActivity" @refresh="getActivities"></checkActivity>
    <showActiveOrder :id="activeId" :name="activeName" :is-show.sync="isShowOrder"></showActiveOrder>
  </div>
</template>

<script>
import {index,destroy} from "@/api/activity"

import addActivity from '@/views/activity/component/addActivity'
import checkActivity from '@/views/activity/component/checkActivity'
import showActiveOrder from '@/views/activity/component/showActiveOrder'
import { Message } from 'element-ui'
export default {
  components:{
    addActivity,
    showActiveOrder,
    checkActivity
  },
  data() {
    return {
      select:{
        pageSize:10,
        pageIndex:1,
        keyword:""
      },

      total:0,
      list:[],
      isShowOrder:false,
      activeId:null,
      activeName:"",
      table:[
        {
          label:"活动名称",
          width: 220,
          prop:'active_name',
          align:'left',
          fixed:'left',
        },
        {
          label:"状态",
          width: 180,
          prop:'audit_status',
          align:'center',
          formatter:(cell,data,value)=>{
            return value==0 ? '待审核':(value==1 ?'通过':'不通过')
          }
        },
        {
          label:"活动关联方",
          width: 220,
          prop:'company',
          align:'left',
          customFn:(row)=>{
            if(row.company_ids){
              let companys = JSON.parse(row.company_ids)
              return(
                <div>
                {
                  companys.map((item,index)=>{
                    return(
                      <div>{item['type_name']}:{item['name']}</div>
                    )
                  })
                }
                </div>

              )
            }
          }

        },
        // {
        //   label:"主办方",
        //   width: 140,
        //   prop:'sponsor'
        // },
        {
          label:"主办方logo",
          width: 140,
          prop:'logo',
          customFn:(row)=>{
            if(row.sponsor_logo){
              return (<el-image style={{'height':'90px'}} src={row.sponsor_logo}></el-image>)
            }
          }
        },
        {
          label:"主办方宣传语",
          width: 200,
          prop:'sponsor_advertise',
          align:'left'
        },
        {
          label:"活动海报",
          width: 240,
          align:'left',
          prop:'poster',
          customFn:(row)=>{
            if(row.active_playbill){
              return (<el-image style={{'height':'110px'}} src={row.active_playbill}></el-image>)
            }
          }
        },
        {
          label:"活动开始时间",
          width: 240,
          prop:'start_date',
          customFn:(row)=>{
            return (<div>{row.start_date} {row.start_time}</div>)
          }
        },
        {
          label:"活动结束时间",
          width: 240,
          prop:'end_date',
          customFn:(row)=>{
            return (<div>{row.end_date} {row.end_time}</div>)
          }
        },
        {
          label:"活动地址",
          minWidth: 260,
          align:'left',
          prop:'address'
        },
        // {
        //   label:"金额",
        //   width: 150,
        //   prop:'money',
        //   align:"right"
        // },
        {
          label:"总活动名额",
          width: 140,
          prop:'member_sum',
          formatter:(cell,data,value)=>{
            return value ?? 0
          }
        },
        {
          label:"初始活动名额",
          width: 140,
          prop:'start_member_sum',
          formatter:(cell,data,value)=>{
            return value ?? 0
          }
        },
        {
          label:"剩余名额",
          width: 140,
          prop:'apply_sum',
          customFn:(row)=>{
            return (<div>{row?.member_sum - row?.start_member_sum - row?.total}</div>)
          }
        },
        {
          label:"已报名数",
          width: 140,
          prop:'total',
          customFn: (cell) => {
            return ( < div style = {
                {
                  cursor: 'pointer',
                  color: "blue",
                  textDecoration: "underline"
                }
              }
              on = {
                {
                  ['click']: (e) => {
                    if(cell.total<1){
                      return
                    }
                    this.activeId = cell.id;
                    this.activeName = cell.active_name
                    this.isShowOrder = true;
                  }
                }
              }

              >
              {
                cell.total?cell.total:0
              } </div> )
            }


          // formatter:(cell,data,value)=>{
          //   return value ?? 0
          // }
        }
        // {
        //   label:"状态",
        //   prop:'type_name'
        // }
      ]
    }
  },
  methods: {
    async getActivities(){
      const res = await index({
        rows:this.select.pageSize,
        page:this.select.pageIndex,
        keyword:this.select.keyword
      })
      this.list = res.data
      this.total = res.total
    },

    pageChange(e){
      this.select.pageIndex = e
    },

    deleteActivity(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除活动成功'
        })
        this.getActivities()
      })
    },
    editorActivity(id,type){
      this.$refs['addActivity'].id = id
      this.$refs['addActivity'].type = type
      this.$refs['addActivity'].isShow = true
    },
    checkActivity(id){
      this.$refs['checkActivity'].id = id
      // this.$refs['addActivity'].type = type
      this.$refs['checkActivity'].isShow = true
    }
  },
  mounted() {
    this.getActivities()
  }

}
</script>

<style scoped lang="scss">
</style>
