<template>
  <div class="index-floor">
    <Card>
      <div class="search-con" style="margin: 10px">
        <div class="item">
           <Button type="info" @click="handleAdd" style="margin-left: 10px">
          + 添加店铺
        </Button>
        </div>

        <div class="tips" style="color:#FF0000">
          最多可以配置20个店铺
        </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>
          <Select
            v-model="floorContent.shopId"
            filterable
            remote
            :remote-method="remoteMethod"
            :loading="loading1">
            <Option v-for="(option, index) in shopList" :value="option.shopId" :key="index">{{option.shopName}}</Option>
        </Select>
        </div>
        <div class="model-item">
          <label class="label">显示顺序：</label>
          <Input
            placeholder="请输入显示顺序 1-20之间"
            class="search-input"
            type="number"
            v-model.number="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: {
        shopId: '',
        displayOrder: ''
      },
      shopList: [],
      tableData: [],
      columns: [
        { title: '店铺编号', key: 'shopId', minWidth: 200, 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,
      loading1: false
    }
  },
  methods: {
      remoteMethod (query) {
        if (query !== '') {
            this.loading1 = true;
            this.api({
                apiName: 'shopPermissionFuzzyQueryByName',
                postdata: { shopName: query },
                success: (res) => {
                    this.loading1 = false
                    this.shopList = res.data
                }
            })
        } else {
            this.loading1 = false;
            this.shopList = [];
        }
    },
    handleSearch () {

    },
    handleRefresh () {
      this.reload()
    },
    handleAdd () {
      if (this.tableData.length === 20) {
        this.$Notice.warning({ title: '数据上限到达20条，请先删除其它数据再添加！' })
        return
      }
      this.modelStatus = true
      this.floorContent.displayOrder = ''
      this.floorContent.shopId = ''
    },
    requestData () {
      this.api({
        apiName: 'getShopList',
        success: (res) => {
        this.tableData=res.data
        }
      })
    },
    handleSure () {
      let { displayOrder, shopId } = this.floorContent
      if (!shopId) {
        return this.$Message.warning('请输入商品名称！')
      }
      if (!displayOrder) {
        return this.$Message.warning('请输入显示顺序！')
      }
      if (displayOrder < 0 || !/^\d+$/.test(displayOrder ) || displayOrder >20) {
        return this.$Message.warning('显示顺序输入格式有误！')
      }
      this.api({
        apiName: 'insertShopSave',
        postdata: this.floorContent,
        complete: () => {
          this.modelStatus = false
        },
        success: () => {
          this.requestData()
          this.$Notice.success({ title: `添加成功！` })
        }
      })
    },
    handleDelete (row) {
      return () => {
        // let { operationFloorId } = this.floorContent
        let { shopId } = row
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除当前选择的数据吗？`,
          onOk: () => {
            this.api({
              apiName: 'deleteShopRecommend',
              postdata: { shopId },
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    }
  },
  created () {
    this.requestData()
  }
}
</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>
