<template>
  <div class="mall-section-container">
    <div class="mall-content-section">
      <div class="mall-content-title">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '' }">
            <a href="/report/#/memberSummary">首页</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item>积分商城</el-breadcrumb-item>
          <el-breadcrumb-item>商品</el-breadcrumb-item>
          <el-breadcrumb-item>上架规则</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>
          <span>上架规则</span>
        </h3>
      </div>
      <div class="section">
        <div class="search-wrap">
          <div class="table-page-search-wrapper">
            <el-input
              v-model="ruleTitle"
              placeholder="请输入上架规则名称"
              prefix-icon="el-icon-search"
              clearable
              class="w-260"
              @keyup.enter.native="getSearchList"
              @clear="getSearchList"
            />
          </div>

          <el-button
            type="primary"
            size="small"
            :disabled="tableDate.length>=20"
            @click="addRule"
          >
            新建上架规则({{ tableDate.length }}/20)
          </el-button>
        </div>
        <el-table
          ref="table"
          :data="tableDate"
          style="width: 100%"
        >
          <el-table-column
            prop="ruleTitle"
            min-width="120px"
            label="上架规则"
          >
            <template slot-scope="{row}">
              <div>
                <div class="title">
                  {{ row.ruleTitle }}
                </div>
                <div
                  style="font-size: 12px;color: rgb(144, 147, 153);"
                >
                  {{ row.ruleExplanation }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="relationCount"
            label="已关联商品"
          >
            <template slot-scope="{row}">
              <span style="margin-right:20px">
                {{ row.relationCount }}
              </span>
              <el-button
                type="text"
                @click="relatingDetail(row.integralMallProRuleId,'查看')"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="{row}">
              <el-button
                type="text"
                @click="relatingDetail(row.integralMallProRuleId,'选择')"
              >
                关联商品
              </el-button>
              <el-button
                type="text"
                @click="editRule(row)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                @click="copyRule(row)"
              >
                复制
              </el-button>
              <el-button
                type="text"
                @click="delRule(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog :title="`${type}关联商品`" :visible.sync="dialogTableVisible" width="850px">
          <div :class="['infoTips',type=='查看'?'infoTips_waring':'']">
            <i :class="['el-icon-info','infoTipsIcon',type=='查看'?'infoTips_waring':'']" />
            <div class="infoTipsContent">
              {{ type=='查看'?'移除规则后，上架规则不再作用于商品，商品将不能在会员小程序-积分商城上展示，请谨慎操作！':'选中已关联上架规则的商品，则规则被更新' }}
              <br>
            </div>
          </div>
          <div class="search-wrap">
            <div class="table-page-search-wrapper">
              <el-select
                v-model="relateForm.proType"
                clearable
                class="w-160"
                placeholder="所有商品类型"
                @change="searchGoods"
              >
                <el-option label="优惠券" :value="1" />
                <el-option label="兑换券" :value="2" />
                <el-option label="实物礼品" :value="3" />
              </el-select>
              <el-select
                v-if="type=='选择'"
                v-model="relateForm.ruleRelationFlag"
                clearable
                placeholder="是否已关联上架规则"
                class="w-180"
                @change="searchGoods"
              >
                <el-option label="已关联上架规则" :value="0" />
                <el-option label="未关联上架规则" :value="1" />
              </el-select>
              <el-input
                placeholder="请输入礼品名称/礼品编码"
                v-model="relateForm.search"
                clearable
                size="small"
                class="w-260"
                @clear="searchGoods"
                @keyup.enter.native="searchGoods"
              />
            </div>
            <el-button type="primary" size="small" v-if="type=='查看'">
              批量移除
            </el-button>
          </div>
          <el-table :data="relatingGoodsTable" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column property="date" label="商品信息" min-width="160">
              <template slot-scope="{row}">
                <div class="img-text">
                  <img :src="row.mallProImageUrl" alt="">
                  <div class="text">
                    <p class="goods-descript">
                      {{ row.proName }}
                    </p>
                    <p class="goods-code">
                      {{ row.proCode }}
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column property="proType" label="商品类型" width="100" />
            <el-table-column property="costValue" label="成本" width="100" />
            <el-table-column property="virtualStock" label="当前库存" width="100" />
            <el-table-column property="ruleTitle" label="是否已关联规则" min-width="120">
              <template slot-scope="{row}">
                <p class="goods-descript">
                  {{ row.ruleTitle?row.ruleTitle:'否' }}
                </p>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-conteiner" style="padding:10px 0 0 0;">
            <div class="pagination">
              <el-pagination
                layout="prev, pager, next"
                :current-page.sync="relateForm.currentPage"
                :page-size.sync="relateForm.pageSize"
                @current-change="getRelatingGoodsTable"
                :total="totalCount"
              />
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogTableVisible=false">取消</el-button>
            <el-button
              type="primary"
              size="small"
              :loading="btnLoading"
              @click="submit"
              v-if="type=='选择'"
            >确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/service/request.js';
export default {
  data () {
    return {
      loading: false,
      tableDate: [
      ],
      relatingGoodsTable: [
      ],
      multipleSelection: [],
      dialogTableVisible: false,
      type: '选择',
      relateForm: {
        search: '',
        proType: '',
        pageSize: 5,
        currentPage: 1,
        ruleRelationFlag: '',
      },
      ruleTitle: '',
      totalCount: '',
    };
  },
  mounted () {
    this.getList();
  },
  methods: {
    getList () {
      request.get('/api-integral-mall/list-rule', { ruleTitle: this.ruleTitle }).then(res => {
        if (res.data.errorCode === 0) {
          if (res.data.result.result) {
            this.tableDate = res.data.result.result;
          }
        }
      });
      for (let i = 0; i < 19; i++) {
        this.tableDate.push(
          {
            ruleTitle: '新客积分兑换上架规则规则',
            ruleExplanation: '上架规则说明内容内容上架规则说明内容内容上架规则说明内容内容',
            relationCount: 236,
          },
        );
      }
    },
    relatingDetail (integralMallProRuleId, type) {
      this.dialogTableVisible = true;
      this.type = type;
      this.relateForm.currentPage = 1;
      this.relateForm.integralMallProRuleId = integralMallProRuleId;
      this.getRelatingGoodsTable();
    },
    editRule (row) {
      this.$router.push({ path: '/editRule', query: { id: row.id } });
    },
    addRule (row) {
      this.$router.push({ path: '/addRule' });
    },
    copyRule (row) {

    },
    delRelating (row) {
      this.$confirm('上架规则删除后，无法被商品关联使用，是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message.success('删除成功');
          this.getList();
        });
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    getRelatingGoodsTable () {
      this.loading = true;
      const api = this.type == '选择' ? '/api-integral-mall/page-select-rule-pro' : '/api-integral-mall/page-rule-pro';
      // const params =  this.type =='选择'?
      request.get(api, { params: this.relateForm }).then(res => {
        if (res.data.errorCode === 0) {
          if (res.data.result.result) {
            this.relatingGoodsTable = res.data.result.result;
            this.totalCount = res.data.result.totalCount;
          }
        }
      }).finally(_ => {
        this.loading = false;
      });
      this.relatingGoodsTable = [];
      for (let i = 0; i < 5; i++) {
        this.relatingGoodsTable.push({
          mallProImageUrl: 'https://pic01-10001430.image.myqcloud.com/f39e4665-db45-487e-847a-673fedddab44',
          proName: '上架规则说明内容内容上架规则说明内容内容上架规则说明内容内容',
          proCode: 236,
          proType: '实物礼品',
          costValue: 1000.00,
          virtualStock: 1000,
          ruleTitle: '新客积分兑换上架规则规则',
        });
      }
    },
    searchGoods () {
      this.relateForm.currentPage = 1;
      this.getRelatingGoodsTable();
    },

  },
};
</script>

<style lang="less" scoped>
.img-text{
  height: 60px;
  align-items: center;
  display: flex;
  img{
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.text {
    margin-left: 10px;
    font-size: 12px;
    line-height: 20px;
    .goods-descript {
      width:180px;
      color: #303133;
      font-size: 14px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .goods-code {
        font-size: 12px;
        color: #909399;
    }

}

}
</style>
