<template>
  <el-dialog title="关联上架组件" :visible.sync="dialogTableVisible" width="850px">
    <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="getList"
          @clear="getList"
        />
      </div>
      <div class="tips" style="font-size:14px">
        没有适用规则？<el-button type="text" size="small" @click="$router.push('/addRule')">
          去新建上架规则（{{ totalCount }}/20）
        </el-button>
      </div>
    </div>
    <el-table :data="tableDate" @row-click="onRowClick">
      <el-table-column width="35">
        <template slot-scope="{row}">
          <el-radio v-model="tableRadio" :label="row">
            <i />
          </el-radio>
        </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="可见人群">
        <template slot-scope="{row}">
          <p v-if="row.memberType==1">
            全部会员
          </p>
          <p v-else>
            {{ row.echoData }}
          </p>
        </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>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="submit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/service/request.js';

export default {
  name: 'RelatePop',
  props: {
    integralMallProId: String,
  },
  data () {
    return {
      tableRadio: '',
      tableDate: [],
      relateForm: {
        search: '',
        pageSize: 5,
        currentPage: 1,
      },
      dialogTableVisible: false,
      ruleTitle: '',
    };
  },
  watch: {

  },
  mounted () {

  },
  methods: {
    onRowClick (row) {
      this.tableRadio = row;
    },
    showPop () {
      this.dialogTableVisible = true;
      this.getList();
    },
    getList () {
      request.get('/api-integral-mall/page-rule', { params: this.relateForm }).then(async (res) => {
        this.tableDate = res.data.result.result || [];
        this.totalCount = res.data.result.totalCount;
        for (let i = 0; i < this.tableDate.length; i++) {
          const item = this.tableDate[i];
          if (item.memberType == 3) {
            const res = await this.echoData(item);
            item.echoData = res.data.result;
          }
        }
        this.tableDate = this.tableDate.splice(0);
      });
    },
    echoData (row) {
      const form = new FormData();
      form.append('params', row.filterJson);
      form.append('requestProject', 'integral-mall');
      form.append('sceneCode', 'member');
      return request.post('/api-plug/screening-show-back', form);
    },
    cancel () {
      this.tableRadio = '';
      this.dialogTableVisible = false;
    },
    submit () {
      this.btnLoading = true;
      const data = {};
      console.log(this.tableRadio);
      console.log(this.integralMallProId);
      data.integralMallProIdList = [this.integralMallProId];
      data.integralMallProRuleId = this.tableRadio.integralMallProRuleId;
      request.post('/api-integral-mall/add-rule-pro', data).then(res => {
        this.$message.success('添加成功');
        this.dialogTableVisible = false;
        this.$emit('finish');
      }).finally(_ => {
        this.btnLoading = false;
      });
    },
  },
};
</script>

<style>

</style>
