<template>
  <div class="recommend-list-con">
    <!-- <Card>
      <div class="search-con">
        <Button type="info" @click="handleAdd" style="margin-right: 10px"
          >+ 添加推荐</Button
        >
        <ButtonGroup class="search-btngroup">
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>

    <Modal
      :title="addTitle"
      v-model="addModal"
      :width="360"
      @on-cancel="handleCancelAdd"
    >
      <Form ref="addForm" :model="addForm" :rules="addRules" :label-width="100">
        <FormItem label="商品ID：" prop="goodsNo">
          <Input placeholder="请输入商品编号" v-model="addForm.goodsNo"  :maxlength="50"/>
        </FormItem>
        <FormItem label="排序序号：" prop="sort">
          <Input
            type="number"
            number
            placeholder="请输入排序序号（正整数）"
            v-model="addForm.sort"
          />
        </FormItem>
      </Form>

      <Row type="flex" justify="center" slot="footer">
        <Button style="margin-right: 30px" @click="handleCancelAdd"
          >取 消</Button
        >
        <Button
          @click="handleAddOrUpdateSubmit"
          type="primary"
          :loading="addLoading"
          >保 存</Button
        >
      </Row>
    </Modal> -->
  </div>
</template>

<script>
// import Tables from '_c/tables'
// import FileUpload from '_c/file-upload'
// import { formatTime } from '@/libs/tools'
// export default {
//   inject: ['reload'],
//   components: {
//     Tables,
//     FileUpload
//   },
//   data () {
//     const validateSort = (rule, value, callback) => {
//       if (value > 99999) {
//         callback(new Error('不得大于99999！'))
//       }
//       if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
//         callback(new Error('请输入正整数！'))
//       }
//       callback()
//     }
//     return {
//       searchContent: {
//         pageNum: 1,
//         pageSize: 10
//       },

//       columns: [
//         { title: '排序', key: 'sort', width: 200, align: 'center' },
//         { title: '商品编号', key: 'goodsNo', minWidth: 200, align: 'center' },
//         { title: '商品名称', key: 'name', minWidth: 200, align: 'center' },
//         {
//           title: '商品详情',
//           key: 'name',
//           align: 'center',
//           width: 120,
//           render: (h, params) => {
//             return h(
//               'Button',
//               {
//                 props: {
//                   type: 'info',
//                   size: 'small'
//                 },
//                 style: {
//                   marginRight: '5px'
//                 },
//                 on: {
//                   click: this.handleDetail(params.row)
//                 }
//               },
//               '查看'
//             )
//           }
//         },
//         {
//           title: '操作',
//           key: 'name',
//           align: 'center',
//           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.handleDel(params.row)
//                   }
//                 }
//               },
//               '删 除'
//             )
//             return h('div', [editBtn, delBtn])
//           }
//         }
//       ],
//       tableData: [],
//       totalSize: 0,
//       loading: true,

//       addModal: false,
//       addTitle: '',
//       addRules: {
//         type: 'add',
//         goodsNo: [{ required: true, message: '不能为空！', trigger: 'blur' }],
//         sort: [
//           {
//             required: true,
//             type: 'number',
//             message: '不能为空！',
//             trigger: 'blur'
//           },
//           { validator: validateSort, trigger: 'blur' }
//         ]
//       },
//       addForm: {
//         id: '',
//         goodsNo: '',
//         sort: ''
//       },
//       addLoading: false
//     }
//   },
//   methods: {
//     requestData () {
//       this.loading = true
//       this.api({
//         apiName: 'getRecommendList',
//         postdata: this.searchContent,
//         complete: () => {
//           this.loading = false
//         },
//         success: (res) => {
//           this.tableData = res.data.records
//           this.totalSize = res.data.total
//         }
//       })
//     },
//     handleSearch () {
//       this.searchContent.pageNum = 1
//       this.requestData()
//     },
//     handleRefresh () {
//       this.reload()
//     },
//     handleCurrentChange (pageNum) {
//       this.searchContent.pageNum = pageNum
//       this.requestData()
//     },

//     handleAdd () {
//       this.addTitle = '添加推荐商品：'
//       this.addForm.id = ''
//       this.addModal = true
//     },
//     handleUpdate (row) {
//       this.addTitle = '编辑推荐商品：'
//       this.addForm.id = row.id
//       this.addForm.goodsNo = row.goodsNo
//       this.addForm.sort = row.sort
//       this.addModal = true
//     },
//     handleAddOrUpdateSubmit () {
//       let { bannerUrlList, id } = this.addForm
//       if (bannerUrlList && bannerUrlList.length === 1) {
//         this.addForm.bannerUrl = bannerUrlList[0]
//       } else {
//         this.addForm.bannerUrl = ''
//       }
//       this.$refs.addForm.validate((valid) => {
//         if (valid) {
//           this.addLoading = true
//           let apiName = 'addRecommend'
//           let title = '添加成功！'
//           if (this.addForm.id) {
//             apiName = 'updateRecommend'
//             title = '更新成功！'
//           }
//           this.api({
//             apiName,
//             postdata: this.addForm,
//             success: () => {
//               this.$Notice.success({
//                 title
//               })
//               this.requestData()
//               this.handleCancelAdd()
//             },
//             complete: () => {
//               this.addLoading = false
//             }
//           })
//         }
//       })
//     },
//     handleCancelAdd () {
//       this.addModal = false
//       this.$refs.addForm.resetFields()
//       this.addForm.id = ''
//       this.addForm.goodsNo = ''
//       this.addForm.sort = ''
//     },

//     handleDel (row) {
//       let id = row.id
//       this.$Modal.confirm({
//         title: `确认要删除该商品推荐 ？`,
//         onOk: () => {
//           this.api({
//             apiName: 'deleteRecommend',
//             postdata: { id },
//             success: () => {
//               this.requestData()
//               this.$Notice.success({ title: '已删除' })
//             }
//           })
//         }
//       })
//     },
//     handleDetail (row) {
//       return () => {
//         let query = { goodsNo: row.goodsNo }
//         this.$router.push({ name: 'good_detail', query })
//       }
//     }
//   },
//   created () {
//     this.requestData()
//   }
// }
// </script>

// <style lang="less">
// .recommend-list-con .search-con {
//   padding: 10px 0;
//   .search {
//     &-col {
//       display: inline-block;
//       width: 150px;
//       margin-right: 5px;
//     }
//     &-input {
//       display: inline-block;
//       width: 150px;
//       margin-right: 5px;
//     }
//     &-date {
//       margin-right: 5px;
//     }
//     &-btngroup {
//       margin-right: 5px;
//     }
//   }
// }
// </style>
