<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div v-if="!customerServiceDialogVisible">
      <div class="filter-container" ref="filter-container">
        <el-form :inline="inline" ref="queryForm" :model="listQuery" label-width="100px">
        </el-form>
        <!--        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>-->
        <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
                   type="primary" icon="edit">添加
        </el-button>
      </div>
      <el-table :key='tableKey' :data="list" border fit highlight-current-row
                style="width: 100%">
        <el-table-column
          type="index"
          align="center" label="序号" width="65">
        </el-table-column>
        <el-table-column width="200" align="center" label="客服名称">
          <template scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="客服电话">
          <template scope="scope">
            <span>{{scope.row.telphone}}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="客服密码">
          <template scope="scope">
            <span>{{scope.row.password}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间">
          <template scope="scope">
            <span>{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" label="操作" fixed="right">
          <template scope="scope">
            <el-button size="small" class="el-button el-button--text el-button--small" @click="handleUpdate(scope.row)">
              {{'编辑'}}
            </el-button>
            <el-button class="el-button el-button--text el-button--small" style="color:red;" size="small"
                       @click="deleteHandler(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <!-- 友情连接 -->
<!--    <FriendLink v-if="friendLinkDialogVisible" :oneRow="oneRow" :title="modalTitle"
                v-on:friendLinkDialogEvent="friendLinkDialogEvent"></friendLink>-->
   <customerService v-if="customerServiceDialogVisible" :oneRow="oneRow" :title="modalTitle" v-on:customerServiceDialogEvent="customerServiceDialogEvent"></customerService>

  </div>
</template>

<script>

    import {mapGetters} from 'vuex';
    import {
        page
    } from '../../../api/admin/userManagement/customerservice';

    import ElRow from "element-ui/packages/row/src/row";
    import ElCol from "element-ui/packages/col/src/col";
    import {timestamp2Date} from 'src/utils/dateUtils';


    import {deleteById} from "../../../api/admin/userManagement/customerservice";
    import customerService from "src/views/userManagement/imCustomerServiceManger/model/customerServiceModel";

    export default {
        name: 'customerServiceManager',
        components: {
            customerService,
            ElCol,
            ElRow
        },
        data() {
            return {
                modalTitle: "创建",
                BASE_API: process.env.BASE_API,
                customerServiceDialogVisible: false,//添加、编辑弹框
                showLoadingBody: false,
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10,
                },
                inline: true,
                textMap: {
                    update: '编辑',
                    create: '创建'
                },
                labelForm: {},
                tableKey: 0
            }
        },
        created() {
            this.page()
        },
        methods: {
            /**
             * 添加
             * */
            handleCreate() {
                this.modalTitle = '创建';
                this.oneRow = {};
                this.customerServiceDialogVisible = true;
            },
            /**
             *  上下架
             */
            upStatus(row, onState) {
                updateOnstateById(row.id, onState).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.page();
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 删除
             * */
            deleteHandler(row) {
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteById(row.id,row.imUserId).then(response => {
                        if (response.status === 200) {
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.page();
                        } else {
                            this.$notify({
                                title: '删除失败',
                                message: '操作失败！',
                                type: 'error',
                                duration: 2000
                            });
                        }
                    });
                })
            },

            /**
             * 编辑
             * */
            handleUpdate(row) {
                this.modalTitle = '编辑';
                this.oneRow = row;
                this.customerServiceDialogVisible = true;
            },
            /**
             * modal传递回来的数据
             * */
            customerServiceDialogEvent(e) {
                this.customerServiceDialogVisible = false;
                if (e) {
                    //编辑成功-重新加载列表
                    this.page();
                }
            },

            /**
             * 获取
             * */
            page() {
                this.listLoading = true;
                page(this.listQuery).then(response => {
                    let totalCountRs = undefined;
                    let listRs = undefined;
                    if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
                        listRs = response.data.data;
                        totalCountRs = response.data.totalCount;
                        listRs.map(function (item) {
                                item.createTime = timestamp2Date(item.createTime);
                        });
                    }

                    this.listLoading = false;
                    this.list = listRs;
                    this.total = totalCountRs;
                })

            },
            handleFilter() {
                this.listQuery.page = 1;
                this.$refs.queryForm.validate(valid => {
                    if (valid) {
                        this.getList();
                    } else {
                        return false;
                    }
                });
            },
            handleSizeChange(val) {
                this.listQuery.limit = val;
                this.page();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.page();
            }
        }
    }
</script>
