<template>
    <div>
        <div class="sf-right-button-box">
            <el-select v-model="storeType" 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" size="small">
                <el-option label="全部状态" :value="0"></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">新增门店</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">编辑</a>
                                <a class="a-href">删除</a>
                            </div>
                        </li>
                    </ul>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: "clerkView",
    props: {
        tableData: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            storeType: 0,
            typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
            storeStatus: 0,
            showChildMember: false,

        };
    },
    methods: {
        setChildMemberShow() {
            this.$emit("setChildMemberShow", this.showChildMember);
        },
        changeManager(row, clerk) {
            console.log(row, clerk);
            row.clerks.some(per => {
                if (per.isManager == 1) {
                    per.isManager = 0;
                }
                return per.isManager == 1;
            });
            clerk.isManager = 1;
        }
    }
};
</script>

