<template>
  <div>
    <up-down-layout :header="$t('ladingNoticeHandle.head')" :handleFlag.sync="handleFlag">
      <search-form :formValue.sync="queryParas"
                   searchPerms="search"
                   @handleFilter="handleFilterTemp"
                   @clearParam="clearParam"
                   slot="query"
                   resetPerms="reset"
                   @selectChanged="selectChanged"
                   :componentList="componentList"></search-form>
      <template slot="table">
        <data-table :api="api" :deleteApi="api"
                    :headTitle = "$t('ladingNoticeHandle.tableHead')"
                    :showSelection="true"
                    selectable="false"
                    :handleFlag.sync="handleFlag"
                    :menuFlag="true"
                    :queryParas="queryParas"
                    :sourceData.sync="sourceData"
                    :loadCount.sync="loadCount"
                    :columns="columns"
                    :otherHeight="'240'"
                    v-bind="elHeightObj"
                    operateBtnLayout=""
                    :IsRight="false"
                    :selectTable="selectTable"
                    :pageAll="true"
                    :operatWidth="'200'"
                    :selectedRows.sync="selectedRows"
                    @getTableData="getTableData">
          <el-table-column align="center" fixed="right" :label="$t('common.operate')" width="120px">
            <template slot-scope="scope">
              <auth-button class="iconCircle" icon="iconfont iconbanli-active"
                             :menuCode="menuId" perms="batchHandle" :openPerms="true"
                             :disabled="compareTime(scope.row.stopStatus)"
                             :title="$t('ladingNoticeHandle.Handle')" size="medium" @click="handleClick(scope.row)"></auth-button>
              <el-tooltip placement="top" v-if="scope.row.modify">
                <div slot="content"><p v-html="scope.row.modify"></p></div>
                <i class="iconfont iconyichangshujutiaozheng iconsize iconCenter" v-if="scope.row.ifsRehandle.toString() === '1'" @mouseover="mouseup(scope)"></i>
              </el-tooltip>
<!--              scope.row.modify-->
              <i v-else-if="scope.row.ifsRehandle.toString() === '1'" class="iconfont iconyichangshujutiaozheng iconsize iconCenter" @mouseover="mouseup(scope)"></i>
            </template>
          </el-table-column>
          <!--对接人 -->
          <template slot="areaContacts" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'employeeList'"
                             :valueProp="'employeeName'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <!--联系方式 -->
          <template slot="areaContactsNumber" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" :colProp="'employeeList'"
                             :valueProp="'telephone'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <template slot-scope="scope" slot="coreAreaAttacheName">
            <expand-collapse :sourceData="sourceData" :colProp="'businessCommissionerList'"
                             :valueProp="'areaCommissionerName'" :rowIndex="scope.data.$index"></expand-collapse>
          </template>
          <template slot="headButton">
            <div class="right-div">
              <auth-button icon="iconfont iconpiliangbanli"
                           size="small" type="primary"
                           @click="pilianbanliClick"
                           :menuCode="menuId" perms="handle" :openPerms="true"
                           :label="$t('ladingNoticeHandle.batchHandle')">
              </auth-button>
            </div>
            <div class="left-div">
              <el-row>
                <el-col>
                  <span class="head-font-size">{{$t('ladingNoticeHandle.headInputText1')}}</span>
                  <el-input class="lading-head-input" disabled v-model="expressForm.planLadingAmount"></el-input>
                  <span class="head-font-size head-font-size-margin">{{$t('ladingNoticeHandle.headInputText2')}}</span>
                  <el-input class="lading-head-input" disabled v-model="expressForm.accountsReceivable"></el-input>
                </el-col>
              </el-row>
            </div>
          </template>
        </data-table>
      </template>
    </up-down-layout>
    <handle-info-tab-edit :menuCode="menuId" :visible.sync="showDetail" :editModel="editModel" :form="item"></handle-info-tab-edit>
  </div>
</template>
<script>
import { searchForm, DataTable, upDownLayout, authButton, SelectPeriodsCascade,
  SelectCoreEnterpriseCascade, SelectProductName, SelectFinancialInstitutionsCascade,
  SelectAssetsServiceCascade, SelectPrimitiveRightsHolderCascade, SelectSmallArea, ExpandCollapse } from 'newepoch-components'
import HandleInfoTabEdit from '@/pages/shouji/ladingHandle/handleInfoTabEdit'
import ladingNoticeHandleApi from '@/api/shouji/ladingNoticeHandleApi'
import BasePage from '@/pages/basePage'
import componentsApi from '@/api/componentsApi'
import * as format from '@/filters/index'
import mixin from '@/pages/mixin'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'ladingNoticeHandle',
  components: {
    HandleInfoTabEdit,
    searchForm,
    upDownLayout,
    DataTable,
    authButton,
    ExpandCollapse
  },
  mounted () {
    if (this.queryParas) {
      this.queryParas = Object.assign({}, { pageIndex: 1, pageSize: 10 })
    }
  },
  // activated () {
  //   if (this.queryParas) {
  //     this.queryParas = Object.assign({}, { pageIndex: 1, pageSize: 10 })
  //   }
  // },
  data () {
    const labelWidth = '165px' // 整体搜索文字大小
    return {
      sourceData: [],
      asddasdasd: 0,
      selectedRows: [],
      expressForm: {},
      componentList: [
        {
          // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.productName,
          value: 'projectId',
          name: 'projectName',
          componentName: SelectProductName,
          labelWidth: labelWidth
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.specialPlanPeriods,
          disabled: false,
          value: 'specialPlanPeriodsId',
          name: 'specialPlanPeriodsId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInputNum,
          labelWidth: labelWidth,
          clearable: true,
          queryName: 'projectId',
          queryValue: 'projectId',
          componentName: SelectPeriodsCascade
        },
        {
          // 核心企业
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.coreEnterpriseName,
          disabled: false,
          value: 'coreEnterpriseId',
          name: 'coreEnterpriseId',
          labelWidth: labelWidth,
          queryName: 'projectId',
          queryValue: 'projectId',
          clearable: true,
          componentName: SelectCoreEnterpriseCascade
        },
        {
          // 计划管理人/再保理银行
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.planningManagerName,
          disabled: false,
          value: 'planningManagerId',
          labelWidth: labelWidth,
          clearable: true,
          queryName: 'projectId',
          queryValue: 'projectId',
          componentName: SelectFinancialInstitutionsCascade
        },
        {
          // 提单类型
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.ladingType,
          disabled: false,
          value: 'ladingType',
          labelWidth: labelWidth,
          clearable: true,
          componentName: 'SelectDictionary',
          dictTypeCode: 'ZD0100'
        },
        {
          // 原始权益人
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.rightsHolder,
          value: 'rightsHolder',
          clearable: true,
          componentName: SelectPrimitiveRightsHolderCascade,
          queryName: 'projectId',
          queryValue: 'projectId',
          placeholder: this.$i18n.messages[this.$i18n.locale].ladingNoticeManage.selectrightsHolder,
          labelWidth: labelWidth
        },
        {
          // 资产服务机构
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.assetServiceId,
          disabled: false,
          value: 'assetServiceId',
          labelWidth: labelWidth,
          queryName: 'projectId',
          queryValue: 'projectId',
          clearable: true,
          componentName: SelectAssetsServiceCascade
        },
        {
          // 区域
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.region,
          disabled: false,
          value: 'coreArea',
          labelWidth: labelWidth,
          clearable: true,
          multiple: false,
          queryName: 'coreCompanyId',
          queryValue: 'coreEnterpriseId',
          componentName: SelectSmallArea
        },
        // 更新日期
        {
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.updateDate,
          value: 'modifyTime',
          componentName: 'el-date-picker',
          clearable: true,
          placeholder: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.pleaseSelect,
          labelWidth: labelWidth,
          format: 'yyyy-MM-dd'
        }
      ],
      columns: [
        {
          // 产品名称
          prop: 'projectName',
          align: 'left',
          width: '160px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.productName
        },
        {
          // 期数
          prop: 'specialPlanPeriods',
          align: 'left',
          width: '60px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.specialPlanPeriods,
          format: (row) => {
            if (!row.specialPlanPeriods || row.specialPlanPeriods.toString() === '0') {
              return ''
            } else {
              return row.specialPlanPeriods
            }
          }
        },
        {
          // 核心企业
          prop: 'coreEnterpriseName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.coreEnterpriseName
        },
        {
          // 计划管理人/再保理银行
          prop: 'planningManagerName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.planningManagerName
        },
        {
          // 原始权益人
          prop: 'initialOwnersName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.initialOwnersName
        },
        {
          // 提单类型
          prop: 'ladingType',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.ladingType,
          format: (row) => {
            return format.formatDict(row.ladingType, 'ZD0100')
          }
        },
        {
          // 资产服务机构
          prop: 'assetServiceName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.assetServiceId
        },
        {
          // 区域
          prop: 'coreAreaName',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.region
        },
        {
          // 预计截单时间
          prop: 'predictStopTime',
          align: 'center',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.estimatedCutOffTime,
          format: (row) => {
            if (row.predictStopTime) {
              return format.formatDateNull(Number(row.predictStopTime), 'yyyy-MM-dd hh:mm')
            }
            return ''
          }
        },
        {
          // 预计提单金额
          prop: 'predictLadingAmount',
          align: 'right',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.estimatedLadingAmount,
          format: (row) => {
            if (row.predictLadingAmount === 0) {
              return ''
            }
            return format.thousandFilter(row.predictLadingAmount)
          }
        },
        {
          // 实际提单金额
          prop: 'factoringMoney',
          align: 'right',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.actualLadingAmount,
          format: (row) => {
            if (row.factoringMoney === 0) {
              return ''
            }
            return format.thousandFilter(row.factoringMoney)
          }
        },
        {
          // 对接人
          prop: 'areaContacts',
          align: 'left',
          width: '100px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.abutmentPerson
        },
        {
          // 联系方式
          prop: 'areaContactsNumber',
          align: 'center',
          width: '150px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.contactInformation
        },
        {
          // 区域专员
          prop: 'coreAreaAttacheName',
          align: 'left',
          width: '150px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.regionAttacheId
        },
        {
          // 更新时间
          prop: 'modifyTime',
          align: 'center',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.updateDate,
          format: (row) => {
            return format.formatDate(row.modifyTime, 'yyyy-MM-dd hh:mm')
          }
        }
      ]
    }
  },
  computed: {
    compareTime () {
      return (value) => {
        if (value === '1') {
          return true
        } else {
          return false
        }
      }
    },
    api () {
      return ladingNoticeHandleApi.ladingNoticeList
    }
  },
  methods: {
    // 禁选条件
    selectTable (row, index) {
      return !this.compareTime(row.stopStatus)
    },
    mouseup (data) {
      // console.log(data)
      this.api.getModifyByKeyId(data.row.keyId).then((res) => {
        if (res.data) {
          let temp = ''
          res.data.forEach(it => {
            let oldValue = it.oldValue
            let newValue = it.value
            // 提单类型
            // if (it.fieldName === 'ladingType') {
            //   oldValue = format.formatDict(it.oldValue, 'ZD0100')
            //   newValue = format.formatDict(it.value, 'ZD0100')
            // }
            // // 通知状态
            // if (it.fieldName === 'noticeStatus') {
            //   oldValue = format.formatDict(it.oldValue, 'ZD0108')
            //   newValue = format.formatDict(it.value, 'ZD0108')
            // }
            // 截单状态
            if (it.fieldName === 'ladingType' || it.fieldName === 'predictLadingAmount' || it.fieldName === 'predictStopTime') {
              // 提单类型
              if (it.fieldName === 'ladingType') {
                oldValue = format.formatDict(it.oldValue, 'ZD0100')
                newValue = format.formatDict(it.value, 'ZD0100')
              }
              // 预提单金额
              if (it.fieldName === 'predictLadingAmount') {
                oldValue = format.thousandFilter(it.oldValue)
                newValue = format.thousandFilter(it.value)
              }
              // 截单时间
              if (it.fieldName === 'predictStopTime') {
                oldValue = format.formatDateTpcModify(it.oldValue)
                newValue = format.formatDateTpcModify(it.value)
              }
              temp += it.name + '：' + oldValue + '----------' + newValue + '<br/>'
            }
          })
          this.$set(this.sourceData[data.$index], 'modify', temp)
          // console.log(res)
        }
      })
    },
    handleFilterTemp () {
      Object.keys(this.queryParas).forEach(it => {
        if (this.UtilJs.isEmpty(this.queryParas[it])) {
          delete this.queryParas[it]
        }
      })
      this.handleFilter()
    },
    // 根据ID获取产品类别
    getTypeById () {
      componentsApi.productenterprise.getclassify({ projectId: this.queryParas.projectId }).then(res => {
        let disabled = res.data ? res.data.productType : '2'
        this.$set(this.componentList[1], 'disabled', disabled !== '1')
      })
    },
    selectChanged (obj) {
      if (obj.specialPlanPeriodsIdInfo) {
        this.queryParas.specialPlanPeriods = obj.specialPlanPeriodsIdInfo.specialPlanPeriods
      }
      if (obj.projectNameInfo) {
        this.getTypeById()
      }
      if (Object.keys(obj).some(it => it === 'projectNameInfo')) {
        this.clearInfoList()
      }
      // if (Object.keys(obj).some(it => it === 'coreEnterpriseIdInfo')) {
      //   if (!obj.coreEnterpriseIdInfo || !this.queryParas.coreEnterpriseId || obj.coreEnterpriseIdInfo.enterpriseId !== this.queryParas.coreEnterpriseId) {
      //     this.clearcoreArea()
      //   }
      // }
    },
    clickMore (index, bian) {
      this.$set(this.sourceData[index], bian, !this.sourceData[index][bian])
    },
    getMorebool (data, bian) {
      let open = true
      if (data[bian]) {
        open = !data[bian]
      }
      return data.employeeList && data.employeeList.length > 3 && open
    },
    getMoreboolS (data) {
      return data.employeeList && data.employeeList.length > 3
    },
    getMore (data, bian) {
      let open = false
      if (data[bian]) {
        open = data[bian]
      }
      if (data.employeeList) {
        if (!open) {
          return data.employeeList.slice(0, 3)
        } else {
          return data.employeeList
        }
      } else {
        return []
      }
    },
    // 获取完表格数据之后获取预计提单金额、实际提单金额
    getTableData (data) {
      this.sourceData.forEach(it => {
        if (it.employeeList) {
          it.employeeList = it.employeeList.filter(it1 => {
            return it1.forbiddenStatus !== '1'
          })
        }
      })
      this.getaccountsReceivable(this.queryParas)
    },
    // 获取预计提单金额、实际提单金额
    getaccountsReceivable (data) {
      ladingNoticeHandleApi.ladingNoticeList.getNoticeHandle(data).then(res => {
        if (res.data) {
          this.$set(this.expressForm, 'accountsReceivable', format.thousandFilter(res.data.accountsReceivable))
          this.$set(this.expressForm, 'planLadingAmount', format.thousandFilter(res.data.planLadingAmount))
        }
      })
    },
    // 办理按钮
    handleClick (val) {
      this.editModel = 'E'
      this.item = Object.assign({}, val)
      this.item.specialPlanPeriods = this.item.specialPlanPeriods.toString() === '0' ? '' : this.item.specialPlanPeriods
      this.showDetail = true
    },
    // 批量办理按钮
    pilianbanliClick () {
      if (this.selectedRows.length > 0) {
        this.editModel = 'A'
        // this.item = Object.assign({}, { data: this.selectedRows })
        this.item.data = []
        this.item.data.push(...this.selectedRows)
        this.item.data.forEach(it => {
          it.specialPlanPeriods = it.specialPlanPeriods.toString() === '0' ? '' : it.specialPlanPeriods
        })
        this.showDetail = true
      } else {
        return this.warning(this.$i18n.messages[this.$i18n.locale].ladingNoticeHandle.selectZeroErrorbatchHandle)
      }
    },
    clearInfoList () {
      this.$set(this.componentList[1], 'disabled', false)
      delete this.queryParas.coreEnterpriseId
      delete this.queryParas.planningManagerId
      delete this.queryParas.rightsHolder
      delete this.queryParas.initialOwnersId
      delete this.queryParas.assetServiceId
      delete this.queryParas.coreArea
      delete this.queryParas.specialPlanPeriodsId
      delete this.queryParas.specialPlanPeriods
      if (!this.queryParas.projectId) {
        delete this.queryParas.projectId
      }
    },
    clearcoreArea () {
      delete this.queryParas.coreArea
      if (!this.queryParas.coreEnterpriseId) {
        delete this.queryParas.coreEnterpriseId
      }
    }
  },
  watch: {
    'queryParas.coreEnterpriseId' () {
      this.clearcoreArea()
    }
  }
}
</script>
<style scoped lang="scss">
  @import '~@/styles/sj/ladingHandle/ladingNoticeHandle.scss';
</style>
