<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-group ">
        <div class="filter-lable">
          企业名称：
        </div>
        <div class="filter-width">
          <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item"/>
        </div>
      </div>
      <div class="filter-group">
        <div class="filter-lable">
          属地：
        </div>
        <div class="filter-width">
          <el-cascader id="POSSESSION" ref="POSSESSION" v-model="POSSESSION" :options="areaList" :props="areaProps" placeholder="请选择属地"/>
          <!--            <el-date-picker v-model="dates" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" class="filter-item" />-->
        </div>
      </div>
      <div class="filter-group">
        <div class="filter-lable">
          有效期：
        </div>
        <div class="filter-width">
          <el-select v-model="VALIDITY" placeholder="请选择">
            <el-option v-for="item in validityList" :key="item.ID" :label="item.NAME" :value="item.ID" />
          </el-select>
        </div>
      </div>
      <div class="filter-group">
        <div class="filter-lable">
          交付日期：
        </div>
        <div class="filter-date">
          <el-date-picker v-model="dates" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" class="filter-item" />
        </div>
      </div>
      <div class="filter-group mr-10">
        <div class="filter-lable">
          开户人：
        </div>
        <div class="filter-width">
          <el-input v-model="CREATOR" placeholder="开户人" class="filter-item" />
        </div>
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
        重置
      </el-button>

    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="varList"
      :row-key="getRowKey"
      :header-cell-style="{
        'font-weight': 'bold',
        'color': '#000'
      }"
      tooltip-effect="dark"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        :reserve-selection="true"
        type="selection"
        width="55"
        align="center"/>
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="CORP_NAME" label="企业名称" />
      <el-table-column prop="CREATTIME" label="开户日期" />
      <el-table-column prop="DELIVERDATE" label="交付日期" />
      <el-table-column prop="USE_DATE_END" label="有效使用结束时间" />
      <el-table-column prop="CREATOR" label="开户人" />
      <el-table-column prop="COMPANY_AREA" label="所属区域" />
      <el-table-column prop="VIPLEVELNAME" label="会员级别" />
      <el-table-column label="操作" align="left">
        <template slot-scope="{row}">
          <el-button type="warning" icon="el-icon-plus" size="mini" @click="handleEdit(row.CORPINFO_ID)">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-btn-group">
      <div/>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      KEYWORDS: '',

      varList: [],
      form: { },
      areaList: [], // 属地
      areaProps: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        value: 'numValue',
        id: 'id',
        label: 'label',
        children: 'children',
        checkStrictly: true
      },
      dates: [],
      POSSESSION: [],
      validityList: [
        { 'ID': '30', 'NAME': '一个月' },
        { 'ID': '90', 'NAME': '三个月' }
      ],
      formList: [
        { 'ID': '1', 'NAME': '一年' },
        { 'ID': '2', 'NAME': '两年' },
        { 'ID': '3', 'NAME': '三年' },
        { 'ID': '4', 'NAME': '四年' },
        { 'ID': '5', 'NAME': '五年' }
      ],
      VALIDITY: '',
      CREATOR: '',
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [] // 当前页选中的数据
    }
  },
  created() {
    this.getList()

    this.getDictByDicId('e725d2a91b8248f4b8f49889038df7de').then(data => {
      this.areaList = data
    })
  },
  methods: {

    // 加载级联的方法
    lazyLoad(nodeValue, resolve) {
      if (nodeValue.data && (!nodeValue.children || nodeValue.children.length == 0)) {
        this.getDictByDicId(nodeValue.data.id).then(data => {
          resolve(data)
        })
      } else {
        resolve(null)
      }
    },
    getRowKey(row) {
      return row.CORPINFO_ID
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    // 获取列表
    getList() {
      this.listLoading = true
      this.POSSESSION
      var possession = ''
      var possessionLevel = ''
      if (this.POSSESSION && this.POSSESSION.length > 0) {
        possession = this.POSSESSION[this.POSSESSION.length - 1]
        possessionLevel = this.POSSESSION.length
      }
      requestFN(
        '/corpinfo/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS,
          CREATOR: this.CREATOR,
          ISSMALL: '2',
          PAGETYPE: '1',
          POSSESSION: possession,
          POSSESSIONLEVEL: possessionLevel,
          VALIDITY: this.VALIDITY,
          DELIVERSTARTTIME: this.dates[0],
          DELIVERENDTIME: this.dates[1]
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
        this.pd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 重置
    goKeyReset() {
      this.KEYWORDS = ''
      this.CREATOR = ''
      this.VALIDITY = ''
      this.dates = []
      this.POSSESSION = []

      this.getQuery()
    },

    // 修改
    handleEdit(ID) {
      this.$parent.CORPINFO_ID = ID
      this.$parent.activeName = 'VideoList'
    },

    // 获取数据字典数据
    getDictByDicId(dicId) {
      var dicListVal = []
      return new Promise((resolve) => {
        let id = ''
        if (!dicId) {
          id = '0'
        } else {
          id = dicId
        }
        requestFN(
          '/dictionaries/getLevelsAndSCount',
          {
            DICTIONARIES_ID: id
          }
        ).then((data) => {
          if (data.list.length > 0) {
            dicListVal = data.list.map((e) => {
              if (e.zcount == '0') {
                return { value: e.DICTIONARIES_ID.toString(), numValue: e.BIANMA.toString(), label: e.NAME, id: e.DICTIONARIES_ID, leaf: true }
              } else {
                return { value: e.DICTIONARIES_ID.toString(), numValue: e.BIANMA.toString(), label: e.NAME, id: e.DICTIONARIES_ID, children: [], leaf: false }
              }
            })
          } else {
            dicListVal = undefined
          }
          return resolve(dicListVal)
        }).catch((e) => {
        })
      })
    }
  }
}

</script>
<style>
  .el-table .yellow-row {
    background: rgba(248, 231, 28, 0.2);

  }

  .el-table .red-row {
    background: rgba(252, 2, 33, 0.2);
  }
  .el-table .green-row {
    background: rgba(26, 208, 22, 0.2);
  }

</style>
<style lang="sass" scoped>
  .filter-container
    position: relative
    .filter-flot
      position: absolute
      right: 0
      top: 0
</style>
