<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div>
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="活动信息" name="first">
            <div>
              <h2 style="font-weight: bold;">活动信息</h2>
              <div style="padding: 10px 20px 16px;font-size: 18px;">
                <div style="padding: 4px 0 0;">
                  <span>活动名称：</span>
                  <span>{{ formData.composeName }}</span>
                </div>
                <div style="padding: 4px 0 0;">
                  <span>活动备注：</span>
                  <span>{{ formData.remark }}</span>
                </div>
                <div style="padding: 4px 0 0;">
                  <span>报名时间：</span>
                  <span>{{ formData.signStartTime }}-{{ formData.signEndTime }}</span>
                </div>
                <div style="padding: 4px 0 0;">
                  <span>起止时间：</span>
                  <span>{{ formData.startTime }}-{{ formData.endTime }}</span>
                </div>
                <div style="padding: 4px 0 0;">
                  <span>活动保证金：</span>
                  <span>
                    <el-radio-group v-model="formData.ifBond">
                      <el-radio :label="1" disabled>需要</el-radio>
                      <el-radio :label="0" disabled>不需要</el-radio>
                    </el-radio-group>
                  </span>
                </div>
                <div v-if="formData.ifBond" style="padding: 4px 0 0;">
                  <span>保证金金额：</span>
                  <span>{{ formData.bondMoney }}</span>
                </div>
                <div style="padding: 4px 0 0;">
                  <span>活动状态：</span>
                  <span v-if="formData.state === 0">报名未开始</span>
                  <span v-if="formData.state === 1">报名进行中</span>
                  <span v-if="formData.state === 2">活动待开始</span>
                  <span v-if="formData.state === 3">活动进行中</span>
                  <span v-if="formData.state === 4">活动已结束</span>
                </div>
              </div>
            </div>
            <div>
              <h2 style="font-weight: bold;">优惠规则</h2>
              <div style="padding: 10px 20px 16px;font-size: 18px;">
                <div style="padding: 4px 0 0;">
                  <span>是否限购：</span>
                  <span>
                    <el-radio-group v-model="formData.ifLimit">
                      <el-radio :label="2" disabled>限购</el-radio>
                      <el-radio :label="1" disabled>不限购</el-radio>
                    </el-radio-group>
                  </span>
                </div>
                <div v-if="formData.ifLimit == 2" style="padding: 4px 0 0;">
                  <span>商品限购：</span>
                  <span>限购{{ formData.limitNumber || 0 }}人</span>
                </div>
                <div style="padding: 4px 0 0;">
                  <span>优惠券叠加：</span>
                  <span>
                    <el-radio-group v-model="formData.ifAdd">
                      <el-radio :label="1" disabled>叠加</el-radio>
                      <el-radio :label="0" disabled>不叠加</el-radio>
                    </el-radio-group>
                  </span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="参与店铺" name="second">
            <!-- 查询和其他操作 -->
            <div class="filter-container">
              <el-input
                v-model="shopListQuery.shopName" clearable size="mini" class="filter-item"
                style="width: 200px;"
                maxlength="20" placeholder="请输入店铺名称"
              />
              <el-input
                v-model="shopListQuery.shopCode" clearable size="mini" class="filter-item"
                style="width: 200px;margin-left:10px;" maxlength="20" placeholder="请输入店铺编码"
              />
              <el-select
                v-model="shopListQuery.state" clearable size="mini" class="filter-item"
                style="width: 200px;margin-left:10px;" placeholder="请选择审核状态"
              >
                <el-option label="待审核" :value="0" />
                <el-option label="报名成功" :value="1" />
                <el-option label="报名失败" :value="2" />
                <el-option label="报名进行中" :value="3" />
              </el-select>
              <el-button
                size="mini" class="filter-item" type="primary" icon="el-icon-search"
                style="margin-left:10px;"
                @click="handleSearchShop"
              >
                查找
              </el-button>
            </div>
            <!-- 表格 -->
            <div>
              <div>
                <el-table
                  v-loading="shopListLoading" height="60vh" element-loading-text="正在查询中。。。" :data="shopDataList"
                  v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
                >
                  <el-table-column label="店铺名称" width="220">
                    <template slot-scope="scope">{{ scope.row.shopName }}</template>
                  </el-table-column>
                  <el-table-column prop="shopCode" label="店铺编码" />
                  <el-table-column prop="products" label="参与商品数" />
                  <el-table-column prop="examines" label="审核次数" />
                  <el-table-column label="审核状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.state == 0">待审核</span>
                      <span v-if="scope.row.state == 1">报名成功</span>
                      <span v-if="scope.row.state == 2">报名失败</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center" label="操作" width="280" fixed="right"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="{ row }">
                      <el-button
                        type="warning" size="mini"
                        @click="$refs.ActivityProducts && $refs.ActivityProducts.handleOpen(row)"
                      >
                        查看商品
                      </el-button>
                      <el-button size="mini" @click="$refs.ActivityReview && $refs.ActivityReview.handleOpen(row)">
                        审核记录
                      </el-button>
                      <el-button
                        v-if="row.state === 0" type="danger" size="mini"
                        @click="$refs.RegistrationReview && $refs.RegistrationReview.handleOpen(row)"
                      >
                        审核
                      </el-button>
                      <el-button v-if="row.state === 1" type="danger" size="mini" @click="handleRetirement(row)">
                        清退
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div>
                <el-pagination
                  :current-page="shopListQuery.page" :page-sizes="[10, 20, 50, 100]"
                  :page-size="shopListQuery.pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="shopTotal" @size-change="(val) => ((shopListQuery.pageSize = val) && getActivityShopList())"
                  @current-change="(val) => ((shopListQuery.page = val) && getActivityShopList())"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动数据" name="third">
            <div
              style="display: flex;align-items: center;justify-content: space-between;padding: 14px 20px;text-align: center;font-size: 20px;"
            >
              <div>
                <div>浏览量</div>
                <div style="margin-top: 4px;font-size: 24px;font-weight: bold;color: #ffae11;">
                  {{ recordInfo.visit }}
                </div>
              </div>
              <div>
                <div>支付订单数</div>
                <div style="margin-top: 4px;font-size: 24px;font-weight: bold;color: #ffae11;">
                  {{ recordInfo.orders }}
                </div>
              </div>
              <div>
                <div>支付买家数</div>
                <div style="margin-top: 4px;font-size: 24px;font-weight: bold;color: #ffae11;">
                  {{ recordInfo.pays }}
                </div>
              </div>
              <div>
                <div>支付转化率</div>
                <div style="margin-top: 4px;font-size: 24px;font-weight: bold;color: #ffae11;">
                  {{ recordInfo.conversion }}
                </div>
              </div>
              <div>
                <div>参与商家数</div>
                <div style="margin-top: 4px;font-size: 24px;font-weight: bold;color: #ffae11;">
                  {{ recordInfo.shops }}
                </div>
              </div>
              <div>
                <div>参与商品数</div>
                <div style="margin-top: 4px;font-size: 24px;font-weight: bold;color: #ffae11;">
                  {{ recordInfo.products }}
                </div>
              </div>
              <div>
                <div>活动成交金额</div>
                <div style="margin-top: 4px;font-size: 24px;font-weight: bold;color: #ffae11;">
                  {{ recordInfo.total }}
                </div>
              </div>
            </div>
            <!-- <div>
              <span>商家数据明细</span>
              <el-button type="primary">导出</el-button>
              </div> -->
            <div>
              <div>
                <el-table
                  v-loading="recordListLoading" height="60vh" element-loading-text="正在查询中。。。"
                  :data="recordDataList"
                  v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
                >
                  >
                  <el-table-column prop="shopName" label="店铺名称" />
                  <el-table-column prop="shopCode" label="店铺编码" />
                  <el-table-column prop="products" label="参与商品数(件)" />
                  <el-table-column prop="persons" label="访客数" />
                  <el-table-column prop="orders" label="提交订单数" />
                  <el-table-column prop="finish" label="成交比数" />
                  <el-table-column prop="total" label="成交总额" />
                </el-table>
              </div>
              <div>
                <el-pagination
                  :current-page="chartListQuery.page" :page-sizes="[10, 20, 50, 100]"
                  :page-size="chartListQuery.pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="shopTotal" @size-change="(val) => ((chartListQuery.pageSize = val) && getActivityInfoList())"
                  @current-change="(val) => ((chartListQuery.page = val) && getActivityInfoList())"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 查看店铺的活动产品 -->
      <ActivityProducts ref="ActivityProducts" />
      <!-- 查看店铺的活动审核记录 -->
      <ActivityReview ref="ActivityReview" />
      <!-- 店铺的报名审核 -->
      <RegistrationReview ref="RegistrationReview" @success="getActivityShopList" />
    </div>
  </el-dialog>
</template>

<script>
import ActivityProducts from './ActivityProducts'
import ActivityReview from './ActivityReview'
import RegistrationReview from './RegistrationReview'
import { getPlatformComposeById, getPlatformComposeShop, getPlatformComposeData } from '@/api/active/combinationActivities'
import { activeLiquidation } from '@/api/active'

export default {
  name: 'DetailModal',
  components: {
    ActivityProducts,
    ActivityReview,
    RegistrationReview
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '900px',
        title: '查看组合活动详情'
      },
      visible: false,
      formData: {
        composeId: '',
        composeName: '',
        remark: '',
        signStartTime: '',
        signEndTime: '',
        startTime: '',
        endTime: '',
        ifLimit: '',
        limitNumber: '',
        ifAdd: '',
        state: '',
        ifBond: '',
        bondMoney: '',
        shops: null,
        products: null,
        createTime: '',
        updateTime: ''
      },

      activeName: 'first',
      // 活动参与的店铺查询参数
      shopDataList: [],
      shopTotal: 0,
      shopListLoading: true,
      shopListQuery: {
        composeId: '',
        shopName: '',
        shopCode: '',
        state: '',
        page: 1,
        pageSize: 10
      },
      // 获取活动数据的参数
      recordInfo: {
        visit: 0,
        orders: 0,
        pays: 0,
        conversion: 0,
        shops: 0,
        products: 0,
        total: 0
      },
      recordDataList: [],
      recordTotal: 0,
      recordListLoading: true,
      chartListQuery: {
        composeId: '',
        page: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    async initList() {
      this.activeName = 'first'
      this.shopListQuery = { composeId: this.formData.composeId || '', shopName: '', shopCode: '', state: '', page: 1, pageSize: 10 }
      this.chartListQuery = { composeId: this.formData.composeId || '', page: 1, pageSize: 10 }
      this.getActivityShopList()
      this.getActivityInfoList()
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      this.initList()
      if (params.composeId) {
        this.getInfo(params.composeId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await getPlatformComposeById({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          composeId: res.data.composeId || '',
          composeName: res.data.composeName || '',
          remark: res.data.remark || '',
          signStartTime: res.data.signStartTime || '',
          signEndTime: res.data.signEndTime || '',
          startTime: res.data.startTime || '',
          endTime: res.data.endTime || '',
          ifLimit: res.data.ifLimit || '',
          limitNumber: res.data.limitNumber || '',
          ifAdd: res.data.ifAdd,
          state: res.data.state,
          ifBond: res.data.ifBond,
          bondMoney: res.data.bondMoney || '',
          shops: res.data.shops || null,
          products: res.data.products || null,
          createTime: res.data.createTime || '',
          updateTime: res.data.updateTime || ''
        })
      } finally {
        loading.close()
      }
    },

    //  获取活动参与的店铺
    async getActivityShopList() {
      this.shopListLoading = true
      try {
        const res = await getPlatformComposeShop(this.shopListQuery)
        this.shopDataList = res.data.list
        this.shopTotal = res.data.total
      } finally {
        this.shopListLoading = false
      }
    },
    handleSearchShop() {
      this.shopListQuery.page = 1
      this.getActivityShopList()
    },

    //  获取活动参数的数据
    async getActivityInfoList() {
      this.recordListLoading = true
      try {
        const res = await getPlatformComposeData(this.chartListQuery)
        this.recordInfo = {
          visit: res.data.visit || 0,
          orders: res.data.orders || 0,
          pays: res.data.pays || 0,
          conversion: res.data.conversion || 0,
          shops: res.data.shops || 0,
          products: res.data.products || 0,
          total: res.data.total || 0
        }
        this.recordDataList = res.data.shopDataDetails.list
        this.recordTotal = res.data.shopDataDetails.total
      } finally {
        this.recordListLoading = false
      }
    },

    // 清退
    handleRetirement(row) {
      this.$confirm('清退后商家的所有商品将退出本次活动', '确认要清退本商家吗？')
        .then(async () => {
          await activeLiquidation({ signId: row.signId })
          this.$message({ message: '清退成功！', type: 'success' })
          this.getActivityShopList()
        })
        .catch(() => { })
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}
}

.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.fixed-width {
	.el-button--mini {
		padding: 7px 10px;
	}
}
</style>
