<template>
  <div class="detail">
    <div class="pc-main">
      <Tabs v-model="tab">
        <TabPane label="七天签到奖励" name="1"></TabPane>
        <TabPane label="特殊签到设置" name="2"></TabPane>
        <TabPane label="新用户奖励" name="3"></TabPane>
        <TabPane label="老用户奖励" name="4"></TabPane>
        <TabPane label="分享见证积分" name="5"></TabPane>
        <TabPane label="规则设置" name="6"></TabPane>
      </Tabs>
      <Table
        v-if="tab === '1'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="daycolumns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="created_at">
          <span>{{ row.created_at | format }}</span>
        </template>
        <template slot-scope="{ row }" slot="enable">
          <i-switch
            :value="row.is_enable === 1 ? true : false"
            @on-change="
              value => {
                change(value, row);
              }
            "
          />
        </template>
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
        </template>
        <template slot-scope="{ row }" slot="edit">
          <a @click="goTheme(row)">编辑</a>
        </template>
      </Table>
      <Button style="margin-bottom:20px" v-if="tab === '2'" type="primary"
        >新建活动</Button
      >
      <Table
        v-if="tab === '2'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="spcolumns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
        </template>
      </Table>
      <div
        class="topSearch"
        style="margin-bottom: 20px;"
        v-if="tab === '4' || tab === '3'"
      >
        <div class="left">
          <Button type="primary" @click="goDetail">新增奖品</Button>
          <Button type="primary" style="margin-right: 20px;"
            >开启新用户奖励</Button
          >
          当前状态：<span style="color:red">关闭</span>
        </div>
      </div>
      <Table
        v-if="tab === '3'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="newoldcolumns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
        </template>
      </Table>
      <Table
        v-if="tab === '4'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="newoldcolumns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
        </template>
      </Table>
      <p v-if="tab === '4' || tab === '3'" style="margin-top:20px">
        注意：新用户为注册3天内的所有用户，老用户为注册超过三天的用户
      </p>
      <Table
        v-if="tab === '5'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="sharecolumns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
        </template>
      </Table>
      <div class="editor" v-if="tab === '6'">
        <editor />
        <div class="topSearch" style="margin-top: 20px;">
          <div class="left">
            <Button type="primary" @click="goDetail">取消</Button>
            <Button type="primary">保存</Button>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑表单 -->
    <Drawer
      title="新增/编辑"
      v-model="modalVisible"
      width="600"
      :mask-closable="false"
      :styles="styles"
      @on-close="close"
    >
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="90"
      >
        <FormItem label="日期" prop="name">
          <DatePicker
            :value="value2"
            format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            placeholder="Select date"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem label="倍数" prop="name">
          <Input v-model="formValidate.mail" placeholder="请输入"></Input>
        </FormItem>
        <span>
          <FormItem label="奖励名称" prop="name">
            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="奖励类型" prop="name">
            <Select v-model="formValidate.city" placeholder="请选择">
                <Option value="beijing">真我币</Option>
                <Option value="shanghai">优惠券</Option>
            </Select>
          </FormItem>
          <FormItem label="优惠卷类型" prop="name">
            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="模版编号" prop="name">
            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="获奖概率" prop="name">
            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
          </FormItem>
        </span>
          <span>
          <FormItem label="奖励名称" prop="name">
            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="奖励类型" prop="name">
            <Select v-model="formValidate.city" placeholder="请选择">
                <Option value="beijing">真我币</Option>
                <Option value="shanghai">优惠券</Option>
            </Select>
          </FormItem>
          <FormItem label="真我币数量" prop="name">
            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="获奖概率" prop="name">
            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
          </FormItem>
        </span>
        <FormItem>
          <Button type="primary" @click="submit">保存</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script>
import { getScenes, delScenes, editScenes } from "@/api/scenes";
import Editor from "_c/editor";
export default {
  name: "categories",
  components: {
    Editor
  },
  data() {
    return {
      modalVisible: true,
      formValidate: {
        name: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ]
      },
      tab: "1",
      data: [],
      daycolumns: [
        {
          title: "天数",
          key: "created_at"
        },
        {
          title: "基础真我币",
          slot: "name"
        },
        {
          title: "操作",
          slot: "name"
        }
      ],
      spcolumns: [
        {
          title: "签到日期",
          key: "created_at"
        },
        {
          title: "倍数",
          slot: "name"
        },
        {
          title: "操作",
          slot: "name"
        }
      ],
      newoldcolumns: [
        {
          title: "奖励名称",
          key: "created_at"
        },
        {
          title: "奖励类型",
          slot: "name"
        },
        {
          title: "奖励",
          slot: "title"
        },
        {
          title: "获奖概率",
          key: "created_at"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      sharecolumns: [
        {
          title: "分享见证最多可获取积分",
          key: "created_at"
        },
        {
          title: "每天最多可获得",
          slot: "name"
        },
        {
          title: "每次可获得积分",
          slot: "title"
        },
        {
          title: "分享默认图",
          key: "created_at"
        },
        {
          title: "操作",
          slot: "action"
        }
      ]
    };
  },
  methods: {},
  mounted() {}
};
</script>

<style lang="less" scoped>
.pc-main {
  padding: 20px;
  //margin-top: 20px;
  background-color: #fff;
}
.btn {
  text-align: right;
  width: 80%;
  position: fixed;
  background-color: #fff;
  bottom: 10px;
  padding: 10px 30px;
}
</style>
