<template>
  <div class="activityManager">
    <Spin v-show="loading" fix>加载中...</Spin>
    <Row>
      <i-col
        class="activityListClass"
        v-for="(item, index) in activityList"
        :key="index"
        span="7"
        offset="1"
      >
        <Card>
          <div class="operateAndThemeItem">
            <div class="ThemeItem">
              <img class="img" :src="'/kiisoo-ic' + item.logo" />
              <div class="tipItem">
                <span>{{ item.name }}</span>
                <span>{{ item.description }}</span>
              </div>
            </div>
            <div class="operateItem">
              <div @click="disPlayUseTable(item)">使用</div>
              <div @click="dispalyAddActivity(item.id)">配置</div>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>
    <Row>
      <i-col span="7" offset="1">
        <div @click="dispalyAddActivity('')" class="addactivity">
          <span>+</span>
          <span>添加活动</span>
        </div>
      </i-col>
    </Row>
    <useTable
      ref="useTable"
      @doShow="doShow"
      :show="showUse"
      :schedule="useSchedule"
    ></useTable>
    <addActivity
      @dispalyAddActivityModal="dispalyAddActivityModal"
      :addActivityModal="addActivityModal"
      :id="id"
    ></addActivity>
  </div>
</template>

<script>
import useTable from "./useTable";
import addActivity from "./addActivity";
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index";

export default {
  name: "ActivityManager",
  components: {
    useTable,
    addActivity,
  },
  inject: ["setMenuName"],
  data() {
    return {
      showUse: false,
      addActivityModal: false,
      activityList: [],
      id: "",
      inputActivityList: [],
      useSchedule: {},
      loading: false,
    };
  },
  mounted() {
    this.setMenuName("活动管理", "活动池");
    this.getActivityTable();
  },
  methods: {
    doShow(show) {
      this.showUse = show;
    },
    getActivityData(id) {
      let that = this;
      let data = {
        instanceId: id,
      };
      that.loading = true;
      ActivityManager.getActivityInfo(data, function(data) {
        that.inputActivityList = [];
        data.data.results.params.forEach((item) => {
          that.inputActivityList.push({
            value1: item.name,
            value2: item.description,
          });
        });
        this.useModal = true;
        that.loading = false;
      });
    },
    getActivityTable() {
      let that = this;
      ActivityManager.getActivityList({}, function(data) {
        that.activityList = data.data.results;
      });
    },
    disPlayUseTable(item) {
      let that = this;
      let data = {
        id: item.id,
      };
      // let data = new FormData()
      // data.append('instanceId', item.id)
      ActivityManager.getActivityInfo(data, function(data) {
        that.useSchedule = data.data.results;
        that.showUse = true;
      });
    },
    dispalyAddActivity(id) {
      this.addActivityModal = true;
      this.id = id.toString();
    },
    dispalyuseModal(displayModalFlag, isCancle) {
      this.useModal = displayModalFlag;
      if (isCancle === true) {
        this.getActivityTable();
      }
    },
    dispalyAddActivityModal(displayModalFlag, isCancle) {
      this.addActivityModal = displayModalFlag;
      if (isCancle === true) {
        this.getActivityTable();
      }
    },
  },
};
</script>

<style scoped>
.operateAndThemeItem {
  display: flex;
  justify-content: space-between;
}

.img {
  height: 100px;
}

.operateItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #6ac1d1;
  width: 20%;
  text-align: right;
  cursor: pointer;
}

.ThemeItem {
  display: flex;
  justify-content: flex-start;
  width: 80%;
}

.tipItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 50px;
}

.activityListClass {
  margin-bottom: 50px;
}

.addactivity {
  height: 100px;
  border: 1px dashed;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}
</style>
