<template>
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <search-form :componentList="componentList" slot="query" :formValue.sync="queryParas"
                   @clearParam="clearParam" @handleFilter="handleFilter"></search-form>
      <template v-slot:table>
        <data-table :api="api" :handleFlag.sync="handleFlag" :queryParas="queryParas" :sourceData.sync="sourceData"
                    operateBtnLayout="" :columns="columns" :menuFlag="true" v-bind="elHeightObj" ref="lawyerTable">
          <!-- 操作 -->
          <el-table-column :label="$t('common.operate')" align="center" width="100px" fixed="right">
            <template v-slot="scope">
              <auth-button class="iconCircle" icon="iconfont iconpiliangbanli" :title="$t('taskManage.todoTask.handle')" @click="handle(scope.row)"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <lawyer-process-edit :visible.sync="showDetail" :editModel="editModel" :form="item" @submit-success="handleFilter"></lawyer-process-edit>
  </div>
</template>

<script>
import BasePage from '@/pages/basePage.js'
import { authButton, upDownLayout, searchForm, DataTable, SelectProductName,
  SelectCoreEnterpriseCascade, SelectPlanManager } from 'newepoch-components'
import LawyerProcessEdit from '@/pages/dataAudit/lawyerProcess/lawyerProcessEdit.vue'
import * as format from '@/filters/index'
import cn from '@/i18n/langs/cn.js'
import { regExp } from '@/validator/index.js'
import lawyerApi from '@/api/dataAudit/lawyerApi.js'
import mixin from '@/pages/mixin'

const { complianceCheck, common } = cn
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'lawyerProcessList',
  components: {
    authButton,
    upDownLayout,
    searchForm,
    DataTable,
    SelectProductName,
    SelectCoreEnterpriseCascade,
    SelectPlanManager,
    LawyerProcessEdit
  },
  mounted () {
    this.handleFilter()
  },
  methods: {
    // 重写查询
    handleFilter () {
      // 期数数字校验
      if (!this.UtilJs.isEmpty(this.queryParas.specialPlanPeriods) && !regExp.number.test(this.queryParas.specialPlanPeriods)) {
        return this.warning(complianceCheck.specialPlanPeriodsCheck)
      }
      this.queryParas.exportFlag = 1
      for (let key in this.queryParas) {
        if (key !== 'pageIndex' && key !== 'pageSize') {
          if (this.UtilJs.isEmpty(this.queryParas[key])) {
            delete this.queryParas[key]
          }
        }
      }
      this.$refs.lawyerTable.loadTableData()
    },
    // 办理
    handle (row) {
      let _this = this
      _this.item = Object.assign({}, row)
      _this.showDetail = true
    }
  },
  watch: {
    'queryParas.projectId' (now, old) {
      if (now !== old) {
        this.$set(this.queryParas, 'coreEnterpriseId', '')
      }
    }
  },
  data () {
    return {
      editModel: 'E',
      showDetail: false,
      item: {},
      sourceData: [],
      componentList: [
        // 产品名称
        {
          label: complianceCheck.project,
          value: 'projectId',
          disabled: false,
          componentName: SelectProductName,
          labelWidth: '160px'
        },
        // 核心企业
        {
          label: complianceCheck.coreEnterprise,
          value: 'coreEnterpriseId',
          queryName: 'projectId',
          queryValue: 'projectId',
          disabled: false,
          componentName: SelectCoreEnterpriseCascade,
          labelWidth: '160px'
        },
        // 计划管理人
        {
          label: complianceCheck.planningManagerName,
          value: 'planningManagerId',
          disabled: false,
          componentName: SelectPlanManager,
          labelWidth: '160px'
        },
        // 期数
        {
          label: complianceCheck.periods,
          value: 'periods',
          disabled: false,
          componentName: 'el-input',
          placeholder: common.pleaseInput,
          labelWidth: '160px'
        },
        // 付款确认书编号
        {
          label: complianceCheck.payCode,
          value: 'assetCode',
          disabled: false,
          componentName: 'el-input',
          placeholder: common.pleaseInput,
          labelWidth: '160px'
        }
      ],
      columns: [
        // 产品名称
        {
          prop: 'projectName',
          align: 'left',
          label: complianceCheck.project,
          width: '200px'
        },
        // 核心企业
        {
          prop: 'coreEnterpriseName',
          align: 'left',
          label: complianceCheck.coreEnterprise,
          width: '200px'
        },
        // 计划管理人/再保理银行
        {
          prop: 'planningManagerName',
          align: 'left',
          label: complianceCheck.planningManagerName,
          width: '200px'
        },
        // 期数
        {
          prop: 'periods',
          align: 'right',
          label: complianceCheck.periods,
          width: '80px'
        },
        // 付款确认书编号
        {
          prop: 'assetCode',
          align: 'left',
          label: complianceCheck.payCode,
          width: '200px'
        },
        // 未补回资料
        {
          prop: 'supplementNoFile',
          align: 'left',
          label: complianceCheck.supplementNoFile,
          width: '200px'
        },
        // 首次发起时间
        {
          prop: 'firstFeedbackTime',
          align: 'center',
          label: complianceCheck.firstFeedbackTime,
          width: '150px',
          format: (row) => { return format.formatDatetime(row.firstFeedbackTime) }
        }
      ]
    }
  },
  computed: {
    api () {
      return lawyerApi.lawyer
    }
  }
}
</script>

<style scoped>

</style>
