<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="请选择属地"/>
        </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 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="REMAININGTIME" label="剩余天数" />
      <el-table-column label="操作" align="left" width="300">
        <template slot-scope="{row}">
          <el-button type="success" icon="el-icon-finished" size="mini" @click="todoSendMsg(row)">短信提醒</el-button>
          <el-button class="pink-btn " icon="el-icon-finished" size="mini" @click="showSendLog(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>

    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      :before-close="handleClose"
      :append-to-body="true"
      title="提醒记录"
      width="60%">
      <el-table :data="remindList" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="CREATOR" label="发布人" width="200" />
        <el-table-column prop="CREATTIME" label="发布时间" width="150" />
        <el-table-column prop="TYPE" label="提醒类型" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span v-if="row.TYPE === 1">自动</span>
            <span v-else>手动</span>
          </template>
        </el-table-column>
        <el-table-column prop="REMAININGTIME" label="提醒阶段" width="150" />
      </el-table>
      <div class="page-btn-group">
        <div/>
        <pagination :total="remindTotal" :page.sync="remindListQuery.page" :limit.sync="remindListQuery.limit" @pagination="showSendLog(CORPINFO_ID)" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeWindow">取 消</el-button>
      </div>
    </el-dialog>
  </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: [],
      areaList: [], // 属地
      areaProps: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        value: 'numValue',
        id: 'id',
        label: 'label',
        children: 'children',
        checkStrictly: true
      },
      POSSESSION: [],
      validityList: [
        { 'ID': '15', 'NAME': '15天' },
        { 'ID': '30', 'NAME': '一个月' },
        { 'ID': '90', 'NAME': '三个月' }
      ],
      VALIDITY: '',
      CREATOR: '',
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据

      visible: false,
      CORPINFO_ID: '',
      remindListQuery: {
        page: 1,
        limit: 10
      },
      remindTotal: 0,
      remindList: []
    }
  },
  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/usedList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS,
          CREATOR: this.CREATOR,
          POSSESSION: possession,
          POSSESSIONLEVEL: possessionLevel,
          VALIDITY: this.VALIDITY
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
      }).catch((e) => {
        this.listLoading = false
      })
    },
    todoSendMsg(row) {
      this.$confirm('确定要为[' + row.CORP_NAME + ']发送短信吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestFN(
          '/corpinfo/todoSendMsg',
          {
            CORPINFO_ID: row.CORPINFO_ID,
            LR_NAME: row.CONTACTS,
            LR_MOBILE: row.CONTACTS_PHONE,
            REMAININGTIME: row.REMAININGTIME
          }
        ).then(() => {
          this.$message({
            message: '发送成功',
            type: 'success'
          })
        }).catch((e) => {
        })
      })
    },

    showSendLog(CORPINFO_ID) {
      requestFN(
        '/corpinfo/remindList?showCount=' + this.remindListQuery.limit + '&currentPage=' + this.remindListQuery.page,
        {
          CORPINFO_ID: CORPINFO_ID
        }
      ).then((data) => {
        this.remindList = data.varList
        this.remindTotal = data.page.totalResult
        this.visible = true
        this.CORPINFO_ID = CORPINFO_ID
      }).catch((e) => {
        this.listLoading = false
      })
    },
    handleClose() {
      this.remindListQuery = {
        page: 1,
        limit: 10
      }
      this.remindTotal = 0
      this.remindList = []
      this.CORPINFO_ID = ''
      this.visible = false
    },
    closeWindow() {
      this.handleClose()
    },
    // 重置
    goKeyReset() {
      this.KEYWORDS = ''
      this.CREATOR = ''
      this.VALIDITY = ''
      this.POSSESSION = []

      this.getQuery()
    },

    // 获取数据字典数据
    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>
