<template>
  <div class="series-list-con">
    <!-- <Card>
      <div class="search-con">
        <Input
          placeholder="系列名称"
          class="search-input"
          v-model="searchContent.keyword"
          :maxlength="50"
        />
        <DatePicker
          placeholder="创建时间"
          v-model="createTime"
          type="daterange"
          placement="bottom-start"
          class="search-date"
          @on-change="handleDateChange(createTime)"
          :editable="false"
          separator=" ~ "
        ></DatePicker>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">搜索</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
      </div>
      <Button
        type="info"
        @click="handleAdd"
        style="margin-bottom: 10px"
        v-if="isBrand"
        >+ 新增系列</Button
      >
      <tables
        ref="tables"
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>

    <Modal
      :title="detailTitle"
      v-model="detailModal"
      :width="700"
      footer-hide
      class="series-detail-modal"
      @on-cancel="detailTableData = []"
    >
      <Spin fix v-if="detailLoading" />
      <tables
        ref="detailTable"
        v-model="detailTableData"
        border
        :columns="detailColumns"
        :height="500"
      />
    </Modal>

    <Modal
      :title="addTitle"
      v-model="addModal"
      :width="360"
      @on-cancel="handleCancelAdd"
    >
      <Form ref="addForm" :model="addForm" :rules="addRules" :label-width="100">
        <FormItem label="系列名称：" prop="seriesName">
          <Input placeholder="请输入名称" v-model="addForm.seriesName" />
        </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 { formatTime } from '@/libs/tools'
// import { OffShelfType, OffShelfTypeObj } from '@/enums'
// export default {
//   inject: ['reload'],
//   components: {
//     Tables
//   },
//   computed: {
//     isBrand () {
//       return this.$store.getters.isBrand
//     }
//   },
//   data () {
//     return {
//       OffShelfType,
//       OffShelfTypeObj,
//       searchContent: {
//         pageNum: 1,
//         pageSize: 10,
//         keyword: '',
//         addTimeHead: '',
//         addTimeTail: ''
//       },
//       createTime: [],

//       columns: [
//         { title: '系列名称', key: 'seriesName', align: 'center' },
//         // { title: "品牌方", key: "brandName", align: "center" },
//         { title: '商品数量', key: 'goodsNum', align: 'center' },
//         {
//           title: '状态',
//           key: 'name',
//           align: 'center',
//           width: 100,
//           render: (h, params) => {
//             let obj = OffShelfTypeObj[params.row.offShelf]
//             return h(
//               'Tag',
//               {
//                 props: {
//                   color: obj.color
//                 }
//               },
//               obj.label
//             )
//           }
//         },
//         {
//           title: '详情',
//           key: 'name',
//           align: 'center',
//           width: 100,
//           render: (h, params) => {
//             return h(
//               'Button',
//               {
//                 props: {
//                   type: 'info',
//                   size: 'small'
//                 },
//                 style: {
//                   marginRight: '5px'
//                 },
//                 on: {
//                   click: this.handleDetail(params.row)
//                 }
//               },
//               '查看'
//             )
//           }
//         },
//         {
//           title: '添加时间',
//           align: 'center',
//           width: 180,
//           render (h, params) {
//             return h('span', formatTime(params.row.addTime))
//           }
//         },
//         {
//           title: '操作',
//           key: 'name',
//           align: 'center',
//           width: 200,
//           render: (h, params) => {
//             let offShelf = params.row.offShelf
//             let editBtn = h(
//               'Button',
//               {
//                 props: {
//                   type: 'primary',
//                   size: 'small'
//                 },
//                 on: {
//                   click: () => {
//                     this.handleUpdate(params.row)
//                   }
//                 },
//                 style: {
//                   marginRight: '5px',
//                   display: this.isBrand ? 'inline-block' : 'none'
//                 }
//               },
//               '编辑'
//             )
//             let offShelfBtn = h(
//               'Button',
//               {
//                 props: {
//                   type: offShelf == OffShelfType.YES ? 'success' : 'warning',
//                   size: 'small'
//                 },
//                 on: {
//                   click: () => {
//                     this.handleOffShelf(params.row)
//                   }
//                 }
//               },
//               offShelf == OffShelfType.YES ? '上架' : '下架'
//             )
//             return h('div', [editBtn, offShelfBtn])
//           }
//         }
//       ],
//       tableData: [],
//       totalSize: 0,
//       loading: true,

//       addModal: false,
//       addRules: {
//         seriesName: [
//           { required: true, message: '不能为空！', trigger: 'blur' }
//         ]
//       },
//       addTitle: '',
//       addForm: {
//         seriesId: '',
//         seriesName: ''
//       },
//       addLoading: false,

//       detailModal: false,
//       detailTitle: '',
//       detailLoading: false,
//       detailColumns: [
//         {
//           title: '商品ID',
//           key: 'goodsNo',
//           align: 'center',
//           render: (h, params) => {
//             return h(
//               'span',
//               {
//                 style: {
//                   color: '#2d8cf0',
//                   textDecoration: 'underline',
//                   cursor: 'pointer'
//                 },
//                 on: {
//                   click: () => {
//                     let query = { goodsNo: params.row.goodsNo }
//                     this.$router.push({ name: 'good_detail', query })
//                   }
//                 }
//               },
//               params.row.goodsNo
//             )
//           }
//         },
//         { title: '商品名称', key: 'name', align: 'center' },
//         {
//           title: '状态',
//           key: 'name',
//           align: 'center',
//           width: 100,
//           render: (h, params) => {
//             let obj = OffShelfTypeObj[params.row.offShelf]
//             return h(
//               'Tag',
//               {
//                 props: {
//                   color: obj.color
//                 }
//               },
//               obj.label
//             )
//           }
//         }
//       ],
//       detailTableData: []
//     }
//   },
//   methods: {
//     requestData () {
//       this.loading = true
//       this.api({
//         apiName: 'getSeriesPageList',
//         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()
//     },
//     handleDateChange (createTime) {
//       if (createTime && createTime.length == 2 && createTime[0] && createTime[1]) {
//         this.searchContent.addTimeHead = new Date(createTime[0]).getTime()
//         this.searchContent.addTimeTail =
//           new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
//       } else {
//         this.searchContent.addTimeHead = ''
//         this.searchContent.addTimeTail = ''
//       }
//     },

//     handleDetail (row) {
//       let { seriesId, seriesName } = row
//       return () => {
//         this.detailTitle = `系列详情（ ${seriesName} ）：`
//         this.detailLoading = true
//         this.detailModal = true
//         this.api({
//           apiName: 'getGoodsBySeriesId',
//           postdata: { seriesId },
//           success: (res) => {
//             this.detailTableData = res.data
//           },
//           complete: () => {
//             this.detailLoading = false
//           }
//         })
//       }
//     },

//     handleAdd () {
//       this.addTitle = '新增系列：'
//       this.addModal = true
//     },
//     handleUpdate (row) {
//       this.addForm.seriesId = row.seriesId
//       this.addForm.seriesName = row.seriesName
//       this.addTitle = '编辑系列：'
//       this.addModal = true
//     },
//     handleAddOrUpdateSubmit () {
//       let apiName = this.addForm.seriesId ? 'updateSeries' : 'addSeries'
//       this.$refs.addForm.validate((valid) => {
//         if (valid) {
//           this.addLoading = true
//           this.api({
//             apiName,
//             postdata: this.addForm,
//             success: () => {
//               this.$Notice.success({
//                 title: `${this.addForm.seriesId ? '编辑' : '添加'}成功！`
//               })
//               this.requestData()
//               this.handleCancelAdd()
//             },
//             complete: () => {
//               this.addLoading = false
//             }
//           })
//         }
//       })
//     },
//     handleCancelAdd () {
//       this.addModal = false
//       this.$refs.addForm.resetFields()
//       this.addForm.seriesId = ''
//     },

//     handleOffShelf (row) {
//       let { seriesId, offShelf, seriesName } = row
//       let title = '下架'
//       let type = OffShelfType.YES
//       if (offShelf == OffShelfType.YES) {
//         title = '上架'
//         type = OffShelfType.NO
//       }
//       this.$Modal.confirm({
//         title: `确认要 ${title} ${seriesName} 系列？`,
//         onOk: () => {
//           this.api({
//             apiName: 'onOffSeries',
//             postdata: { seriesId, type },
//             success: () => {
//               this.requestData()
//               this.$Notice.success({ title: `已${title}！` })
//             }
//           })
//         }
//       })
//     }
//   },
//   created () {
//     if (!this.isBrand) {
//       this.columns.splice(1, 0, {
//         title: '品牌方',
//         key: 'brandName',
//         align: 'center'
//       })
//     }
//     this.requestData()
//   }
// }
// </script>

// <style lang="less">
// .series-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;
//     }
//   }
// }
// .series-detail-modal {
//   .ivu-modal-body {
//     position: relative;
//     padding: 0 0 16px 0;
//   }
// }
// </style>
