<template>
  <div>
    <div class="box">
      <el-tabs v-model="status" type="card">
        <el-tab-pane v-for="(item,index) in tabsOption" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>
      <el-form ref="formData" :inline="true" :model="formData" label-width="70px">
        <el-form-item>
          <el-dropdown @command="downClick">
            <el-button type="primary">
              发布任务<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">+ 临时任务</el-dropdown-item>
              <el-dropdown-item command="2">+ 悬赏任务</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>          
        </el-form-item>
        <el-form-item v-if="status == 'assign' || status == 'reward'" label="积分类型">
          <el-select v-model="formData.pt_id" placeholder="请选择排序">
            <el-option v-for="item in point_types" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="status == 'assign'" label="任务状态">
          <el-select v-model="formData.status" placeholder="请选择排序">
            <el-option v-for="item in task_status" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="status == 'reward'" label="排序">
          <el-select v-model="formData.order_by" placeholder="请选择排序">
            <el-option v-for="item in order_by" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="status == 'assign'" label="排序" label-width="45px">
          <el-select v-model="formData.sort" placeholder="请选择排序">
            <el-option v-for="item in sort" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div v-if="status == 'assign'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="rowClick">
          <el-table-column label="执行人" prop="task_name" width='250px'>
            <template slot-scope="scope">
              <userImage class="fl" width="50px" height="50px" :id="scope.row.employee_id" :user_name="scope.row.employee_name"></userImage>
              <span style="line-height: 50px; padding-left: 10px;"><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData>的{{scope.row.pt_name}}任务</span>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="task_name">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <span>{{ scope.row.task_name }}</span>
                <div slot="reference" class="name-wrapper">
                  <span style="white-space: normal; overflow: hidden;">{{ scope.row.task_name }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="积分" prop="point_config.base_point" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.point_config.base_point >= 0 && scope.row.status == 2">+ {{scope.row.point_config.base_point}}</span>
              <span v-else>{{scope.row.point_config.base_point}}</span>
              {{$getTypsName(scope.row.pt_id)}}
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time"></el-table-column>
          <el-table-column label="状态" prop="owner_id" width="100px">
            <template slot-scope="scope">
              <span :class="scope.row.status == 1?'color_yelllo':scope.row.status == 2?'color_green':scope.row.status == 3?'color_3':scope.row.status == 4?'color_4':scope.row.status == 5?'color_5':''">{{scope.row.status == 1?'进行中':scope.row.status == 2?'已完成':scope.row.status == 3?'已退回':scope.row.status == 4?'已审批':scope.row.status == 5?'已撤销':''}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="base_point" label="操作" align="center" width='80px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links" @click.stop="">···</span>
              <el-dropdown-menu  slot="dropdown" >
                <!-- <el-dropdown-item :disabled="false" v-if="scope.row.source_type==1"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="issueAmend1(scope.row)">修改</el-button></el-dropdown-item> -->
                <el-dropdown-item :disabled="false" v-if="scope.row.status==1"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="issueAmend1(scope.row)">修改</el-button></el-dropdown-item>
                <el-dropdown-item :disabled="false"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row,0)">删除</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </template>
          </el-table-column>

          <template slot="empty">
            <div class="nopoint_box">
              <div class="noimg noperson"></div>
              <span class="title">没有对应的数据</span>
            </div>
          </template>
        </el-table>
      </div>

      <div v-if="status == 'reward'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="rewardTasksClick">
          <el-table-column label="发布人" prop="employee_id">
            <template slot-scope="scope">
              <userImage class="fl" width="50px" height="50px" :id="scope.row.owner_id" :img_url="scope.row.owner_img_url" :user_name="scope.row.owner_name" ></userImage>
              <span style="line-height: 50px; padding-left: 10px;">我发布的{{scope.row.pt_name}}任务</span>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="task_name">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <span>{{ scope.row.task_name }}</span>
                <div slot="reference" class="name-wrapper">
                  <span style="white-space: normal; overflow: hidden;">{{ scope.row.task_name }}</span>
                </div> 
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="积分" prop="base_point" width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 3 && scope.row.base_point >= 0">+ {{scope.row.base_point}}</span>
              <span v-else>{{scope.row.base_point}}</span>
              {{$getTypsName(scope.row.pt_id)}}
            </template>
          </el-table-column>
          <el-table-column label="截止时间" prop="expire_time"></el-table-column>
          <el-table-column label="状态" prop="owner_id" width="100px">
            <template slot-scope="scope">
                <!-- <el-button class="color_yelllo" v-show="scope.row.status == 1" type="text">待领取</el-button> -->
                <!-- <el-button class="color_yelllo" v-show="scope.row.status == 1" type="text">待领取</el-button> -->
                <!-- <el-button class="color_yelllo" v-show="scope.row.status == 1" type="text">待领取</el-button> -->
              <span class="color_3" v-show="scope.row.status == -1">已过期</span>
              <span class="color_yelllo" v-show="scope.row.status == 1">待领取</span>
              <span class="color_yelllo2"  v-show="scope.row.status == 2">待处理</span>
              <span class="color_green" v-show="scope.row.status == 3">已完成</span>
              <span class="color_5" v-show="scope.row.status == 4">已撤回</span>
            </template>
          </el-table-column>

          <el-table-column prop="base_point" label="操作" align="center" width='80px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links" @click.stop="">···</span>
              <el-dropdown-menu  slot="dropdown" >
                <el-dropdown-item :disabled="false" v-if="scope.row.status==1"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="offerARewardAmend2(scope.row)">修改</el-button></el-dropdown-item>
                <el-dropdown-item :disabled="false"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row,1)">删除</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </template>
          </el-table-column>

          <template slot="empty">
            <div class="nopoint_box">
              <div class="noimg noperson"></div>
              <span class="title">没有对应的数据</span>
            </div>
          </template>
        </el-table>
      </div>

      <div v-if="status == 'repetitive'">
        <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="repetitiveTasksClick">
          <el-table-column label="执行人" prop="target_info">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.target_info" :key="index">
                <span v-if="scope.row.target_info.length == 1 && index == 0"><WWOpenData type="userName" :openid="item.name"></WWOpenData></span>
                <span v-if="scope.row.target_info.length > 1 && index == 0"><WWOpenData type="userName" :openid="item.name"></WWOpenData>等{{scope.row.target_info.length}}人</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="remark">
            <template slot-scope="scope">
              {{scope.row.name || scope.row.remark}}
            </template>
          </el-table-column>
          <el-table-column label="任务积分" prop="point_config.base_point">
            <template slot-scope="scope">
              <span v-if="scope.row.point_config.status == 3 && scope.row.point_config.base_point >= 0">+ {{scope.row.point_config.base_point}}</span>
              <span v-else>{{scope.row.point_config.base_point}}</span>
              {{$getTypsName(scope.row.pt_id)}}
            </template>
          </el-table-column>
          <el-table-column label="重复周期" prop="task_cycle">
            <template slot-scope="scope">
              <span v-if="scope.row.task_cycle == '1'">每天自动发布 完成截止为{{scope.row.task_cycle_value}}点</span>
              <span v-if="scope.row.task_cycle == '2'">
                <span v-if="scope.row.task_cycle_value == 1">每周一自动发布</span>
                <span v-if="scope.row.task_cycle_value == 2">每周二自动发布</span>
                <span v-if="scope.row.task_cycle_value == 3">每周三自动发布</span>
                <span v-if="scope.row.task_cycle_value == 4">每周四自动发布</span>
                <span v-if="scope.row.task_cycle_value == 5">每周五自动发布</span>
                <span v-if="scope.row.task_cycle_value == 6">每周六自动发布</span>
                <span v-if="scope.row.task_cycle_value == 7">每周日自动发布</span>
              </span>
              <span v-if="scope.row.task_cycle == '3'">每月自动发布 完成截止为次月{{scope.row.task_cycle_value}}号</span>
            </template>
          </el-table-column>

          <el-table-column prop="base_point" label="操作" align="center" width='80px'>
            <template slot-scope="scope">
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150" >
              <span class="el-dropdown-links" @click.stop="">···</span>
              <el-dropdown-menu  slot="dropdown" >
                <el-dropdown-item :disabled="false"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row,2)">删除</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </template>
          </el-table-column>
          <!-- 
          <el-table-column label="操作" prop="task_cycle">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click.stop="editRepeatTask(scope.row)">修改</el-button>
            </template>
          </el-table-column> 
          -->
          <template slot="empty">
            <div class="nopoint_box">
              <div class="noimg noperson"></div>
              <span class="title">没有对应的数据</span>
            </div>
          </template>
        </el-table>
      </div>
      
      <center style="padding: 20px 0;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :page-size="formData.page_size"
          :current-page="formData.page"
          :total="total">
        </el-pagination>
      </center>

    </div>
    <!-- 临时任务 -->
    <temporaryTask :dialogVisible.sync="dialogVisible" :showTitle="'临时任务'"></temporaryTask>
    <!-- 临时任务-修改 -->
    <temporaryTaskAmend :dialogVisible.sync="dialogVisibleAmend" :showTitle="'任务编辑'" :modifyData="modifyData"></temporaryTaskAmend>
    <!-- 悬赏任务 -->
    <rewardTask :dialogVisible.sync="rewardTaskShow" :showTitle="'悬赏任务'"></rewardTask>
    <!-- 悬赏任务-修改 -->
    <rewardTaskAmend :dialogVisible.sync="rewardTaskAmendShow" ref="rewardTasks" :showTitle="'任务编辑'" :rewardTaskAmendData="rewardTaskAmendData"></rewardTaskAmend>

    <!-- 详情弹窗 -->
    <taskDetailsPopup :visible.sync="showDetailPopup"  v-if="showDetailPopup" :id="detailId" :title="'任务详情'"></taskDetailsPopup>

    <!-- 重复任务详情弹窗 -->
    <repeatTaskDetailsPopup :visible.sync="showRepetitiveTasksPopup" v-if="showRepetitiveTasksPopup" :id="detailId" :title="'重复任务详情'"></repeatTaskDetailsPopup>
    
    <!-- 悬赏任务详情弹窗 -->
    <rewardTaskDetailsPopup :visible.sync="showRewardTaskDetailsPopup" v-if="showRewardTaskDetailsPopup" :id="detailId" :title="'工作详情'"></rewardTaskDetailsPopup>
  </div>
</template>

<script>
  import temporaryTask from '@/views/common/temporaryTask'
  import temporaryTaskAmend from '@/views/common/temporaryTaskAmend'
  import rewardTask from '@/views/common/rewardTask'
  import rewardTaskAmend from '@/views/common/rewardTaskAmend'
  import taskDetailsPopup from '@/views/common/taskDetailsPopup'
  import repeatTaskDetailsPopup from '@/views/common/repeatTaskDetailsPopup'
  import rewardTaskDetailsPopup from '@/views/common/rewardTaskDetailsPopup'
  
  export default {
    name: 'my_issue',
    data() {
      return {
        rewardTaskAmendData:{},//悬赏修改
        modifyData:{},//任务修改

        operation_if:false,//操作列显示隐藏
        bodyLoad: false,

        status:'assign',
        formData:{
          status: "all",
          sort: "publish",
          order_by: "create_time",
          pt_id: 0,
          page_size: 10,
          page: 1,
          source_type: '1'
        },
        total: null,
        list: [],
        loading: false,
        point_types: null,
        task_status: [
          {id: 1, name: '全部', code: 'all'},
          {id: 2, name: '进行中', code: 'running'},
          {id: 3, name: '已完成', code: 'complete'},
          {id: 4, name: '已审批', code: 'reviewed'},
          {id: 5, name: '已撤销', code: 'revocation'},
          {id: 6, name: '已退回', code: 'refuse'},
        ],
        sort: [{id:1,name:'按截止时间',code:'expire'},{id:2,name:'按发布时间',code:'publish'}],
        order_by: [{id:1,name:'按截止时间',code:'expire_time'},{id:2,name:'按发布时间',code:'create_time'}],
        tabsOption: [
          { label: '我指派的', name: 'assign' },
          { label: '我悬赏的', name: 'reward' },
          { label: '重复任务', name: 'repetitive' },
        ],
        dialogVisible: false,
        dialogVisibleAmend: false,
        rewardTaskShow: false,
        rewardTaskAmendShow: false,
        showDetailPopup: false,
        showRepetitiveTasksPopup: false,
        showRewardTaskDetailsPopup: false,
        detailId: 0
      }
    },
    components: {temporaryTask,rewardTask,rewardTaskAmend ,temporaryTaskAmend,taskDetailsPopup,repeatTaskDetailsPopup, rewardTaskDetailsPopup},
    watch:{
      status(val){
        this.formData.page = 1
        this.formData.status = "all"
        this.formData.sort = "publish"
        this.formData.order_by = "create_time"
        this.formData.pt_id = 0
        this.list = []
        this.get_list()
      },
      'formData.status'(){
        // debugger
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
      'formData.sort'(){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
      'formData.order_by'(){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
      'formData.pt_id'(){
        this.formData.page = 1
        this.list = []
        this.get_list()
      },
    },
    mounted() {
      if(this.$route.query.type == 1){
        this.dialogVisible = true
      }else if(this.$route.query.type == 2){
        this.rewardTaskShow = true
      }
      this.get_list()
      this.point_types = this.getPointTypes()
    },
    methods: {
      //悬赏修改
      offerARewardAmend2(item){
        this.rewardTaskAmendShow = true
        this.$refs.rewardTasks.forTheTaskLoading = true
        let params = {
          task_id:item.id
        }
        // this.rewardTaskAmendData = item
        this.$http('get','/api/integral/task',params).then(res => {
            if (res.data.code == 1) {
              this.rewardTaskAmendData = res.data.data
            } else {
              self.$message.error(res.data.msg);
            }
          }).finally(() => {
            this.$refs.rewardTasks.forTheTaskLoading = false
          })
      },
      //任务修改
      issueAmend1(item){
        this.modifyData = item
        this.dialogVisibleAmend = true
      },
       //删除---我指派的、我悬赏的、重复任务    （重复任务需等后端接口）
      deletes(item,s){
        let self = this
        this.$message.closeAll()
        //去掉，所有的都可删除
        // if(s==0 || s==1){
        //   if(item.status != 1){
        //     this.$message({
        //       showClose: true,
        //       message: '此工作不能删除',
        //       type: 'error'
        //     });
        //     return false
        //   }
        // }
        self.$confirm('删除此任务将会删除其相关记录和积分数据，确认删除吗？', '删除任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // self.bodyLoad = true
          self.$http(s==0?'DELETE':s==1?'DELETE':'DELETE',s==0?'/api/integral/work':s==1?'/api/integral/task':'/api/integral/schedule',s==0?{work_id: item.id}:s==1?{task_id: item.id}:{schedule_id: item.id}
            ).then(res => {
            if (res.data.code == 1) {
              if(this.formData.page>1){
                if(self.list.length == 1){
                  this.formData.page = this.formData.page -1
                }
              }
              this.get_list()
              self.$message.success(res.data.msg);
              console.log(s==0?'我发布的':s==1?'我悬赏的':'重复任务')
            } else {
              self.$message.error(res.data.msg);
            }
          }).finally(() => {
              // self.bodyLoad = false;
          })
        })
      },

      // 点击详情
      rowClick(row) {
        this.showDetailPopup = true
        this.detailId = parseInt(row.id)
      },
      // 重复任务详情
      repetitiveTasksClick(row) {
        this.showRepetitiveTasksPopup = true
        this.detailId = parseInt(row.id)
      },
      // 悬赏任务详情
      rewardTasksClick(row){
        this.showRewardTaskDetailsPopup = true
        this.detailId = parseInt(row.id)
      },
      // 编辑重复任务
      editRepeatTask(item){
        console.log(item)
      },
      // 发布临时任务 和 悬赏任务
      downClick(val){
        if(val == 1){
          this.dialogVisible = true
        }else{
          this.rewardTaskShow = true
        }
      },
      // 获取积分类型
      getPointTypes(){
        let point = window.plus?JSON.parse(plus.storage('SET_POINT_TYPES')):JSON.parse(localStorage.getItem('SET_POINT_TYPES'))
        point.unshift({code: "all",id: 0,name: "全部"})
        return point
      },
			// 页码变更
      handleCurrentChange(val) {
				this.formData.page = val
				this.get_list()
			},
      handleSizeChange(val){
        this.formData.page_size = val
        this.get_list()
      },

       //此函数判断当前账号与发布者是否一致、。。此处任务返回就是登录账号发布的任务，所以不需要
      // operation_none_fei(publisher_id){
      //   let SET_EMPLOYEE_MAP = [];
      //   for(let i in JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP'))){
      //     SET_EMPLOYEE_MAP.push(JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP'))[i])
      //   }
      //   if(publisher_id == SET_EMPLOYEE_MAP[0].id){
      //     this.operation_if = true  
      //   }else{
      //     this.operation_if = false
      //   }
      // },
      get_list(){
        let self = this
        self.loading = true
        let params = JSON.parse(JSON.stringify(this.formData))
        params.pt_id == 0?delete params.pt_id:'';
        if(self.status == 'assign'){
          delete params.order_by
        }else if(self.status == 'reward'){
          delete params.status
          delete params.sort
        }else{
          delete params.status
          delete params.sort
          delete params.order_by
          delete params.pt_id
        }
        self.$http('get',self.status=='assign'?'/api/integral/work/list/publisher':self.status=='reward'?'/api/integral/task/publish/list':'/api/integral/schedule/list',params).then((res) => {
           //数据过多的情况延迟较大
          if (res.data.code == 1) {
            //传入发布者ID进行判断
            // this.operation_none_fei(res.data.data.list[0].publisher_id)//我指派的 :发布者ID
            // this.operation_none_fei(res.data.data.list[0].owner_id)//我悬赏的 :发布者ID
			      self.list = res.data.data.list
            self.total = res.data.data.total
          }else{
            self.$message.error(res.data.data.msg)
            this.get_list()
          }
          self.loading = false
        }).catch((e)=>{
          self.$message.error(e.data.data.msg)
          self.loading = false
		})
      }
    }
  }
</script>

<style scoped lang="scss">
  .box{
    padding: 20px;
    & .color_yelllo{
      color: #ffce2f;
    }
    & .color_green{
      color: #49d3a7;
    }
    & .color_3{
      color: #ff4753;
    }
    & .color_4{
      color: #49d3a7;
    }
    & .color_5{
      color: #f04b56;
    }
    & .color_yelllo2{
      color: #ffa939;
    }
  }


$red: #f56c6c;
.color-red{
  color: $red;
  &:hover{
    color: #f14141;
  }
}
  .delicon{
  font-size: 20px;
  float: right;
}

.el-dropdown-links {
    font-size: 20px;
    cursor: pointer;
    color: #a6a8aa;
  }

 /deep/ .el-table tr:hover{
  cursor:pointer
}
</style>
