<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' || tab === '4'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="newoldcolumns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="award_type">
          {{ row.award_type === 1 ? "优惠券" : "真我币" }}
        </template>
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
          <a style="margin-left:10px" @click="del(row)">删除</a>
        </template>
      </Table>
      <div class="editor" v-if="tab === '6'">
        <editor v-model="content" />
        <div class="topSearch" style="margin-top: 20px;">
          <div class="left">
            <Button type="primary" @click="content = ''">取消</Button>
            <Button type="primary" @click="savecontent">保存</Button>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑表单 -->
    <Drawer
      title="新增/编辑"
      v-model="modalVisible"
      width="600"
      :mask-closable="false"
      @on-close="modalVisible = false"
    >
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="90"
      >
        <FormItem label="奖品名称" prop="award_name">
          <Input v-model="formValidate.award_name" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="优惠卷类型" >
          <Select v-model="formValidate.award_type" placeholder="请选择">
            <Option :value="1">优惠券</Option>
            <Option :value="2">真我币</Option>
          </Select>
        </FormItem>
        <FormItem label="模版编号" prop="template_code">
          <Input
            v-model="formValidate.template_code"
            placeholder="请输入"
          ></Input>
        </FormItem>
        <FormItem label="获奖概率" prop="award_rate">
          <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,
  update,
  configAwards,
  addConfigAward,
  editConfigAward,
  deleteConfigAward,
  getActivityConfigRule,
  updateRule
} from "@/api/clock/activityClocks";
import Editor from "_c/editor";
export default {
  name: "categories",
  components: {
    Editor
  },
  data() {
    return {
      gzId: null,
      content: "",
      payData: [
        {
          break_time: "",
          clock_time: "",
          close_time: "",
          pay_amount: null
        }
      ],
      add: true,
      modalVisible: false,
      formValidate: {
        award_name: "",
        award_type: "",
        award_rate: null,
        template_code: ""
      },
      ruleValidate: {
        award_name: [
          {
            required: true,
            message: "请输入奖品名称",
            trigger: "blur"
          }
        ],
        award_type: [
          {
            required: true,
            message: "请输入奖品类型",
            trigger: "change"
          }
        ],
        award_rate: [
          {
            required: true,
            message: "请输入中奖概率",
            trigger: "blur"
          }
        ],
        template_code: [
          {
            required: true,
            message: "请输入模板编号",
            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: "模板编号",
          key: "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);
        }
        if (val === "6") {
          this.getRu();
        }
      },
      immediate: true
    }
  },
  methods: {
    save(row) {
      row.break_time = row.break_time[0] + "-" + row.break_time[1];
      row.clock_time = row.clock_time[0] + "-" + row.clock_time[1];
      row.close_time = row.close_time[0] + "-" + row.close_time[1];
      update(row).then(res => {
        this.$Message.success("编辑成功!");
        this.getTime();
      });
    },
    savecontent() {
      updateRule({
        id: this.gzId,
        content: this.content,
        rule_type: 1
      }).then(res => {
        this.$Message.success("保存成功!");
      });
    },
    submit() {
      this.formValidate.type = this.tab === "3" ? 1 : 2;
      this.formValidate.uuid = sessionStorage.getItem("admin_uuid");
      this.formValidate.award_rate = Number(this.formValidate.award_rate);
      if (this.add) {
        addConfigAward(this.formValidate).then(res => {
          this.$Message.success("新增成功!");
          this.modalVisible = false;
          let type = this.tab === "3" ? 1 : 2;
          this.getjllist(type);
        });
      } else {
        editConfigAward(this.formValidate).then(res => {
          this.$Message.success("编辑成功!");
          this.modalVisible = false;
          let type = this.tab === "3" ? 1 : 2;
          this.getjllist(type);
        });
      }
    },
    del(p) {
      deleteConfigAward(p.id).then(res => {
        this.$Message.success("删除成功!");
        this.modalVisible = false;
        let type = this.tab === "3" ? 1 : 2;
        this.getjllist(type);
      });
    },
    edit(p) {
      this.add = false;
      this.formValidate.award_name = p.award_name;
      this.formValidate.award_type = p.award_type;
      this.formValidate.award_rate = p.award_rate;
      this.formValidate.template_code = p.template_code;
      this.formValidate.id = p.id;
      this.modalVisible = true;
    },
    getjllist(type) {
      configAwards(type).then(res => {
        this.data = res;
      });
    },
    getRu() {
      getActivityConfigRule({
        language: "cn",
        ruleType: 1
      }).then(res => {
        this.content = res.content;
        this.gzId = res.id;
      });
    },
    getTime() {
      getActivityConfigByPay({
        language: "cn"
      }).then(res => {
        this.payData.length = 0;
        res.break_time = res.break_time.split("-");
        res.clock_time = res.clock_time.split("-");
        res.close_time = res.close_time.split("-");
        this.payData = [res];
      });
    }
  },
  mounted() {
    this.getTime();
  }
};
</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>
