<template>
  <div class="temp_task_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header short_task_box">
      <scroller>

        <van-cell-group>
          <van-cell>
            <Mtextarea v-model="data.task_name" placeholder="请输入关于任务内容" required  v-validate="'required|max:20'" name="任务内容" :text_max="20" :imgs_max="3" images :imgs.sync="data.file_list"></Mtextarea>
          </van-cell>
        </van-cell-group>

        <van-cell-group class="point-field">
          <van-cell title="任务积分" style="padding:0 0.32rem; padding-top:0.16rem;" :border="false" required/>
          <NumberInput :chosePoint="false" :maxlength="6" v-model="data.base_point"/>
        </van-cell-group>

        <van-cell-group>
          <EmployeeSelectorCell title="审批人" name="审批人" required v-validate="'required'" :show_manager_only="true" v-model="reviewer" :multi="false"></EmployeeSelectorCell>
          <van-cell title="任务类型" required>
            <template slot="right-icon">
              <van-radio-group v-model="data.pt_id" direction="horizontal" class="radio_button">
                <van-radio class="list"   :class="{changeRadio: item.id === data.pt_id}" v-if="item.code != 'JX'" :name="item.id" v-for="(item, index) in $store.getters.point_types" :key="index">{{item.name}}</van-radio>
              </van-radio-group>
              <smallTip icon="question-o" position="30%">
                <p style="margin: 0; line-height: 0.6rem">A分：物质分，与钱直接挂钩</p>
                <p style="margin: 0; line-height: 0.6rem">B分：福利分，与福利待遇挂钩</p>
                <p style="margin: 0; line-height: 0.6rem">绩效分：工作分，与绩效考核挂钩</p>
              </smallTip>
            </template>
          </van-cell>
          <DateTimeCell title="截止时间" required v-validate="'required'" name="截止时间" v-if="data.task_cycle == 0" v-model="data.expire_time"></DateTimeCell>

          <van-cell :value="'每天'+task_expire_day_text" is-link @click="show_task_expire_day = true" title="截止时间" v-if="data.task_cycle == 1" />
          <van-cell :value="'每'+task_expire_day_text" is-link @click="show_task_expire_day = true" title="截止时间" v-if="data.task_cycle == 2" />
          <van-cell :value="'每月'+task_expire_day_text" is-link @click="show_task_expire_day = true" title="截止时间" v-if="data.task_cycle == 3" />
        </van-cell-group>

        <van-cell-group :border="false">

          <van-cell icon="underway-o" v-if="show_task_cycle" @click.stop="show_task_cycle_popup = true">
            <template slot="right-icon">
              <van-icon name="close" @click.stop="del_task_cycle" />
            </template>
            <template slot="title">
              <span v-if="data.task_cycle == 0">不重复</span>
              <span v-if="data.task_cycle == 1">每天重复</span>
              <span v-if="data.task_cycle == 2">每周重复</span>
              <span v-if="data.task_cycle == 3">每月重复</span>
            </template>
          </van-cell>

          <van-cell icon="records" v-if="show_task_remark" title="任务备注" :label="data.task_remark" @click="show_task_remark_popup = true">
            <template slot="right-icon">
              <van-icon name="close" @click.stop="del_task_remark" />
            </template>
          </van-cell>

          <van-cell class="depts_cell" icon="eye-o" v-if="show_task_super_satisfied" title="可见范围" @click="show_task_super_satisfied_popup = true">
            <template slot="right-icon">
              <van-icon name="close" @click.stop="del_task_super_satisfied" />
            </template>

            <template slot="label">
              <div style="display: inline;" class="employee_cell_value" v-if="depts.length <= 2">
                <span v-for="(item, index) in depts" :key="index"><em v-show="index > 0">，</em><Wxopendata type="departmentName" :openid="item.dept_name"></Wxopendata></span>
              </div>

              <div style="display: inline;" class="employee_cell_value" v-if="depts.length > 2">
                <span v-for="(item, index) in depts" v-if="index < 2" :key="index"><em v-show="index > 0">，</em><Wxopendata type="departmentName" :openid="item.dept_name"></Wxopendata></span>
                等{{depts.length}}个
              </div>
            </template>

          </van-cell>

          <van-cell icon="bulb-o" v-if="show_timeout_deduction_point" :title="'逾期每天扣'+data.timeout_deduction_point+'分'" @click="show_timeout_deduction_point_popup = true">
            <template slot="right-icon">
              <van-icon name="close" @click.stop="del_timeout_deduction_point" />
            </template>
          </van-cell>
        </van-cell-group>

        <div style="padding:0.32rem;">
          <van-row gutter="5" class="choose_button">
            <van-col class="list" span="8" v-if="!show_task_cycle">
              <van-button @click="show_task_cycle_popup = true" type="default" block icon="underway-o">重复周期</van-button>
            </van-col>
            <van-col class="list" span="8" v-if="!show_task_remark"><van-button @click="show_task_remark_popup = true" type="default" block icon="records">任务描述</van-button></van-col>
            <van-col class="list" span="8" v-if="!show_task_super_satisfied"><van-button @click="show_task_super_satisfied_popup = true" type="default" block icon="eye-o">可见范围</van-button></van-col>
            <van-col class="list" span="8" v-if="!show_timeout_deduction_point"><van-button @click="show_timeout_deduction_point_popup = true" type="default" block icon="bulb-o">逾期扣分</van-button></van-col>
          </van-row>
        </div>

        <div style="padding: 0.32rem">
          <van-button type="info" block @click="sava_btn">提交</van-button>
        </div>
        <div style="height: 1rem;"></div>
      </scroller>

    </div>

    <van-popup v-model="show_task_cycle_popup" position="right" style="height:100%; width:100%;">
      <div :style="'padding-top:' + bar_height + 'px;background-color: #238dfa;'"></div>
      <van-nav-bar title="重复周期" left-text="返回" @click-left="show_task_cycle_popup = false" left-arrow right-arrow @click-right="save_show_task_cycle" right-text="保存"></van-nav-bar>
      <div style="padding: 0.2rem 0.32rem 0; font-size: 0.26rem;" class="color_ccc" v-show="data.task_cycle == 0">任务为一次性任务</div>
      <div style="padding: 0.2rem 0.32rem 0; font-size: 0.26rem;" class="color_ccc" v-show="data.task_cycle == 1">任务每天0点自动发布</div>
      <div style="padding: 0.2rem 0.32rem 0; font-size: 0.26rem;" class="color_ccc" v-show="data.task_cycle == 2">任务每周周一自动发布</div>
      <div style="padding: 0.2rem 0.32rem 0; font-size: 0.26rem;" class="color_ccc" v-show="data.task_cycle == 3">任务每月1号自动发布</div>
      <van-radio-group v-model="data.task_cycle">
        <van-cell-group>
          <van-cell title="不重复" clickable @click="data.task_cycle = 0">
            <template slot="right-icon">
              <van-radio :name="0" />
            </template>
          </van-cell>

          <van-cell title="每天重复" clickable @click="data.task_cycle = 1">
            <template slot="right-icon">
              <van-radio :name="1" />
            </template>
          </van-cell>

          <van-cell title="每周重复" clickable @click="data.task_cycle = 2">
            <template slot="right-icon">
              <van-radio :name="2" />
            </template>
          </van-cell>

          <van-cell title="每月重复" clickable @click="data.task_cycle = 3">
            <template slot="right-icon">
              <van-radio :name="3" />
            </template>
          </van-cell>

        </van-cell-group>
      </van-radio-group>

    </van-popup>

    <van-popup v-model="show_task_super_satisfied_popup" position="right" style="height:100%; width:100%;">
      <div :style="'padding-top:' + bar_height + 'px;background-color: #238dfa;'"></div>
      <van-nav-bar title="可见范围" left-text="返回" @click-left="show_task_super_satisfied_popup = false" left-arrow right-arrow @click-right="save_task_super_satisfied" right-text="保存"></van-nav-bar>
      <van-cell-group v-if="show_task_super_satisfied_popup">
        <DeptSelectorCell title="可见范围" v-model="depts"></DeptSelectorCell>
      </van-cell-group>

    </van-popup>

    <van-popup v-model="show_timeout_deduction_point_popup" position="right" style="height:100%; width:100%;">
      <div :style="'padding-top:' + bar_height + 'px;background-color: #238dfa;'"></div>
      <van-nav-bar title="逾期扣分" left-text="返回" @click-left="show_timeout_deduction_point_popup = false" left-arrow right-arrow @click-right="save_timeout_deduction_point" right-text="保存"></van-nav-bar>
      <van-cell-group v-if="show_timeout_deduction_point_popup">
        <div class="point_popup_tip red" slot="title">每逾期一天扣多少分</div>
        <van-field type="number" v-model="data.timeout_deduction_point" placeholder="请输入积分" label="扣除分值" />
      </van-cell-group>
    </van-popup>
    <van-popup v-model="show_task_remark_popup" position="right" style="height:100%; width:100%;">
      <div :style="'padding-top:' + bar_height + 'px;background-color: #238dfa;'"></div>
      <van-nav-bar title="任务描述" left-text="返回" @click-left="show_task_remark_popup = false" left-arrow right-arrow @click-right="save_remark" right-text="保存"></van-nav-bar>
      <van-cell-group v-if="show_task_remark_popup">
        <van-cell>
          <Mtextarea v-model="data.task_remark" placeholder="请输入关于任务的描述" :text_max="100"></Mtextarea>
        </van-cell>
      </van-cell-group></van-popup>

    <van-popup v-model="show_task_expire_day" position="bottom">
    <van-picker :columns="columns1" :default-index="task_expire_day" v-show="data.task_cycle == 1" show-toolbar @cancel="show_task_expire_day = false" @confirm="task_expire_dayonChange" />
    <van-picker :columns="columns2" :default-index="task_expire_day" v-show="data.task_cycle == 2" show-toolbar @cancel="show_task_expire_day = false" @confirm="task_expire_dayonChange" />
    <van-picker :columns="columns3" :default-index="task_expire_day" v-show="data.task_cycle == 3" show-toolbar @cancel="show_task_expire_day = false" @confirm="task_expire_dayonChange" />
    </van-popup>
  </div>
</template>
<script>
import DeptSelectorCell from '@/components/common/DeptSelectorCell'
import DateTimeCell from '@/components/common/DateTimeCell'
import request from '@/utils/request'
import NumberInput from '@/components/common/NumberInput'
import Vue from 'vue'
import Mtextarea from '@/components/common/Mtextarea'
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import smallTip from '@/components/common/smallTip'
import {calendar, Overlay, DatetimePicker, RadioGroup, Radio, Picker } from 'vant'
Vue.use(Radio)
Vue.use(Picker)
Vue.use(RadioGroup)
Vue.use(calendar).use(Overlay).use(DatetimePicker).use(smallTip)
export default {
  data () {
    const reviewer = [this.$store.getters.user_info]
    return {
      bar_height: 0,
      task_expire_day_text: '',
      task_expire_day: 1,
      show_task_expire_day: false,
      columns1: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
      columns2: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      columns3: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号', '29号', '30号', '31号'],
      reviewer: reviewer,
      data: {
        task_type: 1,
        pt_id: 0,
        task_name: '',
        task_remark: '',
        base_point: 0,
        expire_time: '',
        file_list: [],
        reviewer_id: this.$store.getters.user_info.id,
        timeout_deduction_point: 0,
        dept_ids: [],
        task_cycle: 0,
        task_expire_day: 1
      },
      title: '发布悬赏任务',
      post_data: {},
      depts: [],
      show_task_cycle: false,
      show_task_super_satisfied: false,
      show_timeout_deduction_point: false,
      show_task_remark: false,
      show_task_cycle_popup: false,
      show_task_super_satisfied_popup: false,
      show_timeout_deduction_point_popup: false,
      show_task_remark_popup: false
    }
  },
  components: {
    EmployeeSelectorCell, Mtextarea, DateTimeCell, DeptSelectorCell, smallTip, NumberInput
  },
  watch: {
    'data.task_cycle': function (val) {
      this.data.task_expire_day = 1
      this.task_expire_day = 0
      if (this.data.task_cycle == 1) {
        this.task_expire_day_text = this.columns1[this.data.task_expire_day - 1]
      } else if (this.data.task_cycle == 2) {
        this.task_expire_day_text = this.columns2[this.data.task_expire_day - 1]
      } else if (this.data.task_cycle == 3) {
        this.task_expire_day_text = this.columns3[this.data.task_expire_day - 1]
      }
    },
    reviewer: function (val, old) {
      let self = this
      if (val.length == 0) {
        self.data.reviewer_id = 0
      } else {
        self.data.reviewer_id = val[0].id
      }
    },
    depts (val) {
      if (val.length == 0) {
        this.data.dept_ids = []
      } else {
        this.data.dept_ids = []
        for (let i in val) {
          this.data.dept_ids.push(val[i].dept_id)
        }
      }
    }
  },
  methods: {
    del_task_cycle () {
      this.show_task_cycle = false
      this.data.task_cycle = 0
    },
    del_timeout_deduction_point () {
      this.show_timeout_deduction_point = false
      this.data.timeout_deduction_point = 0
    },
    del_task_remark () {
      this.data.task_remark = ''
      this.show_task_remark = false
    },
    del_task_super_satisfied () {
      this.data.unqualified = 1
      this.data.qualified = 1
      this.data.satisfied = 1
      this.data.super_satisfied = 1
      this.show_task_super_satisfied = false
      this.depts = []
      this.data.dept_ids = []
    },
    task_expire_dayonChange (val, index) {
      this.task_expire_day = index
      if (this.data.task_cycle == 1) {
        this.task_expire_day_text = this.columns1[index]
      } else if (this.data.task_cycle == 2) {
        this.task_expire_day_text = this.columns2[index]
      } else if (this.data.task_cycle == 3) {
        this.task_expire_day_text = this.columns3[index]
      }
      this.data.task_expire_day = index + 1
      this.show_task_expire_day = false
    },
    save_remark () {
      this.show_task_remark = true
      this.show_task_remark_popup = false
    },
    save_timeout_deduction_point () {
      this.show_timeout_deduction_point = true
      this.show_timeout_deduction_point_popup = false
    },
    save_task_super_satisfied () {
      this.show_task_super_satisfied = true
      this.show_task_super_satisfied_popup = false
    },
    save_show_task_cycle () {
      this.show_task_cycle = true
      this.show_task_cycle_popup = false
    },
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    sub () {
      let self = this
      self.showLoading()
      let url = ''
      if (self.data.task_cycle == 0) {
        url = '/api/integral/task/publish'
      } else {
        url = '/api/integral/schedule/publish/task'
      }
      let data = JSON.parse(JSON.stringify(self.data))
      if (data.task_remark == '') {
        delete data.task_remark
      }
      if (data.unqualified == 0) {
        delete data.unqualified
      }
      if (data.satisfied == 0) {
        delete data.satisfied
      }
      if (data.qualified == 0) {
        delete data.qualified
      }
      if (data.super_satisfied == 0) {
        delete data.super_satisfied
      }
      request('post', url, data).then((res) => {
        if (res.data.code == 1) {
          self.$toast.clear()
          self.data = {
            task_type: 1,
            pt_id: 0,
            task_name: '',
            task_remark: '',
            base_point: 0,
            expire_time: '',
            file_list: [],
            reviewer_id: 0,
            timeout_deduction_point: 0,
            dept_ids: [],
            task_cycle: 0,
            task_expire_day: 1
          }
          self.reviewer = []
          if (window.plus) {
            setTimeout(() => {
              plus.navigator.setStatusBarStyle('dark')
              document.documentElement.style.backgroundColor = '#fff'
            }, 100)
          }
          localStorage.setItem('callback_data', JSON.stringify({title: '发布成功', detail_url: ''}))
          this.$router.replace({path: '/callback?replace=1'})
        } else {
          self.$toast.clear()
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast.clear()
      })
    },
    sava_btn () {
      let self = this
      self.$validator.validate().then(result => {
        if (!result) {
          self.$notify({ type: 'danger', message: self.$validator.errors.items[0].msg })
        } else {
          if (self.data.base_point == 0) {
            self.$notify({ type: 'danger', message: '任务积分必须大约0' })
          } else {
            self.sub()
          }
        }
      })
    }
  },
  created () {
    let self = this
    for (let i in this.$store.getters.point_types) {
      if (this.$store.getters.point_types[i].code == 'BF') {
        this.data.pt_id = this.$store.getters.point_types[i].id
      }
    }
    if (window.plus) {
      self.bar_height = window.plus.navigator.getStatusbarHeight()
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.body_com{height: calc(100% - 0.92rem); position: relative;}
.task_move{
  margin: 0.32rem;
  margin-bottom: 0;
  background-color: #fff;
  padding: 0.2rem;
  .van-row{
    .van-col{
      position: relative;
      text-align: center;
      padding: 0.2rem;
      font-size: 0.32rem;
      padding-left: 0;
      padding-right: 0;
      .icon{
        width: 0.32rem;
        height: 0.36rem;
      }
      &:after{
        content: '';
        display: block;
        height: 0.3rem;
        background-color: #DCDFE6;
        width: 0.02rem;
        clear: both;
        right: 0;
        position: absolute;
        top: .3rem;
      }
    }
  }
}
.all_popup{
  height: 100vh;
  width: 100vw;
  background-color: rgb(245, 245, 245);
}
.point_popup_tip{
  font-size: .24rem;
  color: #909399;
  line-height: .34rem;
  background-color: rgb(245, 245, 245);
  span{
    color: #26a2ff;
  }
}
.red{
  color: red;
}
.van-popup{background: rgb(245, 245, 245);}
  .van-col.van-col--8{margin-bottom:0.16rem;}

/deep/ .depts_cell .van-cell__value{
  -webkit-box-flex: unset;
  -webkit-flex: none;
  flex: none;
  width:4rem !important;
}
  /deep/ .van-col.van-col--8 .van-button{padding:0;}
  .point-field /deep/ .van-cell__title.van-field__label span{width:0; color: transparent; height: 0; overflow: hidden; font-size: 0;}
.point-field /deep/ .van-cell__title{width:0;}
.temp_task_box /deep/ .van-icon-close{
  color:#238dfa;
  padding-top:0.1rem;
}
.temp_task_box .choose_button{
  padding-top:0.2rem;
  background:#fff;
  border-radius:0.08rem;
}
.temp_task_box .choose_button .list{
}
.temp_task_box .choose_button .list /deep/ button{
  height: 0.4rem;
  margin: 0.16rem auto;
  border: none;
  border-right: 0.02rem #DCDFE6 solid;
  line-height: 0.4rem;
}
.temp_task_box .choose_button .list /deep/ button:hover{
  color:#238dfa;
  background:transparent;
}
.temp_task_box .choose_button .list /deep/ button:active{
  color:#238dfa;
  background:transparent;
}
.temp_task_box .choose_button .list /deep/ button:before{
  background:transparent;
}
.temp_task_box .choose_button .list:nth-child(3) /deep/ button{
  border-right:none;
}
.radio_button /deep/ .changeRadio .van-radio__icon {
  background-color: rgba(38,162,255,0.2)!important;
 }
.radio_button /deep/.changeRadio .van-radio__icon--checked + .van-radio__label {
   color: #26A2FF!important;
}
.temp_task_box .small_tip_content p:nth-child(3){
  display:none;
}
</style>
