
<template>
  <div class="navigation-management-page">
    <Card>
      <div class="search-con" style="text-align:right;margin-bottom: 10px">
        <Button type="primary" size="large" @click="handleAdd">+新增店铺导航</Button>
      </div>
      <tables
        ref="tables"
        editable
        v-model="tableData"
        :columns="columns"
        :loading="loading"
      />
      <Modal
        v-model="modalFlag"
        @on-cancel="handleCancel"

      >
      <div class="modal-item">
        <div class="item" style="display:flex; margin-bottom: 10px">
          <Input
            v-model="goods"
            placeholder="请输入产品编号或名称查询"
            style="width: 300px; margin-right: 40px"
            search
            @on-search="getGoods"
          />
        </div>
        <div>
          <tables
            width="400"
            height="300"
            ref="tables"
            editable
            v-model="realModalData"
            :columns="modalColumns"
            @on-selection-change="changeSelect"
          />
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="btnSelect"
          type="primary"
          long
        >添 加</Button
        >
      </div>
      </Modal>
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
export default {
  components: {
    Tables
  },
  data () {
    return {
      modalFlag: false,
      goods: '',
      modalData: [],
      modalColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        { title: '编号', key: 'goodsId', align: 'center', width: 150 },
        { title: '名称', key: 'name', align: 'center', minWidth: 100 }
      ],
      tableData: [],
      columns: [
        { title: '编号', type: 'index', align: 'center', width: 100 },
        { title: '名称', key: 'navigationName', align: 'center', width: 120 },
        { title: '图标',
          key: 'image',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.image
                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  }
                })
              ])
          }
        },
        { title: '顺序', key: 'displayOrder', align: 'center', width: 100 },
        { title: '产品列表',
          align: 'left',
          miWwidth: 200,
          render: (h, params) => {
            let goodsIdArr = params.row.goodsList.map((item) => {
              return item.goodsId
            })
            // return h('span', goodsIdArr.join('，'))
            let newAuth = []
            if (goodsIdArr.length > 4) {
              newAuth = goodsIdArr.slice(0, 3)
            } else {
              newAuth = goodsIdArr
            }
            return h('span',
              {
                style: {
                  color: '#5296ee'
                }
              },
              [
                h('Poptip', {
                  props: {
                    trigger: 'hover',
                    content: goodsIdArr.join(', '),
                    wordWrap: true,
                    width: 250,
                    transfer: true
                  }
                }, `${newAuth.join(',')}......`)
              ]
            )
          }
        },
        { title: '操作',
          key: 'name',
          align: 'center',
          minWidth: 200,
          // fixed: 'right',
          render: (h, params) => {
            let detailBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: this.handleDetail(params.row)
                }
              },
              '详 情'
            )
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleUpdate(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '添加商品'
            )
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDel(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [detailBtn, editBtn, delBtn])
          }
        }
      ],
      loading: false,
      goodsList: [],
      selectCount: '',
      realModalData: [],
      shopNavigationUpdateDTO: {}
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getNavigationList',
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data
        }
      })
    },
    getGoods () {
      let { goods } = this
      this.api({
        apiName: 'queryByNameOrId',
        postdata: { goods },
        success: (res) => {
          this.modalData = res.data
          this.handleCheck()
        }
      })
    },
    handleAdd () {
      if (this.tableData.length >= 20) {
        return this.$Message.warning('最多只能添加20条数据！')
      }
      this.$router.push({ name: 'add_navigation' })
    },
    handleDetail (row) {
      return () => {
        let query = { navigationId: row.navigationId }
        this.$router.push({ name: 'navigation_detail', query })
      }
    },
    // 获取选中商品数据
    btnSelect () {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选中数据')
        return false
      }
      if (this.selectCount > 10) {
        return this.$Message.warning('最多只能选择10个产品哦！')
      }

      this.shopNavigationUpdateDTO.goodsList = this.selectList.map((item) => {
        return {
          goodsId: item
        }
      })
      this.api({
        apiName: 'editNavigation',
        postdata: this.shopNavigationUpdateDTO,
        success: (res) => {
          this.modalFlag = false
          this.$Notice.success({ title: '添加成功' })
          this.requestData()
        }
      })
    },
    changeSelect (e) {
      this.selectList = e.map((item) => {
        return item.goodsId
      })
      this.selectCount = e.length
      console.log('count', this.selectCount, 'list', this.selectList)
    },
    handleCancel () {
      this.modalFlag = false
    },
    handleCheck () {
      if (!this.shopNavigationUpdateDTO.goodsList) {
        return
      }
      for (let i = 0; i < this.modalData.length; i++) {
        for (let j = 0; j < this.shopNavigationUpdateDTO.goodsList.length; j++) {
          if (this.shopNavigationUpdateDTO.goodsList[j].goodsId === this.modalData[i].goodsId) {
            this.modalData[i]._disabled = true
            this.modalData[i]._checked = true
          }
        }
      }
      this.realModalData = this.modalData
    },
    handleUpdate (row) {
      return () => {
        this.shopNavigationUpdateDTO = row
        this.getGoods()
        this.modalFlag = true
      }
    },
    handleDel (row) {
      return () => {
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要名称为 ${row.navigationName} 的导航？`,
          onOk: () => {
            this.api({
              apiName: 'deleteNavigation',
              postdata: row.navigationId,
              success: (res) => {
                this.requestData()
                this.$Notice.success({ title: '删除成功' })
              }
            })
          }
        })
      }
    }
  },
  created () {
    this.requestData()
    // this.getGoods()
  }
}
</script>
<style scoped lang="less">
.notice-page .search-con {
  display: flex;
  padding: 10px 0;
  .search-input {
    width: 300px;
  }
}
</style>
