<template>
  <div class="app-container">
    <addModal ref="addModel" @success="modalSuccess" />
    <div style="margin-bottom: 20px;">
      <el-input v-model="form.companyName" placeholder="公司名" style="width: 256px;margin-left: 20px;" class="filter-item" />
      <el-button class="filter-item" type="primary" style="margin-left: 20px;" icon="el-icon-search" @click="query">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 20px;" type="primary" icon="el-icon-plus" @click="handleCreate">
        添加
      </el-button>
      <el-button
        class="el-icon-download form-item-style"
        type="text"
        @click="downloadDoc"
      >
        开发文档
      </el-button>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ ((pagination.current - 1) * pagination.pageSize) + (scope.$index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="公司名">
        <template slot-scope="scope">
          {{ scope.row.companyName }}
        </template>
      </el-table-column>
      <el-table-column label="token">
        <template slot-scope="scope">
          {{ scope.row.token }}
        </template>
      </el-table-column>
      <el-table-column label="区域">
        <template slot-scope="scope">
          {{ scope.row.areaName }}
        </template>
      </el-table-column>
      <el-table-column label="数据源">
        <template slot-scope="scope">
          {{ scope.row.dataSource }}
        </template>
      </el-table-column>
      <el-table-column label="联系人">
        <template slot-scope="scope">
          {{ scope.row.contactPerson }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="派出所">
        <template slot-scope="scope">
          {{ scope.row.pcsName }}
        </template>
      </el-table-column>
      <el-table-column label="派出所编码">
        <template slot-scope="scope">
          {{ scope.row.pcsCode }}
        </template>
      </el-table-column>
      <el-table-column label="场景">
        <template slot-scope="scope">
          {{ scope.row.scene }}
        </template>
      </el-table-column>
      <el-table-column label="调用次数">
        <template slot-scope="scope">
          {{ scope.row.usedReqTimes }}
        </template>
      </el-table-column>
      <el-table-column label="调用次数上限">
        <template slot-scope="scope">
          {{ scope.row.reqTimesLimit }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status | statusFilterStr }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
            删除
          </el-button>
          <template>
            <el-button v-if="row.status" size="mini" type="danger" @click="statusChange(row, false)">停用</el-button>
            <el-button v-else size="mini" type="danger" @click="statusChange(row, true)">启用</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pagination.total"
      :page.sync="pagination.current"
      :limit.sync="pagination.pageSize"
      :page-sizes="pagination.pageSizeOptions"
      :layout="pagination.layout"
      @pagination="handleSizeChange"
    />
  </div>
</template>

<script>
import AddModal from './modal/AddModal.vue'
import tableMixins from '@/mixins/tableMixins'
import { getList, updateStatusById, deleteById } from '@/api/auth'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination, AddModal },
  filters: {
    statusFilter(status) {
      return status ? 'success' : 'info'
    },
    statusFilterStr(status) {
      return status ? '已启用' : '已停用'
    }
  },
  mixins: [tableMixins],
  data() {
    return {
      form: {}
    }
  },
  methods: {
    initData() {
      this.getTableList()
    },
    downloadDoc() {
      window.location.href = 'https://tx.hz-hanghui.com:8088/hanghui-server-platform/static/%E6%94%AF%E4%BB%98%E5%AE%9D%E4%B8%89%E8%A6%81%E7%B4%A0%E6%8E%88%E6%9D%83%E5%AF%B9%E6%8E%A5%E6%96%87%E6%A1%A3.docx'
    },
    // 获取表格数据
    async getTableList() {
      this.tableLoading = true
      try {
        const result = await getList(this.getFilterParams())
        this.setDataList(result.data)
      } catch (e) {
        console.log(e)
      } finally {
        this.tableLoading = false
      }
    },
    // 获取筛选信息
    query() {
      this.clearPageParams()
      this.getTableList()
    },
    // 增加筛选条件
    transformFilterForm() {
      return {
        companyName: this.form.companyName || null
      }
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams()
      }
      this.getTableList()
    },
    handleCreate() {
      this.$refs.addModel.open()
    },
    handleUpdate(row) {
      this.$refs.addModel.open(Object.assign({}, row))
    },
    statusChange(row, status) {
      const that = this
      this.$confirm(`确定 ${status ? '启用授权' : '停用授权'} 操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            instance.confirmButtonText = '提交中...'
            try {
              await updateStatusById(row.id, status)
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              that.getTableList()
            } catch (e) {
              // this.$message({
              //   type: 'error',
              //   message: '删除失败!'
              // })
            } finally {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
                instance.cancelButtonLoading = false
              }, 300)
            }
          } else {
            done()
          }
        }
      }).then(() => {}).catch(() => {})
    },
    handleDelete(row, index) {
      const that = this
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            instance.confirmButtonText = '提交中...'
            try {
              await deleteById(row.id)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              that.getTableList()
            } catch (e) {
              // this.$message({
              //   type: 'error',
              //   message: '删除失败!'
              // })
            } finally {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
                instance.cancelButtonLoading = false
              }, 300)
            }
          } else {
            done()
          }
        }
      }).then(() => {}).catch(() => {})
    }
  }
}
</script>
