<template>
  <div class="box-centenr">
<!--    <div style="width: 100%;display: flex">-->
<!--      <el-alert-->
<!--        title="说明"-->
<!--        type="error"-->
<!--        description="为了保证加油站商户日常在线支付业务的稳定性，来个油惠目前支持多通道支付-->
<!--                      可以有效的避免单支付通道带来不稳定性，从而造成油站不能正常支付问题-->
<!--                      加油站一旦出现不能正常支付的情况，可以随时手工切换支付通道，来保证加油站支付收款业务"-->
<!--        :closable="false"-->
<!--      >-->
<!--      </el-alert>-->

<!--      <div style="width: 150%;display: flex;justify-content: right">-->
<!--        <div class="mingc">功能状态</div>-->
<!--        <el-switch-->
<!--          v-model="value1"-->
<!--          @change="changeStatus1"-->
<!--        >-->
<!--        </el-switch>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="content-box">-->
<!--      <el-card class="box-card" shadow="hover" v-for="item in merchantList" :key="item.id">-->
<!--        <div slot="header" class="clearfix">-->
<!--          <span><dict-tag :options="dict.type.payment_channel" :value="item.merchantName"/></span>-->
<!--          <el-button v-if="item.isUse=='0'"-->
<!--                     @click="editStatus(item,1)"-->
<!--                     style="float: right; padding: 3px 0" type="text">切换为当前通道-->
<!--          </el-button>-->
<!--          <el-tag v-else effect="dark" type="success" style="float: right">当前使用中</el-tag>-->
<!--        </div>-->
<!--        <div>商户编号: {{ item.mchntCd }}</div>-->
<!--        <div>备注: <span style="color: #00afff;margin-left: 3px"-->
<!--                         @click="editRemark(item.id)">{{ item.remark ? item.remark : "&#45;&#45;" }}</span></div>-->
<!--      </el-card>-->
<!--    </div>-->
<!--    <el-divider></el-divider>-->
<!--    <div class="cont-box">-->
<!--      <div style="width: 40%">-->
<!--        <el-alert-->
<!--          title="使用说明"-->
<!--          type="error"-->
<!--          description="添加/编辑对应的规则->规则配置正常->发布规则->规则生效-->
<!--注意:功能状态启用且通道规则发布生效后当前功能才有效,否则使用系统单商户号模式"-->
<!--          :closable="false"-->
<!--        >-->
<!--        </el-alert>-->
<!--      </div>-->

<!--      <div style="display: flex;align-items: center">-->
<!--        <div class="mingc">规则周期</div>-->
<!--        <el-radio-group v-model="labelPosition" @input="ruleCycle == labelPosition" size="small">-->
<!--          <el-radio-button label="permanent">永久</el-radio-button>-->
<!--          <el-radio-button label="singleDay">单日</el-radio-button>-->
<!--        </el-radio-group>-->
<!--        <div class="mingc">功能状态</div>-->
<!--        <el-switch-->
<!--          v-model="value"-->
<!--          @change="changeStatus"-->
<!--        >-->
<!--        </el-switch>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="cont-box">-->
<!--      <div>-->
<!--        <el-button type="primary" icon="el-icon-plus" @click="addOil">添加规则</el-button>-->
<!--      </div>-->
<!--      <div>-->
<!--        <el-button type="success" icon="el-icon-s-promotion" @click="open">发布规则</el-button>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="hangbox" v-for="(item,index) in oilConfigList" :key="item.id">-->
<!--      <div>{{ index + 1 }}.通道</div>-->
<!--      <div class="jiaong">{{ item.merchantName }}({{ item.remark }})</div>-->
<!--      <div> 商户号</div>-->
<!--      <div class="jiaong">{{ item.mchntCd }}</div>-->
<!--      <div> 交易占比</div>-->
<!--      <div class="jiaong"> {{ item.proportion }}</div>-->
<!--      <div style="margin-right: 20px"> %更换支付通道</div>-->

<!--      <el-button type="primary" icon="el-icon-edit" @click="editOilConfig(item.id)">编辑</el-button>-->
<!--      <el-button type="danger" icon="el-icon-close" @click="deleteOilConfig(item.id)">删除</el-button>-->
<!--    </div>-->
<!--    <div class="hsize">-->
<!--      注:规则按照顺序进行处理并自动更换支付通道，新增或变更规则后需要发布当前规则才生效,发布生效后的规则将从序号1的配置生效-->
<!--    </div>-->

<!--    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">-->
<!--      <el-form :model="form1" ref="form1" :rules="rules">-->
<!--        <el-form-item label="支付通道" :label-width="formLabelWidth" prop="merchantName" width="300px">-->
<!--          <el-select-->
<!--            v-model="form1.merchantName"-->
<!--            placeholder="全部"-->
<!--            clearable-->
<!--            style="width: 240px"-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.payment_channel"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商户号" :label-width="formLabelWidth" prop="mchntCd">-->
<!--          <el-input v-model="form1.mchntCd" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">-->
<!--          <el-input v-model="form1.remark" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="submitMerchant">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->

<!--    <el-dialog :title="title" :visible.sync="show" width="25%" style="margin-top: 200px">-->
<!--      <span>请输入备注信息</span>-->
<!--      <el-input placeholder="请输入备注信息" style="margin-top: 20px"-->
<!--                v-model="merchantConfig.remark"-->
<!--                clearable>-->
<!--      </el-input>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="show = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="submitRemark">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->

<!--    &lt;!&ndash;    编辑通道规则&ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="dialogFormVisible"-->
<!--               width="30%">-->
<!--      <el-form :model="form" ref="form">-->

<!--        <el-form-item label="支付通道" :label-width="formLabelWidth" width="300px">-->
<!--          <el-select v-model="form.merchConfigId"-->
<!--                     @change="changeMerch"-->
<!--                     :disabled="isDis" placeholder="请选择商户信息" style="width: 100%">-->
<!--            <el-option-->
<!--              v-for="item in merchantList" :key="item.id"-->
<!--              :label="item.merchantName"-->
<!--              :value="item.id">-->
<!--              <span style="float: left">-->
<!--                <dict-tag :options="dict.type.payment_channel" :value="item.merchantName"/>-->
<!--              </span>-->
<!--              <span style="color: #30a1ff">({{ item.remark ? item.remark : "&#45;&#45;" }})</span>-->
<!--              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mchntCd }}</span>-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商户号" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.mchntCd" disabled autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="交易占比" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.proportion" autocomplete="off">-->
<!--            <template slot="append">%</template>-->
<!--          </el-input>-->
<!--          <div>交易占比满足规则后切换到下一个支付通道</div>-->
<!--        </el-form-item>-->


<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="clearOil">取 消</el-button>-->
<!--        <el-button type="primary" @click="submitOilConfig">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

<!--    <el-dialog-->
<!--      title="配置消费记录信息"-->
<!--      :visible.sync="dialogVisibleList">-->
<!--      <div class="wrap-wrap">-->
<!--        <el-table ref="tables" v-loading="loading" :data="merchantRecordList">-->
<!--          <el-table-column label="ID" align="center" prop="id" width="80"/>-->
<!--          <el-table-column label="入账类型" align="center" prop="type">-->
<!--            <template slot-scope="scope">-->
<!--              <el-tag type="success" v-if="scope.row.type=='0'">增加</el-tag>-->
<!--              <el-tag type="danger" v-if="scope.row.type=='1'">减少</el-tag>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="入账金额" align="center" prop="amount"/>-->
<!--          <el-table-column label="入账状态" align="center" prop="isSuccess">-->
<!--            <template slot-scope="scope">-->
<!--              <span v-if="scope.row.isSuccess=='yes'">成功</span>-->
<!--              <span v-if="scope.row.isSuccess=='no'">失败</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="关联订单号" align="center" width="300" prop="orderNo"/>-->
<!--          <el-table-column label="注册时间" align="center" width="200" prop="createTime">-->
<!--            <template slot-scope="scope">-->
<!--              <span>{{ parseTime(scope.row.createTime) }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->

<!--        <pagination-->
<!--          v-show="total>0"-->
<!--          :total="total"-->
<!--          :page.sync="queryParams.page"-->
<!--          :limit.sync="queryParams.pageSize"-->
<!--          @pagination="getMerchantList(merchantId)"-->
<!--        />-->
<!--      </div>-->
<!--    </el-dialog>-->

    <div class="new-box">
      <div class="n-top-box">
        <div class="d-s">
          <div class="gang"></div>
          <div class="title_">商户信息</div>
          <div class="size_">
            说明：为了保证加油站商户日常在线支付业务的稳定性，目前支持多通道支付，可以有效的避免单支付通道带来不稳定性，从而造成油站不能正常支付问题，加油站一旦出现不能正常支付的情况，可以随时手工切换支付通道，来保证加油站支付收款业务
          </div>
        </div>
        <div class="o-button"  v-hasPermi="['Merchant:add']" @click="addMerchantShow()">新增商户信息</div>
      </div>
      <el-table
        :data="merchantList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="merchantName"
          align="center"
          label="支付通道"
          width="120">
        </el-table-column>
        <el-table-column
          prop="mchntCd"
          align="center"
          label="商户号编码"
        >
        </el-table-column>
        <el-table-column
          prop="deptName"
          align="center"
          label="所属机构">
        </el-table-column>
        <el-table-column
          prop="amount"
          align="center"
          label="累计收款金额（元）">
        </el-table-column>
        <el-table-column
          prop="isUse"
          align="center"
          label="使用状态"
          width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.ruleIsUse==1">正在使用</span>
            <span v-else>未使用</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          align="center"
          label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="realName"
          align="center"
          width="100"
          label="创建人">
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="date"
          align="center"
          width="100"
          label="操作">
          <template slot-scope="scope">
            <div style="color: #fe8c4a;cursor: pointer" v-hasPermi="['Merchant:edit']"  v-if="scope.row.ruleIsUse!=1" @click="editMerchant(scope.row)">修改</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="n-top-box" style="margin-top: 30px">
        <div class="d-s">
          <div class="gang"></div>
          <div class="title_">商户分账规则</div>
          <div class="size_">使用说明：添加/编辑对应的规则->规则配置正常->发布规则->规则生效
            注意:功能状态启用且通道规则发布生效后当前功能才有效,否则使用系统单商户号模式
          </div>
        </div>
        <div class="o-button" v-hasPermi="['payment:add']"  @click="addRules()">新增规则</div>
      </div>
      <el-table
        :data="tableData1"
        style="width: 100%;margin-bottom: 20px;"
        border>
        <el-table-column type="expand" >
          <template slot-scope="props">
            <el-table ref="tables" :data="props.row.ruleList">
              <el-table-column align="center"  width="50"></el-table-column>
              <el-table-column label="支付通道" prop="merchantName" align="center" width="120"/>
              <el-table-column label="商户号编码" prop="mchntCd" align="center" width="150"/>
              <el-table-column label="交易占比" prop="proportion" v-if="props.row.ruleType==1" align="center" width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.proportion }}%</span>
                </template>
              </el-table-column>
              <el-table-column label="交易类型" prop="transactionType" v-if="props.row.ruleType==2"  align="center" width="400">
                <template slot-scope="scope">
                  <div v-if="scope.row.transactionType.includes('1')">会员充值,</div>
                  <div v-if="scope.row.transactionType.includes('2')">便利店,</div>
                  <div v-if="scope.row.transactionType.includes('3')">积分商城,</div>
                  <div v-if="scope.row.transactionType.includes('4')">{{ scope.row.oilGunName }}</div>
                  <div v-if="scope.row.transactionType.includes('5')">油品+便利店组合付款</div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="ruleName"
          label="规则名称"
          align="center"
          width="120">
          <!--          <template slot-scope="scope">-->
          <!--            <div style="color: #fe8c4a;cursor: pointer">{{ scope.row.ruleName }}</div>-->
          <!--          </template>-->

        </el-table-column>
        <el-table-column
          prop="ruleType"
          label="规则类型"
          align="center"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.ruleType==1">按比例分账</span>
            <span v-if="scope.row.ruleType==2">按交易类型分账</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="规则状态"
          align="center"
          width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="scope.row.status=='qy' ? EnableRule(scope.row) : submitEnable('jy')"
              active-value="qy"
              inactive-value="jy"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>

          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="description"
          align="center"
          label="规则描述">
        </el-table-column>
        <el-table-column
          prop="realName"
          align="center"
          width="100"
          label="创建人">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="date"
          align="center"
          width="180"
          label="操作">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;width: 100%">
              <div style="color: #fe8c4a;cursor: pointer;margin: 0 10px" v-hasPermi="['payment:edit']"  v-if="scope.row.status!= 'qy'" @click="editRule(scope.row,1)">修改</div>
              <div style="color: #fe8c4a;cursor: pointer;margin: 0 10px" v-hasPermi="['payment:delete']"  v-if="scope.row.status!= 'qy'" @click="deleteRule(scope.row)">删除</div>
              <div style="color: #fe8c4a;cursor: pointer;margin: 0 10px" v-if="scope.row.status!= 'qy'" @click="EnableRule(scope.row)">启用</div>
              <div style="color: #fe8c4a;cursor: pointer;margin: 0 10px" v-if="scope.row.status!= 'jy'" @click="editRule(scope.row,2)">查看</div>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="addMerchantTitile" :visible.sync="addMerchants" width="550px">
      <el-form :model="form" ref="formAdd" :rules="rules"  :inline="true">
        <el-form-item label="所属机构" :label-width="formLabelWidth" prop="deptId">
          <el-select v-model="form.deptId+''" disabled placeholder="请选择所属机构" style="width: 350px">
            <el-option
              v-for="item in deptListSelect"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId+''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付通道" :label-width="formLabelWidth" prop="merchantName">
          <el-select
            v-model="form.merchantName"
            placeholder="全部"
            clearable
            style="width: 350px"
          >
            <!--            <el-option-->
            <!--              v-for="dict in dict.type.payment_channel"-->
            <!--              :key="dict.value"-->
            <!--              :label="dict.label"-->
            <!--              :value="dict.value"-->
            <!--            />-->
            <el-option
              v-for="(item,index) in payChannel"
              :key="index"
              :label="item.paymentChannel"
              :value="item.paymentChannel"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商户号编号" :label-width="formLabelWidth" prop="mchntCd">
          <el-input v-model="form.mchntCd" placeholder="请输入商户号编号" autocomplete="off"
                    style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" autocomplete="off"
                    style="width: 350px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addMerchants = false">取 消</el-button>
        <el-button type="primary" @click="submitMerchant">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="Ruletitle" :visible.sync="addRule">
      <el-form :model="formRule" ref="formRule" :rules="rules">
        <el-form-item label="规则名称" :label-width="formLabelWidth" prop="ruleName">
          <el-input v-model="formRule.ruleName" placeholder="请输入规则名称" autocomplete="off" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="规则描述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="formRule.description" placeholder="请输入规则描述" autocomplete="off"
                    style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="规则类型" :label-width="formLabelWidth" prop="ruleType">
          <div style="display: flex">
            <div class="xz_box" :class=" {'active' : formRule.ruleType == 1 } " @click="formRule.ruleType = 1"><i
              class="el-icon-aim"></i> 按比例分账
            </div>
            <div class="xz_box" :class=" {'active' : formRule.ruleType == 2 } " @click="formRule.ruleType = 2"><i
              class="el-icon-aim"></i> 按交易类型分账
            </div>
          </div>
        </el-form-item>
        <el-form-item label="规则配置" :label-width="formLabelWidth">
          <i class="el-icon-circle-plus-outline" style="font-size: 14px;color:#FF9655 " @click="addboxlsit()"></i>
        </el-form-item>
        <div class="d-s" v-for="(item,index) in formRule.ruleList" :key="index" style="margin-bottom: 15px"
             v-if=" formRule.ruleType == 1">
          <div class="list-box">
            <el-form-item label="支付通道" :label-width="formLabelWidth">
              <el-select prop="merchConfigId" v-model="item.merchConfigId" placeholder="请选择支付通道" style="width: 300px"
                         @change="chooseMerchConfig(item.merchConfigId,index)">
                <el-option
                  v-for="(item1,i) in merchantList"
                  :key="item1.id"
                  :label="item1.mchntCd ? (item1.merchantName+'（'+item1.mchntCd+'）') : (item1.merchantName+'（--）')"
                  :value="item1.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商户号编号" :label-width="formLabelWidth">
              <el-input v-model="item.mchntCd" placeholder="请输入商户号编号" autocomplete="off"
                        style="width: 300px" disabled></el-input>
            </el-form-item>
            <el-form-item label="交易占比" :label-width="formLabelWidth">

              <el-input v-model="item.proportion" placeholder="请输入交易占比" autocomplete="off" style="width: 300px">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </div>
          <i class="el-icon-delete" style="font-size: 28px;margin-left: 15px; color: #999999 " @click="deleteDoxlist(index)"></i>
        </div>
        <div class="d-s" v-for="(item,index) in formRule.ruleList" :key="index" style="margin-bottom: 15px"
             v-if=" formRule.ruleType == 2">
          <div class="list-box">
            <el-form-item label="支付通道" :label-width="formLabelWidth">
              <el-select v-model="item.merchConfigId" placeholder="请选择支付通道" style="width: 300px"
                         @change="chooseMerchConfig(item.merchConfigId,index)">
                <el-option
                  v-for="(item1,i) in merchantList"
                  :key="item1.id"
                  :label="item1.mchntCd ? (item1.merchantName+'（'+item1.mchntCd+'）') : (item1.merchantName+'（--）')"
                  :value="item1.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商户号编号" :label-width="formLabelWidth">
              <el-input v-model="item.mchntCd" placeholder="请输入商户号编号" autocomplete="off"
                        style="width: 300px" disabled></el-input>
            </el-form-item>
            <el-form-item label="交易类型" :label-width="formLabelWidth">
              <el-select v-model="item.transactionType" multiple placeholder="请选择交易类型" style="width: 300px">
                <el-option label="会员充值" value="1"></el-option>
                <el-option label="便利店" value="2"></el-option>
                <el-option label="积分商城" value="3"></el-option>
                <el-option label="油品" value="4"></el-option>
                <el-option label="油品+便利店组合收款" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="油号-油枪" :label-width="formLabelWidth" v-if="item.transactionType.includes('4')">
              <el-select v-model="item.oilGunId" multiple collapse-tags placeholder="请选择油号-油枪" style="width: 300px">
                <el-option
                  v-for="item1 in oilGunList"
                  :key="item1.id"
                  :label="item1.oilNumber+'-'+item1.gunName"
                  :value="item1.id+''"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <i class="el-icon-delete" style="font-size: 28px;margin-left: 15px" @click="deleteDoxlist(index)"></i>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="Ruletitle != '查看商户信息'">
        <el-button @click="addRule = false">取 消</el-button>
        <el-button type="primary" @click="submitAddRule">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="启用" :visible.sync="Enable" width="650px">
      <el-form :model="formRule">
        <el-form-item label="开始时间" required>
          <div style="display: flex;align-items: center;">
            <el-form-item prop="date1">
              <el-date-picker type="datetime" placeholder="选择日期" v-model="formRule.startTime" value-format="yyyy-MM-dd HH:mm:ss"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
            <div style="width: 15px"></div>
          </div>
          <div style="margin-left: 80px">启用成功后其他规则的规则状态变为停用！</div>


        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Enable = false">取 消</el-button>
        <el-button type="primary" @click="submitEnable('qy')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form1" ref="form1" :rules="rules" label-width="100px">
        <el-form-item label="支付通道" :label-width="formLabelWidth" prop="merchantName" width="300px">
          <el-select
            v-model="form1.merchantName"
            placeholder="全部"
            clearable
            style="width: 240px"
          >
            <!--            <el-option-->
            <!--              v-for="dict in dict.type.payment_channel"-->
            <!--              :key="dict.value"-->
            <!--              :label="dict.label"-->
            <!--              :value="dict.value"-->
            <!--            />-->
            <el-option
              v-for="(item,index) in payChannel"
              :key="index"
              :label="item.paymentChannel"
              :value="item.paymentChannel"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商户号" :label-width="formLabelWidth" prop="mchntCd">
          <el-input v-model="form1.mchntCd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="form1.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMerchant">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="show" width="25%" style="margin-top: 200px">
      <span>请输入备注信息</span>
      <el-input placeholder="请输入备注信息" style="margin-top: 20px"
                v-model="merchantConfig.remark"
                clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>

        <el-button type="primary" @click="submitRemark">确 定</el-button>
      </span>
    </el-dialog>
    <!--    编辑通道规则-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible"
               width="30%">
      <el-form :model="form" ref="form">
        <el-form-item label="支付通道" :label-width="formLabelWidth" width="300px">
          <el-select v-model="form.merchConfigId"
                     @change="changeMerch"
                     :disabled="isDis" placeholder="请选择商户信息" style="width: 100%">
            <el-option
              v-for="item in merchantList" :key="item.id"
              :label="item.merchantName"
              :value="item.id">
              <span style="float: left">
                <dict-tag :options="dict.type.payment_channel" :value="item.merchantName"/>
              </span>
              <span style="color: #00ff80">({{ item.remark ? item.remark : "--" }})</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mchntCd }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户号" :label-width="formLabelWidth">
          <el-input v-model="form.mchntCd" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="交易占比" :label-width="formLabelWidth">
          <el-input v-model="form.proportion" autocomplete="off">
            <template slot="append">%</template>
          </el-input>
          <div>交易占比满足规则后切换到下一个支付通道</div>
        </el-form-item>
        <!--        <el-form-item label="参与次数" :label-width="formLabelWidth">-->
        <!--          <el-radio-group v-model="form.resource" >-->
        <!--            <el-radio label="不固定次数"></el-radio>-->
        <!--            <el-radio label="固定次数"></el-radio>-->
        <!--          </el-radio-group>-->
        <!--          <div>是否限制当前配置在生效期间内的参与次数</div>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="排序" :label-width="formLabelWidth">-->
        <!--          <el-input-number v-model="form.num" controls-position="right"  :min="1" :max="100"></el-input-number>-->
        <!--          <div>数值越大顺序越在前</div>-->
        <!--        </el-form-item>-->


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearOil">取 消</el-button>
        <el-button type="primary" @click="submitOilConfig">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {
  addMerchantApi,
  deleteMerchant,
  editMerchant,
  editMerchantRemark,
  listMerchant, listMerchantConfigRecord,
  merchantInfo
} from "../../../api/payConfig/merchantconfig";
import {
  addOilConfig,
  delOilConfig,
  editOilConfig,
  isOpenOilConfig,
  listOilConfig,
  oilConfigInfo
} from "../../../api/payConfig/oilconfig.js";
import {
  addRuleConfig,
  deleteRuleConfig,
  editRuleConfig, enableRuleConfig,
  getOilGunList,
  getRuleConfig,
  listRuleConfig, listRuleConfigs
} from "../../../api/payConfig/ruleConfig";
import {selectChildByDeptId} from "../../../api/system/role";
import {getPaymentParameterByDeptId} from "../../../api/payConfig/paymentParameter";

export default {
  dicts: ['payment_channel'],
  name: 'peizhi',
  data() {
    return {
      // 是否禁用
      isDis: false,
      // 商户配置信息
      merchantList: [],
      // 商品规则配置信息
      oilConfigList: [],
      // 规则周期
      ruleCycle: "singleDay",
      form: {
        isEditable: false,
        name: '',
        region: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      form1: {},
      formLabelWidth: '100px',
      dialogFormVisible: false,
      dialogVisible: false,
      dialogVisibleList: false,
      show: false,
      value: false,
      value1: true,
      labelPosition: 'singleDay',
      title: "",
      merchantConfig: {},
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        merchantId: ""
      },
      merchantRecordList: [],
      total: 0,
      loading: false,
      merchantId: "",
      ruleForm: [],
      Enable: false,
      SeparateAccounts: 1,
      addRule: false,
      Ruletitle: '',
      addMerchants: false,
      addMerchantTitile: '',
      payChannel:[],
      formRule: {
        ruleList:[],
        ruleType:1,
      },
      deptListSelect: [],
      oilGunList:[],
      boxlist: [],
      tableData: [],
      tableData1: [],
      rules: {
        merchConfigId:[
          {required: true, message: '请选择商户配置', trigger: 'blur'}
        ],
        merchantName: [
          {required: true, message: '请选择支付通道', trigger: 'blur'},
        ],
        mchntCd: [
          {required: true, message: '请填写商户号', trigger: 'blur'},
        ],
        deptId: [
          {required: true, message: '请选择机构信息', trigger: 'blur'},
        ],
        ruleName: [
          {required: true, message: '请输入规则名称', trigger: 'blur'},
        ],
        ruleType: [
          {required: true, message: '请选择规则类型', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.getList();
    this.tableData1list();
  },
  methods: {
    submitEnable(val){
      this.formRule.status = val
      enableRuleConfig(this.formRule).then(res => {
        if (res.data === 1) {
          this.$modal.msgSuccess("启用成功")
          this.getList()
          this.tableData1list()
          this.Enable = false
        }else {
          this.$modal.msgError("启用失败，请确保交易占比相加满足百分之百")
        }
      })
    },
    // 确定信息
    submitAddRule(){
      this.$refs["formRule"].validate(valid => {
        if (this.formRule.ruleType == 2) {
          let typeList = []
          let oilGunIds = []
          this.formRule.ruleList.forEach(item => {
            if (item.oilGunId) {
              oilGunIds.push(...item.oilGunId)
            }
            if (item.transactionType) {
              typeList.push(...item.transactionType)
            }
          })
          typeList = typeList.filter((item, index, arr) => arr.indexOf(item) === index);
          oilGunIds = oilGunIds.filter((item, index, arr) => arr.indexOf(item) === index);
          if (typeList.length < 5) {
            this.$message.error("请确保交易类型全部选择")
            return
          }
          if (oilGunIds.length < this.oilGunList.length) {
            this.$message.error("请确保油枪号全部选择")
            return;
          }
        }else {
          let proportion = 0
          this.formRule.ruleList.forEach(item => {
            if (item.proportion) {
              proportion += Number(item.proportion)
            }
          })
          console.log(proportion)
          if (proportion!=100){
            this.$message.error("请确保交易占比相加为百分之百")
            return;
          }
        }
        if (valid) {
          this.formRule.ruleList.forEach(item => {
            if (item.oilGunId){
              item.oilGunId = item.oilGunId.toString()
            }
            if (item.transactionType){
              item.transactionType = item.transactionType.toString()
            }
          })
          if (this.formRule.id) {
            editRuleConfig(this.formRule).then(res => {
              if (res.data === 1) {
                this.$modal.msgSuccess("修改成功")
                this.getList()
                this.tableData1list()
                this.addRule = false
              }else {
                this.$modal.msgError("规则名称不可重复")
              }
            })
          } else {
            this.formRule.storeId = this.id
            this.formRule.deptId = this.deptId
            addRuleConfig(this.formRule).then(res => {
              if (res.data == 1) {
                this.$modal.msgSuccess("添加成功");
                this.getList()
                this.tableData1list()
                this.addRule = false
              } else {
                this.$modal.msgError("添加失败，规则名称不可重复")
              }
            })
          }
        }
      })
    },
    // 获取油枪列表信息
    getOilGunList(){
      getOilGunList({storeId:this.id}).then(res => {
        this.oilGunList = res.data.records
      })
    },
    // 查询
    selectChildByDeptIdApi() {
      selectChildByDeptId().then(res => {
        this.deptListSelect = res.data
      })
    },
    chooseMerchConfig(val,index){
      this.merchantList.forEach(item => {
        if (item.id == val){
          this.formRule.ruleList[index].mchntCd = item.mchntCd
        }
      })
    },
    addboxlsit() {

      let data = {
        storeId: this.id,
        merchConfigId: '',
        transactionType: '',
        proportion: '',
        oilGunId: '',
      }
      this.formRule.ruleList.push(data)
    },
    deleteDoxlist(index) {
      this.formRule.ruleList.splice(index, 1)
    },
    addRules() {
      this.Ruletitle = '新增规则'
      this.addRule = true
      this.formRule = { ruleList:[],ruleType:1 }
      this.formRule.deptId = this.deptId
    },
    addMerchantShow() {
      this.addMerchantTitile = '新增商户信息'
      this.addMerchants = true
      this.form = {}
      this.form.deptId = this.deptId
    },
    chooseDept(deptId){
      this.form.merchantName = ""
      this.getDeptList(deptId)
    },
    // 根据机构id获取支付通道信息
    getDeptList(deptId){
      getPaymentParameterByDeptId(deptId).then(res => {
        this.payChannel = res.data
      })
    },
    editRule(data, index){
      getRuleConfig(data.id).then(res => {
        if (index === 2) {
          this.Ruletitle = '查看商户信息';
          this.isEditable = false;
        }else {
          this.Ruletitle = '修改商户信息';
          this.isEditable = true;
        }
        this.addRule = true
        this.formRule = res.data
        this.formRule.ruleList.forEach(item => {
          if (item.oilGunId){
            item.oilGunId = item.oilGunId.split(",")
          }
          if (item.transactionType){
            item.transactionType = item.transactionType.split(",")
          }
        })
      })
    },
    EnableRule(data){
      getRuleConfig(data.id).then(res => {
        this.Ruletitle = '修改商户信息'
        this.Enable = true
        this.formRule = res.data
      })
    },
    deleteRule(data){
      let name = data.ruleName
      this.$modal.confirm('是否确认删除"' + name + '"的支付配置信息？').then(function () {
        return deleteRuleConfig(data.id);
      }).then(() => {
        this.getList();
        this.tableData1list();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    editMerchant(data) {
      // data用于请求接口
      merchantInfo(data.id).then(res => {
        this.addMerchantTitile = '修改商户信息'
        this.addMerchants = true
        this.form = res.data
      })
    },
    handleUpdate(data) {
      merchantInfo(data.id).then(res => {
        this.title = "商户信息"
        this.dialogVisible = true
        this.form1 = res.data
      })
    },
    handleDelete(data) {
      let name = data.remark ? data.merchantName + "(" + data.remark + ")" : data.merchantName
      this.$modal.confirm('是否确认删除"' + name + '"的支付配置信息？').then(function () {
        return deleteMerchant(data.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    submitMerchant() {
      this.$refs["formAdd"].validate(valid => {
        if (valid) {
          if (this.form.id) {
            editMerchantRemark(this.form).then(res => {
              if (res.data === 1) {
                this.$modal.msgSuccess("修改成功")
                this.getList()
                this.addMerchants = false
              }else {
                this.$modal.msgError("商户编号不可重复")
              }
            })
          } else {
            this.form.storeId = this.id
            addMerchantApi(this.form).then(res => {
              if (res.data == 1) {
                this.$modal.msgSuccess("添加成功");
                this.getList()
                this.addMerchants = false
              } else if (res.data == 0) {
                this.$modal.msgError("添加失败，当前通道未配置")
              }else {
                this.$modal.msgError("商户编号不可重复")
              }
            })
          }
        }
      })
    },
    // 添加商户号信息
    addMerchant() {
      this.title = "添加商户信息"
      this.dialogVisible = true
      this.form1 = {}
    },
    // 删除支付配置信息
    deleteOilConfig(id) {
      this.$confirm('确认删除此通道规则吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOilConfig(id).then(response => {
          this.$message({
            type: 'success',
            message: '规则数据删除成功'
          });
          this.getList();
          this.value1 = true;
          this.changeStatus1();
        })
      }).catch(() => {
      });
    },
    // 添加商户信息
    addOil() {
      this.title = "添加商户规则"
      this.dialogFormVisible = true;
      this.form = {
        name: '',
        region: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    },
    // 选择下拉商户信息
    changeMerch(val) {
      this.merchantList.forEach(item => {
        if (item.id == val) {
          this.form.mchntCd = item.mchntCd
        }
      })
    },
    // 提交按钮
    submitOilConfig() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.storeId = this.id
          if (this.form.id) {
            editOilConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改通道成功");
              this.getList();
              this.dialogFormVisible = false;
              this.isDis = false;
            });
          } else {
            addOilConfig(this.form).then(response => {
              if (response.data == 1) {
                this.$modal.msgSuccess("新增通道成功");
                this.getList();
                this.dialogFormVisible = false;
                this.isDis = false;
              } else {
                this.$modal.msgError("已存在当前通道商户号的规则");
              }
            })
          }
        }
      });
    },
    // 修改启用状态
    changeStatus() {
      if (this.value) {
        isOpenOilConfig({isOpen: 1, ruleCycle: this.ruleCycle, storeId: this.id}).then(response => {
          if (response.data != 1) {
            this.$message({
              type: 'error',
              message: '支付通道切换失败,请确保交易占比相加满足百分之百'
            });
            this.value = false;
            this.value1 = true;
          } else {
            this.$message({
              type: 'success',
              message: '发布成功!'
            });
            this.value1 = false;
          }
        })
      } else {
        isOpenOilConfig({isOpen: 0, ruleCycle: this.ruleCycle, storeId: this.id}).then(response => {
          this.value1 = true;
        })
      }
    },
    changeStatus1() {
      if (this.value1) {
        isOpenOilConfig({isOpen: 0, ruleCycle: this.ruleCycle, storeId: this.id}).then(response => {
          this.value = false;
        })
      } else {
        isOpenOilConfig({isOpen: 1, ruleCycle: this.ruleCycle, storeId: this.id}).then(response => {
          if (response.data != 1) {
            this.$message({
              type: 'error',
              message: '支付通道切换失败,请确保交易占比相加满足百分之百'
            });
            this.value = false;
            this.value1 = true;
          } else {
            this.$message({
              type: 'success',
              message: '发布成功!'
            });
            this.value = true;
          }
        })
      }
    },
    // 修改商户使用状态
    editStatus(data, isUse) {
      this.$confirm('确定将当前支付配置切换为商户号(' + data.mchntCd + ')吗?切换后实时生效!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.isUse = isUse
        editMerchant(data).then(response => {
          this.getList();
          this.$message({
            type: 'success',
            message: '支付通道切换成功,已实时切换为商户号(' + data.mchntCd + ')'
          });
        })
      }).catch(() => {
      });
    },
    getMerchantList(id) {
      this.dialogVisibleList = true
      this.loading = true;
      if (id) {
        this.merchantId = id
      }
      this.queryParams.merchantId = this.merchantId
      listMerchantConfigRecord(this.queryParams).then(res => {
        this.merchantRecordList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      })
    },
    // 修改商户备注信息
    submitRemark() {
      editMerchantRemark(this.merchantConfig).then(res => {
        if (res.data === 1) {
          this.$modal.msgSuccess("修改成功")
          this.getList()
          this.show = false
        }
      })
    },
    // 打开修改商户备注信息对话框
    editRemark(id) {
      this.title = "备注"
      this.show = true
      merchantInfo(id).then(res => {
        this.merchantConfig = res.data
      })
    },
    // 取消按钮
    clearOil() {
      this.dialogFormVisible = false;
      this.isDis = false;
    },
    // 修改支付配置信息
    editOilConfig(id) {
      this.title = "修改商户规则"
      this.isDis = true;
      this.dialogFormVisible = true;
      oilConfigInfo(id).then(response => {
        this.form = response.data
      })
    },
    // 获取商户列表信息
    getList() {
      listMerchant().then(response => {
        this.merchantList = response.data;
        this.merchantList.forEach(item => {
          if (item.isOpenRule == "1") {
            this.value1 = false;
            this.value = true;
          }
        })
      })
      listOilConfig().then(response => {
        this.oilConfigList = response.data;
      })
    },
    // 商户分账列表
    tableData1list() {
      // listRuleConfigs().then(response => {
      //
      //   console.log(response.data + "       -==-      -==-")

        // this.tableData1 = response.data;
        /*this.merchantList.forEach(item => {
          if (item.isOpenRule == "1") {
            this.value1 = false;
            this.value = true;
          }
        })
      })
      listOilConfig().then(response => {
        this.oilConfigList = response.data;
      })*/
      // })
      listRuleConfig().then(res => {
        this.tableData1 = res.data
      })
    },
    open() {
      this.$confirm('此操作会发布事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.value1 = false;
        this.changeStatus1()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        });
      });
    }
  }


}
</script>

<style scoped lang="scss">

.box-centenr {
  width: 100%;
  background: #f9f9f9;
  box-sizing: border-box;
  padding: 20px;
}

.new-box {
  width: 100%;
  height: 89vh;
  overflow: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
}

.n-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.d-s {
  display: flex;
  align-items: center;
}

.gang {
  width: 2px;
  height: 12px;
  background: #FF770F;
  margin-right: 5px;

}

.title_ {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  margin-right: 10px;
}

.size_ {
  font-weight: 400;
  font-size: 12px;
  color: #666666;
}

.o-button {
  box-sizing: border-box;
  padding: 7px 5px;
  background: linear-gradient(180deg, #FF8648 0%, #FFA360 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

.content-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.box-card {
  width: 24%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.cont-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 20px 0px;
}

.hangbox {
  width: 100%;
  border-bottom: 1px solid #f4f5f6;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 15px 0px;
}

.jiaong {
  text-align: center;
  box-sizing: border-box;
  padding: 5px 20px;
  background: #F2F6FC;
  color: #fe8c4a;
  font-weight: bold;
  margin: 0px 5px;
  border-radius: 4px;

}

.mingc {
  margin: 0px 10px;
  color: #999;
}

.hsize {
  color: #999;
}

.xz_box {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #999999;
  margin-right: 15px;
  cursor: pointer;
}

.active {
  color: #FF9655 !important;
}

.list-box {
  border: 1px solid #D1D1D1;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>