<template>
  <div style="padding: 0 40px;">
    <Form ref="formValidate" :model="useData" :label-width="80">
      <Row>
        <i-col span="22" offset="2">
          <FormItem label="活动名称" prop="activityName">
            <div>{{ useData.name }}</div>
          </FormItem>
          <Form-item label="活动时间" prop="activityDate">
            <div>{{ useData.beginTime }} - {{ useData.endTime }}</div>
          </Form-item>
          <FormItem label="活动类型" prop="activityStyle">
            <div
              style="display:flex"
              v-for="(item, index) in useData.params"
              :key="index"
            >
              <i-input
                class="inputClass"
                disabled
                type="text"
                v-model="item.name"
                placeholder=""
              ></i-input>
              <i-input
                class="inputClass"
                style="margin-left: 20px"
                disabled
                type="text"
                v-model="item.key"
                placeholder=""
              ></i-input>
            </div>
          </FormItem>
          <FormItem label="活动范围" prop="activityRange">
            <Collapse simple>
              <Panel :key="index" v-for="(item, index) in groups">
                {{
                  item.name
                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                  item.stores.length
                }}家店铺
                <div slot="content">
                  <div class="activityShopClass">
                    <div
                      class="mr10"
                      v-for="(item, index) in item.stores"
                      :key="index"
                    >
                      <Tag class="tagClass" color="blue">{{ item.name }}</Tag>
                    </div>
                  </div>
                </div>
              </Panel>
            </Collapse>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import store from "../../store/index";
export default {
  name: "useActivityStepFoure",
  data() {
    return {
      useData: store.getters.useData,
      operate: "收起",
      displayActivityShopFlag: false,
      groups: [],
    };
  },
  created() {
    let _this = this;
    console.log(this.useData.stores);
    this.useData.company.forEach((item) => {
      item.stores = _this._.filter(
        this.useData.stores,
        (s) => s.companyId == item.id || s.parentId == item.id
      );
      _this.groups.push(item);
    });
    console.log(this.groups);
  },
  methods: {
    isDisplay() {
      if (this.operate === "展开") {
        this.operate = "收起";
        this.displayActivityShopFlag = false;
      } else {
        this.operate = "展开";
        this.displayActivityShopFlag = true;
      }
    },
  },
};
</script>

<style scoped>
.activityShopClass {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.mr10 {
  margin-right: 20px;
}
.tagClass {
  text-align: center;
}
</style>
