<template>
  <div class="detail">
    <div class="pc-main">
      <Tabs v-model="tab">
        <TabPane label="活动缴费设置" name="1"></TabPane>
        <TabPane label="连续早起奖励" name="3"></TabPane>
        <TabPane label="周六早起奖励" name="4"></TabPane>
        <TabPane label="规则设置" name="6"></TabPane>
      </Tabs>
      <Table
        height="520"
        v-if="tab === '1'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="daycolumns"
        :data="payData"
      >
        <template slot-scope="{ row }" slot="break_time">
          <TimePicker
            v-model="row.break_time"
            format="HH:mm"
            type="timerange"
            placement="bottom-end"
            placeholder="Select time"
            style="width: 168px"
          ></TimePicker>
        </template>
        <template slot-scope="{ row }" slot="clock_time">
          <TimePicker
            v-model="row.clock_time"
            format="HH:mm"
            type="timerange"
            placement="bottom-end"
            placeholder="Select time"
            style="width: 168px"
          ></TimePicker>
        </template>
        <template slot-scope="{ row }" slot="close_time">
          <TimePicker
            v-model="row.close_time"
            format="HH:mm"
            type="timerange"
            placement="bottom-end"
            placeholder="Select time"
            style="width: 168px"
          ></TimePicker>
        </template>
        <template slot-scope="{ row }" slot="pay_amount">
          <Input
            v-model="row.pay_amount"
            style="width:168px"
            type="number"
            placeholder="请输入"
          />
        </template>
        <template slot-scope="{ row }" slot="action">
          <a @click="save(row)">保存</a>
        </template>
      </Table>
      <div
        class="topSearch"
        style="margin-bottom: 20px;"
        v-if="tab === '4' || tab === '3'"
      >
        <div class="left">
          <Button
            type="primary"
            @click="
              modalVisible = true;
              add = true;
            "
            >新增奖品</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>
      <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">
          <Input v-model="formValidate.award_name" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="优惠卷类型" prop="name">
          <Select v-model="formValidate.award_type" placeholder="请选择">
            <Option :value="1">优惠券</Option>
            <Option :value="2">真我币</Option>
          </Select>
        </FormItem>
        <FormItem label="模版编号" prop="name">
          <Input
            v-model="formValidate.template_code"
            placeholder="请输入"
          ></Input>
        </FormItem>
        <FormItem label="获奖概率" prop="name">
          <Input
            v-model="formValidate.award_rate"
            type="number"
            placeholder="请输入"
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit">保存</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script>
import {
  getActivityConfigByPay,
  configAwards,
  addConfigAward,
  editConfigAward,
  deleteConfigAward
} from "@/api/clock/activityClocks";
import Editor from "_c/editor";
export default {
  name: "categories",
  components: {
    Editor
  },
  data() {
    return {
      payData: [
        {
          break_time: "",
          clock_time: "",
          close_time: "",
          pay_amount: null
        }
      ],
      add: true,
      modalVisible: false,
      formValidate: {
        award_name: "",
        award_type: "",
        award_rate: "",
        template_code: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ]
      },
      tab: "1",
      data: [],
      daycolumns: [
        {
          title: "休息时间",
          slot: "break_time"
        },
        {
          title: "打卡时间",
          slot: "clock_time"
        },
        {
          title: "结算时间",
          slot: "close_time"
        },
        {
          title: "缴费数值",
          slot: "pay_amount"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      spcolumns: [
        {
          title: "签到日期",
          key: "created_at"
        },
        {
          title: "倍数",
          slot: "name"
        },
        {
          title: "操作",
          slot: "name"
        }
      ],
      newoldcolumns: [
        {
          title: "奖励名称",
          key: "award_name"
        },
        {
          title: "奖励类型",
          slot: "award_type"
        },
        {
          title: "模板编号",
          slot: "template_code"
        },
        {
          title: "获奖概率",
          key: "award_rate"
        },
        {
          title: "操作",
          slot: "action"
        }
      ]
    };
  },
  watch: {
    tab: {
      handler: function(val) {
        if (val === "3" || val === "4") {
          let type = val === "3" ? 1 : 2;
          this.getjllist(type);
        }
      },
      immediate: true
    }
  },
  methods: {
    save(row) {
      console.log(row);
    },
    submit() {
      if (this.add) {
        addConfigAward(this.formValidate).then(res => {
          console.log(res);
        });
      } else {
        editConfigAward(this.formValidate).then(res => {
          console.log(res);
        });
      }
    },
    del() {
      deleteConfigAward(id).then(res => {
        console.log(res);
      });
    },
    getjllist(type) {
      configAwards(type).then(res => {
        this.data = res;
      });
    },
    getTime() {
      getActivityConfigByPay().then(res => {
        this.payData = [res];
      });
    }
  },
  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>
