import type { TableData } from 'lib/type/TableData'
import { LOCALES } from '../../data/const'
import In18FormDialog from '../../components/In18FormDialog.vue'

const data: TableData = {
  async fetchFun(self, data) {
    const res = await self.api?.getDataList(data)
    return res
  },
  addNods: [
    (self: any) => {
      return (
        self.bean &&
        <In18FormDialog
          fullscreen={true}
          show={self.bean.showEditorDialog}
          id={self.bean.id}
          form={self.bean.form}
          locales={self.bean.locales}
          onClose={() => {
            self.bean.showEditorDialog = false;
            self.bean.id = null;
          }}
          onSubmit={async (data) => {
            const params = {
              ...data,
              id: data.id ? String(data.id) : undefined,
              category_id: data.category_id ? String(data.category_id) : undefined,
              cover_resource: {
                image: data.cover_resource.image.map((i: any) => (i.url || i)),
                video: data.cover_resource.video.map((i: any) => (i.url || i)),
              }
            }
            if(data.id) {
              await self.api?.updateData(params)
            } else {
              await self.api?.addData(params)
            }
            self.bean.showEditorDialog = false;
            self.bean.id = null;
            self.methods.fetchData()
          }}
          translateApi={self.api?.translate}
          detailApi={async (id: number) => {
            const res = await self.api?.getDetail(id);
            const data = res.data;
            Object.keys(data).forEach((langKey) => {
              const langData = data[langKey];
              Object.keys(langData).forEach((fieldKey) => {
                const field = self.bean.form.find((f:any) => f.key === fieldKey);
                if (fieldKey === 'covers') {
                  data[langKey]['cover_resource'] = {
                    image: langData[fieldKey].image.map((item: any) => ({url: item})).filter(Boolean),
                    video: langData[fieldKey].video.map((item: any) => ({url: item})).filter(Boolean),
                  }
                }
                if (!field) return;
                data[langKey][fieldKey] = langData[fieldKey];
              })
            })
            return data
          }}
          uploadFun={self.api?.upload}
        />
      )
    }
  ],
  launchTask: [
    async (self) => {
      if (self.bean) {
        self.bean.locales = LOCALES;
        self.bean.id = null;
        self.bean.form = [
          {
            name: '分类',
            key: 'category_id',
            type: 'select',
            value: '',
            getItems: () => {
              return self.bean ? self.bean.newsTypes : []
            },
            must: true,
            shouldTranslate: false,
          },
          {
            name: '封面类型',
            key: 'cover_show',
            type: 'select',
            items: [
              {key: 'image', name: '图片'},
              {key: 'video', name: '视频'},
            ],
            value: 'image',
            must: true,
            shouldTranslate: false,
          },
          {
            name: '封面',
            key: 'cover_resource',
            type: 'upload:image,video',
            relateKey: 'cover_show',
            uploadFun: self.api?.upload,
            value: '',
            must: true,
            shouldTranslate: false,
          },
          {
            name: '标题',
            key: 'title',
            type: 'input',
            value: '',
            must: true,
            shouldTranslate: true,
          },
          {
            name: '内容',
            key: 'content',
            type: 'richtext',
            value: '',
            must: true,
            shouldTranslate: true,
          },
        ];
      }
    },
    async (self: any) => {
      if (self.bean) {
        const types = ['news'] as const
        const results = await Promise.all(
          types.map((type) =>
            self.api?.getCategoryList({ page: 1, size: 1000, type })
          )
        )
        const toOptions = (items: any[]) => items.map((item: any) => ({ key: item.id, name: item.name }));
        
        [self.bean.newsTypes] = results.map(
          (res) => toOptions(res?.data?.items ?? [])
        )
      }
    }
  ],
  fliter: [
    {
      key: 'id',
      name: 'ID',
      type: 'input'
    },
    {
      key: 'lang',
      name: '语言',
      type: 'select',
      value: 'ZH',
      getItems: (self) => {
        return self.bean ? self.bean.locales : []
      }
    },
    {
      key: 'category_id',
      name: '分类',
      type: 'select',
      value: '',
      getItems: (self: any) => {
        return self.bean ? self.bean.newsTypes : []
      },
    },
    {
      key: 'title',
      name: '标题',
      type: 'input'
    },
    {
      key: 'content',
      name: '内容',
      type: 'input'
    },
    
    {
      key: 'publish_time',
      name: '发布时间',
      type: 'input'
    },
    {
      type: 'onlyFun',
      onlyFun: {
        title: '新建',
        type: ' ' as any,
        fun(self) {
          if (self.bean) {
            self.bean.id = null;
            self.bean.showEditorDialog = true;
          }
        }
      }
    },
  ],
  tableColumns: [
    {
      key: 'id',
      name: 'ID',
      width: '80px',
      showJson: '*'
    },
    {
      key: 'lang',
      name: '语言',
      width: '80px',
    },
    {
      key: 'category_name',
      name: '分类',
      width: '150px',
    },
    {
      key: 'covers',
      name: '封面',
      width: '200px',
      renderBodyCell(data) {
        let covers = data.row.covers
        try {
          covers = JSON.parse(data.row.covers)
        } catch (error) {
          covers = data.row.covers
        }
        return <el-image src={covers.image} preview-src-list={[covers.image]} preview-teleported style="width: 80px; height: 100%;" />
      },
    },
    {
      key: 'covers_show',
      name: '封面类型',
      width: '100px',
    },
    {
      key: 'title',
      name: '标题',
      width: '200px'
    },
    {
      key: 'content',
      name: '内容',
    },
    {
      key: 'create_time',
      name: '发布时间',
      width: '150px',
      sort: 'desc'
    },
    {
      key: 'count',
      name: '阅读次数',
      width: '150px'
    },
    {
      key: 'table_tools',
      name: '操作',
      buttons: [
        {
          type: 'onlyFun',
          key: 'update',
          onlyFun: {
            title: '编辑',
            type: ' ' as any,
            fun(self, row) {
              if (self.bean) {
                self.bean.id = row.id;
                self.bean.showEditorDialog = true;
              }
            }
          }
        },
        {
          type: 'popoverConfirm',
          key: 'delete',
          confirm: {
            title: '删除',
            primary: 'id',
            subFun(self, data) {
              return self.api?.deleteData(data)
            }
          }
        }
      ]
    }
  ]
}

export default data
