import * as api from './api';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { inject, nextTick, ref } from 'vue';
import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js';
import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
import XEUtils from 'xe-utils';

export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
	const pageRequest = async (query: UserPageQuery) => {
		const params = parseQueryParams(context.value)
		XEUtils.assign(query, params)
		return await api.GetList(query);
	};
	const editRequest = async ({ form, row }: EditReq) => {
		form.id = row.id;
		return await api.UpdateObj(form);
	};
	const delRequest = async ({ row }: DelReq) => {
		return await api.DelObj(row.id);
	};
	const addRequest = async ({ form }: AddReq) => {
		return await api.AddObj(form);
	};

	//权限判定
	const hasPermissions = inject('$hasPermissions');

	return {
		crudOptions: {
			table: {
				height: 750,
				headerCellStyle: {
					backgroundColor: '#f6f7fa', // 直接设置背景颜色
					height: '20px',
					// border: '0.5px solid #ddd',
				},
				cellStyle: {
					border: 'none',
					borderBottom: '0.5px solid #ddd',
				},
			},
			container: {
        fixedHeight: false
      },
			request: {
				pageRequest,
				addRequest,
				editRequest,
				delRequest,
			},
			toolbar: {
        buttons: {
					search: {
						show: true
					},
					compact: {
						show: false
					}
				}
			},
			rowHandle: {
				fixed: 'right',
				width: 80,
				buttons: {
					view: {
						show: false,
					},
					edit: {
						iconRight: 'Edit',
						type: 'text',
            text: null
						// show: hasPermissions('dictionary:Update'),
					},
					remove: {
						iconRight: 'Delete',
						type: 'text',
            text: null
						// show: hasPermissions('dictionary:Delete'),
					},
				},
			},
			columns: {
        adGroupName: {
          title: '广告组名称',
          column: {
            width: '150px'
          },
					search: {
						show: true,
						component: {
							props: {
								clearable: true
							}
						}
					},
					form: {
						rules: [{required: true, message:'必填项'}]
					}
        },
				state: {
          title: '状态',
          sortable: true,
          column: {
            width: 90,
            align: 'center'
          },
          type: 'dict-select',
          search: {
            show: true
          },
          dict: dict({
            data: [
              {value: 'paused', label: '已暂停', color: 'warning'},
              {value: 'enabled', label: '投放中', color: 'success'},
            ]
          })
        },
				
				...BaseColumn,

				ViewImpression: {
					title: '可见曝光量',
					column: {
						align: 'right',
						sortable: true,
						width: '140px',
						border: '0.5px solid #ddd',
						renderHeader() {
							return (
									<span>
											<el-tooltip placement="top"
																	content="来自亚马逊广告API，符合媒体评级委员会(Media Ratings Council)可见标准的曝光量">
									<span>
											<el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
									</span>
									</el-tooltip>
									<span>可见曝光量</span>
									</span>
							)
						},
						formatter: (row: any) => {
							if (row.value != null) {
								return row.value
							} else {
								return '--'
							}
						}
					}
				},
				VCPM: {
					title: '千次可见曝光成本',
					column: {
						align: 'right',
						sortable: true,
						width: '180px',
						border: '0.5px solid #ddd',
						renderHeader() {
							return (
									<span>
											<el-tooltip placement="top"
																	content="千次可见曝光成本，系统计算，花费/可见曝光量*1000">
									<span>
											<el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
									</span>
									</el-tooltip>
									<span>千次可见曝光成本</span>
									</span>
							)
						},
						formatter: (row: any) => {
							if (row.value != null) {
								return row.value
							} else {
								return '--'
							}
						}
					}
				},
				DPV: {
					title: '商品详情页浏览次数',
					column: {
						align: 'right',
						sortable: true,
						width: '200px',
						border: '0.5px solid #ddd',
						renderHeader() {
							return (
									<span>
											<el-tooltip placement="top" content="商品详情页浏览次数，来自亚马逊广告API。<br />
							在点击广告后的14天内（品牌推广）、浏览或点击广告后的14天内（展示型推广）的商品详情页浏览次数" raw-content>
							<span>
							<el-icon size="14" style="display:inline-block; padding-top:2px; margin-right:3px;"><InfoFilled/></el-icon>
									</span>
									</el-tooltip>
									<span>商品详情页浏览次数</span>
									</span>
							)
						}
					}
				}
			}
		}
	}
}
