<template>
  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">工作待办</div>
      <div class="records">
          <div class="writeIn" v-if="isDisableds == false">
            <div class="default" v-if="isEdit == false" @click="getEdit">
              <img src="@/assets/images/project/add_3.png">
              <div>新建一条工作代办，如:周五上午预约客户上门拜访</div>
            </div>
            <div class="writting" v-if="isEdit == true">
              <div class="wri_top">
                <img src="@/assets/images/project/add_3.png">
                <el-input v-model="queryParam.task" placeholder="新建一条跟进记录，如:周五上午预约客户上门拜访"></el-input>
              </div>
              <div class="wr_bot">
                <div class="times"><img src="@/assets/images/project/ico_4.png">
                  <el-date-picker value-format="yyyy-MM-dd"
                                  v-model="queryParam.finishTime"
                                  type="date"
                                  placeholder="完成时间">
                  </el-date-picker>
                </div>
                <div class="sels">
                  <img src="@/assets/images/project/ico_2.png">
                  <el-input v-model="queryParam.target" placeholder="拜访对象" maxlength="500" style="width: 100px;">
                  </el-input>
                </div>
                  <div class="btn btn_primary h32 wc" @click="add" :class="{'btn_disabled':queryParam.task == ''}">完成</div>
              </div>
            </div>
          </div>
        <skeleton v-if="isSkeleton" style="padding-top: 16px"></skeleton>
        <div v-else>
          <div class="tasktitle"><strong>我的任务</strong><span @click="getYQ">{{yqnum}}条已逾期</span><!--<span class="on">4条已逾期</span>--></div>
          <div class="tasklist" v-for="(item,index) in datalist.rows">
            <div class="task_name">{{item.task}}</div>
            <div class="task_con"><span>发起时间：{{item.createTime}}</span><span v-if="item.target">关联客户：<font class="wordprimary">{{item.target}}</font></span><span v-if="item.finishTime">完成时间：{{item.finishTime}}</span></div>
            <div class="select" :class="{'on':item.state == 2}">
              <div class="select-popper">
                  <span>
                    {{item.state == 2?"已完成":"未完成"}}
                    <i class="el-icon-caret-bottom"></i>
                  </span>
                <el-select v-if="isDisableds == false" placeholder="请选择" v-model="item.state" class="select-multiple" @change="changes(item.id,$event)">
                  <el-option label="未完成" value="1"></el-option>
                  <el-option label="已完成" value="2"></el-option>
                </el-select>
              </div></div>
          </div>

          <div class="tables" v-if="datalist.total>searchPram.pageSize">
          <div class="bottems">
            <el-pagination
              background
              :page-size="searchPram.pageSize"
              :current-page="searchPram.pageNum"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="datalist.total">
            </el-pagination>
          </div>
        </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import "@/assets/styles/public.css"
  import {addGZDB,getGZDB,editGZDB} from '@/api/project/project'
  import skeleton from './skeleton'

  export default {
    components:{skeleton},
    name: 'gjjl',
    props: {
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      },
      isDisabled:false,
    },
    data(){
      return{
        isEdit:true,
        value:'',
        status:0,
        queryParam:{
          businessId:this.detailId ? this.detailId : parseInt(this.$route.query.id),//项目详情id
          target:'',
          task:'',
          finishTime:'',
        },
        searchPram:{
          businessId:this.detailId ? this.detailId : parseInt(this.$route.query.id),
          pageSize:20,
          pageNum:1,
          state:null,
        },
        datalist:[],
        yqnum:0,//已逾期数量
        isDisableds:this.isDisabled,
        isSkeleton:true,
      }
    },
    created(){
      this.getList()
    },
    methods:{
      getEdit(){
        this.isEdit = true;
        this.value = ""
      },
      add(){
        if(this.queryParam.task == '' || this.queryParam.finishTime == '')
          return this.$message.warning('时间和内容需填写完整！')
        addGZDB(this.queryParam).then(result=>{
          if(result.code == 200){
            this.$message.success("添加成功！")
            this.getList()
            this.queryParam.target = ''
            this.queryParam.task = ''
            this.queryParam.finishTime = ''
          }else{
            this.$message.error(result.msg)
          }
        })
      },
      getList(){
        this.isSkeleton = true
        getGZDB(this.searchPram).then(result=>{
          this.isSkeleton = false
          this.datalist = result.code == 200?result:[]
          let num = 0
          this.datalist.rows.forEach(item=>{
            if(item.state == 0)
              num++;
          })
          this.yqnum = num
        })
      },
      handleCurrentChange(val){
        this.searchPram.pageNum = val
        this.getList()
      },
      changes(id,state){
        let param={
          id:id,
          state:state
        }
        editGZDB(param).then(result=>{
          if(result.code == 200){
            this.$message.success('修改成功！')
            this.getList()
          }else{
            this.$message.error(result.msg)
          }
        })
      },
      getYQ(){
        let state = this.searchPram.state
        this.searchPram.state = state == 0?null:0
        this.handleCurrentChange(1)
      },
    }
  }
</script>

<style lang="scss" scoped>
.wc{
  position: absolute;
  right: 0;
  bottom: 0;
}
  .times{
    width: 100px;
    margin-right: 12px;
  }
  .times .el-input__icon >img{
    width: 16px;
  }
</style>
