<template>
  <div class="reward_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-row style="background: #fff;">
            <van-col @click="typeWork(1)"  :class="{'active': firstWork==true}" class="newButton" span="10" >
              一次性
            </van-col>
             <van-col @click="typeWork(2)" :class="{'active': firstWork==false}" class="newButton" span="10" >
              重复周期
            </van-col>
        </van-row>
        <van-cell v-if="!firstWork" title-style="flex:0.5;" title="重复周期" :value="task_cycle">
            <template slot="default">
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">每天</van-radio>
                <van-radio name="2">每月</van-radio>
                <van-radio name="3">每周</van-radio>
              </van-radio-group>
            </template>
            <!-- <template slot="right-icon">
              <van-icon id="small_tip" @click="show_small_tip = true" name="question-o" />
            </template> -->
          </van-cell>


        <van-cell-group>
          <van-cell>
            <Mtextarea v-model="name" placeholder="输入任务内容" :text_max="20" :imgs_max="3" images speech :imgs.sync="imgs"></Mtextarea>
          </van-cell>
        </van-cell-group>

          <van-cell-group>
           <van-cell title="完成奖分"  title-style="flex:0.4;">
            <van-radio-group v-model="pt_id" direction="horizontal">
              <van-radio  v-for="(item,index) in workType"  :key="index" :name="item.id">{{item.name}}</van-radio>
            </van-radio-group>
          </van-cell>
          </van-cell-group>

          <van-field required v-model="point" v-validate="'required|numeric'" label="输入分值" name="输入分值" placeholder="请输入分值" />
        <van-cell-group>
          <!-- 不能为0   -->
          <van-cell  required title="截止时间" name="截止时间" @click="deadline_show = true" is-link :value="deadline"></van-cell>
        </van-cell-group>


        <!-- <van-cell-group>
          <van-cell required title="执行人" name="执行人" @click="show_executor = true" is-link :value="executor_name"></van-cell>
          <van-cell required title="审批人" name="审批人" @click="show_approver = true" is-link :value="reviewer.name"></van-cell>
          <van-cell title="任务类型" :value="task_type">
            <template slot="default">
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">A分</van-radio>
                <van-radio name="2">B分</van-radio>
              </van-radio-group>
            </template>
            <template slot="right-icon">
              <van-icon id="small_tip" @click="show_small_tip = true" name="question-o" />
            </template>
          </van-cell>

        </van-cell-group>
         -->
        <van-cell-group>
          <van-cell v-if="task_describe">
            <div slot="title" @click="show_describe = true">
              {{task_describe}}
            </div>
            <template slot="icon">
              <van-icon name="orders-o" />
            </template>
            <template slot="right-icon" >
              <van-icon name="cross" @click="task_describe='',task_describe_p=''" />
            </template>
          </van-cell>
          <van-cell v-if="deduction">
            <template slot="icon">
              <van-icon name="orders-o" />
            </template>
            <div slot="title" @click="show_overdue = true">
              <span>逾期扣分</span>
              <span>-{{deduction}}</span>
            </div>
            <template slot="right-icon">
              <van-icon name="cross" @click="deduction='',deduction_p=''" />
            </template>
          </van-cell>

          <van-cell v-if="reviewer.name">
            <template slot="icon">
              <van-icon name="orders-o" />
            </template>
            <div slot="title" @click="show_approver = true">
              <span>审批人</span>
              <span v-for="item in approver_selected.employee">{{item.name}}</span>
            </div>
            <template slot="right-icon">
              <van-icon name="cross" @click="reviewer.name=''" />
            </template>
          </van-cell>

            <van-cell v-if="executor_name.length!=0">
            <template slot="icon">
              <van-icon name="orders-o" />
            </template>
            <div slot="title" @click="show_overdue = true">
              <span>可见范围</span>
              <span>{{executor_name}}</span>
            </div>
            <template slot="right-icon">
              <van-icon name="cross" @click="executor_name=[],deduction_p=''" />
            </template>
          </van-cell>




        </van-cell-group>

        <div class="task_move">
          <van-row>
            <van-col span="8" v-if="!task_describe" @click="show_describe = true">
              <icon class="icon" name="task_ms_icon"></icon>
              任务描述
            </van-col>
            <!-- <van-col span="8" v-if="true" @click="show_point = true">
              <icon class="icon" name="point_icon"></icon>
              评分标准
            </van-col> -->
            <van-col span="8" v-if="!deduction" @click="show_overdue = true">
              <icon class="icon" name="overdue_icon"></icon>
              逾期扣分
            </van-col>
            <van-col span="8" v-if="!reviewer.name" @click="show_approver = true">
              <icon class="icon" name="overdue_icon"></icon>
              审批人
            </van-col>
             <van-col span="8" v-if="executor_name.length==0"  @click="show_executor = true">
              <icon class="icon" name="overdue_icon"></icon>
              可见范围
            </van-col>
          </van-row>
        </div>

        <van-row style="margin-top: 0.3rem" type="flex" justify="center">
          <van-col :span="20">
            <van-button type="info" block @click="sava_btn">提交</van-button>
          </van-col>
        </van-row>


      </scroller>

      <!-- 选择对象 -->
		  <EmployeeSelector :can_select_employee="true" :can_select_dept="false" :dept_multi="false" @confirm="executor_confirm"
			  :visible.sync="show_executor" :selected="selected" @cancel="executor_cancel"></EmployeeSelector>


      <!-- 选择审批人 -->
		  <EmployeeSelector :can_select_employee="true" :can_select_dept="false" :multi="false" @confirm="approver_confirm"
			  :visible.sync="show_approver" :selected="approver_selected" @cancel="approver_cancel"></EmployeeSelector>


      <!-- 截止时间 -->
      <van-popup position="bottom" v-model="deadline_show">
        <van-datetime-picker
          title="选择截止时间"
          v-model="currentDate"
          @confirm="deadline_confirm"
          @cancel="deadline_cancel"
        />
      </van-popup>

      <!-- 任务描述 -->
      <van-popup class="all_popup" position="right" v-model="show_describe">
        <van-nav-bar title="任务描述" right-text="完成" @click-right="describe_confirm" left-text="取消" @click-left="describe_cancel"></van-nav-bar>
        <van-cell-group>
          <van-field
            v-model="task_describe_p"
            rows="3"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入关于任务的描述"
            show-word-limit
          />
        </van-cell-group>
      </van-popup>

      <!-- 评分标准 -->
      <!-- <van-popup class="all_popup" position="right" v-model="show_point">
        <van-nav-bar title="评分标准" right-text="保存" @click-right="point_confirm" left-text="取消" @click-left="point_cancel"></van-nav-bar>
        <van-cell-group>
          <div class="point_popup_tip">系统为您推荐了各标准的积分，可点击修改积分</div>
          <van-field type="number" v-model="score_p.good" placeholder="请输入积分" label="超预期" />
          <van-field type="number" v-model="score_p.satisfied" placeholder="请输入积分" label="满意" />
          <van-field type="number" v-model="score_p.qualified" placeholder="请输入积分" label="合格" />
          <van-field type="number" v-model="score_p.unqualified" placeholder="请输入积分" label="不合格" />
          <div class="point_popup_tip">如需调整系统推荐的标准积分比例，<span>点击设置</span></div>
        </van-cell-group>
      </van-popup> -->

      <!-- 逾期扣分 -->
      <van-popup class="all_popup" position="right" v-model="show_overdue">
        <van-nav-bar title="逾期扣分" right-text="保存" @click-right="overdue_confirm" left-text="取消" @click-left="overdue_cancel"></van-nav-bar>
        <van-cell-group>
          <div class="point_popup_tip red">每逾期一天扣多少分</div>
          <van-field type="number" v-model="deduction_p" placeholder="请输入积分" label="扣分" />
        </van-cell-group>
      </van-popup>

      <!-- 审批人 -->
      <!-- <van-popup class="all_popup" position="right" v-model="show_overdue">
         <EmployeeSelector :can_select_employee="true" :can_select_dept="false" :multi="false" @confirm="approver_confirm"
			  :visible.sync="show_approver" :selected="approver_selected" @cancel="approver_cancel"></EmployeeSelector>
      </van-popup> -->

    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import moment from 'moment';
  import Vue from 'vue'
  import Mtextarea from '@/components/common/Mtextarea'
  import EmployeeSelector from '@/components/common/EmployeeSelector'
  import {calendar, Overlay, DatetimePicker,Button } from 'vant'
  Vue.use(calendar).use(Overlay).use(DatetimePicker).use(Button)
  export default {
    // 数据
    data(){
      return {
        dateRight: 0,
        task_cycle: 1,
        name:'', // 任务名
        workType:[],
        firstWork: true,
        title: '悬赏任务',
        show_executor: false,
        deadline_show: false,
        // 弹窗
        show_approver: false,
        show_describe: false,
        show_repetition: false,
        show_point: false,
        show_overdue: false,

        point: '',
        task_type: 1,
        radio: '1',
        selected: {employee:[], dept: []},
        approver_selected: {employee:[], dept: []},
        show_appdialog: false,
        deadline: '',
        // 弹窗
        task_describe:'',
        task_describe_p: '',
        repetition_radio: '',
        repetition_radio_p: '',
        score_p:{
          good:'30',
          satisfied:'28',
          qualified:'25',
          unqualified:'20',
        },
        score:{
          good:'',
          satisfied:'',
          qualified:'',
          unqualified:'',
        },
        deduction_p: '',
        deduction: '',
        currentDate: new Date(),

        // 语音输入
        imgs: [],
        text: '',
        show_small_tip: false,

        executor_name: '',
        reviewer: {
          name: '',
          id: ''
        },
        pt_id:'',
        files: [],
        formData:{
          members:[],
          items:[{
            rule_id:'',
            item_id:'',
            remark:'',
            pt_id:'',
            reviewer_id:'',
            files: []
          }]
        },
      }
    },
    // 组件
    components: {
      EmployeeSelector,Mtextarea
    },
    // 方法
    methods:{
      typeWork(value) {
          if(value == 1) {
              this.firstWork = true;
          }else {
              this.firstWork = false;
          }
      },
      // 获取积分分类列表
      getpoinType() {
         request('get','/api/integral/types').then((res) => {
          if(res.data.code == 1){
           this.workType = res.data.data.list;
          }
        })
      },
      // 加载
      showLoading () {
        this.$toast.loading({
          loadingType: "spinner",
          message: '正在处理'
        })
      },
      sub(){
        let self = this
        let url = '';
        self.showLoading()
        let post_data = {
          pt_id: self.pt_id,  // 积分种类
          task_name: self.name,  // 任务名
          task_remark: self.task_describe, // 任务详细描述
          base_point: self.point,     // 任务参考积分
            // 截止时间
          timeout_deduction_point: self.deduction,
          reviewer_id: self.reviewer.id,  // 审批者id
          dept_ids: self.formData.members,   // 可见范围
        }
         if(this.firstWork) {
          post_data.expire_time = self.deadline
          url = '/api/integral/task/publish';
          post_data.task_type = 1;
        }else {
          let s1 = new Date(self.dateRight.replace(/-/g, "/"));
          let s2 = new Date();//当前日期：2017-04-24
          var days = s2.getTime() - s1.getTime();
          var time = parseInt(days / (1000 * 60 * 60 * 24));
          let daystime =  Math.abs(time);
          post_data.task_expire_day = daystime;
          post_data.task_cycle = self.task_cycle
          url = '/api/integral/schedule/publish/task';
        }
        request('post',url,post_data).then((res) => {
          if(res.data.code == 1){
            self.$toast.clear()
            self.pt_id = ''
            self.name = ''
            self.point = ''
            self.deadline = ''
            self.reviewer = {};
            self.executor_name = []
            self.task_describe=''
            self.deduction = ''
            self.formData.members = ''
            self.$toast(res.data.msg)
          }else{
            self.$toast.clear()
            self.$toast(res.data.msg)
          }
        }).catch((e) => {
          self.$toast.clear()
        })
      },
      // 关闭选择部门弹窗
      executor_cancel() {
        this.show_executor = false
      },
      // 选择人员 完成
      executor_confirm(data) {
        let self = this
        if(data.employee){
          let id_arr = [],name_arr = []
          data.employee.forEach(v => {
            id_arr.push(v.id)
            name_arr.push(v.name)
          });
          self.formData.members = id_arr.join(',')
          self.executor_name = name_arr.join(',')
          self.selected = data
        }
        self.executor_cancel()
      },
      // 选择审批人确认
      approver_confirm(data){
        let self = this
        if(data.employee){
          self.reviewer = data.employee[0]
          self.approver_selected = data
        }
        self.show_approver = false
      },
      // 关闭选择审批人
      approver_cancel(){
        this.show_approver = false
      },
      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.deadline == ''){
              self.$notify({ type: 'danger', message: '截止时间不能为空' });
            }else{
              self.sub()
            }
          }
        })
      },
      // 弹窗操作
      describe_cancel(){
        this.show_describe = false
      },
      describe_confirm(){
        let self = this
        self.task_describe = self.task_describe_p
        self.show_describe = false
      },

      repetition_cancel(){
        this.show_repetition = false
      },
      repetition_confirm(){
        let self = this
        self.repetition_radio = self.repetition_radio_p
        self.show_repetition = false
        self.repetition_radio_p = ''
      },

      point_cancel(){
        this.show_point = false
      },
      point_confirm(){
        let self = this
        self.score = self.score_p
        self.show_point = false
        self.score_p = ''
      },

      overdue_cancel(){
        this.show_overdue = false
      },
      overdue_confirm(){
        let self = this
        self.deduction = self.deduction_p
        self.show_overdue = false
        self.deduction_p = ''
      },

      // 截止时间
      deadline_confirm(date){
        this.deadline_show = false;
        this.dateRight = moment(date).format('YYYY-MM-DD');
        this.deadline = moment(date).format('YYYY-MM-DD HH:mm');
      },
      deadline_cancel(){
				this.deadline_show = false
      }
    },
    created() {
       this.getpoinType()
    },
  };
</script>
<style rel="stylesheet/less" scoped lang="less">
.body_com{height: calc(100% - 1rem); position: relative;}
.newButton {
    border: 1px solid #909399;
    text-align: center;
    line-height: 0.8rem;
    margin: 0.2rem 0;
}
.active {
    color: #238dfa;
    border: 1px solid #238dfa;
}
.task_move{
  margin: 0.2rem 0rem;
  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;
  padding: 0.1rem 0.32rem;
  background-color: rgb(245, 245, 245);
  span{
    color: #26a2ff;
  }
}
.red{
  color: red;
}
.reward_box /deep/ .van-row{
  display: block;
  text-align: center;
  width: 100%;
}
.reward_box /deep/ .van-row .newButton{
  display: inline-block;
  width:calc(88%/2);
  font-size:0.32rem;
  margin: 0.3rem 0.1rem;
  padding:0rem 0.1rem;
  border-radius:0.08rem;
  float:none;
}
.reward_box /deep/ .van-col--20{
  display: inline-block;
  width:calc(100vw - 0.64rem);
  margin-top:0rem;
  float:none;
}
</style>
