<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-toolbar>
      <el-col :span="14">
        <el-button @click="addClick" priv="SocialMedia.AccountType.Add">
          <i class="fa fa-plus"></i>新建
        </el-button>
      </el-col>
      <!-- <el-col :span="10" class="search-box-r tool-search-box-r">
        <el-input v-model="searchs.name" placeholder="请输入名称" class="search-bar-algin-toolbar" @keyup.enter.native="searchClickHandler"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchClickHandler" title="搜索"></i></span>
      </el-col> -->
    </el-toolbar>
    <div class="">
      <el-table ref="refTypeTable" :data-read-url="accountTypeData" class="dimensionality-table" :page-size="20" tooltip-effect="dark">
        <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <a class="list-card-title" href="javascript:void(0)" @click.stop="editClick(scope.row.ID)">
              <i :class="scope.row.icon" aria-hidden="true"></i> {{scope.row.name}}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="别名" width="120"></el-table-column>
        <el-table-column prop="addUser" label="添加用户" width="180" align="center"></el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.addTime|fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="136" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="editClick(scope.row.ID)" type="text" priv="SocialMedia.AccountType.Edit" title="编辑">
              <i class="fa fa-edit f16"></i></el-button>
            <el-button @click.stop="sortClick(scope.row.ID)" type="text" priv="SocialMedia.AccountType.Edit" title="排序">
              <i class="fa fa-sort f16"></i></el-button>
            <el-button @click.stop="deleteClick(scope.row.ID)" type="text" priv="SocialMedia.AccountType.Delete" title="删除">
              <i class="fa fa-times f16"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="账号分类排序" :append-to-body="true" :visible.sync="isShowModal" class="sort-act-dlg">
      <div class="sort-order-input">移动<el-input-number v-model="move"></el-input-number>位</div>
      <div class="sort-input-hint">填正数表示向<span>上</span>移动，负数表示向<span>下</span>移动</div>
      <div slot="footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" v-loading="submitLoading" @click="doSort">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import util from '../../common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      isShowModal: false,
      cid: '',
      move: 1,
      submitLoading: false
    }
  },
  methods: {
    // 排序
    sortClick(id) {
      this.move = 1
      this.isShowModal = true
      this.cid = id
    },
    // 编辑账号分类
    editClick(ID) {
      this.$router.push({ path: `/socialmedia/accountTypeForm/${ID}` })
    },
    // 添加账号分类
    addClick() {
      this.$router.push({ path: '/socialmedia/accountTypeForm/new' })
    },
    // 加载账号分类列表数据
    accountTypeData() {
      return ['/ui/accounttypes', { params: {} }]
    },
    // 刷新表格数据
    accountTypeList() {
      this.$refs.refTypeTable.getData()
    },
    // 删除账号分类
    async deleteClick(ID) {
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        let res = await axios.delete(`/ui/accounttypes/${ID}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.accountTypeList()
        }
      } catch (e) {
        // util.showErrorNotification(e)
      }
    },
    async doSort() {
      try {
        this.submitLoading = true
        var params = { move: this.move }
        let res = await axios.put(`/ui/accounttypes/${this.cid}/sort`, params)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.isShowModal = false
          this.accountTypeList()
        }
      } catch (e) {
        util.showErrorNotification(e)
      }
      this.submitLoading = false
    }
  }
}
</script>
<style scoped>
.dimensionality-table .list-card-title {
  font-size: 14px;
}
</style>
<style>
.sort-act-dlg .sort-order-input {
  margin-left: 65px;
}
.sort-act-dlg .sort-order-input .el-input-number {
  margin: 0px 2px 0px 2px !important;
}
.sort-act-dlg .sort-input-hint {
  margin-top: 2px;
  margin-left: 53px;
}
.sort-act-dlg .sort-input-hint span {
  color: #ff6600;
}
.sort-act-dlg .el-dialog {
  width: 400px;
}
@media (max-width: 480px) {
  .sort-act-dlg .el-dialog {
    width: 96%;
  }
}
</style>
