<template>
  <div>
    <Modal :width="80" :value.sync="isShow" :fullscreen='isFullScreen'
      @on-visible-change="$emit('update:isShow',$event)">
      <div class="ivu-modal-header ivu-modal-header-wrap">
        <template v-solt:header>
          {{name+'订单列表'}}
          <a class="ivu-modal-screen" @click="isFullScreen=!isFullScreen"><i
              :class="isFullScreen?'el-icon-aim':'el-icon-full-screen'"></i></a>
        </template>
      </div>

      <Button class="select" type="primary" style="margin-bottom: 10px;" @click="downloadExel">导出</Button>
      <xy-table id="print" :is-page="false" :list="list" :table-item="table">
        <template v-slot:btns>
          <div></div>
        </template>
      </xy-table>
    </Modal>
  </div>
</template>

<script>
  import {
    show,
    cancelUser
  } from "@/api/activity"
  import {
    download
  } from '@/utils/downloadRequest'
  export default {
    props: {
      id: Number,
      state: {
        type:String,
        default:''
      },
      name: String,
      isShow: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isFullScreen: false,
        statusNames:[{
        	id:0,
        	name:'申请取消'
        },{
        	id:1,
        	name:'待核销'
        },{
        	id:2,
        	name:'已取消'
        },{
        	id:3,
        	name:'已核销'
        }],
        list: [],
        table: [{
            prop: "created_at",
            label: "报名时间",
            width: 180
          }, {
            prop: "used_time_name",
            label: "状态",
            width: 120,
            // formatter(value){
            //   return value=='申请取消'?(
            //     <div>{value}</div>
            //   ):value
            // }
            customFn:(row)=>{
                if(row.used_time_name=='申请取消'||row.used_time_name=='待核销'){
                  return (<div
                    style={
                      {
                        color:'#bf617c',
                        'text-decoration': 'underline',
                        cursor:'pointer'
                      }
                    }
                    on = {
                      {
                        ['click']: (e) => {
                          this.cancelUser(row.id)
                        }
                      }
                    }
                  >{row.used_time_name}</div>)
                }else{
                    return (
                    <div>{row.used_time_name}</div>
                    )
                }
            }
          }, {
            prop: "code",
            label: "核销码",
            width: 120
          }, {
            prop: "name",
            label: "姓名",
            width: 120
          },
          {
            prop: "wechat_nickname",
            label: "微信昵称",
            width: 120
          },
          {
            label: "头像",
            width: 80,
            prop: "members.avatar",
            customFn: (row) => {
              return ( <div style = {
                {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              } > <el-avatar src = {
                row.members?.avatar
              } > </el-avatar></div > )
            }
          },

          {
            prop: "phone",
            label: "联系电话",
            width: 120
          },
          {
            prop: "area",
            label: "区域",
            width: 120
          },
          {
            prop: "address",
            label: "地址",
            width: 120
          },
          {
            prop: "budget_date",
            label: "预产期",
            width: 120
          },
          {
            prop: "hospital",
            label: "建卡医院",
            width: 120
          },
          {
            prop: "spread_member_name",
            label: "推广渠道",
            width: 120
          },
          {
            prop: "spread_member_phone",
            label: "推广人号码",
            width: 120
          },
          {
            prop: "remark",
            label: "备注",
            width: 120
          }

        ],
      }
    },
    methods: {
      closeshowChange() {},
      fullScreen() {},
      cancelUser(id){
        console.log("123")
        this.$Modal.confirm({
            title: '取消活动',
            content: '是否确认取消该用户报名的活动？',
            loading: true,
            onOk: () => {
                cancelUser({
                  id:id
                }).then(res=>{
                  this.$Modal.remove();
                  this.$Message.info('取消成功');
                  this.getOrder()
                })
            }
        });
      },
      async getOrder() {
        await show({
          id: this.id,
          state:this.state
        }).then(res => {
          for (var k of res.apply) {
            k.wechat_nickname = k.members ? k.members.wechat_nickname : ""
            // k.used_time_name = k.used_time ? '已核销' : '待核销'
            k.spread_member_name = k.spread_member ? k.spread_member.name : ''
            k.spread_member_phone = k.spread_member ? k.spread_member.phone : ''
            for(var s of this.statusNames){
              if(k.state==s.id){
                 k.used_time_name = s.name
              }
            }
          }
          this.list = res.apply
        })

      },
      downloadExel() {
        // this.$Print('#print')
        this.$Export.excel({
          title: this.name,
          columns: this.table,
          data: this.list
        });
        // download(
        //   '/api/admin/active/show',
        //   'get', {
        //     id:this.id
        //   },
        //   this.name+'.xlsx')
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getOrder()
        }else{
          this.id=''
          this.name=''
          this.state = ''
        
        }
      }
    }

  }
</script>

<style scoped>
  .ivu-modal-header-wrap {
    margin-bottom: 10px;
    padding-top: 0;
  }
    .ivu-modal-screen {
      top: 16px;
    }
  .ivu-modal-close {
    top: 7px
  }
  /deep/ .ivu-modal-body .el-table{
    height: 50vh !important;
  }
  /deep/ .ivu-modal-fullscreen .el-table{
      height: 80vh !important;
    }

</style>
