@{
    Layout = null;
}

<div v-if="client.id>0">
    <div class="row m-0">
        <div class="col">客户人员信息</div>
        <div class="col-auto" style="min-width:300px;">
            <button class="btn btn-primary" type="button" v-on:click="addDuty" v-if="page.canEditList">新增人员</button>
            <button class="btn btn-primary" type="button" v-on:click="refreshDutys" title="重新加载客户人员信息列表"><i class="fa fa-refresh"></i></button>
        </div>
    </div>

    <table class="table table-client mt-4" style="word-break: break-all; word-wrap: break-word; white-space: pre-wrap;">
        <thead>
            <tr>
                <th style="width: 70px">姓名</th>
                <th style="width: 200px; padding-left: 0px; padding-right: 0px; ">职责类型</th>
                <th style="width: 375px; padding-left: 0px; padding-right: 0px; ">电子邮箱</th>
                <th style="width: 200px; padding-left: 0px; padding-right: 0px; ">联系电话</th>
                <th style="width: 200px; padding-left: 0px; padding-right: 0px; ">授权有效期</th>
                <th style="width:40%; padding-left:0px;padding-right:0px;">备注</th>
                <th style="width:10%; padding-left:0px;padding-right:0px;">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in dutyList2">
                <td>{{item.ContactName}}</td>
                <td style="padding-left:0px;padding-right:0px;">{{item.ContactTypeStr}}</td>
               
                <td style="padding-left:0px;padding-right:0px;">{{item.EmailStr}}</td>
                <td>
                    <div v-for="item2 in item.PhoneNumber">{{item2}}</div>
                </td>
                <td>
                    <div v-for="item2 in item.PhoneNumber">{{item.AuthorizeEffectiveEndDateStr=="30001231"?"长期有效":dateFormat(item.AuthorizeEffectiveEndDate)}}</div>
                </td>
                <td>{{item.Remarks}}</td>
                <td style="padding-left:0px;padding-right:0px;">
                    <template v-if="page.canEditList">
                        <button class="btn btn-primary btn-sm mr-2" style="min-width: 35px; display: inline-block; font-size: 12px; height: 22px; line-height: 16px; padding: 2px 2px 2px 2px;margin-right:0px!important;" type="button" v-on:click="editDuty(item.EncryptId)">编辑</button>
                        <br />
                        <button class="btn btn-primary btn-sm" style="min-width: 35px; display: inline-block; font-size: 12px; height: 22px; line-height: 16px; padding: 2px 2px 2px 2px; margin-right: 8px!important;" type="button" v-on:click="removeDuty(item.EncryptId)">删除</button>
                    </template>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div v-else>
    <div class="alert alert-danger">请先保存用户基本信息</div>
</div>