<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-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">
          <q-btn color="accent" size="sm" class="q-mr-md" label="返回" @click="goBack" />
          <div class="col-2 q-table__title">参与者名单</div>
          <q-space></q-space>
          <q-btn color="accent" style="float:right" v-if="from==1" size="sm" label="导出" @click="showExportDialog" />
        </template>
        <template v-slot:body-cell-Status="props">
          <q-td :props="props">
            <span v-if="props.row.Status===0">正常</span>
            <span v-if="props.row.Status===1">取消</span>
          </q-td>
        </template>
        <template v-slot:body-cell-OrderStatus="props">
          <q-td :props="props">
            <span v-if="props.row.OrderStatus===0">未支付</span>
            <span v-if="props.row.OrderStatus===1">已支付</span>
          </q-td>
        </template>
        <template v-slot:body-cell-quxiaomoney="props">
          <q-td :props="props">
            <span v-if="props.row.Status===1">{{props.row.Money}}</span>
          </q-td>

        </template>

        <template v-slot:body-cell-optioned="props">
          <q-td :props="props" v-if="props.row.IsApplyForCancel==1&&props.row.Status===0">
            <div>
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="同意"
                @click="agreeApply(props.row)" />
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="拒绝"
                @click="jujueMsg(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>
    <!-- 拒绝报名 -->
    <el-dialog title="拒绝报名" :visible.sync="showJujue" width="600px">
      <div class="activityFlex">
        <el-input type="textarea" rows="4" v-model="bdMsg.RejectRemark"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" size="small" @click="sureJujue">确定</el-button> -->
        <q-btn color="accent" size="sm" class="q-mr-md" label="确定" @click="sureJujue" />
      </span>
    </el-dialog>
    <!-- 导出弹窗 -->
    <q-dialog v-model="showExport" transition-show="scale">
      <q-card>
        <q-card-section>
          <div>
            选择导出信息
          </div>
          <div class="col-12 q-mt-sm q-mb-sm" style="background-color:#F3F5F6">
            <q-checkbox v-model="allCheck" label="全选" val='2' @input="allCheckType" />
          </div>
          <div class="flex row col">
            <div class="col-3" v-for="item in exportTypeList" :key="item.Id" text-color="primary">
              <q-checkbox v-model="checkType" :label="item.Name" :val="item.Id" />
            </div>
          </div>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="关闭" size="sm" color="primary" v-close-popup />
          <q-btn color="accent" size="sm" label="导出" @click="exportInfo" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
  export default {
    meta: {
      title: "报名列表"
    },

    data() {
      return {
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          ActivityId: 0,
          EnrollState: 3,
          rowsPerPage: 0
        },
        pageCount: 0,
        columns: [{
            name: "Id",
            label: "订单号",
            field: "Id",
            align: "left"
          },
          {
            name: "LinkMan",
            label: "联系人",
            field: "LinkMan",
            align: "left"
          },
          {
            name: "LinkTel",
            label: "联系电话",
            field: "LinkTel",
            align: "left"
          },
          {
            name: "UnitPrice",
            label: "单价",
            field: "UnitPrice",
            align: "left",
          },
          {
            name: "Money",
            label: "应收",
            field: "Money",
            align: "left",
          },
          {
            name: "Income",
            label: "实收",
            field: "Income",
            align: "left",
          },
          {
            name: "RefundPrice",
            label: "退款",
            field: "RefundPrice",
            align: "left",
          },
          {
            name: "PlatformTax",
            label: "平台税金",
            field: "PlatformTax",
            align: "left",
          },
          {
            name: "DueInMoney",
            label: "待收金额",
            field: "DueInMoney",
            align: "left",
          },

          {
            name: "Status",
            label: "状态",
            field: "Status",
            align: "left"
          },
          // {
          //   name: "OrderNo",
          //   required: true,
          //   label: "订单号",
          //   field: "OrderNo",
          //   align: "left",
          // },
          // {
          //   name: "OrderStatus",
          //   required: true,
          //   label: "订单状态",
          //   field: "OrderStatus",
          //   align: "left",
          // },
          // {
          //   name: "PaymentTime",
          //   label: "支付时间",
          //   field: "PaymentTime",
          //   align: "left"
          // },
          // {
          //   name: " quxiaomoney",
          //   label: "取消金额",
          //   align: "left"
          // },
          {
            name: "Remark",
            label: "备注",
            field: "Remark",
            align: "left"
          },
          {
            name: "CreateTime",
            label: "报名时间",
            field: "CreateTime",
            align: "left"
          },
          // {
          //   name: 'optioned',
          //   label: '申请取消审核状态',
          //   align: "left"
          // }
        ],
        showForm: false,
        typeObj: {},
        bdMsg: {
          Id: 0, //报名id
          ApplyForCancelStatus: 1, //申请取消审核状态 1同意 2拒绝
          RejectRemark: ''
        },
        showJujue: false,
        from: 0, //来源页面,1===活动=>活动管理=>活动列表
        showExport: false, //是否显示导出弹窗
        exportTypeList: [], //导出类型
        allCheck: false,
        checkType: []
      }
    },

    mounted() {
      if (this.$route.query.name) {
        this.msg.ActivityName = this.$route.query.name;
      }
      if (this.$route.query.Id) {
        this.msg.ActivityId = this.$route.query.Id
      }
      if (this.$route.query.from) {
        this.from = this.$route.query.from
      }
      this.getList();
      this.getEnumList();
    },
    methods: {
      getList() {
        this.loading = true;
        this.apipostDS("/api/Education/GetCommerceConsultAndFinancePage", this.msg, (res) => {
          this.loading = false
          if (res.data.resultCode === 1) {
            this.data = res.data.data;
          }
        })
      },
      //同意
      agreeApply(item) {
        this.bdMsg.Id = item.Id;
        this.bdMsg.ApplyForCancelStatus = 1;
        this.apipostDS("/api/Education/SetCommerceConsultApplyCancel", this.bdMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success("操作成功")
            this.getList()
          } else {
            this.Error(res.data.message);
          }
        })
      },
      jujueMsg(item) {
        this.bdMsg.Id = item.Id;
        this.showJujue = true;
      },
      // 拒绝
      sureJujue() {
        if (!this.bdMsg.RejectRemark) {
          this.Error("请输入拒绝原因")
          return
        }
        this.bdMsg.ApplyForCancelStatus = 2;
        this.apipostDS("/api/Education/SetCommerceConsultApplyCancel", this.bdMsg, res => {
          if (res.data.resultCode == 1) {
            this.showJujue = false;
            this.Success("操作成功")
            this.getList()
          } else {
            this.Error(res.data.message);
          }
        })
      },
      goBack() {
        this.$router.go(-1)
      },
      showExportDialog() {
        this.showExport = true
      },

      //获取导出类型枚举
      getEnumList() {
        this.apipostDS("/api/Education/GetConsultOrderExportExcelEnumList", {}, (res) => {
          if (res.data.resultCode === 1) {
            this.exportTypeList = res.data.data
          }
        })
      },
      allCheckType(val) {
        if (val) {
          this.checkType = []
          this.exportTypeList.map(e => {
            this.checkType.push(e.Id)
          })
        } else {
          this.checkType = []
        }
      },
      exportInfo() {
       this.GetLocalFileDS("/api/Education/GetExportCommerceConsultList", {...this.msg,ExcelEnumIds:this.checkType}, "参与者名单.xls")
       }
    }
  }

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

</style>
