<template>
  <div class="edit_pk_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <van-cell-group>
        <van-field
          required
          label="PK名称"
          name="PK名称"
          maxlength="20"
          v-validate="'required|min:3|max:20'"
          type="text"
          v-model="pk_detail.name"
          placeholder="请输入PK名称"
        />
        <van-cell
          required
          title="开始时间"
          :value="pk_detail.start_time"
          @click=" start_time_show = true"
          is-link
        ></van-cell>
        <van-cell
          required
          title="结束时间"
          :value="pk_detail.end_time"
          @click=" end_time_show = true"
          is-link
        ></van-cell>
        <EmployeeSelectorCell
          title="管理员"
          v-model="manager_ids"
          :employee_list="employee_list"
          :max="0"
        ></EmployeeSelectorCell>
      </van-cell-group>
      <van-cell-group title="积分权限" class="cell_group">
        <van-checkbox
          class="credit_authority"
          v-model="pk_detail.leader_can_record"
          is-link
        >队长可以为队员录积分</van-checkbox>
      </van-cell-group>
      <van-cell-group class="create_pk_box">
        <van-button class="create_pk" type="info" @click="save_btn" block>保存</van-button>
      </van-cell-group>

      <van-calendar color="#238dfa" v-model="start_time_show" @confirm="startConfirm" />
      <van-calendar color="#238dfa" v-model="end_time_show" @confirm="endConfirm" />
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import moment from 'moment';
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import Vue from 'vue'
import { Calendar, Cell, CellGroup, Checkbox, CheckboxGroup, Popup, Form } from 'vant'
Vue.use(Calendar).use(Cell).use(CellGroup).use(Checkbox).use(CheckboxGroup).use(Popup).use(Form)
export default {
  // 数据
  data() {
    return {
      title: 'PK设置',
      start_time_show: false,
      end_time_show: false,
      get_id: this.$route.query.id,
      employee_list: [],
      pk_detail: {},
      result: [],
      show_manager: '',
      manager_ids: [],
      employee_map: this.$store.getters.employee_map
    }
  },
  // 组件
  components: {
    EmployeeSelectorCell
  },
  // 方法
  methods: {
    // 开始日期
    startConfirm(date) {
      this.start_time_show = false;
      this.pk_detail.start_time = moment(date).format('YYYY-MM-DD');
    },
    // 结束日期
    endConfirm(date) {
      this.end_time_show = false;
      this.pk_detail.end_time = moment(date).format('YYYY-MM-DD');
    },
    // 查询PK 详情
    get_pk_detail(get_id) {
      let self = this
      self.showLoading()
      request('get','/api/integral/pk/info',{ pk_id: get_id }).then((res) => {
        if (res.data.code == '1') {
          self.pk_detail = res.data.data
          self.pk_detail.name = res.data.data.name;
          self.pk_detail.start_time = res.data.data.start_time;
          self.pk_detail.end_time = res.data.data.end_time;
          self.pk_detail.leader_can_record = res.data.data.leader_can_record;
          for (const key of self.pk_detail.manager_ids) {
            if (self.employee_map[key].id == key) {
              self.manager_ids.push(self.employee_map[key])
            }
          }
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    // 员工列表
    get_employee_list() {
      let self = this
      self.showLoading()
      request('get','/api/integral/pk/members',{ pk_id: self.get_id }).then((res) => {
        if (res.data.code == '1') {
          self.employee_list = res.data.data.list
        } else {
          self.$toast(res.data.msg)
          Toast.clear()
        }
      })
    },
    // 提交数据
    post_data() {
      let self = this
      if (self.pk_detail.leader_can_record) {
        self.pk_detail.leader_can_record = 1
      } else {
        self.pk_detail.leader_can_record = 0
      }
      let data = {
        pk_id: self.pk_detail.id,
        name: self.pk_detail.name,
        start_time: self.pk_detail.start_time,
        end_time: self.pk_detail.end_time,
        manager_ids: [],
        leader_can_record: self.pk_detail.leader_can_record
      }
      if (self.manager_ids.length > 0) {
        self.manager_ids.forEach(v => {
          data.manager_ids.push(v.id)
        });
      }
      self.showLoading()
      request('post','/api/integral/pk',data).then((res) => {
        if (res.data.code === 1) {
          self.$toast.clear()
          self.$keep_alive_update('update_list_pk', data)
          this.$route_back()
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
      })
    },
    save_btn(){
      let self = this
      self.$validator.validate().then(result => {
        if(!result) {
          self.$notify({ type: 'danger', message: self.$validator.errors.items[0].msg });
        }else if(moment(self.pk_detail.start_time).isAfter(self.pk_detail.end_time)){
          self.$notify({ type: 'danger', message: '结束时间必须比时间开始大' });
        }else{
          self.post_data()
        }
      })
    },
    // 加载
    showLoading() {
      this.$toast.loading({
        loadingType: "spinner",
        message: '正在处理'
      })
    },
  },
  // 生命周期 --- 创建完成
  created() {
    this.get_employee_list()
    this.get_pk_detail(this.get_id)
  }
};
</script>
<style scoped>
.body_com {
  height: calc(100% - 1rem);
  position: relative;
}
.cell_group {
  margin-top: 0;
  height: 0.8rem;
  line-height: 0.8rem;
}
.cell_group .van-checkbox {
  height: 100%;
  padding-left: 0.2rem;
}
.employee_popup {
  width: 100vw;
  height: 100vh;
}
.employee_img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin-left: 0.2rem;
  float: left;
}
.employee_name {
  display: inline-block;
  height: 0.8rem;
  line-height: 0.8rem;
  margin-left: 0.2rem;
}
.select_popup_scroller {
  height: calc(100vh - 0.8rem);
}
.edit_pk_box /deep/ .cell_group .van-checkbox {
  padding-left: 0.32rem;
}
.edit_pk_box /deep/ .credit_authority span {
  font-size: 0.28rem;
  color: #909399;
}
.edit_pk_box /deep/ .create_pk_box {
  position: relative;
  left: 0.32rem;
  margin-top: 0.4rem;
  width: calc(100vw - 0.64rem);
  background: transparent;
}
</style>
