<!--跟进人页面-->
<template>
  <div class="traceManageMain">
      <up-down-layout :handleFlag.sync="handleFlag" :headerVisible="headerVisible">
          <template slot="query">
            <external-transition :isCollapse="true" class="busy-info-margin-first">
              <template slot="titleName">
                <span>{{$t('traceManageMain.presonelBusyStatus')}}(</span>
                <span class="busy-color1" v-if="traceUserInfo.busyLevel==='1'">{{$t('traceManageMain.free')}}</span>
                <span class="busy-color2" v-else-if="traceUserInfo.busyLevel==='3'">{{$t('traceManageMain.busy')}}</span>
                <span  v-else>{{$t('traceManageMain.normal')}}</span>
                <span>)</span>
              </template>
              <template slot="transition">
                <el-row class="card-top">
                  <el-col :span="6">
                      <el-card shadow="never" class="card-box" body-style="height:150px;padding:10px;">
                        <div>
                        <span class="iconfont iconcompanylist header-icon-color header-icon-font"/>
                        <span class="header-title">{{$t('traceManageMain.absFeedBack')}}</span>
                        </div>
                        <div class="card-top">
                          <span class="body-ul">{{$t('traceManageMain.solving')}}</span>
                          <div class="body-text">
                            <span class="num-large show-cursor" @click="showFeedbackMain">{{traceUserInfo.assetCount?traceUserInfo.assetCount:0}}</span>
                            <span class="num-text1">{{$t('traceManageMain.count')}}</span>
                            <span class="num-large num-padding show-cursor" @click="showFeedbackMain">{{traceUserInfo.qstCount?traceUserInfo.qstCount:0}}</span>
                            <span class="num-text1">{{$t('traceManageMain.question')}}</span>
                        </div>
                        </div>
                      </el-card>
                  </el-col>
                  <el-col :span="6">
                      <el-card shadow="never" class="card-box" body-style="height:150px;padding:10px;">
                        <div>
                          <span class="iconfont iconcompanylist header-icon-color header-icon-font"/>
                          <span class="header-title">{{$t('traceManageMain.busyStatus')}}</span>
                          <auth-button type="primary" :label="$t('common.edit')" class="header-btn1 iconfont iconbianji" @click="showEditMemo"></auth-button>
                        </div>
                        <div class="card-top">
                          <el-col :span="6">
                            <div class="busy-text">
                              <i class="iconfont iconyonghu busy-icon-user"></i>
                              <i class="iconfont iconzhujiedian"></i>
                              <i class="iconfont" :class="[traceUserInfo.busyLevel==='1'?'iconkongxian':traceUserInfo.busyLevel==='3'?'iconmanglu':'iconyiban']"></i>
                            </div>
                          </el-col>
                          <el-col :span="18" style="margin-top:20px">
                            <span class="body-ul">{{$t('traceManageMain.remarkInfo')}}</span>
                            <div class="mark-margin">
                               <el-popover
                                placement="top-start"
                                trigger="hover"
                                :content="traceUserInfo.busyMemo">
                                <el-link :underline="false" class="mark-text" slot="reference">{{traceUserInfo.busyMemo | ellipsis}}</el-link>
                              </el-popover>
                            </div>
                          </el-col>
                        </div>
                      </el-card>
                  </el-col>
                </el-row>
              </template>
            </external-transition>
          </template>
          <template slot="table">
            <el-tabs v-model="activeMainName" type="card" class="myeltab">
                <el-tab-pane :label="$t('traceManageMain.lawFirmAndManager')" name="first">
                  <external-transition :isCollapse="true" :title="$t('traceManageMain.lawFirmAndManagerTask')" class="busy-info-margin">
                    <template slot="transition">
                      <search-form :formValue.sync="queryParas"
                                   class="searchmargin"
                                   searchPerms="search"
                                   resetPerms="reset"
                                   @clearParam="clearParam"
                                   @handleFilter="handleFilter"
                                   :componentList="componentList">
                      </search-form>
                      <data-table :api="getTraceListApi"
                                  :loadCount.sync="loadCount"
                                  :queryParas="queryParas"
                                  :sourceData.sync="sourceData"
                                  loadList="getList"
                                  :showPage="false"
                                  :columns="columns"
                                  :menuFlag="false"
                                  max-height="190"
                                  @current-change="handleCurrentChange"
                                  @getTableData="getTableData"
                                  ref="dataTable">
                        <template slot="showFlag" slot-scope="scope">
                          <div class="iconfont icontanhao1 fengxian2" v-if="scope.data.row.showFlag==='1'"></div>
                        </template>
                        <template slot="currentShow" slot-scope="scope">
                            <div class="iconfont icongou showColor"  v-if="isSelected === scope.data.row.keyId"></div>
                        </template>
                      </data-table>
                    </template>
                  </external-transition>
                  <!--tab区域-->
                  <div v-if="dataShowFlag">
                    <el-tabs v-model="activeSubName" type="card" class="myeltab"  @tab-click="handleClick">
                      <el-tab-pane v-for="item in tabList" :key="item.index" :name="item.index">
                        <span slot="label">{{item.label}}<i class="el-icon-warning" style="color:#F9D108" v-if="item.dealing==='1'"></i></span>
                      </el-tab-pane>
                    </el-tabs>
                    <keep-alive>
                      <component v-bind:is="tabList[activeSubName].component"
                                :projectInfo="projectInfo"
                                :key="activeSubName"
                                :fileAll="fileType"
                                @solveFlag="solveFlag"
                                :activeName="activeSubName"></component>
                    </keep-alive>
                  </div>
                </el-tab-pane>
            </el-tabs>
          </template>
      </up-down-layout>
      <edit-memo :visible.sync="visible" v-if="visible" :form="memoForm" :otherApi="traceUpdateApi" @close="close"></edit-memo>
  </div>
</template>
<script>
import { searchForm, upDownLayout, DataTable, authButton, amountInput } from 'newepoch-components'
import traceManageApi from '@/api/assetoutfeedback/traceManage/traceManageApi'
import traceFeedBackSub from '@/pages/assetoutfeedback/traceManage/traceFeedBackSub'
import externalTransition from '@/components/element/assetoutfeedback/externalTransition'
import relationReportSub from '@/components/element/assetoutfeedback/relationReportSub'
import absFileSelectList from '@/components/element/assetoutfeedback/absFileSelectList'
import relationUserSub from '@/pages/assetoutfeedback/coordManage/relationUserSub'
import editMemo from '@/pages/assetoutfeedback/effectDealFeedBack/editMemo'
import componentsApi from '@/api/assetoutfeedback/componentsApi'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
export default {
  extends: new BasePage(),
  components: {
    searchForm,
    upDownLayout,
    DataTable,
    authButton,
    absFileSelectList,
    amountInput,
    traceFeedBackSub,
    externalTransition,
    relationUserSub,
    relationReportSub,
    editMemo
  },
  name: 'traceManageMain',
  data () {
    return {
      activeMainName: 'first',
      memoForm: {},
      visible: false,
      traceUserId: '',
      activeSubName: '0',
      handleFlag: true,
      headerVisible: false,
      isCollapse: false,
      isSelected: '',
      dataShowFlag: false,
      fileType: [], // 文件类型
      componentList: [
        {
          // 产品名称
          label: '产品名称',
          disabled: false,
          value: 'projectId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '70px',
          clearable: true,
          name: 'projectId',
          componentName: absFileSelectList
        },
        {
          // 期数
          label: '期数',
          disabled: false,
          value: 'periods',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '70px',
          clearable: true,
          name: 'periods',
          componentName: amountInput
        }
      ],
      tabList: [
        {
          index: '0',
          label: this.$t('coordManageMain.lawFeedback'),
          dealing: '0',
          component: traceFeedBackSub
        },
        {
          index: '1',
          label: this.$t('coordManageMain.manageFeedback'),
          dealing: '0',
          component: traceFeedBackSub
        },
        {
          index: '2',
          label: this.$t('coordManageMain.relatedUser'),
          dealing: '0',
          component: relationUserSub
        },
        {
          index: '3',
          label: this.$t('coordManageMain.relatedList'),
          dealing: '0',
          component: relationReportSub
        }
      ],
      columns: [
        {
          // 是否已处理
          prop: 'showFlag',
          align: 'center',
          slot: true,
          width: '50px',
          label: ''
        },
        {
          // 当前显示
          prop: 'currentShow',
          align: 'center',
          slot: true,
          width: '80px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.currentShow
        },
        {
          // 产品名称
          prop: 'projectName',
          align: 'left',
          width: '300px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.projectName
        },
        {
          // 期数
          prop: 'periods',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.periods
        },
        {
          // 拟入池笔数
          prop: 'estimateAssetTotal',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.estimateAssetTotal,
          format: row => {
            if (row.estimateAssetTotal) {
              return row.estimateAssetTotal + this.$t('traceManageMain.count')
            } else return '0' + this.$t('traceManageMain.count')
          }
        },
        {
          // 现笔数
          prop: 'realAssetTotal',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.realAssetTotal,
          format: row => {
            if (row.realAssetTotal) {
              return row.realAssetTotal + this.$t('traceManageMain.count')
            } else return '0' + this.$t('traceManageMain.count')
          }
        },
        {
          // 总金额
          prop: 'totalAmount',
          align: 'right',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.totalAmount,
          format: (row) => {
            return format.thousandFilter(row.totalAmount, 2)
          }
        },
        {
          // 已退单笔数
          prop: 'returnAssetTotal',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.returnAssetTotal,
          format: row => {
            if (row.returnAssetTotal) {
              return row.returnAssetTotal + this.$t('traceManageMain.count')
            } else return '0' + this.$t('traceManageMain.count')
          }
        },
        {
          // 预计抽样笔数
          prop: 'planSampleCount',
          align: 'center',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.planSampleCount,
          format: row => {
            if (row.planSampleCount) {
              return row.planSampleCount + this.$t('traceManageMain.count')
            } else return '0' + this.$t('traceManageMain.count')
          }
        },
        {
          // 尽调时间
          prop: 'dueDiligenceDate',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceManageMain.dueDiligenceDate,
          format: (row) => {
            if (format.formatDate(row.dueDiligenceStartDate) === '' && format.formatDate(row.dueDiligenceEndDate) !== '') {
              return format.formatDate(row.dueDiligenceEndDate)
            } else if (format.formatDate(row.dueDiligenceStartDate) !== '' && format.formatDate(row.dueDiligenceEndDate) === '') {
              return format.formatDate(row.dueDiligenceStartDate)
            } else if (format.formatDate(row.dueDiligenceStartDate) === '' && format.formatDate(row.dueDiligenceEndDate) === '') {
              return ''
            } else {
              return format.formatDate(row.dueDiligenceStartDate) + this.$t('coordManageMain.to') + format.formatDate(row.dueDiligenceEndDate)
            }
          }
        }
      ],
      sourceData: [],
      projectInfo: {},
      traceUserInfo: {}, // 跟进人信息
      productFeedbackInfo: {} // 产品反馈数据统计
    }
  },
  watch: {
    sourceData: function () {
      if (this.sourceData.length === 0) {
        this.dataShowFlag = false
      }
    }
  },
  mounted () {
    this.queryParas.traceUserId = this.$store.getters.userId // 获取跟进人id
    this.handleFilter()
    this.getFileType()
    this.getTraceUserInfo()
  },
  methods: {
    getTraceUserInfo () {
      this.traceUserApi.getDefaultInfo({ traceUserId: this.$store.getters.userId }).then(res => {
        if (res.success) {
          this.traceUserInfo = res.data
        }
      })
    },
    // 获取所有文件类型
    getFileType () {
      this.fileListApi.getList({ fileQueryType: '4', stampWay: '3' }).then(res => {
        if (res.success) {
          this.fileType = res.data
        }
      })
    },
    // 默认选中第一行
    getTableData (data) {
      if (data && data.length > 0) {
        this.dataShowFlag = true
        this.isSelected = data[0].keyId
        this.currentRow = data[0]
        this.loadData(data[0])
      } else {
        this.dataShowFlag = false
      }
    },
    // 默认加载律所反馈
    loadData (val) {
      if (val && val !== null) {
        this.projectInfo = {
          projectId: val.projectId,
          periods: val.periods,
          projectName: val.projectName
        }
      } else {
        this.projectInfo = {}
      }
    },
    solveFlag (data) {
      if (this.activeSubName === '0') {
        this.tabList[0].dealing = data
      }
      if (this.activeSubName === '1') {
        this.tabList[1].dealing = data
      }
    },
    // tab切换
    handleClick (tab, event) {
      // this.activeSubName = tab.index
    },
    showFeedbackMain () {
      this.$router.push({ path: '/assetoutfeedback/effectDealFeedBack/effectDealFeedBackMain', query: this.projectInfo })
    },
    // 产品选中
    handleCurrentChange (data) {
      if (data && data !== null) {
        this.currentRow = data
        this.isSelected = data.keyId
        this.loadData(data)
      } else {
        this.loadData()
      }
    },
    // 编辑备注
    showEditMemo () {
      let userId = this.$store.getters.userId
      this.traceUpdateApi.getDefaultInfo({ identityFlag: '3', traceUserId: userId }).then(res => {
        if (res.success) {
          if (res.data && res.data.errFlag) {
            this.warning('当前跟进人备注不可编辑')
          } else {
            this.memoForm = {
              identityFlag: '3',
              busyMemo: res.data.busyMemo,
              traceUserId: userId,
              traceModifyTime: res.data.traceModifyTime
            }
            this.visible = true
          }
        }
      })
    },
    close (data) {
      if (data) {
        this.queryParas.traceUserId = this.$store.getters.userId // 获取跟进人id
        this.handleFilter()
        this.getTraceUserInfo()
      }
    },
    formatBusy (busyLevel) {
      if (busyLevel === '1') {
        return '闲'
      } else if (busyLevel === '2') {
        return '一般'
      } else {
        return '忙'
      }
    }
  },
  computed: {
    traceUserApi () {
      return traceManageApi.getTraceUser
    },
    getTraceListApi () {
      return traceManageApi.getTraceList
    },
    getFeedbackApi () {
      return traceManageApi.getFeedback
    },
    traceUpdateApi () {
      return traceManageApi.traceUserInfo
    },
    fileListApi () {
      return componentsApi.fileList
    }
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 30) {
        return value.slice(0, 30) + '...'
      }
      return value
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/assetoutfeedback/common.scss'
</style>
