<template>
    <div>
      <Form ref="formValidate" :model="formValidate" :label-width="80">
        <Row>
          <i-col span="6">
            <FormItem label="零售公司" prop="">
              <Select v-model="formValidate.companyData" filterable placeholder="全部" clearable>
                <Option v-for="(item,index) in companyList" :key="index" :value="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem label="店铺" prop="">
              <Select v-model="formValidate.shopData" filterable placeholder="全部" clearable>
                <Option v-for="(item,index) in shopList" :key="index" :value="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="4">
            <FormItem label="活动状态" prop="">
              <Select v-model="formValidate.activityStatus">
                <Option v-for="(item,index) in activityStatusList" :key="index" :value="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="7">
            <FormItem label="选择日期" prop="">
              <Date-picker :value="formValidate.date" type="daterange" placement="bottom-end" placeholder="选择日期区间"></Date-picker>
            </FormItem>
          </i-col>
          <i-col span="1">
            <Button type="primary" @click="searchTable">查询</Button>
          </i-col>
        </Row>
        <Row style="margin-top:50px">
          <Table border :columns="columns1" :data="activityData"></Table>
        </Row>
      </Form>
    </div>
</template>

<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
export default {
  name: "ActivityPlan",
  inject: ['setMenuName'],
  data() {
    return {
      companyList: [],
      shopList: [],
      activityStatus: '进行中',
      formValidate: {
        date: '',
        companyData: '',
        shopData: '',
        activityStatus: '进行中',
      },
      activityData:[{
        activityStatus: '进行中'
      },{
        activityStatus: '已结束'
      }],
      activityStatusList: [{
        label: '全部',
        value: '全部'
      },{
        label: '进行中',
        value: '进行中'
      },{
        label: '未开始',
        value: '未开始'
      },{
        label: '已结束',
        value: '已结束'
      }],
      columns1: [{
                    type: 'index',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '活动名称',
                    key: 'activityName'
                },
                {
                    title: '活动类型',
                    key: 'activityStyle'
                },
                {
                    title: '活动时间',
                    key: 'activityDate'
                },
                {
                    title: '零售公司',
                    key: 'company'
                },
                {
                    title: '店铺',
                    key: 'shop'
                },
                {
                    title: '添加好友数',
                    key: 'addFriendNum'
                },
                {
                    title: '参与活动客户数',
                    key: 'joinActivityClientNum'
                },
                {
                    title: '活动码',
                    key: 'activityCode'
                },
                {
                    title: '活动状态',
                    key: 'activityStatus'
                },
                {
                    title: '操作',
                    key: 'action',
                    render () {
                        return `<Button type="text" size="small">终止</Button><Button type="text" size="small">修改</Button>`;
                    }
                }]
    }
  },
  mounted() {
    this.setMenuName("活动管理", "活动计划")
    this.getCompanyInfo()
    this.getShopInfo()
  },
  methods: {
    getCompanyInfo() {
      let that = this
      let data = {
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
      }
			ActivityManager.getCompany(data, function (data) {
          that.companyList = []
          data.data.results.forEach(element => {
            that.companyList.push({
              label: element.name,
              value: element.id
            })
          });
			})
    },
    getShopInfo() {
      let that = this
      let data = {
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
      }
			ActivityManager.getShop(data, function (data) {
        that.shopList = []
          data.data.results.forEach(element => {
            that.shopList.push({
              label: element.name,
              value: element.id
            })
          });
			})
    },
    searchTable() {
    }
  }
}
</script>

<style scoped>

</style>
