// 资产资料清单信息管理
<template>
  <div class="crm-container">
    <up-down-layout :handleFlag.sync="handleFlag">
      <search-form @clearParam="clearParam" @handleFilter="handleFilter" :formValue.sync="queryParas"
                   v-model="queryParas" :componentList="componentList" slot="query"
                   :menuCode="menuId" searchPerms="search" resetPerms="reset"></search-form>
      <template slot="table">
        <data-table :showPage="true" :queryParas="queryParas" :sourceData.sync="sourceData" :api="api" ref="dataTable" :menuFlag="true"
                    :loadCount.sync="loadCount" operateBtnLayout="" :columns="columns" :headTitle="$t('price.title')" v-bind="elHeightObj">

          <template slot="headButton">
            <div class="headButton">
              <auth-button :type="'primary'" :size="'medium'" icon="iconfont iconxinzeng"
                          :label="$t('common.create')" @click="showEdit('', 'C')"></auth-button>
            </div>
          </template>
          <!-- 操作 -->
          <el-table-column :label="$t('common.operate')" align="center" width="120px" fixed="right">
            <template slot-scope="scope">
              <!-- 查看 -->
              <auth-button v-if="scope.row.reviewStatus === 2 || scope.row.reviewStatus === 3" size="small" class="iconCircle"
                           :title="$t('common.view')" @click="showEdit(scope.row, 'V')" icon="iconfont iconview"></auth-button>
              <!-- 复制 -->
              <auth-button v-if="scope.row.reviewStatus === 2" size="small" class="iconCircle"
                           :title="$t('common.copy')" @click="showEdit(scope.row, 'P')" icon="iconfont iconfuzhi3"></auth-button>
              <!-- 编辑 -->
              <auth-button v-if="(scope.row.reviewStatus === 1  && scope.row.applicant === nikeName) || scope.row.reviewStatus === 0"
                           size="small" class="iconCircle" icon="iconfont iconbianji"
                           :title="$t('common.edit')" @click="showEdit(scope.row, 'E')"></auth-button>
              <!-- 复核 -->
              <auth-button v-if="scope.row.reviewStatus === 1 && scope.row.applicant !== nikeName" size="small" class="iconCircle"
                           :title="$t('common.review')" @click="showEdit(scope.row, 'R')" icon="iconfont iconfuhe"></auth-button>
              <!-- 删除 -->
              <auth-button v-if="(scope.row.reviewStatus === 1  && scope.row.applicant === nikeName) || scope.row.reviewStatus === 0" size="small"
                           :title="$t('common.del')" @click="del(scope.row.keyId)" icon="iconfont iconshanchu" class="iconCircle"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <priceSys-Edit @handleFilter="handleFilter" :visible.sync="visible" :form="item"
                   :editModel="editModel"></priceSys-Edit>
  </div>
</template>
<script>
import BasePage from '@/pages/basePage.js'
import { upDownLayout, searchForm, DataTable, authButton, SelectProductNameCascade, SelectCoreEnterpriseCascade, SelectFinancialInstitutionsCascade } from 'newepoch-components'
import * as format from '@/filters/index'
import priceSysEdit from '@/pages/feilv/priceSysEdit'
import rateApi from '@/api/rateApi'
import mixin from '@/pages/mixin.js'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    authButton,
    priceSysEdit
    // PriceAd
  },
  data () {
    return {
      visible: false,
      editModel: '',
      item: {},
      sourceData: [],
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        productType: '',
        projectId: '',
        coreEnterpriseId: '',
        coreFlag: '60',
        planningManagerId: '',
        planFlag: '110',
        periodUseRates: [],
        reviewStatus: ''
      },
      componentList: [
        // 产品分类
        {
          label: this.$i18n.messages[this.$i18n.locale].price.productType,
          value: 'productType',
          cols: [8, 8, 8, 8],
          labelWidth: '160px',
          dictTypeCode: 'ZD0087',
          componentName: 'SelectDictionary'
        },
        // 产品名称
        {
          label: this.$i18n.messages[this.$i18n.locale].price.productName,
          value: 'projectId',
          cols: [8, 8, 8, 8],
          labelWidth: '105px',
          componentName: SelectProductNameCascade,
          queryName: 'productType',
          queryValue: 'productType'
        },
        // 核心企业
        {
          label: this.$i18n.messages[this.$i18n.locale].price.coreEnterprises,
          value: 'coreEnterpriseId',
          cols: [8, 8, 8, 8],
          labelWidth: '75px',
          componentName: SelectCoreEnterpriseCascade,
          queryName: 'projectId',
          queryValue: 'projectId'
        },
        // 计划管理人
        {
          label: this.$i18n.messages[this.$i18n.locale].price.refactorBank,
          value: 'planningManagerId',
          cols: [8, 8, 8, 8],
          labelWidth: '160px',
          componentName: SelectFinancialInstitutionsCascade,
          queryName: 'projectId',
          queryValue: 'projectId'
        },
        // 费率使用期间
        {
          label: this.$i18n.messages[this.$i18n.locale].price.periodUseRates,
          value: 'periodUseRates',
          cols: [8, 8, 8, 8],
          labelWidth: '105px',
          type: 'daterange',
          format: 'timestamp',
          componentName: 'el-date-picker'
        },
        // 状态
        {
          label: this.$i18n.messages[this.$i18n.locale].price.status,
          value: 'reviewStatus',
          cols: [8, 8, 8, 8],
          labelWidth: '75px',
          dictTypeCode: 'I0001',
          componentName: 'SelectDictionary'
        }
      ],
      columns: [
        // 产品分类
        {
          prop: 'productType',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].price.productType,
          format: (row) => {
            return format.formatDict(row.productType + '', 'ZD0087')
          }
        },
        // 产品名称
        {
          prop: 'projectName',
          align: 'left',
          width: '160px',
          label: this.$i18n.messages[this.$i18n.locale].price.productName
        },
        // 核心企业
        {
          prop: 'coreEnterprise',
          align: 'left',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].price.coreEnterprises
        },
        // 计划管理人
        {
          prop: 'planningManagerName',
          align: 'left',
          width: '170px',
          label: this.$i18n.messages[this.$i18n.locale].price.refactorBank
        },
        // 资产服务机构
        {
          prop: 'assetServiceInstitution',
          align: 'left',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].price.assetServiceInstitution
        },
        // 原始权益人
        {
          prop: 'initialEquityOwner',
          align: 'left',
          width: '140px',
          label: this.$i18n.messages[this.$i18n.locale].price.initialEquityOwner
        },
        // 生效日期
        {
          prop: 'effectiveDate',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].price.effectiveDate,
          format: (row) => {
            return format.formatDateNull(row.effectiveDate)
          }
        },
        // 失效日期
        {
          prop: 'expirDate',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].price.expirationDate,
          format: (row) => {
            return row.expirDate === '9999-12-31' ? '—' : format.formatDateNull(row.expirDate)
          }
        },
        // 申请人
        {
          prop: 'applicant',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].price.applicant,
          format: (row) => {
            return row.applicant === '' ? '—' : row.applicant
          }
        },
        // 申请日期
        {
          prop: 'applicantionDate',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].price.applicantionDate,
          format: (row) => {
            return row.applicantionDate === '1900-01-01' ? '—' : format.formatDateNull(row.applicantionDate)
          }
        },
        // 状态
        {
          prop: 'reviewStatus',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].price.status,
          format: (row) => {
            return row.reviewStatus === 0 ? '—' : format.formatDict(row.reviewStatus + '', 'I0001')
          }
        }
      ]
    }
  },
  computed: {
    api () {
      return rateApi.priceSysApi
    },
    nikeName () {
      return this.$store.state.user.nikeName
    }
  },
  methods: {
    // 重写重置
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10,
        productType: '',
        projectId: '',
        coreEnterpriseId: '',
        coreFlag: '60',
        planningManagerId: '',
        planFlag: '110',
        periodUseRates: [],
        reviewStatus: ''
      }
    },
    // 重写查询
    handleFilter () {
      const { periodUseRates: date } = this.queryParas
      // 处理时间格式
      if (date && date.length) {
        const [one, two] = date
        this.queryParas.effectiveDate = format.formatDateNull(one)
        this.queryParas.expirDate = format.formatDateNull(two)
      } else { // 不删除就会一直都在
        delete this.queryParas.effectiveDate
        delete this.queryParas.expirDate
      }
      this.loadCount++
    },
    // 弹窗
    showEdit (row, editModel) {
      this.item = {}
      this.editModel = editModel
      if (row !== '') {
        this.item.keyId = row.keyId
      }
      this.visible = true
    },
    // 删除
    del (keyId) {
      this.$confirm('此操作会删除选中数据，是否继续？', '提示', {
        type: 'warning'
      }).then(() => {
        rateApi.priceSysApi.del(keyId).then(res => {
          if (res.code === '0') {
            this.success('删除成功')
            this.handleFilter()
          }
        })
      })
    }
  },
  watch: {
    'queryParas.productType' (now, old) {
      if (now !== old) {
        this.queryParas.projectId = ''
        this.queryParas.coreEnterpriseId = ''
        this.queryParas.planningManagerId = ''
      }
    },
    'queryParas.projectId' (now, old) {
      if (now !== old) {
        this.queryParas.coreEnterpriseId = ''
        this.queryParas.planningManagerId = ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~@/styles/rate/priceSysList.scss';
</style>