<template>
  <div class="commodityGroup">
    <div class="commodityBox">
      <div class="groupTit">{{ groupData.shopGroupId ? '修改分组' : '新建分组' }}</div>
      <div class="newGroupBox">
        <el-form class="formBox" :model="groupData" label-width="150px" :rules="groupBuyRules">
          <el-form-item label="分组名称" prop="groupName">
            <el-input v-model="groupData.groupName" placeholder="请输入分组名称" onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" />
          </el-form-item>
          <el-form-item label="分组描述">
            <el-input
              v-model="groupData.groupDescribe"
              type="textarea"
              :rows="4"
              placeholder="请输入分组描述"
            />
          </el-form-item>
          <el-form-item label="分组商品">
            <div class="btnBox">
              <el-radio v-model="selectGroup" label="1" /><span @click="manualAdd">手动添加</span>
              <el-radio v-model="selectGroup" label="2" /> <span @click="intelligentAdd">智能添加</span>
            </div>
          </el-form-item>
          <div v-if="groupData.conditions.length !== 0 && selectGroup === '2'" class="intelDataBox">
            <div class="intelTit">智能添加已选条件</div>
            <div class="intelList">
              <div v-for="(item, index) of groupData.conditions" :key="index" class="intelItem">
                <div class="itemBox">
                  <span v-if="item.type === 1">库存</span>
                  <span v-if="item.type === 2">价格</span>
                  <span v-if="item.type === 3">重量</span>
                  <span v-if="item.type === 4">销量</span>
                  <span v-if="item.calculation === 1">大于</span>
                  <span v-if="item.calculation === 2">等于</span>
                  <span v-if="item.calculation === 3">小于</span>
                  <span>{{ item.number }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-form>
        <div v-if="selectConditions.length === 0 && selectGroup === '1'" class="isSelectList">
          <h3 class="isSelectTit">已选商品</h3>
          <div class="tableBox">
            <el-table
              ref="multipleTable"
              :data="products"
               :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
              tooltip-effect="dark"
              max-height="400"
            >
              <el-table-column label="产品主图" width="220" align="center">
                <template slot-scope="scope">
                  <img height="80" width="80" :src="scope.row.image " alt srcset>
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="产品名称" width="220" align="center" />
              <el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip />
              <el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip />
            </el-table>
            <div class="fenye">
              <el-pagination
                :current-page="productsPage"
                :page-sizes="[5, 10, 20, 50, 100]"
                :page-size="productsPageSize"
               background
               layout="prev, pager, next,total"
                :total="products.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
        <div class="submitBox">
          <el-button style="background-color: #3F9B6A;color: #fff" @click="addGroup('ruleForm')">提 交</el-button>
          <el-button   class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="closeAddGroup">取 消</el-button>
        </div>
      </div>
    </div>
    <!-- 手动添加弹框 -->
    <el-dialog
      title="手动添加商品"
      :visible.sync="isShowManualAdd"
      custom-class="bian_css" width="65%"
      top="50px"
      class="group-dialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="false"
    >
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="商品名称">
            <el-input v-model="formInline.search" placeholder="搜索商品名称或商品ID" />
          </el-form-item>
          <el-form-item class="tagCustomer" label="库存数量">
            <el-input v-model="formInline.minStock" /><span>至</span><el-input v-model="formInline.maxStock" />
          </el-form-item>
          <el-form-item class="tagCustomer" label="价格">
            <el-input v-model="formInline.minPrice" /><span>至</span><el-input v-model="formInline.maxPrice" />
          </el-form-item>
          <el-form-item>
            <el-button style="background-color: #3F9B6A;color: #fff" @click="search">查询</el-button>
            <el-button class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="clearData">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="shopListData"
    :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          tooltip-effect="dark"
          max-height="550"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column label="产品主图" width="220" align="center">
            <template slot-scope="scope">
              <img height="80" width="80" :src="scope.row.image " alt srcset>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="产品名称" width="220" align="center" />
          <el-table-column prop="originalPrice" label="价格（元）" align="center" show-overflow-tooltip />
          <el-table-column prop="stockNumber" label="库存（件）" align="center" show-overflow-tooltip />
        </el-table>
        <div class="fenye">
          <el-pagination
            :current-page="formInline.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="shopTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveIdList">确 定</el-button>
            <el-button @click="closeSelect">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 智能添加弹框 -->
    <el-dialog
      title="智能添加商品"
      :visible.sync="isIntelligentAdd"
      width="50%"
      top="50px"
      class="group-dialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="false"
    >
      <div class="znAddBox">
        <div class="conditionBox">
          <span class="anAddTit">满足条件</span>
          <el-radio v-model="condition" label="1">全部满足</el-radio>
          <el-radio v-model="condition" label="2">任意满足</el-radio>
        </div>
        <div class="screenBox">
          <span class="anAddTit">筛选条件</span>
          <div class="crowdOptions">
            <div v-for="(item, index) of selectConditions" :key="item.type" class="condition">
              <div class="flexBox">
                <div class="rightInfo">
                  <el-select v-model="item.type" placeholder="请选择" @change="changeType(item, index)">
                    <el-option
                      v-for="typeItem in options"
                      v-show="!types.includes(typeItem.type)"
                      :key="typeItem.type"
                      :label="typeItem.name"
                      :value="typeItem.type"
                    />
                  </el-select>
                </div>
                <div class="purchase">
                  <el-select v-model="item.calculation" placeholder="请选择">
                    <el-option
                      v-for="calculationItem in calculationList"
                      :key="calculationItem.value"
                      :label="calculationItem.label"
                      :value="calculationItem.value"
                    />
                  </el-select>
                </div>
                <div class="valueBox">
                  <el-input v-model="item.number" />
                </div>
                <div v-if="selectConditions.length !== 1" class="deleteIcon" @click="deleteOptions(item, index)"><i class="el-icon-remove" /></div>
              </div>
            </div>
            <div v-if="groupData.conditions.length !== 4" class="addCondition" @click="addCondition">
              <i class="el-icon-circle-plus" />
              <span>添加筛选条件</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fenye">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveOptions">确 定</el-button>
          <el-button @click="closeOptions">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
function GroupData() {
  this.condition = null // 满足条件 1-全部满足 2-任意满足
  this.conditions = [ // 筛选条件数组
    // {
    //   calculation: 1, // 运算符 1-大于 2-等于 3-小于
    //   ids: [], // 已满足部分条件的商品id数组
    //   number: null, // 数值
    //   type: 1 // 类型 1-库存 2-价格 3-重量 4-销量
    // }
  ]
  this.groupDescribe = '' // 分组描述
  this.groupImage = '' // 分组封面图片地址
  this.groupName = '' // 分组名称
  this.ids = [] // 商品id数组
  this.shopGroupId = null // 商品分组id
}
import { commodityListAdd, commodityListUpdate, getGroupList, commodityListGetById } from '@/api/commodity'
export default {
  name: 'CommodityGroup',
  props: {
    groupId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      formInline: {
        maxPrice: null, // 价格最大值
        maxStock: null, // 库存数量最大值
        minPrice: null, // 价格最小值
        minStock: null, // 库存数量最小值
        page: 1, // 当前页
        pageSize: 10, // 每页记录数
        search: '' // 搜索字段
      },
      groupData: new GroupData(),
      isShowManualAdd: false, // 手动添加弹窗
      isIntelligentAdd: false, // 自动添加弹窗
      shopListData: [],
      shopTotal: 1,
      tableData: [],
      multipleSelection: [],
      // 智能添加
      condition: '1',
      types: [1],
      options: [
        {
          type: 1,
          name: '库存'
        },
        {
          type: 2,
          name: '价格'
        },
        {
          type: 3,
          name: '重量'
        },
        {
          type: 4,
          name: '销量'
        }
      ],
      calculationList: [
        {
          label: '大于',
          value: 1
        },
        {
          label: '等于',
          value: 2
        },
        {
          label: '小于',
          value: 3
        }
      ],
      groupBuyRules: {
        groupName: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ]
      },
      products: [], // 确定已选商品
      productsPage: 1,
      productsPageSize: 5,
      selectConditions: [], // 当前选择筛选条件
      // 分组选择
      selectGroup: '1',
      // 已选智能筛选条件
      intelData: []
    }
  },
  watch: {
    groupId: {
      handler(nVal, oVal) {
        if (!nVal) {
          this.groupData = new GroupData()
          this.products = []
          this.multipleSelection = []
        } else {
          this.groupData.shopGroupId = nVal
          this.getDetailFn()
        }
      }
    }
  },
  mounted() {
    console.log(this.groupId)
    // if (this.$route.query.shopGroupId) {
    //   this.groupData.shopGroupId = this.$route.query.shopGroupId
    //   this.getDetailFn()
    // }
    if (this.groupId) {
      this.groupData.shopGroupId = this.groupId
      this.getDetailFn()
    }
    this.getAll(this.formInline)
  },
  methods: {
    // 初始化查询所有数据
    async getAll(formInline) {
      const res = await getGroupList(formInline)
      this.shopTotal = res.data.total
      this.shopListData = res.data.list
    },
    // 获取详情
    getDetailFn() {
      commodityListGetById({ shopGroupId: this.groupData.shopGroupId }).then(res => {
        if (res.code === '') {
          this.groupData.groupDescribe = res.data.groupDescribe
          this.groupData.groupName = res.data.groupName
          this.multipleSelection = res.data.products
          this.products = res.data.products
          const shopList = []
          this.products.forEach(i => {
            shopList.push(i.productId)
          })
          this.groupData.ids = shopList
          this.groupData.shopGroupId = res.data.shopGroupId
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    manualAdd() {
      this.selectGroup = '1'
      // this.groupData.conditions = []
      // this.groupData.condition = null
      this.isShowManualAdd = true
    },
    // 商品表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.groupData.ids = []
    },
    // 分页大小
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    // 分页
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    intelligentAdd() {
      this.selectGroup = '2'
      if (this.selectConditions.length === 0) {
        this.selectConditions.push({
          calculation: 1, // 运算符 1-大于 2-等于 3-小于
          ids: [], // 已满足部分条件的商品id数组
          number: null, // 数值
          type: 1 // 类型 1-库存 2-价格 3-重量 4-销量
        })
      }
      // this.groupData.ids = []
      // if (this.multipleSelection.length) {
      //   this.$refs.multipleTable.clearSelection() // 清空已手动添加的商品
      // }
      // this.products = []
      // this.multipleSelection = []
      this.groupData.condition = 1
      this.isIntelligentAdd = true
    },
    // 保存手动选择商品
    saveIdList() {
      if (this.multipleSelection.length === 0) {
        this.groupData.ids = []
      }
      const shopList = []
      this.products = this.multipleSelection
      this.multipleSelection.forEach(i => {
        shopList.push(i.productId)
      })
      this.groupData.ids = shopList
      this.isShowManualAdd = false
    },
    // 取消手动选择商品
    closeSelect() {
      this.isShowManualAdd = false
    },
    // 更改当前选项
    changeType(item, index) {
      var crowdData = this.groupData.conditions
      this.types = []
      crowdData.forEach(i => {
        this.types.push(i.type)
      })
      if (item.type === 9 || item.type === 10) {
        this.groupData.conditions[index].calculation = 1
      }
    },
    // 删除当前筛选
    deleteOptions(item, index) {
      this.types.splice(index, 1)
      this.selectConditions.splice(index, 1)
    },
    // 保存智能匹配配置
    saveOptions() {
      var self = this
      var groupCond = self.selectConditions
      var options = self.options
      for (let i = 0; i < groupCond.length; i++) {
        if (groupCond[i].number === null || groupCond[i].number === '') {
          for (let j = 0; j < options.length; j++) {
            if (groupCond[i].type === options[j].type) {
              self.$message({
                message: `选项为${options[j].name}的内容不能为空!`,
                type: 'warning'
              })
              return false
            }
          }
        }
      }
      self.groupData.conditions = self.deepClone(self.selectConditions)
      self.isIntelligentAdd = false
    },
    // 保存提交
    addGroup() {
      var self = this
      if (self.groupData.groupName === '') {
        self.$message({
          message: '分组名称不能为空',
          type: 'warning'
        })
        return false
      }
      if (self.selectGroup === '1') {
        if (self.groupData.ids.length === 0) {
          self.$message({
            message: '请选择手动添加分组商品',
            type: 'warning'
          })
          return false
        }
      }
      if (self.selectGroup === '2') {
        if (self.groupData.conditions.length === 0) {
          self.$message({
            message: '请添加智能筛选条件',
            type: 'warning'
          })
        }
      }
      if (self.selectGroup === '1') {
        self.groupData.conditions = []
        self.groupData.condition = null
      } else {
        self.groupData.ids = []
        self.products = []
        self.multipleSelection = []
      }
      if (self.groupData.shopGroupId !== '' && self.groupData.shopGroupId !== null) {
        // 修改人群
        commodityListUpdate(self.groupData).then(res => {
          if (res.code === '') {
            this.closeAddGroup()
            self.$message({
              message: '修改成功',
              type: 'success'
            })
            self.$emit('reload')
          } else {
            self.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      } else {
        // 新增人群
        commodityListAdd(self.groupData).then(res => {
          if (res.code === '') {
            this.closeAddGroup()
            self.$message({
              message: '添加成功',
              type: 'success'
            })
            self.$emit('reload')
          } else {
            self.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    },
    // 取消提交
    closeAddGroup() {
      this.$emit('cancel')
    },
    // 取消智能匹配配置
    closeOptions() {
      this.isIntelligentAdd = false
      this.selectConditions = []
    },
    // 添加筛选
    addCondition() {
      for (let i = 1; i <= this.options.length; i++) {
        if (!this.types.includes(i)) {
          this.selectConditions.push(
            {
              calculation: 1, // 运算符 1-大于 2-等于 3-小于
              ids: [], // 已满足部分条件的商品id数组
              number: null, // 数值
              type: i // 类型 1-库存 2-价格 3-重量 4-销量
            }
          )
          this.types.push(i)
          break
        }
      }
    },
    // 手动查询商品
    search() {
      this.getAll(this.formInline)
    },
    clearData() {
      this.formInline = {
        maxPrice: null, // 价格最大值
        maxStock: null, // 库存数量最大值
        minPrice: null, // 价格最小值
        minStock: null, // 库存数量最小值
        page: 1, // 当前页
        pageSize: 10, // 每页记录数
        search: '' // 搜索字段
      }
      this.getAll(this.formInline)
    },
    deepClone(obj) {
      var _obj = JSON.stringify(obj)
      var objClone = JSON.parse(_obj)
      return objClone
    }
  }
}
</script>

<style lang="scss" scoped>
.commodityGroup {
  .commodityBox {
    background: #FFFFFF;
    padding:20px;
    .groupTit {
      font-size: 14px;
      color: #333333;
      font-weight: 500;
    }
    .newGroupBox {
      width: 99%;
      margin: 20px;
      .btnBox {
        display: flex;
        align-items: center;
        margin-left: 10px;
        span {
          display: block;
          width: 80px;
          height: 35px;
          line-height: 35px;
          background: #3F9B6A;
          color: #FFFFFF;
          font-size: 14px;
          text-align: center;
          border-radius: 4px;
          margin-right: 20px;
          cursor: pointer;
          position: relative;
        }
        i {
          display: block;
          font-style: normal;
          font-size: 14px;
          color: #3F9B6A;
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border: 1px solid #3F9B6A;
          border-radius: 50%;
          position: absolute;
          right: -10px;
          top: -10px;
          z-index: 999;
          background: #FFFFFF;
        }
      }
    }
  }
  .submitBox {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
  }
  .isSelectList {
    h3 {
      font-size: 14px;
      color: #666666;
      font-weight: 500;
      margin: 30px 0 20px 0;
    }
  }
}
  .znAddBox {
    padding: 30px 30px 0 30px;
    .screenBox {
      display: flex;
      margin-top: 30px;
      .crowdOptions {
        margin-left: 20px;
      }
    }
    .condition {
      margin-bottom: 20px;
      p {
        font-size: 14px;
        color: #666666;
        margin-left: 100px;
      }
      .flexBox {
        display: flex;
        align-items: center;
        .leftTit {
          width: 100px;
          text-align: right;
          font-size: 14px;
          color: #606260;
          font-weight: 700;
          padding-right: 12px;
        }
        .purchase {
          margin-left: 30px;
        }
        .tagList {
          margin-left: 30px;
        }
        .valueBox {
          display: flex;
          align-items: center;
          margin-left: 30px;
        }
        .deleteIcon {
          margin-left: 30px;
        }
      }
    }
  }
.addCondition {
  margin: 50px 0 0 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 160px;
  .el-icon-circle-plus:before {
    font-size: 14px;
    color: #999999;
  }
  span {
    margin-left: 10px;
  }
}
.intelDataBox {
  width: 200px;
  margin: 60px 0 0 150px;
  .intelTit {
    font-size: 14px;
    color: #666666;
    font-weight: 500;
  }
  .intelList {
    margin-top: 20px;
    border: 1px solid #eeeeee;
    .intelItem {
      display: flex;
      align-items: center;
      background: #fdfdfd;
      height: 35px;
      line-height: 35px;
      border-bottom: 1px solid #eeeeee;
      padding-left: 20px;
      span {
        font-size: 14px;
        color: #666666;
        font-weight: 600;
      }
    }
  }
}
</style>
<style scoped>
.newGroupBox /deep/ .formBox {
  width: 500px;
}
/*.group-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {*/
/*  color: #FFFFFF;*/
/*}*/
.fenye {
  margin-top: 30px;
}
.fenye /deep/ .dialog-footer {
  margin: 30px auto 0 auto;
  display: flex;
  justify-content: center;
}
.znAddBox /deep/ .conditionBox {
  display: flex;
  align-items: center;
}
.znAddBox /deep/ .conditionBox .anAddTit {
  margin-right: 20px;
}
.tagCustomer /deep/ .el-form-item__content {
  display: flex;
  width: 260px;
}
.tagCustomer {
  display: flex !important;
}
.tagCustomer /deep/ .el-form-item__content span {
  margin: 0 5px;
}
.formSearch /deep/ .el-form {
  display: flex;
  flex-wrap: wrap;
}
.btnBox /deep/ .el-radio {
  margin-right: 8px;
}
.btnBox /deep/ .el-radio__label {
  display: none;
}
 ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }
</style>
