{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="__STATIC__/element-ui/index.css">
<script src="STATIC_JS/vue.js"></script>
<script src="__STATIC__/element-ui/index.js"></script>
<style>
  .pagination{
    text-align: right!important;
    padding-top: 20px!important;
  }
  .cell{
    padding: 0!important;
  }
  .selWidth {
    width: 350px !important;
    margin-bottom: 5px;
  }
  .whereWidth{
    margin-top: 5px;
  }
  .goods-image{
    width: 80px;
    height: 80px;
  }
  .tips{
    font-size: 13px;
    color: #cccccc;
    line-height: 15px;
  }
</style>
{/block}

{block name="main"}
<div id="vueContent">
  <el-card class="box-card">
    <!--顶部搜索栏-->
    <div slot="header" class="clearfix">
      <div class="container">
        <el-form inline size="small" label-width="80px">
          <el-form-item label="搜索">
            <el-input v-model="tableFrom.title" placeholder="请输入等级名称" class="selWidth" clearable></el-input>
            <el-input v-model="tableFrom.weight" placeholder="请输入权重值" class="selWidth" clearable>
              <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <!--操作按钮-->
        <el-button type="primary" effect="dark" size="small" @click="editLevel()">添加等级</el-button>
      </div>
    </div>
    <!--表格信息-->
    <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%">
      <el-table-column prop="id" label="ID" min-width="50" align="center"></el-table-column>
      <el-table-column prop="title" label="等级名称" min-width="100" align="center"></el-table-column>
      <el-table-column label="等级权重" min-width="100" align="center">
        <template slot-scope="scope">
          <el-tag type="info" effect="dark">{{scope.row.weight}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="团队奖励比例" min-width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.commission_rate}}%
        </template>
      </el-table-column>
      <el-table-column label="团队奖励层级" min-width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.commission_tier}}层
        </template>
      </el-table-column>
      <el-table-column prop="same_level_rate" label="平级奖比例" min-width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.same_level_rate}}%
        </template>
      </el-table-column>
      <el-table-column prop="same_level_tier" label="平级奖层级" min-width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.same_level_tier}}层
        </template>
      </el-table-column>
      <el-table-column label="升级条件" min-width="150" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.upgrade_type == 0" type="danger" effect="dark" size="small">不可升级</el-tag>
          <el-tag v-else-if="scope.row.upgrade_type == 1" effect="dark" size="small">满足以下任一条件</el-tag>
          <el-tag v-else-if="scope.row.upgrade_type == 2" type="success" effect="dark" size="small">满足以下全部条件</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editLevel(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteLevel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="pagination">
      <el-pagination :current-page="tableFrom.page" hide-on-single-page :total="tableData.total" @current-change="pageChange"></el-pagination>
    </div>
  </el-card>
  <!-- 等级编辑 -->
  <el-dialog title="等级编辑" :visible.sync="editDialog" width="75%" append-to-body :close-on-click-modal="false">
    <el-form size="small" label-width="150px" :model="currentInfo" :rules="rules" ref="formData">
      <el-form-item label="等级名称" prop="title">
        <el-input v-model="currentInfo.title" placeholder="请输入等级名称" class="selWidth" type="text"></el-input>
      </el-form-item>
      <el-form-item label="等级权重" prop="weight">
        <el-input placeholder="请输入等级权重" v-model="currentInfo.weight" type="number" step="1" :max="99" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="团队奖励比例" prop="commission_rate">
        <el-input placeholder="请输入团队奖励比例" v-model="currentInfo.commission_rate" type="number" step="0.01" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="团队奖励层级限制" prop="commission_tier">
        <el-input placeholder="请输入团队奖励层级限制" v-model="currentInfo.commission_tier" type="number" step="1" class="selWidth"></el-input>
        <p class="tips">代表当前等级的团队奖励最多有多少人可以获得，超过限制后的当前等级成员获得平级奖；0则不限制人数。</p>
      </el-form-item>
      <el-form-item label="平级奖比例" prop="same_level_rate">
        <el-input placeholder="请输入平级奖比例" v-model="currentInfo.same_level_rate" type="number" step="0.01" class="selWidth"></el-input>
      </el-form-item>
      <el-form-item label="平级奖层级限制" prop="same_level_tier">
        <el-input placeholder="请输入平级奖层级限制" v-model="currentInfo.same_level_tier" type="number" step="1" class="selWidth"></el-input>
        <p class="tips">代表当前等级的平级奖最多有多少人可以获得，超过限制后的当前等级成员无奖励；0则不限制人数。</p>
      </el-form-item>
      <el-form-item label="升级方式">
        <el-radio-group v-model="currentInfo.upgrade_type">
          <el-radio :label="0">不可升级</el-radio>
          <el-radio :label="1">满足以下任一条件</el-radio>
          <el-radio :label="2">满足以下全部条件</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="升级条件" prop="upgrade_conditions" v-if="Number(currentInfo.upgrade_type) !== 0">
        <el-checkbox-group v-model="currentInfo.upgrade_conditions.where" size="small">
          <el-checkbox label="one_people" border>直推人数</el-checkbox>
          <el-checkbox label="team_people" border>团队人数</el-checkbox>
          <el-checkbox label="one_money" border>直推业绩金额</el-checkbox>
          <el-checkbox label="team_money" border>团队业绩金额</el-checkbox>
          <el-checkbox label="buy_goods" border>购买指定商品之一</el-checkbox>
        </el-checkbox-group>
        <el-input v-if="Object.values(currentInfo.upgrade_conditions.where).includes('one_people')" placeholder="请输入人数" v-model="currentInfo.upgrade_conditions.one_people" type="number" step="1" class="whereWidth">
          <template slot="prepend">直推</template>
          <template slot="append">人升级</template>
        </el-input>
        <el-input v-if="Object.values(currentInfo.upgrade_conditions.where).includes('team_people')" placeholder="请输入人数" v-model="currentInfo.upgrade_conditions.team_people" type="number" step="1" class="whereWidth">
          <template slot="prepend">团队人数达</template>
          <template slot="append">人升级</template>
        </el-input>
        <el-input v-if="Object.values(currentInfo.upgrade_conditions.where).includes('one_money')" placeholder="请输入金额" v-model="currentInfo.upgrade_conditions.one_money" type="number" step="1" class="whereWidth">
          <template slot="prepend">直推订单金额达</template>
          <template slot="append">元升级</template>
        </el-input>
        <el-input v-if="Object.values(currentInfo.upgrade_conditions.where).includes('team_money')" placeholder="请输入金额" v-model="currentInfo.upgrade_conditions.team_money" type="number" step="1" class="whereWidth">
          <template slot="prepend">团队订单金额达</template>
          <template slot="append">元升级</template>
        </el-input>
        <div class="buy-goods-content whereWidth" v-if="Object.values(currentInfo.upgrade_conditions.where).includes('buy_goods')">
          <el-button type="info" effect="dark" size="small" @click="selectGoods">选择商品</el-button>
          <el-table v-if="Object.values(currentInfo.upgrade_conditions.buy_goods || {}).length > 0"
                    :data="Object.values(currentInfo.upgrade_conditions.buy_goods || {})" style="width: 100%">
            <el-table-column prop="goods_id" label="商品ID" min-width="50" align="center"></el-table-column>
            <el-table-column label="商品图片" min-width="100" align="center">
              <template slot-scope="scope">
                <img class="goods-image" :src="goodsImgHandle(scope.row.goods_image)" />
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称" min-width="150" align="left"></el-table-column>
            <el-table-column label="操作" min-width="150" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deleteGoods(scope.row.goods_id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" effect="dark" size="small" @click="submitSave">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
{/block}

{block name="script"}
<script>
  new Vue({
    el:'#vueContent',
    data(){
      return {
        // 列表相关
        listLoading: true,
        tableData: {
          data: [],
          total: 0,
        },
        tableFrom: {
          page: 1,
          limit: 10,
          title: '',
          weight: '',
        },
        // 等级编辑相关
        editDialog: false,
        currentInfo: {
          title: '',
          weight: '',
          commission_rate: '',
          commission_tier: 0,
          same_level_rate: '',
          same_level_tier: 0,
          upgrade_type: 1,
          upgrade_conditions: {
            where: [],
            one_people: '',
            team_people: '',
            one_money: '',
            team_money: '',
            buy_goods: {},
          },
        },
        rules: {
          title: [
            { required: true, message: '请输入等级名称', trigger: 'change' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'change' }
          ],
          weight: [
            { required: true, message: '请输入等级权重', trigger: 'change' },
          ],
          commission_rate: [
            { required: true, message: '请输入团队奖励比例', trigger: 'change' },
          ],
          commission_tier: [
            { required: true, message: '请输入团队奖励层级', trigger: 'change' },
          ],
          same_level_rate: [
            { required: true, message: '请输入平级奖比例', trigger: 'change' },
          ],
          same_level_tier: [
            { required: true, message: '请输入平级奖层级', trigger: 'change' },
          ],
          upgrade_conditions: [
            {
              validator: function (rule, value, callback) {
                let where = Object.values(value.where);
                if(where.includes('one_people') && Number(value.one_people) <= 0){
                  callback(new Error('请输入直推人数要求！'));
                }else if(where.includes('team_people') && Number(value.team_people) <= 0){
                  callback(new Error('请输入团队人数要求！'));
                }else if(where.includes('one_money') && Number(value.one_money) <= 0){
                  callback(new Error('请输入直推业绩金额要求！'));
                }else if(where.includes('team_money') && Number(value.team_money) <= 0){
                  callback(new Error('请输入团队业绩金额要求！'));
                }else if(where.includes('buy_goods') && Object.values(value.buy_goods || {}).length <= 0){
                  callback(new Error('请至少选择一个商品！'));
                }else{
                  callback();
                }
              }, trigger: 'change'
            }
          ],
        }

      };
    },
    mounted(){
      this.getList(1);
    },
    methods: {
      // 获取列表
      getList(num) {
        let _this = this;
        _this.listLoading = true;
        _this.tableFrom.page = num ? num : this.tableFrom.page;
        $.ajax({
          url: ns.url("team://shop/index/level"),
          data: { params: _this.tableFrom },
          dataType: 'JSON',
          type: 'POST',
          success: function(res) {
            if(Number(res.code) === 0){
              let data = res.data || {};
              _this.tableData.data = data.list || {};
              _this.tableData.total = data.count || 0;
              _this.listLoading = false;
            }
          }
        });
      },
      pageChange(page) {
        this.tableFrom.page = page;
        this.getList('');
      },
      // 等级编辑 - 添加 or 编辑信息
      editLevel(info = {}){
        let defaultInfo = Object.assign({}, this.$options.data().currentInfo);
        let useInfo = defaultInfo;
        if(Object.values(info).length > 0){
          useInfo.id = info.id || 0;
          useInfo.title = info.title || defaultInfo.title;
          useInfo.weight = info.weight || defaultInfo.weight;
          useInfo.commission_rate = info.commission_rate || defaultInfo.commission_rate;
          useInfo.commission_tier = info.commission_tier || defaultInfo.commission_tier;
          useInfo.same_level_rate = info.same_level_rate || defaultInfo.same_level_rate;
          useInfo.same_level_tier = info.same_level_tier || defaultInfo.same_level_tier;
          useInfo.upgrade_type = info.upgrade_type;
          // 信息补齐
          useInfo.upgrade_conditions.where = info.upgrade_conditions.where || defaultInfo.upgrade_conditions.where;
          useInfo.upgrade_conditions.one_people = info.upgrade_conditions.one_people || defaultInfo.upgrade_conditions.one_people;
          useInfo.upgrade_conditions.team_people = info.upgrade_conditions.team_people || defaultInfo.upgrade_conditions.team_people;
          useInfo.upgrade_conditions.one_money = info.upgrade_conditions.one_money || defaultInfo.upgrade_conditions.one_money;
          useInfo.upgrade_conditions.team_money = info.upgrade_conditions.team_money || defaultInfo.upgrade_conditions.team_money;
          useInfo.upgrade_conditions.buy_goods = info.upgrade_conditions.buy_goods || defaultInfo.upgrade_conditions.buy_goods;
        }

        this.currentInfo = Object.assign({}, useInfo);
        this.editDialog = true;
      },
      // 等级编辑 - 选择商品
      selectGoods(){
        let _this = this;
        let buyGoodsList = Object.assign({}, _this.currentInfo.upgrade_conditions.buy_goods);
        let selectedGoodsIds = [];
        Object.values(buyGoodsList).forEach((item,index) => {
          selectedGoodsIds[index] = item.goods_id;
        });
        goodsSelect(function(res) {
          if (!res.length) return false;
          let buyGoods = {};
          Object.values(res).forEach((item,index) => {
            buyGoods[index] = {
              goods_id: item.goods_id,
              goods_name: item.goods_name,
              goods_image: item.goods_image,
            };
          });
          _this.currentInfo.upgrade_conditions.buy_goods = Object.assign({}, buyGoods);
          _this.$forceUpdate();
        }, selectedGoodsIds,{max_num:20,disabled:1});
      },
      // 等级编辑 - 删除商品
      deleteGoods(goods_id){
        let _this = this;
        let goodsList = Object.assign({}, _this.currentInfo.upgrade_conditions.buy_goods);
        Object.values(goodsList).forEach((item,index)=>{
          if(Number(item.goods_id) === Number(goods_id)) {
            delete goodsList[index];
          }
        });

        _this.currentInfo.upgrade_conditions.buy_goods = Object.assign({}, Object.values(goodsList));
        _this.$forceUpdate();
      },
      // 等级编辑 - 提交
      submitSave(){
        let _this = this;
        _this.$refs['formData'].validate((valid) => {
          if (valid) {
            $.ajax({
              url: ns.url("team://shop/index/levelEdit"),
              data: { info: _this.currentInfo },
              dataType: 'JSON',
              type: 'POST',
              success: function(res) {
                if(Number(res.code) === 0){
                  _this.getList('');
                  _this.editDialog = false;
                }
                _this.$alert(res.message);
              }
            });
          }
        });
      },
      // 点击删除等级
      deleteLevel(id){
        let _this = this;
        _this.$confirm('确认删除当前等级吗', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消删除',
        }).then(() => {
          $.ajax({
            url: ns.url("team://shop/index/levelDel"),
            data: { id: id },
            dataType: 'JSON',
            type: 'POST',
            success: function(res) {
              _this.getList('');
              _this.$alert(res.message);
            }
          });
        }).catch(() => {})
      },
      // 处理商品图片
      goodsImgHandle(goods_image){
        let imgArr = goods_image.split(',')

        return imgArr[0] || '/public/static/img/default_img/article.png';
      }
    }
  });
</script>
{/block}