<!-- 上级公司 -->
<template>
  <el-dialog
    width='806px'
    title="上级公司"
    :visible.sync="innerVisible"
    v-el-drag-dialog
    :close-on-click-modal="false"
    append-to-body>
    <div class="view-company">
      <!-- 搜索区域 -->
      <div class="filter-container">
        <div class="container_item">
          <span class="item_text">集团编号：</span>
          <el-input v-model="query.custCode" style="width: 130px;" class="filter-item input_item"  />
        </div>
        <div class="container_item">
          <span class="item_text">集团名称：</span>
          <el-input v-model="query.custName" style="width: 130px;" class="filter-item input_item"  />
        </div>
        <el-button v-waves class="" type="primary" icon="el-icon-my-search" @click="handleSearch">
          {{ $t('table.search') }}
        </el-button>
        <el-button v-waves class="" type="primary" icon="el-icon-my-reset" @click="handleReset">
          {{ $t('table.reset') }}
        </el-button>
      </div>
      <!-- table -->
      <div class="wrapper_table">
        <el-table
          v-loading="loading"
          :data="tableData"
          fit
          stripe
          class="numtable"
          highlight-current-row
          style="width: 100%;"
          :header-cell-class-name="headerStyle"
          :cell-style="{ textAlign: 'left' }"
          :header-cell-style="{textAlign: 'left'}">
          <el-table-column label="" width="74">
            <template slot-scope="{row}">
              <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
                <el-radio v-model="treeCode" :label="row.treeCode" @change="radioChange(row)">{{  }}</el-radio>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="custCode" label="集团编号" width=""></el-table-column>
          <el-table-column prop="custName" label="集团名称" width="300" show-overflow-tooltip></el-table-column>
          <el-table-column prop="custType" label="集团类型" width="">
            <template slot-scope="{row}">
              {{ row.custType | custTypeFilter }}
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="queryGroupLists" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination';
import http from '@/api/http';
export default {
  data() {
    return {
      loading: false,
      innerVisible: false,
      total: 0,
      pageNum: 1,
      pageSize: 5,
      tableData: [],
      treeCode: undefined,
      query: {
        custCode: undefined,
        custName: undefined
      }
    }
  },
  directives: { waves, elDragDialog },
  filters: {
    custTypeFilter(custType) {
      const custTypeMap = {
        // 1单一公司，2母公司，3子公司，4分公司
        1: '单一公司',
        2: '母公司',
        3: '子公司',
        4: '分公司',
      }
      return custTypeMap[custType]
    },
  },
  components: {
    Pagination
  },
  methods: {
    init(treePcode) {
      this.innerVisible = true
      this.treeCode = treePcode
      this.$nextTick(() => {
        this.queryGroupLists()
      })
    },

    queryGroupLists() {
      this.loading = true
      let params = {
        cpage: this.pageNum,
        pageSize: this.pageSize,
        custType: 2
      }
      params = Object.assign(params, this.query)
      http.post('/cust/queryGroupLists', params).then((res) => {
        this.loading = false
        this.tableData = res.data.list || []
        this.total = res.data.total || 0
      }).catch(() => { this.loading = false })
    },

    // 查询
    handleSearch() {
      this.pageNum = 1
      this.queryGroupLists()
    },
    // 重置
    handleReset() {
      this.pageNum = 1
      Object.keys(this.query).forEach((v) => {
        this.query[v] = undefined
      })
      this.queryGroupLists()
    },
    radioChange(row) {
      this.innerVisible = false;
      this.$emit('dataBack', row)
    },
    headerStyle() {
      return 'tableStyle'
    },
  }
}
</script>

<style lang="scss" scoped>
.view-company {
  padding: 16px 30px;
}
.el-table {
  color: #212121!important;
  ::v-deep .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
  // ::v-deep .tableStyle {
  //   background: url('~@/assets/images/tabhead1.png') no-repeat;
  //   background-position: 10% 0;
  //   height: 36px;
  //   font-size: 13px;
  //   font-family: 'SourceHanSansCN'!important;
  //   font-weight: 500;
  //   color: #FFFFFF;
  //   line-height: 26px;
  //   text-shadow: 0px 1px 1px #252F60;
  //   background-size: auto 110%;
  // }
}
.el-table ::v-deep .cell {
  font-size: 13px!important;
}
.el-radio ::v-deep .el-radio__inner {
  width: 16px;
  height: 16px;
  border: 1px solid #BDBDBD;
}
.is-checked ::v-deep .el-radio__inner {
  border: 1px solid #3D5596!important;
  background: #3D5596!important;
}

</style>
