<template>
  <div class="list-contain">
    <top-nav title="项目列表"
             @query="showQuery"
             :backFunc="returnLast"></top-nav>
    <div>
      <van-list v-model="loading"
                :error.sync="loadError"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                finished-text="没有更多了"
                @load="getItemPage"
                class="data-list">
        <van-pull-refresh v-model="loading"
                          @refresh="onRefresh">
          <div v-for="(item, index) in dataList"
               :key="index"
               @click="handleJump(item.id)"
               class="data-item">
            <div class="row">
              <van-badge v-if="item.isShow" :content="item.isShow" max="99" class="ls-badge">
                <div class="left" >
                  <span class="fb mr5">{{item.projectCode}}</span>
                </div>
              </van-badge>
              <div v-else class="left" >
                <span class="fb mr5">{{item.projectCode}}</span>
              </div>
              <div class="fc8CEE fs28">
                <span v-if="item.approver">( {{item.approver}} )</span>
                <span>{{item.projectStatusKey}}</span>
              </div>
            </div>
            <div class="row">
              <div class="left">
                <span>客户名称：</span>
                <span class="fc666">{{item.customer}}</span>
              </div>
            </div>
            <div class="row">
              <div class="left">
                <span>项目名称：</span>
                <span class="fc666">{{item.projectName}}</span>
              </div>
            </div>
            <div class="row">
              <div class="left">
                <span>细分领域：</span>
                <span class="fc666">{{item.industrySegmentation}}</span>
              </div>
            </div>
            <div class="row">
              <div class="left">
                <span>导入品牌：</span>
                <span class="fc666">{{item.brandName}}</span>
              </div>
            </div>
            <div class="row">
              <div class="left">
                <span>月需求量：</span>
                <span class="fc666">{{parseFloat(item.monthCycle).toLocaleString()}} (pcs)</span>
              </div>
            </div>
            <div class="row">
              <div class="left">
                <span>产品类别：</span>
                <span class="fc666">{{item.projectCategory}}</span>
              </div>
              <div class="right">
                <span>销售人员：</span>
                <img src="@/assets/images/photo.png" />
                <span class="fc666">{{item.salesName}}</span>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </van-list>
    </div>
    <search-popup @doQuery="getItemPage"
                  ref="searchRef"></search-popup>
  </div>
</template>

<script>
import searchPopup from './components/search-popup.vue'
import clearkeepAlive from '../../common/clearkeepAlive'
export default {
  name: 'project-list',
  components: {
    searchPopup
  },
  mixins: [clearkeepAlive],
  data () {
    return {
      loading: false,
      loadError: false,
      dataList: [],
      approverList: [],
      finished: false,
      currPage: 0,
      pageSize: 10,
      total: 0
    }
  },
  mounted () {
    // this.getItemPage()
  },
  methods: {
    getItemPage (cur) {
      if (typeof cur !== 'undefined') {
        this.currPage = cur
      }
      this.currPage += 1
      let param = {
        currPage: this.currPage,
        pageSize: this.pageSize
      }
      Object.assign(param, this.$refs.searchRef.queryParam)
      this.$axios.post({
        domain: 'crmUrl',
        url: 'project.findItemPage',
        data: param,
        requestType: 'body',
        isShow: false,
        success: function (res) {
          if (res.errorCode === 200) {
            let data = res.data.records
            this.dataList = [...this.dataList, ...data]
            this.total = res.data.total
            if (this.dataList.length >= this.total) {
              this.finished = true
            }
            if (this.dataList.length) {
              this.getProcessApprove(this.dataList)
            }
          } else {
            this.loadError = true
          }
        }.bind(this),
        complete: function () {
          this.loading = false
        }.bind(this)
      })
    },
    onRefresh () {
      this.currPage = 0
      this.finished = false
      this.loading = true
      this.dataList = []
      this.getItemPage()
    },
    // 查询流程审批人
    getProcessApprove (list) {
      let ary = []
      list.forEach(item => {
        if (item.projectStatus === 'rejected' || item.projectStatus === 'auditing') {
          if (item.processId) {
            ary.push({ processId: item.processId })
          }
        }
      })
      if (!ary.length) { return };
      this.$axios.post({
        domain: 'crmUrl',
        url: 'process.getProcessApprove',
        data: ary,
        requestType: 'body',
        showLoad: false,
        success: function (res) {
          if (res.errorCode === 200) {
            this.approverList = res.data
            this.dataList.forEach(item => {
              if (item.projectStatus === 'rejected' || item.projectStatus === 'auditing') {
                for (let el of this.approverList) {
                  if (item.processId === el.processId) {
                    this.$set(item, 'approver', el.approver)
                    break
                  }
                }
              } else {
                this.$set(item, 'approver', '')
              }
            })
          } else {
            this.$toast({ type: 'fail', message: res.msg })
          }
        }.bind(this),
        error: function (err) {
          this.$toast({ type: 'fail', message: err, duration: 3000 })
        }.bind(this)
      })
    },
    showQuery () {
      this.$refs.searchRef.showSerachPopup = true
    },
    handleJump (id) {
      this.$router.push({
        name: 'projectDetail',
        params: { projectId: id }
      })
    },
    returnLast () {
      this.clearCache()
      this.$router.back(-1)
    }
  }
}
</script>
