<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="22">
        <el-button type="primary" :size="ELsize" @click="openAddSettings()" :loading="loading"
          v-hasPermi="['subsidy:subsidyMode:add']">新增</el-button>
        <el-button type="success" :size="ELsize" @click="openConfigureSettings()"
          v-hasPermi="['subsidy:subsidyModeAuto:set']">配置条件</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :border="TableBorder" :size="ELTableSize" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="{ $index }">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="模式名称" align="center" prop="namePrefix">
        <template slot-scope="scope">{{
          scope.row.namePrefix + scope.row.sortOrder
        }}</template>
      </el-table-column>
      <el-table-column label="模式类型" align="center" prop="sharedMode" width="120">
        <template slot-scope="scope">{{
          scope.row.sharedMode ? "均摊模式" : "排队模式"
        }}</template>
      </el-table-column>
      <el-table-column label="商家让利占比(%)" align="center">
        <template slot-scope="{row}">{{ row.subsidyRatio | TableItemEmpty }}</template>
      </el-table-column>
      <el-table-column label="消费者最高补贴占比(%)" align="center" prop="amountSubsidyRatio">
        <template slot-scope="{row}">{{ row.amountSubsidyRatio | TableItemEmpty }}</template>
      </el-table-column>

      <el-table-column label="积分补贴占比(%)" align="center" prop="pointSubsidyRatio">
        <template slot-scope="{row}">{{ row.pointSubsidyRatio | TableItemEmpty }}</template>
      </el-table-column>
      <el-table-column label="队首补贴占比(%)" align="center" prop="firstSubsidyRatio">
        <template slot-scope="{row}">{{ (row.sharedMode ? row.firstSubsidyRatio : '') | TableItemEmpty }}</template>
        <!-- <template slot-scope="scope">{{
          scope.row.sharedMode
            ? (scope.row.firstSubsidyRatio || 0) * 1 + "%"
            : "--"
        }}</template> -->
      </el-table-column>
      <el-table-column label="均摊补贴占比(%)" align="center" prop="firstSubsidyRatio1">
        <template slot-scope="{row}">{{ (row.sharedMode ? 100 - row.firstSubsidyRatio : '') | TableItemEmpty
          }}</template>
        <!-- <template slot-scope="scope">{{
          scope.row.sharedMode
            ? 100 - (scope.row.firstSubsidyRatio || 0) * 1 + "%"
            : "--"
        }}</template> -->
      </el-table-column>
      <el-table-column label="均摊到账时间" align="center" prop="code">
        <template slot-scope="scope">{{
          scope.row.sharedMode
            ? scope.row.immediateArrival
              ? "立即均摊"
              : scope.row.settlementHour + ":00"
            : "--"
        }}</template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
      <el-table-column label="状态" align="center" prop="defaulted" width="100">
        <template slot-scope="scope">{{
          scope.row.defaulted ? "启用" : "未启用"
        }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button v-hasPermi="['subsidy:subsidyMode:edit']" v-if="!scope.row.defaulted" type="text"
            :size="ELTableSize" @click="openAddSettings(scope.row)">修改</el-button>
          <!-- <span v-else>--</span> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 新增修改模式 -->
    <addSettings ref="addSettingsRef" @success="handleSuccess" />

    <!-- 配置条件 -->
    <configureSettings ref="configureSettingsRef" :optionsList="optionsList" />
  </div>
</template>
<script>
import getListApi from "@/mixins/getListApi";
import {
  subsidyModePage,
  subsidyModInfo,
  subsidyModeList,
} from "@/api/subsidyMode/modeSettings";

import addSettings from "./components/addSettings.vue";
import configureSettings from "./components/configureSettings.vue";
export default {
  mixins: [getListApi],
  components: { addSettings, configureSettings },
  data() {
    return {
      listURL: subsidyModePage,
      optionsList: [], // 选项列表
    };
  },
  created() {
    this.getSubsidyModeList();
  },
  methods: {
    handleSuccess(type) {
      if (type === "add") {
        this.getSubsidyModeList();
      }
      this.getList();
    },
    getSubsidyModeList() {
      subsidyModeList().then((res) => {
        if (res.code == 200) {
          this.optionsList = res.data || [];
        }
      });
    },
    openAddSettings(row) {
      if (row) {
        subsidyModInfo(row.modeId).then((res) => {
          if (res.code == 200 && res.data) {
            let form = {
              ...res.data,
              sharedMode: res.data.sharedMode ? 1 : 0,
            };
            this.$refs.addSettingsRef.open(form || {});
          }
        });
      } else {
        this.$refs.addSettingsRef.open(null, `${this.total + 1}.0`);
      }
    },
    openConfigureSettings() {
      this.$refs.configureSettingsRef.open();
    },
  },
};
</script>
<style scoped lang="scss"></style>
