<template>
  <el-dialog
    title="上架规则列表"
    :key="updateDialog"
    :visible.sync="dialogTableVisible"
    :before-close="closePop"
    :width="$store.state.product.ruleMemberFilterClose==0?'1200px':'900px'"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="上架规则" name="list">
        <div class="tab-pane-container">
          <div class="search-wrap">
            <div class="table-page-search-wrapper">
              <el-form @submit.native.prevent>
                <el-input
                  v-model="relateForm.ruleTitle"
                  placeholder="请输入上架规则名称"
                  prefix-icon="el-icon-search"
                  clearable
                  class="w-260"
                  @keyup.enter.native="getSearchList"
                  @clear="getSearchList"
                />
              </el-form>
            </div>
            <!-- <div class="tips" style="font-size:14px">
              没有适用规则？<el-button type="text" size="small" @click="$router.push('/addRule')">
                去新建上架规则
              </el-button>
            </div> -->
          </div>
          <el-table :data="tableDate" @row-click="onRowClick" v-loading="loading">
            <el-table-column width="35">
              <template slot-scope="{row}">
                <div class="label">
                  <el-radio v-model="tableRadio" :label="row.integralMallProRuleId" />
                </div>
              </template>
            </el-table-column>
            <el-table-column property="ruleTitle" 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 label="可见条件" show-overflow-tooltip min-width="180">
              <template slot-scope="{row}">
                {{ row.memberType==1?'全部客户':row.showBack }}
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-conteiner" style="padding:10px 0 0 0;" v-if="totalCount>5">
            <div class="pagination">
              <el-pagination
                layout="prev, pager, next"
                :current-page.sync="relateForm.currentPage"
                :page-size.sync="relateForm.pageSize"
                @current-change="getList"
                :total="totalCount"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新建规则" name="form">
        <div class="tab-pane-container" style="max-height: 500px;overflow-y: auto;overflow-x: hidden;">
          <ruleInfo
            :isDialog="true"
            ref="ruleInfo"
            @submit="getRow"
            @btnLoading="btnLoading=true"
            @btnStop="btnLoading=false"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="closePop">取消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="btnLoading"
        @click="submit"
      >确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/service/request.js';
import ruleInfo from '@/components/ruleDetail.vue';
// import qs from 'qs';
export default {
  name: 'RelatePop',
  components: {
    ruleInfo,
  },
  props: {
    integralMallProRuleId: String,
  },
  data () {
    return {
      loading: false,
      btnLoading: false,
      tableRadio: '',
      activeName: 'list',
      tableDate: [],
      relateForm: {
        ruleTitle: '',
        pageSize: 5,
        currentPage: 1,
      },
      dialogTableVisible: false,
      echoRuleId: '',
      updateDialog: false,
    };
  },
  watch: {
    integralMallProRuleId (val) {
      if (val) {
        this.echoRuleId = val;
      }
    },
  },
  mounted () {
  },
  methods: {
    onRowClick (row) {
      this.tableRadio = row.integralMallProRuleId;
    },
    showPop () {
      this.dialogTableVisible = true;
      this.getList();
    },
    getSearchList () {
      this.relateForm.currentPage = 1;
      this.getList();
    },
    getList () {
      this.loading = true;
      this.tableRadio = '';
      request.get('/api-integral-mall/page-rule', { params: this.relateForm }).then(res => {
        this.tableDate = res.data.result.result || [];
        this.totalCount = res.data.result.totalCount;
        this.tableDate = this.tableDate.splice(0);
        if (this.echoRuleId) this.tableRadio = this.echoRuleId;
        this.tableDate.forEach(async item => {
          if (item.memberType == 3 && !item.showBack) {
            const res = await this.echoData(item.filterJson);
            item.showBack = res.data.result;
          } else if (item.memberType == 4 && !item.showBack) {
            const { storeMode, storeWidgetId } = JSON.parse(item.filterJson);
            const res = await this.echoData2(storeWidgetId, storeMode);
            const { data: { result: { result } } } = res;
            if (result) {
              item.showBack = result.map(item => item.name).join(',');
            } else {
              item.showBack = '所有门店';
            }
          }
        });
      }).finally(_ => {
        this.loading = false;
      });
    },

    echoData (filterJson) { // 取得人群筛选器回显文字
      const form = new FormData();
      form.append('params', filterJson);
      form.append('requestProject', 'integral-mall');
      form.append('sceneCode', 'member');
      return request.post('/api-plug/screening-show-back', form);
    },
    echoData2 (key, type) { // 取得门店筛选器的文字回显
      const form = new FormData();
      form.append('key', key);
      form.append('selectType', type);
      form.append('currentPage', 1);
      form.append('pageSize', 20);
      return request.post('/api-plug/list-right-data', form);
    },
    closePop () {
      this.tableRadio = '';
      this.relateForm = {
        ruleTitle: '',
        pageSize: 5,
        currentPage: 1,
      };
      this.activeName = 'list';
      this.updateDialog = !this.updateDialog;
      this.dialogTableVisible = false;
      this.btnLoading = false;
    },
    finishBtnLoading () {
      this.btnLoading = false;
    },
    getRow (row) {
      this.$emit('finish', row);
    },
    submit () {
      if (this.activeName == 'list') {
        if (!this.tableRadio) {
          this.$message.warning('请选择规则');
          return;
        }
        const row = this.tableDate.filter(item => item.integralMallProRuleId == this.tableRadio)[0];
        this.btnLoading = true;
        this.$emit('finish', row);
      } else {
        this.$refs.ruleInfo.submit();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.label{
 /deep/ .el-radio__label{
    display: none;
  }
}
.tab-pane-container{
  margin-top: 24px;
}
</style>
