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

        <el-table-column prop="custType" width="" :label="$t('customer.custType')" align="left">
          <template slot-scope="{row}">
            {{ row.custType | custTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="foundedTime" width="150" :label="$t('customer.foundedTime')" align="left">
          <template slot-scope="{row}">{{ row.foundedTime | timeSlice}}</template>
        </el-table-column>
        <el-table-column prop="custIndustryName" width="160" :label="$t('customer.industry')" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="scaleGrade" width="" :label="$t('customer.scaleGrade')" align="left">
          <template slot-scope="{row}">
            {{ row.scaleGrade | scaleFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="legalPerson" width="" :label="$t('customer.legal')" align="left"></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('customer_baseInfo_update')" v-waves type="text" style="margin-left: 0;" icon="el-icon-my-modify" @click="handleAction(1, row)">修改</el-button>
                <el-button v-if="permission.includes('customer_baseInfo_detail')" v-waves type="text" style="margin-left: 10px!important;" icon="el-icon-my-xiangqing" @click="handleAction(2, row)">详情</el-button>
                <el-button v-if="row.custType !== 1 && permission.includes('customer_baseInfo_enterprise_tree')" v-waves type="text" style="margin-left: 10px!important;" icon="el-icon-my-qiyeshu" @click="enterpriseTreeHand(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" />
    <DialogAction v-if="actionVisile" ref="actionRef" :visible.sync="actionVisile" @refreshData="queryLists" />
    <DialogEnteroriseTree v-if="entTreeVisile" ref="entTreeRef" :visible.sync="entTreeVisile" />
  </div>
</template>

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

import { DialogAction, DialogEnteroriseTree } from './components'
export default {
  name: 'customerBaseInfo',

  components: {
    Pagination,
    DialogAction,
    DialogEnteroriseTree
  },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  directives: { waves },
  filters: {
    custTypeFilter(custType) {
      const custTypeMap = {
        // 1单一公司，2母公司，3子公司，4分公司
        1: '单一公司',
        2: '母公司',
        3: '子公司',
        4: '分公司',
      }
      return custTypeMap[custType]
    },
    scaleFilter(scale) {
      const scaleMap = {
        // 企业规模等级1特大,2大型,3中性,4小型,5微型
        1: '特大型',
        2: '大型',
        3: '中型',
        4: '小型',
        5: '微型',
      }
      return scaleMap[scale]
    }
  },
  data() {
    return {
      actionVisile: true,
      entTreeVisile: false,
      query: {
        custCode: undefined, // 客户编号
        custName: 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/queryAllTree', {}).then((res) => {
        this.orgList = res.data || []
      }).catch(() => {})
    },

    // 查询企业行业信息列表
    findIndustryList() {
      let params = {
        indLevel: 1,
        cpage: 1,
        pageSize: 99
      }
      http.post('/cust/industry/findList', params).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(() => {})
    },

    // 企业树
    enterpriseTreeHand(row) {
      this.entTreeVisile = true
      this.$nextTick(() => {
        this.$refs.entTreeRef.init(row)
      })
    },

    queryLists() {
      let { custName, custCode } = this.query
      let params = {
        cpage: this.pageNum,
        pageSize: this.pageSize,
        custName: custName,
        custCode: custCode
      }
      http.post('/cust/queryLists', 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.actionVisile = true
      this.$nextTick(() => {
        this.$refs.actionRef.init(type, row, this.orgList, this.industryList, this.cPairList, this.creditLevelList)
      })
    },

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

<style lang="scss" scoped>
@import './table.scss';

</style>
