<template>
  <div class="app-container">
    <div class="header_main">
      待办事项
      <div class="return_btn" @click="onClickLeft"></div>
    </div>

    <van-tabs>
      <van-tab title="待办事项">
        <van-dropdown-menu style="margin-top: 10px;">
          <van-dropdown-item v-model="queryParamsTask.activityBusinessType" :options="typeOptions" @change="getListchange('db')" />
          <van-dropdown-item v-model="queryParamsTask.isAsc" :options="option" @change="getListchange('db')" />
        </van-dropdown-menu>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getTaskList"
        >
          <van-cell-group class="listBox db">

            <van-cell
              v-for="(item,index) in taskList"
              :key="index"
              :value="item.formData.createTime == null ? '' : item.createTime.substr(0,10)"
              :to="{
                name:item.formData.activityBusinessType == '21' ? 'schemeDetail':'lawEnforcementTaskHandleProcessing',
                query:{
                  id:item.formData.activityBusinessType == '21' ? item.formData.id:item.formData.caseId,
                  caseProgress:item.formData.activityBusinessType == '21' ? '': item.formData.activityBusinessType == '22' ? 2:item.formData.activityBusinessType == '25' ? 3:item.formData.activityBusinessType == '24' ? 4:'',
                  type:'waiting'
                }
              }"
            >
              <template #title>
                <span class="tap">{{selectDictLabel(activityBusinessTypeOptions,item.formData.activityBusinessType).substr(2,2)}}</span>
                <span>{{item.projectName}}</span>
              </template>
            </van-cell>

          </van-cell-group>
        </van-list>
      </van-tab>
      <van-tab title="已办事项">
        <van-dropdown-menu style="margin-top: 10px;">
          <van-dropdown-item v-model="queryParams.activityBusinessType" :options="typeDoneOptions" @change="getListchange" />
          <van-dropdown-item v-model="queryParams.isAsc" :options="option" @change="getListchange" />
        </van-dropdown-menu>
        <van-list
          v-model="doneLoading"
          :finished="doneFinished"
          finished-text="没有更多了"
          @load="getTaskDoneList"
        >
          <van-cell-group class="listBox db">

            <van-cell
              v-for="(item,index) in taskDoneList"
              :key="index"
              :value="item.formData.createTime == null ? '' : item.endTime.substr(0,10)"
              :to="{
                name:item.formData.activityBusinessType == '21' ? 'schemeDetail':'caseDetail',
                query:{
                  id:item.formData.activityBusinessType == '21' ? item.formData.id:item.formData.caseId,
                  caseProgress:item.formData.activityBusinessType == '21' ? '': item.formData.activityBusinessType == '22' ? 2:item.formData.activityBusinessType == '25' ? 3:item.formData.activityBusinessType == '24' ? 4:'',
                }
              }"
            >
              <template #title>
                <span class="tap">{{selectDictLabel(activityBusinessTypeOptions,item.formData.activityBusinessType).substr(2,2)}}</span>
                <span>{{item.projectName}}</span>
              </template>
            </van-cell>

          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { listModelCustom } from "@/api/lawEnforcement/index";
import request from "@/utils/request";
import law from "@/components/common/law_footer";
export default {
  name: "index",
  components: {
    law
  },
  data() {
    return {
      value1: '',
      value2: 'a',
      typeOptions: [
        { text: '全部待办', value: '' },
      ],
      typeDoneOptions: [
        { text: '全部已办', value: '' },
      ],
      option: [
        { text: '默认排序', value: '' },
        { text: '时间倒序', value: 'desc' },
        { text: '时间正序', value: 'asc' },
      ],
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      //是否显示加载
      doneLoading: false,
      //是否滚动到底部
      doneFinished: false,
      // 查询参数
      queryParamsTask: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        taskName: null,
        systemType: 26,
        activityBusinessType:'',
        orderByColumn: "A.CREATE_TIME_",
        isAsc: "desc",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        taskName: null,
        systemType: 26,
        activityBusinessType:'',
        orderByColumn: "A.END_TIME_",
        isAsc: "desc",
      },
      //新闻集合
      workList:[],
      //轮播图集合
      bannerList:'',
      taskList:[],
      taskDoneList:[],
      activityBusinessTypeOptions:[],
      pageType:''
    };
  },
  created() {
    var that = this ;
    this.getDicts("activity_business_type").then((response) => {
      listModelCustom({"systemType": 26}).then(response1 => {
        let res = [];
        let activityBusinessTypeArray = response1.rows.map(function (current) {
          return current.activityBusinessType
        });
        response.data.forEach(function (value) {
          if (activityBusinessTypeArray.indexOf(value.dictValue) !== -1) {
            res.push(value);
            that.typeOptions.push({
              text:value.dictLabel,
              value:value.dictValue
            })
            that.typeDoneOptions.push({
              text:value.dictLabel,
              value:value.dictValue
            })
          }
        });
        this.activityBusinessTypeOptions = res;
        console.log(that.typeOptions)
      });
    });
  },
  methods: {
    getTaskList() {
      this.loading = true;
      return request({
        url: "/activiti/process/taskList",
        method: "get",
        params: this.queryParamsTask,
      }).then((response) => {
        console.log(response)
        for (var i = 0; i < response.rows.length; i++) {
          this.taskList.push(response.rows[i]);
        }
        if(this.taskList.length >= response.total ){
          this.finished = true;
          return;
        }
        this.queryParamsTask.pageNum += 1 ;
        this.loading = false;
      }).then(() => {

      });
    },
    getTaskDoneList(){
      this.doneLoading = true;
      return request({
        url: "/activiti/process/taskDoneList",
        method: "get",
        params: this.queryParams,
      })
      .then((response) => {
        for (var i = 0; i < response.rows.length; i++) {
          this.taskDoneList.push(response.rows[i]);
        }
        console.log(this.taskDoneList.length >= response.total)
        if(this.taskDoneList.length >= response.total ){
          this.doneFinished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.doneLoading = false;
      })
      .then(() => {
      });
    },
    getListchange(type){
      if(type == 'db'){
        this.taskList = [];
        this.queryParamsTask.pageNum = 1;
        this.finished = false;
        this.getTaskList()
      } else {
        this.taskDoneList = [];
        this.queryParams.pageNum = 1 ;
        this.doneFinished = false;
        this.getTaskDoneList()
      }
    }
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.jg{
  height: 180PX;
}
.header_main{
  /*height: 116px;*/
  background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
  background-size: 100% 100%;
  /*position: fixed;*/
  top: 0;
  left: 0;
  width: 100%;
  font-size: 36px;
  line-height: 116px;
  text-align: center;
  color: #fff;
  z-index: 999;
  .return_btn{
    width: 24px;
    height: 43.2px;
    background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
    background-size: 20px 36px;
    position: absolute;
    left: 38px;
    top: 36px;
  }
  .add_btn{
    width: 56.4px;
    height: 40.8px;
    background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
    background-size: 47px 34px;
    position: absolute;
    right: 38px;
    top: 36px;
  }
}
.van-list{
  width: 96%;
  margin: 0 auto;
  margin-top: 10PX;
}
/deep/ .van-search__content{
  background-color: #ffffff;
}
/deep/ .van-search__action{
  background-color: #1D6FE9;
  text-align: center;
  color: #ffffff;
  padding: 0 0.5rem;
}
/deep/ .van-search{
  background-color: transparent;
  border-radius: 20PX;
  border: 1px solid #cccccc;
  padding: 0;
  overflow: hidden;
}
.van-cell__title{
  color: #666666;
  flex: 0.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
  overflow: hidden;
}
.van-cell__value{
  flex: 0.3;
}
.app-container {

}
/deep/ .van-nav-bar--fixed{
  background: url("../../../../static/images/lawEnforcement/head_bg.png") 100%;
}
/deep/ .van-nav-bar .van-icon{
  color: #ffffff;
}
/deep/ .van-nav-bar__title{
  color: #ffffff;
}
.van-cell__title{
  color: #666666;
}
.listBox{
  border-radius: 8Px;
  overflow: hidden;
  box-shadow: 0PX 5PX 5PX #cccccc;
  .van-icon{
    vertical-align: middle;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
}
/deep/ .van-nav-bar__title{
  display: flex;
  max-width: initial;
  p{
    line-height: 30Px;
    margin-left: 6Px;
    font-size: 21Px;
    color: #D60303;
    font-family: SourceHanSansCNBold;
  }
}
.bannerTit{
  position: absolute;
  bottom: 10px;
  background: rgba(255,255,255,0.3);
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #fff;
  overflow: hidden;
  padding: 0 3%;
  font-size: 16Px;
}
.link{
  color: #000;
}
.my-swipe {
  border-radius: 8Px;
}
.my-swipe .van-swipe-item .van-image{
  width: 100%;
}
.van-grid-item p{
  margin-top: 10px;
}
.newTit{
  font-size: 0.45rem;
  margin: 0.4rem 0;
  font-family: Source Han Sans SC, Source Han Sans SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
}
.newContent{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
}
.search-icon {
  line-height: inherit;
  margin-left: 10px;
}
/deep/ .van-tab{
  font-size: 16PX;
}
/deep/ .van-dropdown-menu__title{
  font-size: 14PX;
}
</style>
