<template>
  <div class="list-contain">
    <top-nav title="任务列表"
             @query="handleFocus"
             :backFunc="returnLast"></top-nav>
    <van-tabs v-model="activeTab"
              @click="tabChange">
      <van-tab v-for="(items, index) in tabTable"
               :title="items.label"
               :key="index">
        <div class="contain">
          <van-list v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    class="data-list">
            <div class="content">
              <van-pull-refresh v-model="loading"
                                @refresh="onRefresh">
                <div class="data-item"
                     v-for="(item, key) in dataList"
                     :key="key"
                     @click="toDetails(item)">
                  <div class="row">
                    <van-badge v-if="item.isShow" :content="item.isShow" max="99" class="ls-badge">
                      <div class="left">
                        <span class="status">{{ item.emergencyDegreeKey }}</span>
                        <span class="fb">{{ item.taskId }}</span>
                      </div>
                    </van-badge>
                    <div v-else class="left">
                      <span class="status">{{ item.emergencyDegreeKey }}</span>
                      <span class="fb">{{ item.taskId }}</span>
                    </div>
                    <div class="fc8CEE fs28">{{ item.statusKey }}</div>
                  </div>
                  <van-swipe-cell >
                    <div class="row">
                      <div class="left">
                        <span>任务来源：</span>
                        <span class="fc666">{{ item.taskSourceKey }}</span>
                      </div>
                      <div class="right">
                        <span>客户：</span>
                        <span class="fc666">{{ item.customerName }}</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="left">
                        <span>事项类型：</span>
                        <span class="fc666">{{ item.itemTypeKey }}</span>
                      </div>
                      <div class="right">
                        <span>截止时间：</span>
                        <span class="fc666">{{ item.taskRequestDateFormat }}</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="left">
                        <span>事项描述：</span>
                        <span class="fc666">{{ item.taskContent }}</span>
                      </div>
                    </div>
                    <template #right
                              v-if="item.status === 'draft'">
                      <div @click="taskDelete(item)"
                           style="height:100%;background:#ff976a;margin-left:1px;display: flex;align-items: center;;padding:0px 5px">
                        <van-button square
                                    text="删除"
                                    type="warning"
                                    class="delete-button" />
                      </div>
                    </template>
                  </van-swipe-cell>
                </div>
              </van-pull-refresh>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    <van-dialog v-model="showDialog"
                class="new-dialog"
                title="新建任务"
                @confirm="handleConfirm"
                show-cancel-button
                close-on-click-overlay> </van-dialog>
    <div @click="clickAdd"
         class="tool-add-btn"></div>
    <search-popup ref="searchRef"></search-popup>

  </div>
</template>

<script>
import searchPopup from './components/search-popup.vue'
import clearkeepAlive from '../../common/clearkeepAlive'
import { Toast } from 'vant'
export default {
  name: 'task-list',
  components: {
    searchPopup
  },
  mixins: [clearkeepAlive],
  data () {
    return {
      showDialog: false,
      uid: '',
      userName: '',
      tabTitle: '',
      activeTab: 'all',
      tabTableTab: 'all',
      loading: false,
      finished: false,
      refreshing: true,
      dataList: [],
      tabTable: [
        {
          label: '全部任务',
          name: 'all'
        },
        {
          label: '我发起的',
          name: 'launch'
        },
        {
          label: '我负责的',
          name: 'responsible'
        },
        {
          label: '协同参与',
          name: 'coordination'
        }
      ],

      queryParam: {
        taskLookOver: 'all',
        timeRange: 0, // 时间范围值
        status: '', // 状态
        statusKey: '', // 状态key
        itemType: '', // 事项类型
        itemTypeKey: '', // 事项类型key
        customerName: '', // 客户名称
        emergencyDegree: '' // 紧要程度
      },
      // 分页参数
      pager: {
        currPage: 1,
        pageSize: 20,
        totals: 0
      }
    }
  },
  watch: {
    $route (to, from) {
      if (from.path === '/newTask' || from.path === '/taskDetail') {
        this.reLoad(this.form)
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getSaleUserInfo()
    })
  },
  activated () {
    this.showDialog = false
  },
  methods: {
    onRefresh () {
      this.reLoad()
    },
    // 搜索查询
    querySearch (value) {
      this.queryParam.status = value.status
      this.queryParam.timeRange = value.timeRange
      this.queryParam.customerName = value.customerName
      this.queryParam.itemType = value.itemType
      this.queryParam.taskUser = value.taskUser
      this.queryParam.emergencyDegree = value.emergencyDegree
      this.reLoad()
    },
    toDetails (row) {
      let url = 'taskDetail'
      if (row.status === 'draft' || row.status === 'adjust') {
        url = 'newTask'
      }
      if (row.ext2 !== this.userName && row.status !== 'draft') {
        url = 'taskDetail'
      }
      this.$router.push({
        path: url,
        query: {
          rowId: row.id
        }
      })
    },
    // 查询当前默认销售人员信息
    getSaleUserInfo () {
      this.$axios.post({
        domain: 'crmUrl',
        url: 'visit.getSaleUserInfo',
        data: {},
        requestType: 'body',
        isShow: false,
        success: function (res) {
          if (res.errorCode === 200) {
            let data = res.data
            this.uid = data.uid
            this.userName = data.userName
          }
        }.bind(this),
        error: function (res) {
          Toast.fail(res.msg)
        }
      })
    },
    // 搜索框获取焦点
    handleFocus () {
      this.$refs.searchRef.showOrgPopup = true
    },
    // tab 改变
    tabChange (tab, event, index) {
      this.activeTab = tab.name
      switch (tab) {
        case 0:
          this.tabTableTab = 'all'
          break
        case 1:
          this.tabTableTab = 'myCreate'
          break
        case 2:
          this.tabTableTab = 'myResponsible'
          break
        case 3:
          this.tabTableTab = 'mySynergy'
          break
        default:
      }
      this.queryParam.taskLookOver = this.tabTableTab
      this.onRefresh()
    },

    // 查询加载数据
    onLoad () {
      var that = this
      let param = {
        currPage: that.pager.currPage,
        pageSize: that.pager.pageSize,
        queryParam: that.queryParam
      }
      this.$axios.post({
        domain: 'crmUrl',
        url: 'task.listPageTaskInfo',
        data: param,
        isShow: false,
        requestType: 'body',
        success: function (res) {
          if (res.errorCode === 200) {
            that.dataList = [...that.dataList, ...res.data.records]
            that.pager.currPage++
            that.loading = false
            if (that.dataList.length === res.data.total) {
              that.finished = true
            }
          } else {
            that.finished = true
            Toast.fail(res.msg)
          }
        },
        error: function (res) {
          that.finished = true
          Toast.fail(res.msg)
        }
      })
    },

    // 刷新,重新初始化这些属性
    reLoad () {
      this.finished = false
      this.dataList = []
      this.pager.currPage = 1
      this.pager.pageSize = 5
      this.loading = true
      this.onLoad()
    },
    taskDelete (row) {
      let param = [row.id]
      this.$dialog.confirm({
        title: '提示',
        message: '是否删除该数据?'
      })
        .then(() => {
          this.$axios.post({
            domain: 'crmUrl',
            url: 'task.deleteTasks',
            data: param,
            success: function (res) {
              if (res.errorCode === 200) {
                Toast.success('删除成功')
                this.reLoad()
              } else {
                Toast.fail(res.msg)
              }
            }.bind(this),
            error: function (res) {
              this.$message.error(res.msg)
            }.bind(this)
          })
        })
    },
    returnLast () {
      this.clearCache()
      this.$router.back(-1)
    },
    clickAdd () {
      let idObj = this.$store.state.idObj;
      if(idObj.taskId){
        this.$dialog.confirm({
          title: '提示',
          message: '是否完成上次未完成的操作',
          className: 'new-dialog',
        })
          .then(() => {// on confirm
            this.$router.push({path: 'newTask', query: {rowId: idObj.taskId} });
          })
          .catch(() => { // on cancel
            this.$router.push('newTask')
          });
      } else {
        this.showDialog = true;
      }
    },
    handleConfirm () {
      this.showDialog = false
      this.$router.push('newTask')
    }

  }
}
</script>

<style  lang="scss">
.contain .data-list {
  height: calc(100vh - 210px);
}
</style>
