<template>
  <div class="content">
    <el-card shadow="never">
      <div class="project-name">
        <p>{{projectName}} - 资源文件 - 账户</p>
      </div>
      <div class="search-header">
        <div class="tool-common-wrap">
          <div class="search-wrap">
            <quick-query ref="quick" :placeholder="placeholder" :is-date="false" @quickSearch="quickSearch" />
          </div>
          <div class="btn-wrap">
            <el-button type="primary" @click="userHandle('add')">添加</el-button>
            <el-button type="primary" @click="rest()"> 刷新</el-button>
          </div>
        </div>
      </div>
      <el-form
        ref="searchForm"
        class="power-search"
        :model="searchForm"
        v-if="isPowerSearch"
        label-width="120px"
        size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="登录名">
              <el-input clearable v-model="searchForm.empuid" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示名称">
              <el-input clearable v-model="searchForm.cnname" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input clearable v-model="searchForm.email" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-r">
            <el-button type="primary">查询</el-button>
            <el-button type="primary">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableList"
        @filter-change="filterTag"
        v-loading="tableLoading"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%; margin: 15px 0">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="账户名称" show-overflow-tooltip />
        <el-table-column prop="username" label="用户名" show-overflow-tooltip />
        <!--<el-table-column prop="projectId" label="关联项目ID" show-overflow-tooltip/>-->
        <el-table-column prop="type" label="账户类型" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="编辑" :enterable="false" placement="top">
              <el-button
                class="icon-button"
                type="text"
                icon="el-icon-edit-outline"
                @click.native.prevent="userHandle('edit', scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" :enterable="false" placement="top">
              <el-button
                class="icon-button"
                type="text"
                icon="el-icon-delete"
                @click.native.prevent="handleDelete(scope.row)">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 15px"
        :page-size="page.pageSize"
        :current-page.sync="page.pageNum"
        background
        :total="page.total"
        @current-change="getData" />
    </el-card>
    <user-add v-model="dialogVisible" :checkItem="checkItem" @confirm="getData" />
  </div>
</template>

<script>
import { queryStaticAccount, deleteAccount } from '@/api/esb_service'
import UserAdd from './AccountAdd'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'// 列表操作需要依赖
import QuickQuery from '@/components/quickquery/QuickQuery'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceListMixins],
  components: {
    UserAdd,
    QuickQuery
  },
  data() {
    return {
      // 高级搜索框
      isPowerSearch: false,
      searchForm: {},
      tableLoading: false,
      tableList: [],
      dialogVisible: false,
      checkItem: {},
      quickQueryKeys: ['username', 'name'],
      sort: {
        orderby: 'id',
        sort: 'desc'
      },
      placeholder: '账户名称'
    }
  },
  computed: {
    ...mapGetters(['projectID', 'projectName'])
  },
  created() {
    this.setProjectID(localStorage.getItem('projectID'))
    this.setProjectName(localStorage.getItem('projectName'))
  },
  mounted() {
  },
  methods: {
    ...mapMutations(['setProjectID', 'setProjectName']),
    // 根据选中下拉菜单状态查询数据
    filterTag(filter) {
      this.status = filter.status ? filter.status[0] : ''
      this.getData()
    },
    async getData() {
      this.tableLoading = true
      queryStaticAccount({
        logic: this.logic,
        filters: this.filters,
        ...this.sort,
        ...this.page
      }).then((rt) => {
        this.tableList = rt.data.list || []
        this.page.total = rt.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    userHandle(type, item) {
      this.checkItem = type === 'add' ? {} : Object.assign({}, item)
      this.dialogVisible = true
    },
    handleDelete(data) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        deleteAccount(data.id).then((rt) => {
          this.tableLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData()
        }).catch(e => {
          this.tableLoading = false
        })
      }).catch(() => {
      })
    },
    quickQueryData() {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding: 10px 10px;
}
</style>
