<template>
    <div class="advertising">
      <Card>
        <div class="search-con"  style="widht:30%;text-align: right;">
          <Button @click="handleAdd" type="primary">+ 新增广告</Button>
        </div>
        <tables
          ref="tables"
          editable
          v-model="tableData"
          :columns="columns"
          :loading="loading"
        />
      </Card>
    </div>
</template>
<script>
import Tables from '_c/tables'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      tableData: [],
      columns: [
        { title: '编号', type: 'index', minWidth: 180, align: 'center' },
        { title: '名称', key: 'bannerName', minWidth: 110, align: 'center' },
        { title: '类型', key: 'bannerType', minWidth: 110, align: 'center' },
        {
          title: '海报',
          key: 'bannerImage',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.bannerImage
                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  }
                })
              ])
          }

        },
        {
          title: '详情信息',
          key: 'url',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.url ? params.row.url : params.row.number)
          }
        },
        { title: '顺序', key: 'displayOrder', minWidth: 110, align: 'center' },
        {
          title: '操作',
          key: 'name',
          align: 'center',
          // fixed: 'right',
          width: 200,
          render: (h, params) => {
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleUpdate(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '编 辑'
            )
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [editBtn, delBtn])
          }
        }
      ],
      totalSize: 0,
      loading: false,
      selectList: []
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getBannerList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.map((item) => {
            let { bannerType, ...other } = item
            return {
              bannerType: bannerType == 1 ? '产品' : '活动',
              ...other
            }
          })
          // this.totalSize = res.data.total
        }
      })
    },
    handleAdd () {
      this.$router.push({ name: 'add_banner' })
    },
    handleUpdate (row) {
      return () => {
        let query = { operationBannerId: row.operationBannerId }
        this.$router.push({ name: 'update_banner', query })
      }
    },
    handleDetail (row) {
      return () => {
        let query = { operationBannerId: row.operationBannerId }
        this.$router.push({ name: 'banner_detail', query })
      }
    },
    handleDelete (row) {
      return () => {
        let { operationBannerId } = row
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除当前选择的数据吗？`,
          onOk: () => {
            this.api({
              apiName: 'deleteBanner',
              postdata: operationBannerId,
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style lang="less">
  .advertising .search-con {
    padding: 10px 0;
    .search {
      &-col {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
      &-input {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
    }
  }
</style>
