<template>
  <div>
    <up-down-layout :header="$t('expressDataList.head')" :isShowFoldBtn="true">
      <search-form :formValue.sync="queryParas"
                   searchPerms="search"
                   @handleFilter="checkQueryHandleFilter"
                   @clearParam="clearParam"
                   slot="query"
                   resetPerms="reset"
                   @selectChanged="selectChanged"
                   :componentList="componentList"></search-form>
      <template slot="table">
        <data-table :api="api" :deleteApi="api"
                    :headTitle = "$t('expressDataList.tableHead')"
                    selectable="false"
                    :menuFlag="true"
                    :queryParas="queryParas"
                    :sourceData.sync="sourceData"
                    :loadCount.sync="loadCount"
                    :columns="columns"
                    operateBtnLayout=""
                    @getTableData="getTableData"
                    v-bind="elHeightObj">
          <!--资料来源-->
          <template slot-scope="scope" slot="receiveSource">
            <expand-collapse :sourceData="sourceData" :colProp="'receivingInfoList'"
                             :valueProp="'receiveSource'" :rowIndex="scope.data.$index" :isFormat="true" :formatFun="receiveSourceTpcModify"></expand-collapse>
          </template>
          <!--文件名称-备注-->
          <template slot-scope="scope" slot="fileNameMemo">
            <expand-collapse :sourceData="sourceData" :colProp="'receivingInfoList'"
                             :valueProp="'fileNameMemo'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <!--备注-->
          <template slot-scope="scope" slot="receiveDate">
            <expand-collapse :sourceData="sourceData" :colProp="'receivingInfoList'"
                             :valueProp="'receiveDate'" :rowIndex="scope.data.$index" :isFormat="true" :formatFun="formatDateTpcModify"></expand-collapse>
          </template>
          <!--快递单号-->
          <template slot-scope="scope" slot="expressNo">
            <expand-collapse :sourceData="sourceData" :colProp="'expressNoLocal'"
                             :valueProp="'expressNo'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <!--接收人-->
          <template slot-scope="scope" slot="receiver">
            <expand-collapse :sourceData="sourceData" :colProp="'receiverLocal'"
                             :valueProp="'receiver'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
        </data-table>
      </template>
    </up-down-layout>
  </div>
</template>
<script>
import { upDownLayout, searchForm, DataTable, authButton, SelectFinancialInstitutions, ExpandCollapse } from 'newepoch-components'
import SelectExpressName from '@/components/element/shourang/SelectExpressName.vue'
import SelectArea from '@/components/element/enterpriseInfoManage/SelectArea.vue'
import SelectProductName from '@/components/element/shourang/SelectProductName'
import tipElInput from '@/components/element/shourang/tipElInput'
import surplusFileSee from '@/pages/shourang/expressData/surplusFileSee'
import expressDataApi from '@/api/expressDataApi'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin.js'
import { regExp } from '@/validator/index'
import componentsApi from '@/api/componentsApi'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'expressData',
  components: {
    surplusFileSee,
    searchForm,
    upDownLayout,
    DataTable,
    authButton,
    SelectExpressName,
    ExpandCollapse
  },
  data () {
    return {
      tipElInputDisabled: false,
      queryParas: {},
      componentList: [
        {
          // 计划管理人/再保理银行
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.planPerson,
          disabled: false,
          value: 'planningManagerId',
          labelWidth: '160px',
          clearable: true,
          componentName: SelectFinancialInstitutions,
          queryName: 'projectId',
          queryValue: 'projectId'
        },
        {
          // 关键字
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.keyWord,
          disabled: false,
          value: 'keyWord',
          labelWidth: '160px',
          clearable: true,
          componentName: tipElInput,
          attrs: {
            tooltipAttrs: {
              tooltipText: this.$i18n.messages[this.$i18n.locale].expressDataList.inputkeyWord,
              placement: 'top'
            },
            inputAttrs: {
              placeholder: this.$i18n.messages[this.$i18n.locale].expressDataList.inputkeyWord
            }
          }
        },
        {
          // 资料来源
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.dataSource,
          disabled: false,
          value: 'fileSource',
          labelWidth: '160px',
          clearable: true,
          componentName: 'SelectDictionary',
          dictTypeCode: 'receive_source'
        },
        {
          // 快递单号
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.expressNumber,
          disabled: false,
          value: 'expressNo',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '160px',
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.productName,
          disabled: false,
          value: 'projectId',
          name: 'projectId',
          labelWidth: '160px',
          clearable: true,
          componentName: SelectProductName
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.periodsNum,
          disabled: false,
          value: 'specialPlanPeriods',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '160px',
          clearable: true,
          maxlength: '3',
          componentName: 'el-input'
        },
        {
          // 区域
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.area,
          disabled: false,
          value: 'SelectAreas',
          name: 'SelectArea',
          labelWidth: '160px',
          multiple: false,
          clearable: true,
          componentName: SelectArea
        },
        {
          // 文件名称选择
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.fileName,
          disabled: false,
          value: 'fileCode',
          multiple: true,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInputs,
          labelWidth: '160px',
          clearable: true,
          componentName: SelectExpressName
        },
        {
          // 文件类型
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.fileType,
          disabled: false,
          value: 'receiveType',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '160px',
          clearable: true,
          componentName: 'SelectDictionary',
          dictTypeCode: 'sr_file_type'
        },
        {
          // 接收时间
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.receiveTime,
          disabled: false,
          value: 'receiveTime',
          startPlaceholder: this.$i18n.messages[this.$i18n.locale].common.startDate,
          endPlaceholder: this.$i18n.messages[this.$i18n.locale].common.endDate,
          labelWidth: '160px',
          type: 'daterange',
          defaultTime: ['00:00:00', '23:59:59'],
          clearable: true,
          format: 'timestamp',
          componentName: 'el-date-picker'
        }
      ],
      columns: [
        {
          // 计划管理人/再保理银行
          prop: 'planningManagerName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.refactorBank
        },
        {
          // 期数
          prop: 'specialPlanPeriods',
          align: 'left',
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.periodsNum,
          format: (row) => {
            return row.specialPlanPeriods || ''
          }
        },
        {
          // 区域
          prop: 'coreAreaName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.area
          // format: (row) => {
          //   return format.formatDict(row.coreAreaName, 'ZD0006')
          // }
        },
        {
          // 付款确认书编号
          prop: 'assetCode',
          align: 'left',
          width: '200px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.paymentConfNum
        },
        {
          // 供应商名称
          prop: 'creditor',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.supplierName
        },
        {
          // 项目公司名称
          prop: 'debtor',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.projectCompName
        },
        {
          // 资料来源
          prop: 'receiveSource',
          align: 'center',
          width: '100px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.dataSource,
          format: (row) => {
            if (!row.receiveSource) return ''
            return format.formatDict(row.receiveSource.toString(), 'receive_source')
          }
        },
        {
          // 接收次数
          prop: 'receiveNo',
          align: 'left',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.receiveNumber
        },
        {
          // 接收时间
          prop: 'receiveDate',
          align: 'center',
          width: '160px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.receiveTime,
          format: (row) => {
            return format.formatDateTpcModify(row.receiveDate)
          }
        },
        // {
        //   // 接收文件
        //   prop: 'fileName',
        //   align: 'left',
        //   width: '150px',
        //   slot: true,
        //   label: this.$i18n.messages[this.$i18n.locale].expressDataList.receiveFile
        // },
        {
          // 文件类型
          prop: 'receiveType',
          align: 'center',
          width: '80px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.fileType,
          format: (row) => {
            return format.formatDict(row.receiveType, 'sr_file_type')
          }
        },
        {
          // 备注
          prop: 'fileNameMemo',
          align: 'left',
          width: '250px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.receiveFile
        },
        {
          // 快递单号
          prop: 'expressNo',
          align: 'left',
          width: '160px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.expressNumber,
          columnMenusFlag: false
        },
        {
          // 接收人
          prop: 'receiver',
          align: 'left',
          width: '150px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.receiver,
          columnMenusFlag: false
        },
        {
          // 保理专员
          prop: 'customerAccountName',
          align: 'left',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.factorOfficer,
          columnMenusFlag: false
        },
        {
          // 区域专员
          prop: 'coreAreaAttacheName',
          align: 'left',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.areaOfficer,
          columnMenusFlag: false
        },
        {
          // 业务
          prop: 'coreAreaBussUserName',
          align: 'left',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].expressDataList.business,
          columnMenusFlag: false
        }
      ],
      sourceData: [],
      selectRows: []
    }
  },
  computed: {
    api () {
      return expressDataApi.expressDataFileApi
    }
  },
  methods: {
    formatDateTpcModify (data) {
      if (data) return format.formatDateTpcModify(data, 'yyyy-MM-dd hh:mm')
      else return ''
    },
    receiveSourceTpcModify (data) {
      if (data) return format.formatDict(data.toString(), 'receive_source')
      else return ''
    },
    getTableData (data) {
      this.sourceData.forEach(it => {
        if (it.receivingInfoList) {
          it.expressNoLocal = []
          it.receiverLocal = []
          it.receivingInfoList.forEach(t1 => {
            if (t1.memo && t1.memo.length > 0) {
              t1.fileNameMemo = `文件名称：${t1.fileName}  备注：${t1.memo}`
            } else {
              t1.fileNameMemo = `文件名称：${t1.fileName}`
            }
            if (t1.expressNo && t1.expressNo.length > 0) {
              it.expressNoLocal.push({ expressNo: t1.expressNo })
            }
            if (t1.receiver && t1.receiver.length > 0) {
              it.receiverLocal.push({ receiver: t1.receiver })
            }
          })
        }
      })
    },
    // 查询数据前处理
    checkQueryHandleFilter () {
      if (!this.UtilJs.isEmpty(this.queryParas.specialPlanPeriods) && !regExp.number.test(this.queryParas.specialPlanPeriods)) {
        return this.warning(this.$i18n.messages[this.$i18n.locale].expressDataList.specialPlanPeriodsCheck)
      }
      if (this.queryParas.receiveTime && this.queryParas.receiveTime.length > 0) {
        this.$set(this.queryParas, 'receiveDateStart', this.queryParas.receiveTime[0] / 1000)
        this.$set(this.queryParas, 'receiveDateEnd', this.queryParas.receiveTime[1] / 1000)
      } else {
        delete this.queryParas.receiveDateStart
        delete this.queryParas.receiveDateEnd
      }
      this.handleFilter()
    },
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10
      }
      this.selectChangeLocal('1')
    },
    // 处理区域
    selectChanged (obj) {
      if (obj.SelectAreaInfo) {
        if (obj.SelectAreaInfo.length === 1) {
          this.queryParas.coreArea = obj.SelectAreaInfo[0].areaId
        } else {
          delete this.queryParas.coreArea
        }
      }
      if (obj.hasOwnProperty('projectIdInfo')) {
        if (obj.projectIdInfo && obj.projectIdInfo.keyId) {
          this.getTypeById(obj.projectIdInfo.keyId)
        } else {
          this.selectChangeLocal('1')
        }
      }
    },
    // 改变选择信息、日期
    selectChangeLocal (isAbs) {
      this.componentList[5].disabled = isAbs !== '1'
      if (this.componentList[5].disabled) {
        this.componentList[5].placeholder = ' '
      } else {
        this.componentList[5].placeholder = this.$i18n.messages[this.$i18n.locale].common.pleaseInput
      }
    },
    // 根据ID获取产品类别
    getTypeById (projectId) {
      componentsApi.productenterprise.getclassify({ projectId: projectId }).then(res => {
        var a = res.data ? res.data.productType : '2'
        this.selectChangeLocal(a)
      })
    }
  }
}
</script>
<style scoped>
</style>
