<template>
  <div>
    <en-table-layout
      toolbar
      pagination
      :tableData="tableData"
      :loading="loading"
      :selectionChange="selectionChange">
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-btns">
          <el-button type="primary" @click="selectgoodslist" >选择商品</el-button>
          <el-button type="danger" @click="cancelall">批量取消</el-button>
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column type="selection"/>
        <el-table-column label="商品名称" prop="name" />
        <el-table-column label="商品编号" prop="sn" />
        <el-table-column label="商品价格" prop="price" />
        <el-table-column label="商品图片" min-width="200">
          <template slot-scope="scope">
            <img style="width: 50px;height: 50px" v-if="scope.row.image" :src="scope.row.image" class="goods-image"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="canceljoin(scope)">取消参加
            </el-button>
          </template>
        </el-table-column>
      </template>
    </en-table-layout>
    <div class="save-tag">
      <el-button type="primary" @click="savesetup">保存设置</el-button>
    </div>
    <en-goods-picker
      type="admin"
      :show="showDialog"
      :api="goodsApi"
      :multipleApi="multipleApi"
      :categoryApi="categoryApi"
      :defaultData="tableData"
      :limit="maxsize"
      @confirm="refreshFunc"
      @close="showDialog = false"/>
  </div>
</template>

<script>
  import * as API_goodsTag from '@/api/goodsTag'
  export default {
    name: 'tagAdd',
    data() {
      return {
        /** 标签商品列表loading状态 */
        loading: false,

        /** 标签商品列表参数*/
        params: {
          page_no: 1,
          page_size: 500,
          label_id: ''
        },

        /** 标签id */
        tag_id: '',

        /** 标签名称 */
        tag_name: '',

        /** 标签商品列表数据 */
        tableData: [],

        /** 标签商品已选择项id的集合 */
        selectionids: [],

        /** 商品选择器最大长度*/
        maxsize: 0,

        /** 商品选择器列表api*/
        goodsApi: 'admin/erp/goods',

        multipleApi: 'admin/erp/goods/@ids/details',

        /** 商城分类api */
        categoryApi: 'admin/goods/category/0/children',

        /** 显示/隐藏商品选择器 */
        showDialog: false,

        /** 商品ids */
        goodsIds: []
      }
    },
    watch: {
      tag_id: 'GET_TagGoodsList',
      $route: {
        immediate: true,
        handler(newVal) {
          if (newVal.name !== 'tagAdd') return
          this.params.label_id = this.tag_id = newVal.params.tag_id
          this.tag_name = newVal.query.tag_name
        }
      }
    },
    methods: {
      /**  显示商品选择器*/
      selectgoodslist() {
        this.showDialog = true
      },

      /** 保存商品选择器选择的商品 */
      refreshFunc(val) {
        this.tableData = val
        /** 去重 转化 */
        const res = new Map()
        this.tableData = this.tableData.filter((key) => !res.has(key.id) && res.set(key.id, 1))
        this.goodsIds = this.tableData.map(key => {
          return key.id
        })
      },

      /** 获取标签下的商品列表**/
      GET_TagGoodsList() {
        this.loading = true
        API_goodsTag.getTagGoodsList(this.params).then(response => {
          this.loading = false
          this.tableData = response.data
          this.goodsIds = this.tableData.map(key => {
            return key.id
          })
          this.maxsize = 0
        })
      },

      /**  取消参加 */
      canceljoin(scope) {
        this.tableData.forEach((elem, index) => {
          if (elem.id === scope.row.id) {
            this.tableData.splice(index, 1)
          }
        })
        this.goodsIds = this.tableData.map(key => {
          return key.id
        })
      },

      selectionChange(val) {
        this.selectionids = val.map(item => item.id)
      },

      /** 批量取消 */
      cancelall() {
        if (this.selectionids.length <= 0) {
          this.$message.error('请选择要取消的商品')
          return
        }
        this.selectionids.forEach(key => {
          this.tableData.forEach((elem, index) => {
            if (elem.id === key) {
              this.tableData.splice(index, 1)
            }
          })
        })
        this.goodsIds = this.tableData.map(key => {
          return key.id
        })
      },
      /** 保存设置 */
      savesetup() {
        let _ids = this.tableData.map(key => {
          return key.id
        })
        API_goodsTag.saveTagGoodsList({ label_id: this.params.label_id, goods_ids: _ids }).then(() => {
          this.loading = false
          this.$message.success('保存设置成功！')
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  /deep/ div.toolbar {
    height: 70px;
    padding: 20px 0;
  }

  /deep/ .el-table td:not(.is-left) {
    text-align: center;
  }
  /deep/ thead>tr {
    /deep/ th:nth-child(2) {
      text-align: left !important;
    }
  }

  /*商品信息*/
  .goods-info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .goods-image {
      width: 50px;
      height: 50px;
    }
    .goodsinfo-txt {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
      .goods-name {
        color: #6289ff;
      }
      .goods-price {
        color: #f60;
      }
    }
  }



  /*保存标签商品*/
  .save-tag {
    text-align: center;
    button {
      margin-top: 15px;
    }
  }

</style>
