<template>
    <div>
        <div class="sf-right-button-box common-right-button-box">
            <el-select v-model="storeType" @change="selectByType" size="small">
                <el-option
                    v-for="(type, index) in typeArr"
                    :key="type"
                    :label="type"
                    :value="index">
                </el-option>
            </el-select>
            <el-select v-model="storeStatus" @change="selectByStatus" size="small">
                <el-option label="全部状态" value=""></el-option>
                <el-option label="正常" :value="1"></el-option>
                <el-option label="停业整顿" :value="3"></el-option>
            </el-select>
            <el-button style="vertical-align: middle;" class="J_show-children" size="small"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
        </div>
        <el-table
            ref="clerkViewTable"
            class="diy-table"
            height="445"
            :data="tableData">
            <el-table-column
                label="门店"
                width="125"
            >
                <template slot-scope="scope">
                    <div>
                        <p class="m-b-10">{{scope.row.storeName}}</p>
                        <p><a class="a-href" :href="'#/addClerk?storeId='+scope.row.storeId">新增店员</a></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="门店code"
                prop="storeCode"
                width="125"
            ></el-table-column>
            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <ul class="diy-header">
                        <li class="name">姓名</li>
                        <li class="phone">手机号</li>
                        <li class="position">职位</li>
                        <li class="status">状态</li>
                        <li>操作</li>
                    </ul>
                </template>
                <template slot-scope="scope">
                    <ul>
                        <li v-for="clerk in scope.row.clerks" :key="clerk.employeeClerkId" class="clerk-obj-li">
                            <div class="clerk-name clerk-cell">
                                <el-radio :value="1" :label="clerk.isManager" @change="changeManager(scope.row, clerk)">{{clerk.name}}</el-radio>
                                <span class="manager" v-if="clerk.isManager == 1">店长</span>    
                            </div>
                            <div class="clerk-cell clerk-phone">{{clerk.phoneNumber}}</div>
                            <div class="clerk-cell clerk-position">{{clerk.positionName}}</div>
                            <div class="clerk-cell clerk-status">
                                <div class="status-icon" :class="clerk.status == 1 ? 'is-active' : ''">
                                    <i class="iconfont icon-shouji"></i>
                                </div>
                            </div>
                            <div class="clerk-cell clerk-handle">
                                <a class="a-href m-r-20" :href="'#/addClerk?storeId='+scope.row.storeId + '&clerkId=' + clerk.employeeClerkId">编辑</a>
                                <a class="a-href" @click="delClerk(clerk, scope.row)">删除</a>
                            </div>
                        </li>
                    </ul>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
    name: "clerkView",
    props: {
        tableData: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            storeType: 0,
            typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
            storeStatus:"",
            showChildMember: false
        };
    },
    methods: {
        /**
         * 设置是否显示子成员
         */
        setChildMemberShow() {
            this.$emit("setChildMemberShow", this.showChildMember);
        },
        /**
         * 更换店长
         */
        changeManager(row, clerk) {
            console.log(row, clerk);
            let ths = this;
            let exMananger = {};
            row.clerks.some(per => {
                if (per.isManager == 1) {
                    // per.isManager = 0;
                    exMananger = per;
                }
                return per.isManager == 1;
            });
            let params = {
                employeeClerkId: clerk.employeeClerkId,
                managerId: exMananger.employeeClerkId
            };
            getRequest("/haoban-manage-web/emp/setManager", params)
            .then (res => {
                if (res.data.errorCode == 1) {
                    exMananger.isManager = 0;
                    clerk.isManager = 1;
                    ths.$message.success({
                        message: "操作成功"
                    });
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            }).catch(e => {
                ths.$message.error({
                    message: e.message
                });
            });
        },
        /**
         * 根据状态筛选店铺
         */
        selectByStatus(val) {
            this.$emit("selectByStatus", val);
        },
        /**
         * 根据店铺类型筛选店铺
         */
        selectByType(type) {
            let storeType = "";
            if (type != 0) {
                storeType = type*1 - 1;
            }
            this.$emit("selectByType", storeType);
        },
        /**
         * 删除店员
         */
        delClerk(clerk, store) {
            console.log(clerk, clerk.employeeClerkId, store);
            let _this = this;
            _this.$confirm("是否要删除该员工？", "提示", {
                type: "warning"
            }).then(() => {
                let params = {
                    ids: clerk.employeeClerkId
                }
                getRequest("/haoban-manage-web/emp/del", params)
                .then(res => {
                    console.log(res);
                    if (res.data.errorCode == 1) {
                        store.clerks.forEach(ele => {
                            if (ele.employeeClerkId == clerk.employeeClerkId) {
                                store.clerks.splice(store.clerks.indexOf(ele), 1);
                            }
                        });
                        _this.$message.success({
                            duration: 1000,
                            message: "操作成功"
                        });
                    } else {
                        _this.$message.error({
                            duration: 1000,
                            message: res.data.message
                        });
                    }
                })
                .catch(e => {
                    _this.$message.error({
                        duration: 1000,
                        message: e.message
                    });
                });
            });
        }
    }
};
</script>

