<template>
  <div class="table">
    <Table :loading="$store.state.app.isLoading" border ref="selection" :columns="columns" :data="data" @on-select='onSelect' @on-select-all='onSelectAll'>
      <template slot-scope="{ row }" slot="created_at">
        <span>{{ row.createTime}}</span>
      </template>
      <template slot-scope="{ row }" slot="remark">
        <span class="remark">{{ row.remark}}</span>
      </template>
      <template slot-scope="{ row }" slot="enable">
          <img style="width: 100px;height:100px;" :src="row.pic" alt="图片" />
      </template>
       <template slot-scope="{ row }" slot="recommend">
        <i-switch
          :value="row.recommend === 1 ? true : false"
          @on-change="
            value => {
              change(value, row);
            }
          "
        />
      </template>
      <template slot-scope="{ row }" slot="action">
        <a @click="edit(row)">编辑</a>
        <a style="margin: 0 10px;" @click="putShelves(row.id)">上架</a>
        <a @click="offShelves(row.id)">下架</a>
        <a style="margin-left: 10px;" @click="pxedit(row.id,1)">排序</a>
         <a style="margin-left: 10px;" @click="pxedit(row.id,0)">设置优惠价</a>
      </template>
    </Table>
     <Modal
        v-model="showModal"
        @on-ok="submit">
         <Form
        ref="formValidate"
      >
         <FormItem v-if="type" label="排序">
            <InputNumber v-model="pxnum"></InputNumber>
          </FormItem>
          <FormItem v-else label="优惠价">
            <InputNumber v-model="salePrice"></InputNumber>
          </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { formatDate } from '@/libs/util'
import {
  putShelve,
  offShelve,
  setSore,
  recommend,
  updateSalePrice
} from '@/api/api'
export default {
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      type: null,
      id: null,
      pxnum: null,
      salePrice: null,
      showModal: false,
      selectList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '副标题',
          key: 'subtitle'
        },
        {
          title: '测试描述',
          slot: 'remark'
        },
        {
          title: '价格',
          key: 'price'
        },
        {
          title: '创建日期',
          slot: 'created_at',
          width: 200,
          key: 'created_at'
        },
        {
          title: '测试图片',
          slot: 'enable'
        },
        {
          title: '是否设置为推荐',
          slot: 'recommend'
        },
        {
          title: '操作',
          width: 250,
          slot: 'action'
        }
      ]
    }
  },
  mounted () {
  },
  filters: {
    format (value) {
      return formatDate(value)
    }
  },
  methods: {
    edit (row) {
      this.$emit('edit', row)
    },
    pxedit (id, type) {
      this.pxnum = null
      this.salePrice = null
      this.showModal = true
      this.id = id
      this.type = type
    },
    onSelect (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    onSelectAll (val) {
      this.selectList = val.map((p) => {
        return p.id
      })
      this.$emit('select', this.selectList)
    },
    submit () {
      if (this.type) {
        this.setSores()
      } else {
        updateSalePrice({ id: this.id, salePrice: this.salePrice }).then((res) => {
          if (res.status === 200) {
            this.$Message.success('操作成功')
            this.$emit('getlist')
          }
        })
      }
    },
    setSores () {
      setSore({ id: this.id, sore: this.pxnum }).then((res) => {
        if (res.status === 200) {
          this.$Message.success('操作成功')
          this.$emit('getlist')
        }
      })
    },
    putShelves (id) {
      putShelve({ id }).then((res) => {
        if (res.status === 200) {
          this.$Message.success('上架成功')
        }
      })
    },
    offShelves (id) {
      offShelve({ id }).then((res) => {
        if (res.status === 200) {
          this.$Message.success('下架成功')
        }
      })
    },
    change (status, row) {
      console.log('开关状态：' + status + row)
      let falg = status ? 1 : 0
      recommend({
        id: row.id,
        recommend: falg
      }).then((res) => {
        if (res.status === 200) {
          this.$Message.success('设置成功')
        }
      })
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    }
  }
}
</script>

<style lang="less">
.table {
  margin-top: 20px;
}
.remark{
  width: 100%;
    height: 100px;
    overflow: auto;
    display: block;
    padding: 10px 5px;
}
</style>
