<template>
  <div class="good-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入商品编号"
          class="search-input"
          v-model="searchContent.goodsId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入商品名称"
          class="search-input"
          v-model="searchContent.goodsName"
          style="width: 200px"
          clearable
        />
        <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>
        <Button type="info" @click="batchAll" style="margin-left: 10px">
          + 批量审核
        </Button>
      </div>
      <!-- <Button
        type="info"
        @click="handleAdd"
        style="margin-bottom: 10px"
        v-if="isBrand"
        >+ 添加商品</Button
      > -->
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
        @on-selection-change="changeSelect"
      />
    </Card>
    <Modal
      title="商品审核"
      v-model="modelStatus"
      @on-cancel="handleCancelCheck"
      >
      <div class="model-item">
        <label class="label">结果：</label>
      <Select
        placeholder="请选择状态"
        class="search-input"
        v-model="status"
      >
        <Option
          v-for="(item, index) of checkSelect"
          :value="item.series_id"
          :key="'series-option-' + index"
        >{{ item.series_name }}</Option
        >
      </Select>
      </div>
      <div class="model-item">
        <label class="label">备注：</label>
        <Input
          placeholder="请输入备注"
          class="search-input"
          v-model="checkFailReason"
        />
      </div>
      <div slot="footer">
        <Button
          type="primary"
          @click="handleSure"
        >
          确定
          </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { OffShelfType, OffShelfTypeObj } from '@/enums'
import { mapGetters } from 'vuex'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      modelStatus: false,
      OffShelfType,
      OffShelfTypeObj,
      searchContent: {
        goodsId: '',
        goodsName: '',
        status: '',
        addTimeHead: '',
        addTimeTail: '',
        pageNum: 1,
        pageSize: 10
      },
      createTime: [],
      // 全部状态 ：可以编辑可以删除； 待上架（审核通过）可上架    ；已上架：可下架；
      seriesList: [
        {
          series_id: 1,
          series_name: '已上架'
        },
        {
          series_id: 2,
          series_name: '已下架'
        },
        {
          series_id: 3,
          series_name: '发行中'
        },
        {
          series_id: 4,
          series_name: '失败'
        },
        {
          series_id: 5,
          series_name: '待审核'
        },
        {
          series_id: 6,
          series_name: '审核未通过'
        },
        {
          series_id: 7,
          series_name: '待上架'
        }
      ],

      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '编号', key: 'goodsId', minWidth: 180, align: 'left' },
        { title: '名称', key: 'name', minWidth: 120, align: 'center' },
        {
          title: '展示图',
          key: 'thumb',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.thumb
                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  }
                })
              ])
          }
        },
        {
          title: '详情',
          key: 'name',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: this.handleDetail(params.row)
                }
              },
              '查看'
            )
          }
        },
        { title: '价格', key: 'defaultPrice', align: 'center', width: 120 },
        { title: '库存量', key: 'stock', width: 100, align: 'center' },
        { title: '销售量', key: 'sales', width: 150, align: 'center' },
        { title: '商家',
          key: 'enterpriseName',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div',
              {
                style: {
                  color: '#5296ee'
                }
              },
              [
                h('Poptip', {
                  props: {
                    trigger: 'hover',
                    title: `联系人:${params.row.linkName}  联系方式:${params.row.linkPhone}`,
                    size: 'small'
                  }
                }, params.row.enterpriseName)
              ])
          }
        },
        {
          title: '入库时间',
          key: 'createTime',
          align: 'center',
          width: 180,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 150,
          fixed: 'right',
          render: (h, params) => {
            let checkBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleCheck(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '审核'
            )

            return h('div', [checkBtn])
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false,
      selectList: [],
      selectCount: 0,
      checkSelect: [
        {
          series_id: 6,
          series_name: '拒绝'
        },
        {
          series_id: 7,
          series_name: '通过'
        }
      ],
      status: '',
      checkFailReason: '',
      goodsId: '',
      checkType: ''
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getGoodCheckList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records.filter((item) => {
            return item.status === 5
          })
          this.totalSize = res.data.total
        }
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCancelCheck () {
      this.modelStatus = false
      this.status = ''
      this.checkFailReason = ''
    },
    batchAll () {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要审核的数据！')
        return false
      }
      this.modelStatus = true
      this.checkType = 2
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    changeSelect (e) {
      this.selectList = e.map(item => {
        return { goodsId: item.goodsId }
      })
      console.log(this.selectList)
      this.selectCount = e.length
    },
    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 = ''
      }
    },

    handleAdd () {
      this.$router.push({ name: 'add_good' })
    },
    handleUpdate (row) {
      return () => {
        let query = { goodsNo: row.goodsNo }
        this.$router.push({ name: 'update_good', query })
      }
    },
    handleDetail (row) {
      return () => {
        let query = { goodsId: row.goodsId }
        this.$router.push({ name: 'good_detail', query })
      }
    },
    handleSure () {
      let { checkFailReason, status, goodsId } = this
      if (!status) {
        this.$Message.warning('请选择审核状态！')
        return
      }
      if (this.checkType == 2) {
        for (let i = 0; i < this.selectList.length; i++) {
          this.selectList[i].checkFailReason = checkFailReason
          this.selectList[i].status = status
        }
        this.api({
          apiName: 'checkAllGood',
          postdata: this.selectList,
          complete: () => {
            this.modelStatus = false
          },
          success: () => {
            this.requestData()
            this.selectList = []
            this.selectCount = 0
            this.$Notice.success({ title: `操作成功！` })
          }
        })
      } else {
        this.api({
          apiName: 'checkGood',
          postdata: { goodsId, checkFailReason, status },
          complete: () => {
            this.modelStatus = false
          },
          success: () => {
            this.goodsId = ''
            this.checkFailReason = ''
            this.status = ''
            this.requestData()
            this.$Notice.success({ title: `操作成功！` })
          }
        })
      }
    },
    handleCheck (row) {
      return () => {
        this.goodsId = row.goodsId
        this.checkType = 1
        this.modelStatus = true
      }
    },
    handleRecommend (row) {
    //   return () => {}
    }
  },
  created () {
    this.requestData()
  }
}
</script>

<style lang="less">
.good-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;
    }
  }
}
.model-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  .label {
    display: inline-block;
    width: 50px;
    text-align: right;
  }
}
</style>
