import * as api from './api'
import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
import {inject} 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: 800,
        headerCellStyle: {
          backgroundColor: '#f6f7fa', // 直接设置背景颜色
          height: '20px',
          borderRight: 'none',
        },
        cellStyle: {
          border: 'none',
          borderBottom: '0.5px solid #ddd',
        },
        showSummary: true,
        stripe: false
      },
      container: {
        fixedHeight: false
      },
      actionbar: {
        show: false,
        buttons: {
          add: {
            show: false
          },
        }
      },
      search: {
        show: false
      },
      toolbar: {
        buttons: {
          search: {
            show: true
          },
          compact: {
            show: false
          }
        }
      },
      request: {
        pageRequest,
        addRequest,
        editRequest,
        delRequest,
      },
      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: {
        id: {
          title: 'ID',
          column: {
            show: false
          },
          form: {
            show: false
          }
        },
        resolvedExpression_value: {
          title: '商品和分类',
          column: {
            width: '130px',
            align: 'left',
            fixed: 'left'
          }
        },
        state: {
          title: '状态',
          column: {
            width: '90px',
            align: 'center',
            sortable: true
          },
          type: 'dict-select',
          search: {
            show: true
          },
          dict: dict({
            data: [
              {value: 'PAUSED', label: '已暂停', color: 'warning'},
              {value: 'ENABLED', label: '投放中', color: 'success'},
            ]
          })
        },
        campaignName: {
          title: '广告活动名称',
          column: {
            width: '180px',
            align: 'left',
          },
          search: {
            show: true,
            component: {
              props: {
                clearable: true
              }
            }
          },
          form: {
            rules: [{required: true, message: '必填项'}]
          }
        },
        adGroupName: {
          title: '广告组名称',
          column: {
            align: 'left',
            width: '180px'
          },
        },
        suggestedBid: {
          title: '建议竞价',
          column: {
            align: 'right',
            width: '130px'
          },
        },
        bid: {
          title: '出价',
          column: {
            align: 'center',
            sortable: true,
          },
        },
        TopOfSearchImpressionShare: {
          title: '搜索结果顶部展示份额',
          column: {
            align: 'right',
            sortable: true,
            width: '220px',
            renderHeader() {
              return (
                  <span>
                <el-tooltip placement="top" content="
        广告活动获得的搜索结果顶部展示量占其获得的所有符合条件的搜索结果顶部展示量的百分比。<br />
        符合条件与否由各种因素所决定，包括广告活动状态和投放状态。该指标适用于品牌推广活动和商品推广活动。<br />
        对于商品推广，该指标提供了搜索结果顶部（首页）的展示量份额。<br />
        默认展示所选时间范围内展示份额的最高值，如需查看分天的数据趋势，请点击数据详情按钮。" 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>
              )
            },
            formatter: (row) => {
              if (row.value !== null) {
                return row.value
              } else {
                return '--'
              }
            }
          }
        },
        ...BaseColumn
      }
    }
  }
}
