<!-- 客户基本信息 -->
<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{ $t('industry.indCode') }}：</span>
        <el-input v-model="query.indCode" style="width: 130px;" class="filter-item input_item"  />
      </div>
      <div class="container_item">
        <span class="item_text">{{ $t('industry.indName') }}：</span>
        <el-input v-model="query.indName" 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-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"
        :max-height="tableHeight"
        :cell-style="{ textAlign: 'left' }"
        :header-cell-style="{textAlign: 'left'}"
      >
        <el-table-column prop="indCode" :label="$t('industry.indCode')" align="left" ></el-table-column>
        <el-table-column prop="indName" width="280" :label="$t('industry.indName')" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="indLevel" width="" :label="$t('industry.indLevel')" align="left"></el-table-column>
        <el-table-column prop="indPcode" width="" :label="$t('industry.indPcode')" align="left"></el-table-column>

        <el-table-column :label="$t('table.actions')" align="left"  width="200" class-name="small-padding ">
          <template slot-scope="{row}">
            <div class="btn-style">
                <el-button v-waves type="text" style="margin-left: 0;" icon="el-icon-my-biangeng" @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-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" />
    <DialogIndustry v-if="industryVisile" ref="industryRef" :visible.sync="industryVisile" @refreshData="queryLists" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import waves from '@/directive/waves'
import http from '@/api/http';

import { DialogIndustry } from './components'
export default {
  // name: 'industry',
  components: {
    Pagination,
    DialogIndustry
  },
  directives: { waves },
  data() {
    return {
      industryVisile: true,
      query: {
        indCode: undefined, // 行业编号
        indName: undefined // 行业名称
      },
      formData: {},
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableHeight: 0,
      tableData: [],
      orgList: [],
      industryList: [], // 所属行业
      cPairList: [], // 币种列表
      creditLevelList: []
    }
  },
  created() {
    this.queryLists();
    // this.orgQueryLists(); // 机构列表查询
    // this.findIndustryList(); // 行业查询
    // this.queryCpairList();
    // this.querycCreditLevelList()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    // 组织机构下拉列表
    orgQueryLists() {
      http.post('/sys/org/queryLists', { cpage: 1, pageSize: 99 }).then((res) => {
        this.orgList = res.data.list || []
      }).catch(() => {})
    },

    // 查询企业行业信息列表
    findIndustryList() {
      http.post('/cust/industry/findList', {  }).then((res) => {
        this.industryList = res.data.list || []
      }).catch(() => {})
    },

    // 查询币种信息列表
    queryCpairList() {
      http.post('/share/currency/queryList',  { cpage:1, pageSize: 99 }).then((res) => {
        this.cPairList = res.data.list || []
      }).catch(() => {})
    },

    // 查询客户信息列表
    querycCreditLevelList() {
      http.post('/cust/creditLevel/list',  { cpage:1, pageSize: 99 }).then((res) => {
        this.creditLevelList = res.data.list || []
      }).catch(() => {})
    },

    // /cust/industry/findList
    // 查询企业行业信息列表

    queryLists() {
      let { indCode, indName } = this.query
      let params = {
        cpage: this.pageNum,
        pageSize: this.pageSize,
        indCode: indCode,
        indName: indName
      }
      http.post('/cust/industry/findList', params).then((res) => {
        let { list, total } = res.data
        this.tableData = list || []
        this.total = total
      }).catch(() => {})
    },
    // POST
    // /cust/queryTreeLists
    // 查询企业树信息列表
    // POST
    // /cust/update
    // 更新企业信息

    // 获取初始数据
    // initData() {},
    // 详情
    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.industryVisile = true
      this.$nextTick(() => {
        this.$refs.industryRef.init(type, row)
      })
    },

    headerStyle() {
      return 'tableStyle'
    },
  }
}
</script>

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