<template>
  <el-dialog title="上架规则" :visible.sync="dialogTableVisible" width="850px">
    <div class="search-wrap">
      <div class="table-page-search-wrapper">
        <el-input
          v-model="relateForm.ruleTitle"
          placeholder="请输入上架规则名称"
          prefix-icon="el-icon-search"
          clearable
          class="w-260"
          @keyup.enter.native="getSearchList"
          @clear="getSearchList"
        />
      </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="可见条件">
        <template slot-scope="{row}">
          <p v-if="row.memberType==1">
            全部会员
          </p>
          <div v-else>
            <el-tooltip
              effect="dark"
              placement="top-start"
              v-if="(row.showBack&&row.showBack.length>20)"
            >
              <div slot="content" style="line-height:18px; max-width:500px;">
                {{ row.showBack }}
              </div>
              <div>{{ row.showBack.slice(0,20)+'...' }}</div>
            </el-tooltip>
            <div v-else>
              {{ row.showBack }}
            </div>
          </div>
        </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="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';

export default {
  name: 'RelatePop',
  props: {
    integralMallProRuleId: String,
  },
  data () {
    return {
      loading: false,
      btnLoading: false,
      tableRadio: '',
      tableDate: [],
      relateForm: {
        ruleTitle: '',
        pageSize: 5,
        currentPage: 1,
      },
      dialogTableVisible: false,
      echoRuleId: '',
    };
  },
  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(async (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;
      }).finally(_ => {
        this.loading = false;
      });
    },
    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);
    },
    closePop () {
      this.tableRadio = '';
      this.relateForm = {
        ruleTitle: '',
        pageSize: 5,
        currentPage: 1,
      };
      this.dialogTableVisible = false;
      this.btnLoading = false;
    },
    finishBtnLoading () {
      this.btnLoading = false;
    },
    submit () {
      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);
    },
  },
};
</script>

<style lang="scss" scoped>
.label{
 /deep/ .el-radio__label{
    display: none;
  }
}
</style>
