<template>
  <div class="create_pk_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <van-cell-group v-show="step === 1">
          <van-field
            type="text"
            label="PK名称"
            name="PK名称"
            required
            v-validate="'required|max:20'"
            data-vv-scope="one"
            v-model="data.name"
            placeholder="请输入PK名称"
          />
          <DateCell
            title="开始时间"
            name="开始时间"
            required
            v-validate="'required'"
            data-vv-scope="one"
            v-model="data.start_time"
          ></DateCell>
          <DateCell
            title="结束时间"
            name="结束时间"
            required
            v-validate="'required'"
            data-vv-scope="one"
            v-model="data.end_time"
          ></DateCell>
          <div style="padding: 0.32rem">
            <van-button type="info" block @click="go_next">下一步</van-button>
          </div>
        </van-cell-group>

        <van-cell-group v-show="step === 2">
          <teamItem v-model="data.teams"></teamItem>
          <div style="padding: 0.32rem">
            <van-row>
              <van-col span="11">
                <van-button type="info" block @click="step--">上一步</van-button>
              </van-col>
              <van-col span="11" offset="2">
                <van-button type="info" block @click="go_next1">下一步</van-button>
              </van-col>
            </van-row>
          </div>
        </van-cell-group>

        <van-cell-group v-show="step === 3">
          <ruleItem v-model="data.rules"></ruleItem>
          <div style="padding: 0.32rem">
            <van-row>
              <van-col span="11">
                <van-button type="info" block @click="step--">上一步</van-button>
              </van-col>
              <van-col span="11" offset="2">
                <van-button type="info" block @click="save">保存</van-button>
              </van-col>
            </van-row>
          </div>
        </van-cell-group>
      </scroller>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import moment from 'moment'
import EmployeeSelector from '@/components/common/EmployeeSelector'
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import DateCell from "@/components/common/DateCell"
import teamItem from "@/components/pk/team_item"
import ruleItem from "@/components/pk/rule_item"
import { Calendar, picker, Panel } from 'vant'
Vue.use(Calendar).use(picker).use(Panel)
export default {
  // 数据
  data() {
    return {
      title: '创建PK',
      data: {
        name: '',
        start_time: '',
        end_time: '',
        teams: [],
        rules: []
      },
      step: 1,
      show_Rule: false,
      show_rusl_popup: false,
      show_team: false
    }
  },
  // 组件
  components: {
    EmployeeSelector, EmployeeSelectorCell, teamItem, DateCell, ruleItem
  },
  watch: {
  },
  // 方法
  methods: {
    // 编辑
    edit_team(item, index) {
      this.team_info = item
      this.team_info.index = index
      this.show_team = true
    },
    del_team(index) {
      this.data.teams.splice(index, 1)
    },
    // 页面
    go_next(data) {
      let self = this
      self.$validator.validate('one.*').then((result) => {
        if (!result) {
          self.$notify({ type: 'danger', message: self.$validator.errors.items[0].msg });
        } else {
          this.step++
        }
      })
    },
    go_next1() {
      let self = this
      if (self.data.teams.length < 2) {
        self.$notify({ type: 'danger', message: '请至少创建两个团队' });
      } else {
        this.step = 3
      }
    },
    save() {
      let self = this
      if (self.data.rules.length < 1) {
        self.$notify({ type: 'danger', message: '请创建至少一条规则' });
      } else {
        self.$toast.loading({
          loadingType: "spinner",
          message: '正在提交'
        })
        request('POST','/api/integral/pk/create',this.getFormData(this.data)).then((res) => {
          if (res.data.code == 1) {
            self.$keep_alive_update('add_pk_rules_list', self.data)
            self.$toast(res.data.msg)
            self.$router.push({ name: 'list_pk' })
          } else {
            self.$toast(res.data.msg)
          }
          self.$toast.clear()
        }).catch((e) => {
          self.$toast.clear()
          self.$toast(e)
        })
      }
    },
    getFormData(item) {
      const teams = item.teams.map(team => {
        team.member.push(team.leader)
        const teamSet = new Set(team.member)
        return { name: team.name, member: Array.from(teamSet), leader: team.leader }
      })
      return { name: item.name, start_time: item.start_time, end_time: item.end_time, rules: item.rules, teams }
    }
  }
};
</script>
<style scoped>
.body_com {
  height: calc(100% - 1rem);
  position: relative;
}
.team_popup {
  width: 90vw;
  /* height: 50vh; */
  padding: 0.2rem;
  box-sizing: border-box;
}
.teams_btn {
  padding-top: 0.16rem;
  padding-bottom: 0.16rem;
  text-align: right;
}
.teams_content {
  padding: 0 0.32rem;
}
.teams_content span {
  margin-right: 0.32rem;
  font-size: 0.24rem;
}
.create_pk_box /deep/ .van-cell input::-webkit-input-placeholder {
  color: #909399;
  font-size: 0.32rem;
  background: #fff;
}
.create_pk_box /deep/ .van-cell:acitve .van-cell:after {
  border-bottom: 0.02rem solid #238dfa;
}

.create_pk_box /deep/ .create_pk_box {
  position: relative;
  left: 0.32rem;
  margin-top: 0.4rem;
  width: calc(100vw - 0.64rem);
}
.create_pk_box /deep/ .team_popup {
  padding: 0.2rem 0.2rem 0 0.2rem;
}
.rule_input {
  border: 0.02rem solid #efefef;
  border-radius: 0.1rem;
  padding: 0.2rem 0.14rem;
  margin-bottom: 0.2rem;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}
.rule_popup {
  top: 3rem;
}
/deep/.rule_popup .van-dialog__content {
  padding: 0.2rem;
}
</style>
