<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap" @load="onLoad">
      <!-- 头像 -->
      <template #table-column-avator="{scope}">
        <cl-avatar
					shape="square"
					:size="40"
					:src="scope.row.avator | default_avatar"
					:style="{ margin: 'auto' }"
				></cl-avatar>
      </template> 
      <!-- 管理员 -->
      <template #table-column-super="{scope}">
        <span>{{scope.row.status == 1 ? '是' : scope.row.status == 2 ? '不是' : '-'}}</span>
      </template> 
      <!-- 创始人 -->
      <template #table-column-founder="{scope}">
        <span>{{scope.row.founder == 1 ? '是' : scope.row.status == 2 ? '不是' : '-'}}</span>
      </template> 
      <!-- 操作 -->
			<template #slot-column-option="{scope}">
					<template>
						<el-popover placement="top" width="160" :ref="'popover-' + scope.row.id">
							<p>开店申请记录和管理员信息将被删除，确定要删除吗?</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="selfGetCancel(scope.row.id)">取消</el-button>
								<el-button type="primary" size="mini" @click="noSendShipFn(scope.row)">确定</el-button>
							</div>
              <el-button type="text" size="small" slot="reference">删除</el-button>
						</el-popover>
					</template>
			</template>
    </x-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// x-crud
			show: false
		};
	},
	mounted() {},
	methods: {
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.shopAdmin)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'avator',
							label: '头像',
							align: 'center'
						},
						{
							prop: 'name',
							label: '名称',
							align: 'center'
						},
						{
							prop: 'mobile',
							label: '手机号',
							align: 'center'
						},
						{
							prop: 'merchanId',
							label: '商家ID',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'shopId',
							label: '门店ID',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'remid',
							label: '收款提醒',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'super',
							label: '管理员',
							align: 'center',
							emptyText: '无'
						},
            {
							prop: 'founder',
							label: '创始人',
							align: 'center',
							emptyText: '无'
						},
            {
							prop: 'addTime',
							label: '添加时间',
							align: 'center',
							emptyText: '无'
						},
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-column-option']
					}
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh();
		},
    //取消删除
		selfGetCancel(id) {
			this.$refs[`popover-` + id].doClose();
		},
    // 确定删除
		noSendShipFn(item) {
      console.log('item.id', item.id)
      let param = { id: item.id }
			this.$service.auth.shopAdminDelete(param).then(res => {
				this.$message.success('操作成功！');
        this.$refs[`popover-` + item.id].doClose();
        this.app.refresh()
			});
		},
	}
};
</script>
