<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <activity-search @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        cache-key="syliveActivityTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="dropClick('activity')"
          >
            新建
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="removeBatch"
          >
            删除
          </el-button>
        </template>
        <!-- 状态列 -->
        <template v-slot:status="{ row }">
          <el-switch
            :active-value="0"
            :inactive-value="1"
            v-model="row.status"
            @change="editStatus(row)"
          />
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-dropdown @command="(command) => dropStatistics(command, row)">
            <el-link
              type="primary"
              :underline="false"
              icon="el-icon-data-analysis"
            >
              数据统计
              <i class="el-icon-arrow-down"></i>
            </el-link>
            <template v-slot:dropdown>
              <el-dropdown-menu v-if="row.groups == 1">
                <el-dropdown-item command="gro">分组数据统计</el-dropdown-item>
                <el-dropdown-item command="live">直播数据统计</el-dropdown-item>
              </el-dropdown-menu>
              <el-dropdown-menu v-else>
                <el-dropdown-item command="org">机构数据统计</el-dropdown-item>
                <el-dropdown-item command="team">团队数据统计</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown @command="(command) => dropMore(command, row)">
            <el-link type="primary" :underline="false" icon="el-icon-_share">
              更多
              <i class="el-icon-arrow-down"></i>
            </el-link>
            <template v-slot:dropdown>
              <el-dropdown-menu v-if="row.groups == 1">
                <el-dropdown-item command="order">订单列表</el-dropdown-item>
                <el-dropdown-item command="win">中奖名单</el-dropdown-item>
                <el-dropdown-item command="exchange">核销记录</el-dropdown-item>
                <el-dropdown-item command="customer">客户列表</el-dropdown-item>
                <el-dropdown-item command="code">活动链接</el-dropdown-item>
              </el-dropdown-menu>
              <el-dropdown-menu v-else>
                <el-dropdown-item command="order">订单列表</el-dropdown-item>
                <el-dropdown-item command="code">活动链接</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown @command="(command) => dropClick(command, row)">
            <el-link type="primary" :underline="false" icon="el-icon-edit">
              修改
              <i class="el-icon-arrow-down"></i>
            </el-link>
            <template v-slot:dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="activity">修改活动</el-dropdown-item>
                <el-dropdown-item command="goods">修改商品</el-dropdown-item>
                <el-dropdown-item v-if="row.groups == 1" command="groups">
                  修改分组
                </el-dropdown-item>
                <el-dropdown-item command="copy">复制活动</el-dropdown-item>
                <el-dropdown-item command="draw">抽奖配置</el-dropdown-item>
                <el-dropdown-item command="visitTag">回访标签</el-dropdown-item>
                <el-dropdown-item command="blacklist" v-if="row.blacklist">
                  黑名单
                </el-dropdown-item>
                <!--
                <el-dropdown-item command="item">修改权益商品</el-dropdown-item>
                <el-dropdown-item command="coupon">修改券</el-dropdown-item>
                -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此活动吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <activity-edit
      :data="current"
      :visible.sync="showEdit"
      :organization-list="organizationList"
      @done="reload"
    />
    <!-- 编辑商品弹窗 -->
    <activity-item
      :data="current"
      :visible.sync="showEditItem"
      @done="reload"
    />
    <!-- 编辑券弹窗 -->
    <activity-coupon
      :data="current"
      :visible.sync="showEditCoupon"
      @done="reload"
    />
    <!-- 二维码 -->
    <qr-code :visible.sync="showCode" :data="current" />
    <!-- 抽奖配置弹窗 -->
    <activity-draw
      :data="current"
      :visible.sync="showEditDraw"
      @done="reload"
    />
    <activity-visit-tag
      :data="current"
      :visible.sync="showEditVisitTag"
      @done="reload"
    />
    <activity-blacklist
      :data="current"
      :visible.sync="showEditBlacklist"
      @done="reload"
    />
  </div>
</template>

<script>
  import QrCode from './components/qr-code.vue';
  import ActivitySearch from './components/activity-search.vue';
  import ActivityEdit from './components/activity-edit.vue';
  import ActivityItem from './components/activity-item.vue';
  import ActivityCoupon from './components/activity-coupon.vue';
  import ActivityDraw from './components/activity-draw.vue';
  import ActivityVisitTag from './components/activity-visit-tag';
  import ActivityBlacklist from './components/activity-blacklist';

  import {
    pageActivity,
    removeActivity,
    removeActivitys,
    copyActivity,
    updateActivityStatus
  } from '@/api/sylive/activity';
  import { listOrganizationParent } from '@/api/institution/organization';

  export default {
    name: 'syliveActivity',
    components: {
      ActivityBlacklist,
      ActivityVisitTag,
      QrCode,
      ActivitySearch,
      ActivityEdit,
      ActivityItem,
      ActivityCoupon,
      ActivityDraw
    },
    data() {
      return {
        // 门店数据
        organizationList: [],
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'activityId',
            label: 'ID',
            minWidth: 40,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'title',
            label: '标题',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'channelId',
            label: '直播频道',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 60,
            slot: 'nickname'
          },
          {
            prop: 's_time',
            label: '直播开始时间',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 90
          },
          {
            prop: 'createTime',
            label: '创建时间',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 90,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            sortable: 'custom',
            width: 80,
            resizable: false,
            slot: 'status',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 380,
            align: 'center',
            resizable: false,
            slot: 'action'
          }
        ],
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 是否显示编辑商品弹窗
        showEditItem: false,
        // 是否显示编辑券弹窗
        showEditCoupon: false,
        // 是否显示编辑券弹窗
        showEditDraw: false,
        showEditVisitTag: false,
        showEditBlacklist: false,
        // 是否显示二维码弹窗
        showCode: false
      };
    },
    created() {
      //this.organizationQuery();
    },
    methods: {
      /* 下拉按钮点击 */
      dropClick(command, row) {
        if (command === 'activity') {
          this.current = row;
          this.showEdit = true;
        } else if (command === 'item') {
          this.current = row.item;
          this.current.activityId = row.activityId;
          this.showEditItem = true;
        } else if (command === 'coupon') {
          this.current = row.coupon;
          this.current.activityId = row.activityId;
          this.showEditCoupon = true;
        } else if (command === 'draw') {
          this.current = row.draw;
          this.current.activityId = row.activityId;
          this.showEditDraw = true;
        } else if (command === 'visitTag') {
          this.current = {
            visitTag: row.visitTag,
            activityId: row.activityId
          };
          this.showEditVisitTag = true;
        } else if (command === 'blacklist') {
          this.current = {
            blacklist: row.showBlacklist,
            activityId: row.activityId
          };
          this.showEditBlacklist = true;
        } else if (command === 'goods') {
          this.$router.replace('/sylive/goods?id=' + row.activityId);
        } else if (command === 'groups') {
          this.$router.replace('/sylive/groups?id=' + row.activityId);
        } else if (command === 'copy') {
          const loading = this.$loading({ lock: true });
          copyActivity(row.activityId)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        }
      },
      /* 打开数据统计页 */
      dropStatistics(command, row) {
        var url = '';
        if (command === 'gro') {
          url = '/sylive/groups-statistics?id=' + row.activityId;
        } else if (command === 'live') {
          url = '/sylive/live?id=' + row.activityId;
        } else if (command === 'org') {
          url = '/sylive/activity/statistics?id=' + row.activityId;
        } else if (command === 'team') {
          url = '/sylive/activity/statistics-team?id=' + row.activityId;
        }
        this.$router.replace(url);
      },
      /* 打开更多页 */
      dropMore(command, row) {
        let url = '';
        if (command === 'order') {
          if (row.groups == 1) {
            url = '/sylive/groups-order?id=' + row.activityId;
          } else {
            url = '/sylive/order?id=' + row.activityId;
          }
          this.$router.replace(url);
        } else if (command === 'win') {
          url = '/sylive/groups-win?id=' + row.activityId;
          this.$router.replace(url);
        } else if (command === 'exchange') {
          url = '/sylive/groups-exchange?id=' + row.activityId;
          this.$router.replace(url);
        } else if (command === 'customer') {
          url = '/sylive/groups-customer?id=' + row.activityId;
          this.$router.replace(url);
        } else if (command === 'code') {
          this.current = row;
          this.showCode = true;
        }
      },
      /* 查询机构 */
      organizationQuery() {
        listOrganizationParent({ parentId: 0 })
          .then((list) => {
            this.organizationList = list;
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        if (page == 1) {
          this.organizationQuery();
        }
        return pageActivity({ ...where, ...order, page, limit });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        removeActivity(row.activityId)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据');
          return;
        }
        this.$confirm('确定要删除选中的活动吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({ lock: true });
            removeActivitys(this.selection.map((d) => d.activityId))
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },
      /* 更改状态 */
      editStatus(row) {
        const loading = this.$loading({ lock: true });
        updateActivityStatus(row.activityId, row.status)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
          })
          .catch((e) => {
            loading.close();
            row.status = !row.status ? 1 : 0;
            this.$message.error(e.message);
          });
      }
    }
  };
</script>
