<!-- 资金用途 -->
<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{ $t('fundspurpose.chineseName') }}:</span>
        <el-input v-model="query.chineseName" style="width: 130px;" class="filter-item input_item"  />
      </div>
      <el-button v-waves class="filter-item" style="margin-right: 10px!important;" type="primary" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" style="margin-right: 10px!important;" type="primary" icon="el-icon-my-reset" @click="handleReset">
        {{ $t('table.reset') }}
      </el-button>
      <el-button v-if="permission.includes('funds_purpose_add')" v-waves class="filter-item add_plus" style="margin-right: 10px!important;" type="primary" icon="el-icon-my-add" @click="handleAction(0)">
        {{ $t('table.add') }}
      </el-button>
    </div>
    <!-- table -->
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        fit
        stripe
        class="numtable"
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :cell-class-name="cellClassName"
        :max-height="tableHeight"
        :cell-style="{ textAlign: 'left' }"
        :header-cell-style="{textAlign: 'left'}"
      >
        <el-table-column prop="chineseName" :label="$t('fundspurpose.chineseName')" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="englishName" :label="$t('fundspurpose.englishName')" align="left" show-overflow-tooltip></el-table-column>

        <el-table-column :label="$t('table.actions')" align="left"  width="240" class-name="small-padding ">
          <template slot-scope="{row}">
            <div class="btn-style">
                <el-button v-if="permission.includes('funds_purpose_update')" v-waves type="text" style="margin-left: 0;" icon="el-icon-my-modify" @click="handleAction(1, row)">修改</el-button>
                <!-- <el-button v-waves type="text" style="margin-left: 10px!important;" icon="el-icon-my-xiangqing" @click="handleAction(2, row)">详情</el-button> -->
                <el-button v-if="permission.includes('funds_purpose_del')" v-waves type="text" style="margin-left: 10px!important;" icon="el-icon-my-del-y" @click="handleAction(3, row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="queryLists" />
    <DialogFunds v-if="fundsVisile" ref="fundsRef" :visible.sync="fundsVisile" @refreshData="queryLists" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination';
import http from '@/api/http';

import { DialogFunds } from './components'
export default {
  // name: 'fundspurpose',
  components: {
    Pagination,
    DialogFunds
  },
  directives: { waves },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      fundsVisile: true,
      query: {
        chineseName: undefined, // 资金用途
        englishName: undefined // 资金用途英文名称
      },
      formData: {},
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableHeight: 0,
      tableData: [],
      orgList: [],
      industryList: [], // 所属行业
      cPairList: [], // 币种列表
      creditLevelList: []
    }
  },
  created() {
    this.queryLists();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    // 查询资金用途
    queryLists() {
      let { chineseName, englishName } = this.query
      let params = {
        cpage: this.pageNum,
        pageSize: this.pageSize,
        chineseName: chineseName,
        englishName: englishName
      }
      http.post('/share/fundingPurpose/list', params).then((res) => {
        let { list, total } = res.data
        this.tableData = list || []
        this.total = total
      }).catch(() => {})
    },
    details() {},
    // 查询
    handleSearch() {
      this.pageNum = 1
      this.queryLists()
    },
    // 重置
    handleReset() {
      this.pageNum = 1
      Object.keys(this.query).forEach((v) => {
        this.query[v] = undefined
      })
      this.queryLists()
    },

    // 操作
    handleAction(type, row) { // type 0新增 1修改 2详情
      this.fundsVisile = true
      this.$nextTick(() => {
        this.$refs.fundsRef.init(type, row)
      })
    },

    cellClassName({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return 'u-cell'
      } else if (columnIndex === 1) {
        return 'u-cell1'
      }
    },

    headerStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return 'u-cell tableStyle'
      } else if (columnIndex === 1) {
        return 'u-cell1 tableStyle'
      } else {
        return 'tableStyle'
      }
    },
  }
}
</script>

<style lang="scss" scoped>
// @import './table.scss';
.el-table ::v-deep .u-cell >.cell {
  padding-left: 192px;
}
.el-table ::v-deep .u-cell1 >.cell {
  padding-left: 50px;
}
// 按钮css
.btn-style {
  color: #3D5596;
  font-size: 12px;
  display: flex;
  .el-button {
    display: flex;
    align-items: center;
  }
}
</style>
