<template>
  <div class="article-manager">
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <el-tabs v-model="artFrom.type" @tab-click="onClickTab">
        <el-tab-pane :label="item.name + '(' + item.count + ')'" :name="item.type.toString()" v-for="(item, index) in headeNum" :key="index" />
      </el-tabs>
      <div>
        <el-form ref="artFrom" :model="artFrom" label-width="80px" label-position="right" inline @submit.native.prevent>
          <el-form-item label="商品分类：" label-for="pid">
            <el-cascader
              v-model="artFrom.cate_id"
              size="small"
              :options="treeSelect"
              :props="{ multiple: false, emitPath: false, checkStrictly: true }"
              clearable
              class="form_content_width"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="商品搜索：" label-for="store_name">
            <el-input clearable placeholder="请输入商品名称/关键字/ID" v-model="artFrom.store_name" class="form_content_width" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userSearchs">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="Button">
        <el-button type="primary" class="mr14">添加商品</el-button>
        <el-button type="success" class="mr14" @click="onCopy">商品采集</el-button>
        <el-dropdown class="bnt mr14" @command="batchSelect">
          <el-button>批量修改<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">商品分类</el-dropdown-item>
            <el-dropdown-item :command="2">物流设置</el-dropdown-item>
            <el-dropdown-item :command="3">购买送积分</el-dropdown-item>
            <el-dropdown-item :command="4">购买送优惠券</el-dropdown-item>
            <el-dropdown-item :command="5">关联用户标签</el-dropdown-item>
            <el-dropdown-item :command="6">活动推荐</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button @click="onDismount" v-show="artFrom.type === '1'">批量下架</el-button>
        <el-button @click="onShelves" v-show="artFrom.type === '2'">批量上架</el-button>
        <el-button class="export" @click="exports">导出</el-button>
      </div>
      <el-table
        ref="table"
        :data="tableList"
        class="ivu-mt mt14"
        v-loading="loading"
        highlight-current-row
        :row-key="getRowKey"
        @selection-change="handleSelectRow"
        empty-text="暂无数据"
      >
        <el-table-column type="expand" width="50" v-if="['1', '2'].includes(artFrom.type)">
          <template slot-scope="scope">
            <expandRow :row="scope.row"></expandRow>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column>
        <el-table-column label="商品ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品图" min-width="90">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="scope.row.image" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" min-width="250">
          <template slot-scope="scope">
            <span>{{ scope.row.store_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品类型" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.product_type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品售价" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="销量" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.sales }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.stock }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <el-switch
              class="defineSwitch"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.is_show"
              :value="scope.row.is_show"
              :disabled="scope.row.stop_status ? true : false"
              @change="changeSwitch(scope.row)"
              size="large"
              active-text="上架"
              inactive-text="下架"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" minWidth="100">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">查看订单</el-button>
            <el-button @click="del(scope.row, scope)" type="text">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination v-if="total" :total="total" :page.sync="artFrom.page" :limit.sync="artFrom.limit" @pagination="getDataList" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'product_productList',
  //   components: { expandRow, attribute, taoBao, goodsDetail, userLabel, couponList },
  data() {
    return {
      template: false,
      modals: false,
      batchModal: false,
      labelShow: false,
      batchType: 1, // 批量设置类型
      batchFormData: {
        cate_id: [],
        logistics: [],
        freight: 2,
        postage: 0,
        temp_id: null,
        give_integral: 0,
        label_id: [],
        coupon_ids: [],
        recommend: []
      },
      ruleBatch: {},
      couponName: [], // 优惠券
      dataLabel: [], // 标签
      templateList: [], // 运费模版
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      artFrom: {
        page: 1,
        limit: 15,
        cate_id: '',
        type: '1',
        store_name: ''
      },
      list: [],
      tableList: [],
      headeNum: [
        {
          count: 2,
          name: '出售中商品',
          type: 1
        },
        {
          count: 40,
          name: '仓库中商品',
          type: 2
        },
        {
          count: 5,
          name: '已经售馨商品',
          type: 3
        },
        {
          count: 10,
          name: '警戒库存',
          type: 4
        },
        {
          count: 1,
          name: '商品回收站',
          type: 5
        }
      ],
      loading: false,
      data: [],
      total: 0,
      attrTemplate: false,
      ids: [],
      goodsId: '',
      isProductBox: false,
      treeSelect: [],
      multipleSelection: []
    }
  },
  created() {},
  activated() {},
  methods: {
    // 标签弹窗关闭
    labelClose() {},
    look(row) {
      this.goodsId = row.id
      this.isProductBox = true
    },
    // 物流方式
    logisticsBtn(e) {
      this.batchFormData.logistics = e
    },
    // 关联用户标签
    openLabel() {
      this.labelShow = true
    },
    closeLabel(label) {
      let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0])
      this.dataLabel.splice(index, 1)
    },

    getPath() {},
    // 导出
    async exports() {
      let [th, filekey, data, fileName] = [[], [], [], '']
      let excelData = JSON.parse(JSON.stringify(this.artFrom))
      excelData.page = 1
      excelData.limit = 50
      excelData.ids = this.ids
      for (let i = 0; i < excelData.page + 1; i++) {
        let lebData = await this.getExcelData(excelData)
        if (!fileName) fileName = lebData.filename
        if (!filekey.length) {
          filekey = lebData.fileKey
        }
        if (!th.length) th = lebData.header
        if (lebData.export.length) {
          data = data.concat(lebData.export)
          excelData.page++
        } else {
          this.$exportExcel(th, filekey, fileName, data)
          return
        }
      }
    },
    getExcelData(excelData) {},
    freight() {},
    // 批量上架
    onShelves() {},
    // 批量下架
    onDismount() {},
    getRowKey(row) {
      return row.id
    },
    //  选中某一行
    handleSelectRow(selection) {
      const uniqueArr = []
      const ids = []
      for (let i = 0; i < selection.length; i++) {
        const item = selection[i]
        if (!ids.includes(item.id)) {
          uniqueArr.push(item)
          ids.push(item.id)
        }
      }
      this.ids = ids
      this.multipleSelection = uniqueArr
    },

    // tab选择
    onClickTab() {
      this.artFrom.page = 1
      this.multipleSelection = []
      this.$refs.table.clearSelection()
      this.getDataList()
    },

    // 获取商品表单头数量
    goodHeade() {},
    // 商品分类；
    goodsCategory() {},
    // 商品列表；
    getDataList() {},
    showSelectData() {},
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1
    },
    // 上下架
    changeSwitch(row) {},
    // 数据导出；
    exportData: function() {},
    // 属性弹出；
    attrTap() {
      this.attrTemplate = true
    },
    changeTemplate(msg) {
      this.attrTemplate = msg
    },
    // 编辑
    edit(row) {
      // this.$router.push({ path: this.$routeProStr + '/product/add_product/' + row.id });
    },
    // 确认
    del(row, tit, num) {}
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}
::v-deep .ivu-modal-mask {
  z-index: 999 !important;
}

::v-deep .ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  ::v-deep .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.batch-box {
  ::v-deep .ivu-modal-body {
    overflow: auto;
    min-height: 350px;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}

::v-deep .happy-scroll-content {
  width: 100%;

  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
}

.labelInput {
  border: 1px solid #dcdee2;
  width: 100%;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;

  .span {
    color: #c5c8ce;
  }

  .iconxiayi {
    font-size: 12px;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--prev-color-primary);
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu__item {
  a {
    color: #606266;
  }
}
.label_width {
  width: 400px;
}
</style>
