<template>
  <div class="new-app-container layout-vertical">
    <!--    <YMTableSearch :loading="loading" :search-form="searchForm" @onValueChange="onValueChange" @submit="onSubmit"/>-->

    <YMTable
      ref="table"
      :table-key="2"
      :index="true"
      :selection="false"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
    />
  </div>
</template>

<script>
import { deleteBanners } from '@/api/data'
export default {
  name: 'BannerList',
  data() {
    return {
      loading: false,
      // 搜索配置
      searchForm: [
        // {
        //   label: 'Banner标题',
        //   type: 'input',
        //   prop: 'title',
        //   clearable: true
        // },
        // {
        //   label: '状态',
        //   type: 'select',
        //   prop: 'type',
        //   options: [
        //     { label: '上架', value: 1 },
        //     { label: '下架', value: 0 }
        //   ],
        //   clearable: true
        // }
      ],
      // 列配置
      columns: [
        {
          label: 'Banner标题',
          prop: 'title'
        },
        {
          label: 'Banner图片',
          image: true, // 开启图片预览
          prop: 'image'
        },
        {
          label: '跳转链接',
          prop: 'link'
        },
        {
          label: '排序',
          prop: 'sort'
        },
        {
          label: '类型',
          prop: 'type',
          method: (row) => row.type === 'app' ? 'APP' : 'PC'
        },
        {
          label: '语种',
          prop: 'lang'
        },
        {
          label: '创建时间',
          prop: 'create_time'
        }
      ],
      // 操作按钮
      rowsActions: [
        { key: 'edit', label: '编辑' },
        { key: 'delete', label: '删除', method: (row) => {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteBanners({ id: row.id }).then(() => {
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // });

              this.$refs.table.getList()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
        }
      ],
      // 接口配置
      apis: {
        list: {
          url: 'banner/index',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        },
        add: {
          url: 'banner/update'
        },
        edit: {
          url: 'banner/update'
        },
        delete: {
          url: 'banner/delete',
          method: 'get'
        }
      },
      tableOptions: {
        add: {
          show: true
        }
      },
      // 编辑/新增表单弹窗配置
      editForm: [
        {
          body: [
            {
              label: 'Banner标题',
              type: 'input',
              prop: 'title',
              rules: [{ required: true, message: '请输入标题', trigger: 'blur' }]
            },
            {
              label: '展示图片',
              type: 'uploadOneImage',
              prop: 'image',
              rules: [{ required: true, message: '请上传图片', trigger: 'change' }]
            },
            {
              label: '跳转链接',
              type: 'input',
              prop: 'link',
              placeholder: '请输入跳转URL'
            },
            {
              label: '排序值',
              type: 'inputNumber',
              prop: 'sort',
              defaultValue: 0
            },
            {
              label: '语种',
              type: 'select',
              prop: 'lang',
              options: [
                { label: '中文简体', value: 'zh' },
                { label: 'Vietnamese', value: 'vi' },
                { label: 'English', value: 'en' }
              ],
              rules: [{ required: true, message: '请选择语种', trigger: 'change' }]
            },
            {
              label: '类型',
              type: 'select',
              prop: 'type',
              options: [
                { label: 'APP', value: 'app' },
                { label: 'PC', value: 'pc' }
              ],
              rules: [{ required: true, message: '请选择类型', trigger: 'change' }]
            },
          ]
        }
      ],
      editConfig: {}
    }
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    onValueChange(val) {
      // 搜索项变化回调
    },
    onSubmit(params) {
      this.$refs.table.getList(params)
    }
  }
}
</script>
