<template>
  <div>
    <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="用户名" v-bind="formItemLayout">
                  <a-input @pressEnter="search" v-model="query.username" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="真实姓名" v-bind="formItemLayout">
                  <a-input
                    @pressEnter="search"
                    style="width: 100%"
                    v-model="query.realName"
                    placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="电话" v-bind="formItemLayout">
                  <a-input-number
                    @pressEnter="search"
                    style="width: 100%"
                    v-model="query.mobile"
                    placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="状态" v-bind="formItemLayout">
                  <a-select
                    placeholder="请选择状态"
                    v-model="query.available"
                    @change="this.onChangeStatus"
                    :allowClear="true">
                    <a-select-option
                      v-for="option in availabStatus"
                      v-bind:value="option.valueInt"
                      v-bind:key="option.id">
                      {{ option.name }}
                    </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-group>
            </div>
          </div>
          <div slot="footer" slot-scope="data">
            {{data.none}}
            <a-pagination
              @change="pageChange"
              :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" v-if="record.id!=1">
            <a @click="editRow(record)">编辑</a>
            <a-divider type="vertical"/>
            <a @click="resetPwd(record)">重置密码</a>
          </span>

          <span slot="tags" slot-scope="text, record">
            <a-switch
              :disabled="record.id == 1"
              checkedChildren="启用"
              unCheckedChildren="禁用"
              @click="setStatus(record)"
              :checked="record.available"
              :key="record.id"/>
          </span>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

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

  const dataSource = []
  const columns = [
    {title: '用户名', dataIndex: 'username', width: 120},
    {title: '真实姓名', dataIndex: 'realName', width: 90},
    {title: '联系电话', dataIndex: 'mobile', width: 100},
    {title: '邮箱', dataIndex: 'email', width: 150},
    {title: '备注', dataIndex: 'remark'},
    // {title: '创建人', dataIndex: 'ct_user_name', width:70},
    {
      title: '创建时间',
      dataIndex: 'ctDate',
      width: 120,
      sorter: true,
      customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
    },
    // {title: '修改人', dataIndex: 'lm_user_name',width:70},
    {
      title: '修改时间',
      dataIndex: 'lmDate',
      width: 140,
      sorter: true,
      customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
    },
    {title: '状态', dataIndex: 'available', width: 80, scopedSlots: {customRender: 'tags'}},
    // {title: '状态', dataIndex: 'available', width: 60, },
    {title: '操作', key: 'operation', width: 130, scopedSlots: {customRender: 'action'}}
  ];

  let detailPathName = 'sysuserdetail'

  export default {
    name: 'SysUserList',
    data() {
      return {
        query: {
          page: 1,
          size: 10,
          username: "",
          realName: "",
          mobile: "",
          available: "",
          order: "",
          sort: ""
        },
        total: 0,
        rowKey: "id",
        columns: columns,
        dataSource: dataSource,
        selectedRowKeys: [],
        selectedRows: [],
        coachList: [],
        currentEditDate: {},
        coachId: {},
        sysUserId: {},
        rowDate: {},
        availabStatus: {},

        formItemLayout: {
          labelCol: {
            sm: {span: 8},
          },
          wrapperCol: {
            sm: {span: 16},
          },
        }
      }
    },
    computed: {
      defaultPageSize: function () {
        return this.$defaultPageSize()
      }
    },
    methods: {
      search() {
        this.query.page = 1;
        this.loadData();
      },
      reset() {
        this.query.page = 1;
        this.query.username = "";
        this.query.realName = "";
        this.query.mobile = "";
        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();
      },
      setStatus(record) {
        changeStatus(record.id).then(response=> {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            this.loadData();
          }
        });
      },
      addNew() {
        this.editRow()
      },
      editRow(row) {
        this.$router.push({name: detailPathName, query: {id: row ? row.id : 0}})
      },
      updateSelect(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      onChangeStatus() {
        this.loadData();
      },
      resetPwd(rowData) {
        let _this = this;
        let contText = '确定重置[' + rowData.realName + ']的密码？'
        this.$confirm({
          title: '提示',
          content: contText,
          onOk() {
            resetPwd(rowData.id).then(response => {
              if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
                _this.$notification.success({
                  message: '系统提示',
                  description: "重置密码成功",
                  duration: 4,
                });
              }
            })
          },
          onCancel() {
          },
        });
      },
      getavailable() {
        getCommonCode([SYS_CONST.CODE.SYS_AVAILABLE_STATUS]).then(response => {
          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
            this.availabStatus = response.data.data[SYS_CONST.CODE.SYS_AVAILABLE_STATUS];
          }
        })
      },
    },
    mounted() {
      // 查询状态下拉菜单
      this.getavailable();

      this.loadData(this.defaultPageSize);
    },
    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>
