<template>
  <div class="index-floor">
    <Card>

      <div class="search-con" style="margin: 10px">
        <div class="item">
          <label class="label">楼层名称：</label>
        <Select
          placeholder="楼层名称"
          class="search-input"
          style="width: 200px;margin-right: 20px"
          v-model="floorContent.operationFloorId"
          @on-change="handleChange"
        >
          <Option
            v-for="(item, index) of floorList"
            :value="item.operationFloorId"
            :key="'series-option-' + index"
          >{{ item.name }}</Option
          >
        </Select>
          <Button type="info" @click="handleAdd" style="margin-left: 10px">
          + 添加商品
        </Button>
        </div>

        <!-- <div class="tips" style="color:#FF0000">
          每个楼层可以配置6个商品
        </div> -->
      </div>

      <tables
        ref="tables"
        editable
        v-model="tableData"
        :columns="columns"
        :loading="loading"
      />
      <Modal
        title="添加商品"
        v-model="modelStatus"
        :mask-closable="false"
      >
        <div class="model-item">
          <label class="label">商品编号：</label>
          <Input
            placeholder="请输入商品编号"
            class="search-input"
            v-model="floorContent.goodsId"
          />
        </div>
        <div class="model-item">
          <label class="label">显示顺序：</label>
          <Input
            placeholder="请输入显示顺序"
            class="search-input"
            type="number"
            v-model="floorContent.displayOrder"
          />
        </div>
        <div slot="footer">
          <Button
            type="primary"
            @click="handleSure"
          >
            确定
          </Button>
        </div>
      </Modal>
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      modelStatus: false,
      floorContent: {
        goodsId: '',
        displayOrder: '',
        operationFloorId: ''
      },
      defaultFloor: '',
      floorList: [],
      tableData: [],
      columns: [
        { title: '商品编号', key: 'goodsId', minWidth: 180, align: 'center' },
        {
          title: '商品信息',
          key: 'goodsId',
          minWidth: 200,

          render: (h, params) => {
            let { name, description, thumb } = params.row
            let renderData = []
            if (!name) {
              name = '——'
            }
            if (!description) {
              description = '——'
            }
            if (thumb) {
              renderData.push(
                h('div', {
                  style: {
                    display: 'flex',
                    // justifyContent: 'center',
                    alignItems: 'center',
                    height: '70px'
                  }
                },
                [
                  h('img', {
                    attrs: {
                      src: thumb
                    },
                    style: {
                      width: '70px',
                      height: '50px'
                    }
                  }),
                  h('div',
                    {
                      style: {
                        textAlign: 'left',
                        marginLeft: '8px'
                      }
                    },
                    [
                      h('span', {
                        style: {
                          display: 'block',
                          fontSize: '16px',
                          fontWeight: 'bold'
                        }
                      }, '商品名称：' + name),
                      h('span', {
                        style: {
                          display: 'block'
                        }
                      }, '商品描述：' + description)
                    ])
                ])
              )
            }

            return renderData
          }
        },
        { title: '排序', key: 'displayOrder', minWidth: 200, align: 'center' },
        { title: '操作',
          key: 'name',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                }
              },
              '删 除'
            )
            return h('div', [delBtn])
          }
        }
      ],
      loading: false
    }
  },
  methods: {
    handleSearch () {

    },
    handleRefresh () {
      this.reload()
    },
    handleAdd () {
      // if (this.tableData.length === 6) {
      //   this.$Notice.warning({ title: '数据上限到达6条，请先删除其它数据再添加！' })
      //   return
      // }
      this.modelStatus = true
      this.floorContent.displayOrder = ''
      this.floorContent.goodsId = ''
    },
    requestFloorData () {
      this.api({
        apiName: 'getFloorList',
        success: (res) => {
          this.floorList = res.data
          if (res.data.length > 0) {
            this.floorContent.operationFloorId = res.data[0].operationFloorId
            this.defaultFloor = res.data[0].name
            this.requestFloorGoods(this.floorContent.operationFloorId)
          }
        }
      })
    },
    requestFloorGoods (operationFloorId) {
      this.loading = true
      this.api({
        apiName: 'getFloorGoodsList',
        postdata: { operationFloorId },
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data
        }
      })
    },
    handleChange (e) {
      this.floorContent.operationFloorId = e
      this.requestFloorGoods(e)
    },
    handleSure () {
      let { displayOrder, operationFloorId, goodsId } = this.floorContent
      if (!goodsId) {
        return this.$Message.warning('请输入商品编号！')
      }
      if (!displayOrder) {
        return this.$Message.warning('请输入显示顺序！')
      }
      if (displayOrder < 0 || !/^\d+$/.test(displayOrder)) {
        return this.$Message.warning('显示顺序输入格式有误！')
      }
      this.api({
        apiName: 'addFloorGoods',
        postdata: this.floorContent,
        complete: () => {
          this.modelStatus = false
        },
        success: () => {
          this.requestFloorGoods(operationFloorId)
          this.$Notice.success({ title: `添加成功！` })
        }
      })
    },
    handleDelete (row) {
      return () => {
        let { operationFloorId } = this.floorContent
        let { goodsId } = row
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除当前选择的数据吗？`,
          onOk: () => {
            this.api({
              apiName: 'delFloorGoods',
              postdata: { operationFloorId, goodsId },
              success: () => {
                this.requestFloorGoods(operationFloorId)
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    }
  },
  created () {
    this.requestFloorData()
  }
}
</script>
<style scoped lang="less">
  .search-con {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
