<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"  maxlength="500" 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 HH:mm:ss"
                                  v-model="queryParam.dueTime"
                                  type="datetime"
                                  placeholder="截止时间">
                  </el-date-picker>
                </div>
                <div class="sels">
                  <img src="@/assets/images/project/ico_2.png">
                  <el-input v-model="queryParam.target" placeholder="拜访对象" style="width: 100px;">
                  </el-input>
                </div>
                <div class="wc">
                  <div class="btn btn_primary h32 " @click="add" :class="{'btn_disabled':queryParam.task == ''}">完成</div>
                  <div class="btn btn_primary h32" style="border: 1px solid #D3D3D3;background: #ffffff;color:rgba(35,35,35,0.8);" @click="cancel" :class="{'btn_disabled':queryParam.task == ''}">取消</div>
                </div>

              </div>
            </div>
          </div>
        <skeleton v-if="isSkeleton" style="padding-top: 16px"></skeleton>
        <div class="tabList" v-else>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="进行中任务" name="first"></el-tab-pane>
            <el-tab-pane label="已完成任务" name="second"></el-tab-pane>
            <el-tab-pane :label="yqnum" name="third"></el-tab-pane>
          </el-tabs>
          <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.dueTime">完成时间：{{item.dueTime}}</span></div>
            <div class="select" :class="{'on':item.state == 1}">
              <div class="select-popper">
                  <span>
                    {{item.state == 1?"已完成":"进行中"}}
                    <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="0"></el-option>
                  <el-option label="已完成" value="1"></el-option>
                </el-select>
              </div></div>
          </div>
          <!--<div class="tasktitle"><strong>已完成</strong></div>-->
          <!---->
          <!--<div class="tasktitle"><strong>进行中</strong><span @click="getYQ">{{yqnum}}条已逾期</span>&lt;!&ndash;<span class="on">4条已逾期</span>&ndash;&gt;</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.scss"
  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{
        activeName:'first',
        isEdit:false,
        value:'',
        status:0,
        queryParam:{
          businessId:this.detailId ? this.detailId : parseInt(this.$route.query.id),//项目详情id
          target:'',
          task:'',
          dueTime:'',
        },
        searchPram:{
          businessId:this.detailId ? this.detailId : parseInt(this.$route.query.id),
          pageSize:20,
          pageNum:1,
          state:0
        },
        datalist:[],
        yqnum:'',//已逾期数量
        isDisableds:this.isDisabled,
        isSkeleton:true,
      }
    },
    created(){
      this.getList()
      this.getCount()
      console.log(777)
    },
    methods:{
      getCount(){
        let params={
          ...this.searchPram,
          state:2,
        }
        getGZDB(params).then(result=>{
          let datalist = result.code == 200?result:[]
          if(datalist){
            this.yqnum = `已逾期 ${datalist.rows.length} 条`;
          }
        })
      },
      getEdit(){
        this.isEdit = true;
        this.value = ""
      },
      add(){
        // if(this.queryParam.task == '' || this.queryParam.dueTime == '')
        if(this.queryParam.task == '')
          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.dueTime = ''
            }else{
              this.$message.error(result.msg)
            }
          })
      },
      cancel(){
        this.isEdit = false;
        this.queryParam.target = ''
        this.queryParam.task = ''
        this.queryParam.dueTime = ''
      },
      getList(){
        this.isSkeleton = true
        let params={
          ...this.searchPram,
          // cancelHttp: true
        }
        getGZDB(params).then(result=>{
          this.isSkeleton = false
          this.datalist = result.code == 200?result:[]
        })
      },
      handleCurrentChange(val){
        this.searchPram.pageNum = val
        this.getList()
      },
      handleClick(){
        this.searchPram.state=this.activeName === 'first'? 0 : this.activeName === 'second'? 1 : 2
        this.getList()
      },
      changes(id,state){
        let param={
          id:id,
          state:state
        }
        editGZDB(param).then(result=>{
          if(result.code == 200){
            this.$message.success('修改成功！')
            this.getList()
            this.getCount()
          }else{
            this.$message.error(result.msg)
          }
        })
      },
      getYQ(){
        let state = this.searchPram.state
        this.searchPram.state = state == 2?null:2
        this.handleCurrentChange(1)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    background: #fff;
  }
  .records{
    .tasklist{
      .select{
        background: #FFEBEB;
        color: #FF3C3C;
        .select-popper{
          color: #FF3C3C;
        }
      }
      .task_name{
        word-wrap: break-word;
        width: 87%;
      }
    }
  }
  .tabList{
    margin-top: 18px;
    ::v-deep .el-tabs{
      .el-tabs__header{
        margin: 0;
      }
      .el-tabs__active-bar{
        height: 1px;
      }
      .el-tabs__nav-wrap::after{
        height: 1px;
      }
    }
  }
.wc{
  position: absolute;
  right: 0;
  bottom: 0;
}
  .times{
    width: 100px;
    margin-right: 12px;
  }
  .times .el-input__icon >img{
    width: 16px;
  }
</style>
