<template>
  <div class="box-centenr">
    <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)">修改</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">
        <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" width="60%">
      <el-form :model="formRule" ref="formRule" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <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-col>
          <el-col :span="12">
            <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-col>
        </el-row>
        
        <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">
        <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,
  listMerchant2,
  merchantInfo
} from "@/api/payConfig/merchantconfig";
import {
  addOilConfig,
  delOilConfig,
  editOilConfig,
  isOpenOilConfig,
  listOilConfig,
  oilConfigInfo
} from "@/api/payConfig/oilconfig";
import {addUser, getUserMobile, updateUser} from "@/api/staff/user/user";
import {selectChildByDeptId} from "@/api/system/Site/site";
import {
  addRuleConfig,
  deleteRuleConfig,
  editRuleConfig, enableRuleConfig,
  getOilGunList,
  getRuleConfig,
  listRuleConfig
} from "@/api/payConfig/ruleConfig";
import {getPaymentParameterByDeptId} from "../../../api/payConfig/paymentParameter";

export default {
  dicts: ['payment_channel'],
  name: 'peizhi',
  props: ["id","deptId"],

  data() {
    return {
      ruleForm: [],
      Enable: false,
      SeparateAccounts: 1,
      addRule: false,
      Ruletitle: '',
      addMerchants: false,
      addMerchantTitile: '',
      // 是否禁用
      isDis: false,
      // 商户配置信息
      merchantList: [],
      // 商品规则配置信息
      oilConfigList: [],
      // 规则周期
      ruleCycle: "singleDay",
      form: {
        name: '',
        deptId: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        boxlist: [],
      },
      payChannel:[],
      formRule: {
        ruleList:[],
        ruleType:1,
      },
      deptListSelect: [],
      form1: {},
      oilGunList:[],
      formLabelWidth: '100px',
      dialogFormVisible: false,
      dialogVisible: false,
      show: false,
      value: false,
      value1: true,
      labelPosition: 'singleDay',
      title: "",
      boxlist: [],
      merchantConfig: {},
      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.selectChildByDeptIdApi()
    this.getOilGunList()
    this.getDeptList(this.deptId)
  },
  methods: {
    submitEnable(val){
      this.formRule.status = val
      enableRuleConfig(this.formRule).then(res => {
        if (res.data === 1) {
          this.$modal.msgSuccess("启用成功")
          this.getList()
          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.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.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){
      getRuleConfig(data.id).then(res => {
        this.Ruletitle = '修改规则'
        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.$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(() => {
      });
    },
    // 修改商户备注信息
    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
      })
    },
    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("已存在当前通道商户号的规则");
              }
            })
          }
        }
      });
    },
    // 取消按钮
    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
      })
    },
    // 修改启用状态
    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(() => {
      });
    },
    // 获取商户列表信息
    getList() {
      listMerchant2({storeId: this.id}).then(response => {
        this.merchantList = response.data;
        this.merchantList.forEach(item => {
          if (item.isOpenRule == "1") {
            this.value1 = false;
            this.value = true;
          }
        })
      })
      listRuleConfig({storeId: this.id}).then(response => {
        this.tableData1 = response.data;
      })
    },
    open() {
      this.$confirm('此操作会发布件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.value1 = false;
        this.changeStatus1()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        });
      });
    }
  }


}
</script>

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

.new-box {
  width: 100%;
  height: 80vh;
  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>
