<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="分类配置" style="margin-bottom: 20px"></el-page-header>
    <el-divider></el-divider>

    <div class="form-container">
      <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="90px">
        <el-form-item :label="'主标题:'" prop="mainTitle">
          <el-input style="width:250px" disabled v-model="mainForm.mainTitle"></el-input>
        </el-form-item>
        <el-form-item :label="'副标题:'" prop="subtitle">
          <el-input style="width:250px" disabled v-model="mainForm.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="商品类别" prop="goodsType">
          <el-select v-model="mainForm.goodsType" placeholder="请选择商品类别" style="width: 250px" disabled>
            <el-option label="普通商品" :value="1"></el-option>
            <el-option label="套购商品" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-group">
      <el-button size="small" type="primary" @click="addClassify" v-if="mainForm.goodsType === 1">选择分类</el-button>
      <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
    </div>

    <div class="diy-table" v-if="mainForm.goodsType === 1">
      <div class="table-head clearfix">
        <div class="item goods">商品名称</div>
        <div class="right">
          <div class="item name">规格</div>
          <div class="item input">划线价格</div>
          <div class="item input">销售价</div>
          <div class="item input">分销金额</div>
          <div class="item input">佣金比例</div>
          <div class="item input">内部分销金额</div>
          <div class="item input">内部佣金比例</div>
          <div class="item input">库存</div>
          <div class="item input">销量</div>
        </div>
        <div class="blank">操作</div>
      </div>
      <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <div class="goods-info">
          <img :src="item.imgUrl" alt="" />
          {{ item.goodsName }}
        </div>
        <div class="spec-list">
          <div class="spec-item" v-for="(it, idx) in item.goodsSpecs" :key="idx">
            <div class="col name">{{ it.name }}-{{ it.specValue }}</div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.orgPrice"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.price"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.shareAmount"></el-input>
            </div>
            <div class="col input"><el-input disabled type="number" size="small"
                v-model="it.innerSharePercent"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.innerShareAmount"></el-input>
            </div>
            <div class="col input"><el-input disabled type="number" size="small"
                v-model="it.innerSharePercent"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.stockNum"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.soldNum"></el-input></div>
          </div>
        </div>
        <div class="operation">
          <el-button type="text" style="color: #f56c6c" @click="deleteGoods(item.goodsId, index)">删除</el-button>
        </div>
      </div>
      <div class="empty-text" v-if="goodsList.length < 1">暂无数据</div>
    </div>

    <div v-if="mainForm.goodsType === 2" style="margin-top: 20px">
      <el-table :data="goodsList" border fit highlight-current-row stripe>
        <el-table-column align="center" label="商品图片" prop="imgUrl" width="85">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px; display: block;" :src="scope.row.imgUrl"
              :preview-src-list="[scope.row.imgUrl]" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200"></el-table-column>
        <el-table-column align="center" label="最低销售价" prop="packageMinAmount" min-width="120" sortable></el-table-column>
        <el-table-column align="center" label="最低分佣金额" prop="packageMinShareAmount" min-width="130"
          sortable></el-table-column>
        <el-table-column align="center" label="库存" prop="stockNum" min-width="110"></el-table-column>
        <el-table-column align="center" label="销量" prop="soldNum" min-width="110"></el-table-column>

        <el-table-column align="center" label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" style="color: #f56c6c"
              @click="deleteGoods(scope.row.goodsId, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button type="primary" @click="submitMainForm" :loading="formLoading">{{ formLoading ? "提交中 ..." : "提 交"
        }}</el-button>
        <el-button @click="goBack">关 闭</el-button>
      </div>
    </div>

    <!-- 选择商品 -->
    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="50%" :close-on-click-modal="false">
      <div class="dialog-container clearfix">
        <div class="left fl">
          <div class="item" @click="changeClassify('')">全部分类</div>
          <div class="group" v-for="(item, index) in classifyList" :key="index">
            <div class="item" @click="toggleOpen(index)">
              <i :class="item.isOpen ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i> {{ item.name }}
            </div>
            <div class="child" v-if="item.isOpen">
              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex"
                @click="changeClassify(childItem.categoryId)">{{ childItem.name }}</div>
            </div>
          </div>
        </div>

        <div class="right fl">
          <div class="search">
            <el-input placeholder="请输入商品名称进行搜索" v-model="keyword" class="input-with-select" clearable size="small"
              style="width: 250px">
              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
            </el-input>
          </div>
          <div class="table" style="margin: 10px 0 20px;">
            <el-table v-loading="table_listLoading" :data="table_dataList" element-loading-text="Loading"
              tooltip-effect="dark" style="width: 100%" max-height="270" @selection-change="handleChooseGoods">
              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200"
                show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
            </el-table>
          </div>
          <div class="pagination clearfix">
            <div class="fr">
              <el-pagination @current-change="handleTableCurrentChange" :current-page="table_currentPage"
                :page-size="table_pageSize" background layout="prev, pager, next" :total="table_listTotal">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
        <el-button @click="cancelAddGoods">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择分类 -->
    <el-dialog title="选择分类" :visible.sync="addClassifyVisible" :show-close="false" width="40%"
      :close-on-click-modal="false">
      <div class="classify-list">
        <el-tree :data="classifyList" show-checkbox default-expand-all node-key="categoryId" ref="tree" highlight-current
          :props="defaultProps">
        </el-tree>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddClassify">保 存</el-button>
        <el-button @click="cancelAddClassify">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getactivityGoodsDetail, addActiveGoods, getEnterpriseTemplate, getClassifyList, getGoodsList, getMoreGoodsList } from "@/api/special";
export default {
  data() {
    return {
      objectId: "", // 小程序模板id
      type: "", // 类型
      companyWechatId: "",
      useTemplate: "",
      formLoading: false,
      mainForm: {
        mainTitle: "", // 主标题
        subtitle: "", // 副标题
        goodsType: 1,
      },
      mainFormRules: {
        mainTitle: [
          { required: true, message: "请输入主标题", trigger: "blur" },
        ],
        subtitle: [
          { required: true, message: "请输入副标题", trigger: "blur" },
        ],
        goodsType: [
          { required: true, message: "请选择商品类别", trigger: "change" },
        ],
      },
      goodsList: [], // 列表数据

      addGoodsVisible: false,

      classifyList: [],
      classifyCurrent: '',
      keyword: '',
      table_dataList: null, // 列表数据
      table_listLoading: true, // 列表加载loading
      table_currentPage: 1, // 当前页码
      table_pageSize: 10, // 每页数量
      table_listTotal: 0, // 列表总数
      table_chooseGoods: [], // table中 当前选择商品

      addClassifyVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    };
  },
  computed: {

  },
  created() {
	if(this?.$route?.params?.pageCode){
		const item = JSON.parse(this?.$route?.params?.pageCode)
		this.mainForm.mainTitle = item.mainTitle;
		this.mainForm.subtitle = item.subTitle;
		this.mainForm.goodsType = item.type;
		this.objectId = item.goodsNewsCategoryId
	}

    this.getEnterpriseTemplate()
    this.getactivityGoodsDetail()
  },

  methods: {
    // 添加活动商品
    addActiveGoods(params) {
      addActiveGoods(params).then(res => {
        if (res.code == 200) {
          this.$router.go(-1)
        }
      })
    },

    //获取企业下模板
    getEnterpriseTemplate() {
      this.companyWechatId = JSON.parse(
        localStorage.getItem("greemall_user")
      ).companyWechatId;
      this.useTemplate = JSON.parse(
        localStorage.getItem("greemall_user")
      ).useTemplate;
      const parmas = {
        companyId: this.companyWechatId
      }
      getEnterpriseTemplate(parmas).then(res => {
        console.log('获取企业下模板', res)
      })
    },

    // 获取活动商品详情
    getactivityGoodsDetail() {
      const params = {
        objectId: this.objectId, // 小程序模板id
        type: 1, // 类型: 1=新维度分类，2=首页弹窗，3=活动专区1，4=活动专区2左侧，5=活动专区2右侧，6=专场专区1，7=专场专区2，8=专场专区3，9=专场专区4
      };
      getactivityGoodsDetail(params).then((res) => {
        res.data.activeGoodsList.forEach(item => {
          item.imgUrl = item?.goods?.imgUrl || ""
        });

        this.goodsList = res.data.activeGoodsList;

        if (this.mainForm.goodsType === 2) {
          this.goodsList.forEach((item, index) => {
            this.$set(this.goodsList, index, { ...item, ...(item?.goods || {}) });
          })
        }
      });
    },

    // 删除商品
    deleteGoods(item, index) {
      this.goodsList.splice(index, 1)
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },

    // 获取分类列表
    getClassifyList(state) {
      getClassifyList({ categoryLevel: 1, status: true }).then(res => {
        res.data.forEach(item => {
          item.isOpen = false;
        });
        this.classifyList = res.data;
        this.classifyCurrent = '';
        if (!state) {
          this.getGoodsList();
        }
      })
    },

    // 展开/收起 分类
    toggleOpen(index) {
      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
    },

    // 切换分类
    changeClassify(cid) {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分类');
      }
      this.classifyCurrent = cid;
      this.table_currentPage = 1;
      this.getGoodsList();
    },

    // 搜索
    getGoodsListByScreen() {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可搜索');
      }
      this.table_currentPage = 1;
      this.getGoodsList();
    },

    // 获取商品列表
    getGoodsList() {
      getGoodsList({
        pageNum: this.table_currentPage,
        pageSize: this.table_pageSize,
        keyword: this.keyword,
        categoryId: this.classifyCurrent,
        goodsTypes: this.mainForm.goodsType === 1 ? 'COMMON' : 'PACKAGE',
      }).then(res => {
        let oldGoodsList = this.goodsList;
        let newGoodsList = res.data.records;
        for (let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for (let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if (newItem.goodsId === oldItem.goodsId) {
              newGoodsList[j].selected = true;
              break;
            }
          }
        }
        for (let j = 0; j < newGoodsList.length; j++) {
          let newItem = newGoodsList[j]
          if (newItem.promotionGroup === true) {
            newGoodsList[j].selected = true;
          }
        }
        this.table_dataList = newGoodsList;
        this.table_listTotal = res.data.total;
        this.table_listLoading = false;
      })
    },

    // 查询重复值并禁选
    checkboxSelect(row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },

    // 更改列表当前页
    handleTableCurrentChange(val) {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分页');
      }
      this.table_currentPage = val;
      this.getGoodsList();
    },

    // table点击选择商品
    handleChooseGoods(val) {
      this.table_chooseGoods = val;
    },

    // 打开 选择商品
    addGoods() {
      this.addGoodsVisible = true;
      this.getClassifyList();
    },

    // 取消 选择商品
    cancelAddGoods() {
      this.addGoodsVisible = false;
    },

    // 提交 选择商品
    submitAddGoods() {
      let oldGoodsList = this.goodsList;
      let newGoodsList = this.table_chooseGoods;
      this.goodsList = oldGoodsList.concat(newGoodsList);
      this.addGoodsVisible = false;
    },

    // 打开 选择分类
    addClassify() {
      this.addClassifyVisible = true;
      this.getClassifyList(true);
    },

    // 取消 选择分类
    cancelAddClassify() {
      this.addClassifyVisible = false;
    },

    // 提交 选择分类
    submitAddClassify() {
      if (this.$refs.tree.getCheckedNodes().length <= 0) {
        return this.$errorMsg('请选择分类');
      }
      let checkeds = this.$refs.tree.getCheckedNodes();
      let ids = [];
      checkeds.forEach(item => {
        if (item.level === 2) {
          ids.push(item.categoryId);
        }
      })
      getMoreGoodsList({ categoryIds: ids.join(',') }).then(res => {
        let oldGoodsList = this.goodsList;
        let newGoodsList = [];
        res.data.forEach(item => {
          if (item.promotionGroup === false) {
            newGoodsList.push(item);
          }
        })
        let allGoodsList = oldGoodsList.concat(newGoodsList);
        let showGoodsList = [];
        let obj = {};
        for (var i = 0; i < allGoodsList.length; i++) {
          if (!obj[allGoodsList[i].goodsId]) {
            showGoodsList.push(allGoodsList[i]);
            obj[allGoodsList[i].goodsId] = true;
          }
        }
        this.goodsList = showGoodsList;
        this.addClassifyVisible = false;
      })
    },

    // 提交
    submitMainForm() {
      this.$refs.mainForm.validate((valid) => {
        if (valid) {
          const params = {
            goodsList: this.goodsList,
            objectId: this.objectId,
            type: 1
          }
          this.addActiveGoods(params);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-container {
  margin-top: 40px;

  // padding: 0 6%;
  .title {
    font-size: 16px;
    margin-bottom: 30px;
    padding-left: 10px;
    font-weight: bold;
  }

  .tips {
    margin-top: 10px;

    span {
      display: inline-block;
      width: 300px;
      text-align: center;
      line-height: 32px;
      background: #ffefef;
      font-size: 14px;
      color: #f66460;
    }
  }

  .tips2 {
    font-size: 12px;
    color: #999999;
    line-height: 30px;
  }

  .container {
    padding: 10px 20px 0;
    background: #f5f5f5;
    border-radius: 10px;
  }

  .addBtn {
    padding: 10px 0;
  }
}


.diy-table {
  overflow-x: scroll;
  border-left: 1px solid #f5f5f5;
  margin-top: 20px;
  width: 100%;
  // margin-left: 77px;
  // min-width: 1185px;
  max-width: 100%;

  .table-head {
    display: flex;

    .item {
      height: 40px;
      line-height: 40px;
      float: left;
      font-weight: 500;
      font-size: 14px;
      background: #f5f5f5;
      text-align: center;
    }

    .right {
      float: left;
      width: 94%;
      min-width: 1150px;
      flex-shrink: 0;
      height: 40px;
    }

    .goods {
      width: 20%;
      min-width: 250px;
    }

    .name {
      width: 11.1111%;
      min-width: 100px;
    }

    .input {
      width: 11.1111%;
      min-width: 100px;
    }

    .opera {
      width: 11.1111%;
      min-width: 80px;
      // text-align: right;
    }

    .blank {
      width: 6%;
      min-width: 90px;
      font-weight: 500;
      font-size: 14px;
      background: #f5f5f5;
      text-align: center;
      line-height: 40px;
    }
  }

  .goods-item {
    display: flex;
    align-content: center;

    .goods-info {
      flex-shrink: 0;
      width: 20%;
      min-width: 250px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
      font-size: 14px;

      &:last-child {
        border-bottom: none;
      }

      img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        flex-shrink: 0;
      }
    }

    .spec-list {
      width: 94%;
      min-width: 1150px;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .spec-item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .col {
          flex-shrink: 0;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 10px;
          border-right: 1px solid #f5f5f5;

          &:last-child {
            border-right: none;
          }
        }

        .name {
          width: 11.1111%;
          min-width: 100px;
          font-size: 14px;
          text-align: center;
        }

        .input {
          width: 11.1111%;
          min-width: 100px;
        }

        .btn {
          width: 11.1111%;
          min-width: 80px;
        }
      }
    }

    .operation {
      flex-shrink: 0;
      width: 6%;
      min-width: 90px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
    }
  }

  .empty-text {
    line-height: 60px;
    text-align: center;
    color: #909399;
  }
}

.dialog-container {
  .left {
    width: 140px;
    height: 350px;
    overflow-y: scroll;

    .group {
      margin-top: 10px;
    }

    .child {
      margin-top: 5px;

      .item {
        padding-left: 18px;
      }
    }

    .item {
      cursor: pointer;
      line-height: 24px;
    }
  }

  .right {
    width: calc(100% - 140px);
    height: 350px;
    box-sizing: border-box;
    padding-left: 20px;
  }
}

::v-deep .el-form-item__label {
  margin-left: 0px !important;
}</style>