<template>
  <a-card class="cust-list-cart">
    <div>
      <a-form layout="horizontal" class="ant-advanced-search-form">
        <div>
          <a-row>
            <a-col :span="6">
              <a-form-item label="编码" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                <a-input @pressEnter="search" placeholder="请输入" v-model="query.code"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="名称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                <a-input @pressEnter="search" style="width: 100%" v-model="query.name" placeholder="请输入"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="状态" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                <a-select
                  placeholder="请选择状态"
                  v-model="query.available"
                  @change="onChangeStatus"
                  :allowClear="true">
                  <a-select-option v-for="option in availableStatus" :value="option.code" :key="option.code">
                    {{ option.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-table
        size="middle"
        @change="sortChange"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :rowKey="rowKey"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
        bordered
      >
        <div slot="title" slot-scope="data">
          <span class="cust-title">
            <a-icon type="hdd"/>角色管理列表{{data.none}}
          </span>
          <div class="cust-table-operator">
            <a-button-group>
              <a-button type="primary" @click="search">查询</a-button>
              <a-button @click="reset">重置</a-button>
              <a-button @click="addNew">新建</a-button>
              <!--<a-button @click="onDeleteBatch" type="danger">批量禁用</a-button>-->
            </a-button-group>
          </div>
        </div>
        <div slot="footer" slot-scope="data">
          {{data.none}}
          <a-pagination
            @change="pageChange"
            :current="query.page"
            :defaultPageSize="defaultPageSize"
            :pageSizeOptions="$pageSizeOptions"
            @showSizeChange="sizeChange"
            class="cust-pagination"
            size="small"
            :total="total"
            showSizeChanger
            showQuickJumper
            :showTotal="$showTotal"/>
        </div>
        <span slot="action" slot-scope="text, record">
          <a @click="editRow(record)">编辑</a>
        </span>
        <span slot="tags" slot-scope="text, record">
            <a-switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              @click="setStatus(record)"
              :checked="record.isEnabled"
              :key="record.id"/>
          </span>
      </a-table>
    </div>
  </a-card>
</template>

<script>
  import { getPage, changeStatus } from "@/api/system/sysRole";
  import {humpToLine, setOrder} from "@/util/util";
  import {getCommonCode} from "@/api/system/sysCode";

  let detailPathName = 'sysRoleDetail'
  const dataSource = []
  const columns = [
    {title: '角色编号', width: 100, sorter: true, dataIndex: 'code'},
    {title: '角色名称', width: 100, dataIndex: 'name'},
    {title: '备注', dataIndex: 'remark'},
    {title: '状态', dataIndex: 'available', width: 80, scopedSlots: {customRender: 'tags'}},
    {title: '操作', key: 'operation', width: 60, scopedSlots: {customRender: 'action'}}
  ]

  export default {
    name: 'SysRoleList',
    data() {
      return {
        isFirstLoad: true,
        query: {
          code: "",
          name: "",
          available: "",
          order: "",
          sort: "",
          page: 1,
          size: 10,
        },
        ctDatePicker: [],
        total: 0,
        rowKey: "id",
        columns: columns,
        dataSource: dataSource,
        selectedRowKeys: [],
        selectedRows: [],
        availableStatus: [],
      }
    },
    computed: {
      defaultPageSize: function () {
        return this.$defaultPageSize()
      }
    },
    methods: {
      search() {
        this.query.page = 1
        this.loadData();
      },
      reset() {
        this.query.page = 1
        this.query.code = "";
        this.query.name = "";
        this.query.available = "";
        this.loadData();
      },
      pageChange(page) {
        this.query.page = page;
        this.loadData();
      },
      sizeChange(current, size) {
        this.query.size = size;
        this.loadData();
      },
      loadData(pageSize) {
        if (pageSize && !isNaN(pageSize)) {
          this.query.size = pageSize
        }
        getPage(this.query).then(response => {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            let respData = response.data;
            this.total = respData.total;
            this.dataSource = respData.list;
          }
        });
      },
      sortChange(pagination, filters, sorter) {
        this.query.sort = humpToLine(sorter.field);
        this.query.order = setOrder(sorter.order);
        this.loadData();
      },
      addNew() {
        this.editRow()
      },
      editRow(row) {
        this.$router.push({name: detailPathName, query: {id: row ? row.id : 0}})
      },
      setStatus(record) {
        changeStatus(record.id).then(response=> {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            this.loadData();
          }
        });
      },
      updateSelect(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      onChangeStatus() {
        this.loadData();
      },
      getAvailable() {
        getCommonCode([SYS_CONST.CODE.SYS_AVAILABLE_STATUS]).then(response => {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            this.availableStatus = response.data[SYS_CONST.CODE.SYS_AVAILABLE_STATUS];
          }
        })
      },
    },
    mounted() {
      // 查询状态下拉菜单
      this.getAvailable();
    },
    activated() {
      if (this.isFirstLoad == true) {
        this.loadData(this.defaultPageSize)
        this.isFirstLoad = false
      } else {
        let isModify = this.$route.query.isModify
        if (isModify == true) {
          this.loadData()
        } else if (isModify != undefined) {
          this.loadData()
        }
      }

    }
  }
</script>
