import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, dict } from '@fast-crud/fast-crud'
import { inject } from 'vue'
import XEUtils from 'xe-utils'
import * as api from './api'
import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
import { dynBidStrategyEnum } from '/@/views/adManage/utils/enum.js'
import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
import { InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

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 router = useRouter()

  //权限判定
  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: true,
        buttons: {
          add: {
            show: false,
          },
          create: {
            text: '新建广告活动',
            type: 'primary',
            show: true,
            click() {
              router.push({
                name: 'SpCreateCampaigns',
                query: { campaignId: 123, tagsViewName: '新建广告活动' },
              })
            
            },
          },
        },
      },
      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: {
            show: false,
            // iconRight: 'Delete',
            // type: 'text',
            // text: null
            // show: hasPermissions('dictionary:Delete'),
          },
        },
      },
      columns: {
        id: {
          title: 'ID',
          column: {
            show: false,
          },
          form: {
            show: false,
          },
        },
        campaignName: {
          title: '广告活动名称',
          column: {
            width: '200px',
            fixed: 'left',
            align: 'left',
            renderHeader() {
              return (
                <span>
                  <el-tooltip
                    placement="top"
                    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>
              )
            },
          },
          search: {
            show: true,
            component: {
              props: {
                clearable: true,
              },
            },
          },
          form: {
            rules: [{ required: true, message: '必填项' }],
          },
        },
        targetingType: {
          title: '投放类型',
          column: {
            width: '100px',
            align: 'center',
          },
          type: 'dict-select',
          search: {
            show: true,
          },
          dict: dict({
            data: [
              { value: 'AUTO', label: '自动' },
              { value: 'MANUAL', label: '手动' },
            ],
          }),
        },
        state: {
          title: '状态',
          column: {
            width: '90px',
            align: 'center',
          },
          type: 'dict-select',
          search: {
            show: true,
          },
          dict: dict({
            data: [
              { value: 'PAUSED', label: '已暂停', color: 'warning' },
              { value: 'ENABLED', label: '投放中', color: 'success' },
            ],
          }),
        },
        dynBidStrategy: {
          title: '竞价策略',
          form: {
            show: false,
          },
          column: {
            width: '160px',
          },
          type: 'dict-select',
          dict: dict({
            data: dynBidStrategyEnum,
          }),
        },
        startDate: {
          title: '开始日期',
          column: {
            width: '100px',
            align: 'center',
          },
        },
        endDate: {
          title: '结束日期',
          column: {
            width: '100px',
            align: 'center',
            formatter: (row) => {
              if (row.value !== null) {
                return row.value
              } else {
                return '--'
              }
            },
          },
        },
        portfolioName: {
          title: '广告组合',
          column: {
            width: '130px',
            align: 'center',
          },
        },
        dailyBudget: {
          title: '预算',
          column: {
            width: '100px',
            align: 'center',
            formatter: (row) => {
              if (row.value !== null) {
                return row.value
              } else {
                return '--'
              }
            },
          },
        },
        suggestedBudget: {
          title: '建议预算',
          form: {
            show: false,
          },
          column: {
            width: '100px',
            align: 'center',
          },
        },
        percentTimeInBudget: {
          title: '预算活跃时间均值',
          column: {
            minWidth: 160,
            renderHeader() {
              return (
                <span>
                  <el-tooltip placement="top" 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>
              )
            },
          },
          form: {
            show: false,
          },
        },
        MissedImpressions: {
          title: '预计错过的曝光',
          form: {
            show: false,
          },
          column: {
            width: 180,
            align: 'center',
            renderHeader() {
              return (
                <span>
                  <el-tooltip placement="top" 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>
              )
            },
          },
        },
        MissedClicks: {
          title: '预计错过的点击',
          form: {
            show: false,
          },
          column: {
            width: 180,
          },
        },
        MissedSales: {
          title: '预计错过的销售',
          form: {
            show: false,
          },
          column: {
            width: 180,
          },
        },
        ...BaseColumn,
      },
    },
  }
}
