<template>
  <div class="componentsSty">
    <el-row style="width: 100%; height: 100%;">
      <el-col :span="24">
        <el-form :model="queryForm" ref="queryForm" :inline="true">
          <el-form-item label="支付类型:">
            <el-input v-model="queryForm.F_zflx" placeholder="请输入支付类型" clearable></el-input>
          </el-form-item>
          <el-form-item label="应用id:">
            <el-input v-model="queryForm.F_appId" placeholder="请输入应用id" clearable></el-input>
          </el-form-item>
          <el-form-item label="商户id:">
            <el-input v-model="queryForm.F_mchId" placeholder="请输入商户id" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="rowData.fSsczid !==''" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-plus" @click="hanleOpt('add')"> 新增支付
            </el-button>
            <el-button type="primary" icon="el-icon-refresh"
                       style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                       @click="handleReset" plain>重置
            </el-button>
            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-search" @click="handleSearch"> 查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;">
        <el-table :data="tableData" border key="table"   ref="multipleTable"   style="width: 100%;" v-loading='loading'>
          <el-table-column prop="shopId" type="index" label="序号" width="80"  align="center">
          </el-table-column>
          <el-table-column prop="F_zflx" label="支付类型" min-width="100" :show-overflow-tooltip='true' align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_zflx">{{scope.row.F_zflx}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_appId" label="应用id" min-width="100" :show-overflow-tooltip='true' align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_appId">{{scope.row.F_appId}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_mchId" label="商户id" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_mchId">{{scope.row.F_mchId}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_mchKey" label="商户密钥"  min-width="120"  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_mchKey">{{scope.row.F_mchKey}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_certSerialNo" label="商户证书序列号"  min-width="120"  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_certSerialNo">{{scope.row.F_certSerialNo}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_apiV3Key" label="APIv3密钥"  min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_apiV3Key">{{scope.row.F_apiV3Key}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_keyPath"  min-width="270" label=" .p12 格式的密钥文件路径，私钥和证书" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_keyPath">{{scope.row.F_keyPath}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_privateKeyPath" label="私钥文件路径"  min-width="180" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_privateKeyPath">{{scope.row.F_privateKeyPath}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_privateCertPath" label="私有证书文件路径"  min-width="140" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_privateCertPath">{{scope.row.F_privateCertPath}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="操作" fixed="right"  min-width="160" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="hanleOpt('edit',scope.row)">编辑</el-button>
              <el-button type="text" @click="hanleOpt('delete',scope.row)" style="color:red;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
          style="float: right;margin-top: 10px;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="pageParam.page"
          :page-sizes="[10,20,,50,100]"
          :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      v-if="dialogParams.showDialogVisible"
      :title="dialogParams.title"
      :visible.sync="dialogParams.dialogVisible"
      width="60%"
      @close="handleDialogClose">
      <el-row>
        <el-form :model="dialogParams"  :rules="dialogRules" ref="dialogParams" label-width="140px">
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="支付类型:" prop="zflx">
                <el-input v-model="dialogParams.zflx" placeholder="请输入支付类型" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="应用id:" prop="appId">
                <el-input v-model="dialogParams.appId" placeholder="请输入应用id" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="商户id:" prop="mchId">
                <el-input v-model="dialogParams.mchId" placeholder="请输入商户id" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商户密钥:" prop="mchKey">
                <el-input v-model="dialogParams.mchKey" placeholder="请输入商户密钥" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="商户证书序列号:" prop="certSerialNo">
                <el-input v-model="dialogParams.certSerialNo" placeholder="请输入商户证书序列号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="APIv3密钥:" prop="apiV3Key">
                <el-input v-model="dialogParams.apiV3Key" placeholder="请输入APIv3密钥" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="私钥文件路径:" prop="privateKeyPath">
                <el-input v-model="dialogParams.privateKeyPath" placeholder="请输入私钥文件路径" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="私有证书文件路径:" prop="privateCertPath">
                <el-input v-model="dialogParams.privateCertPath"  placeholder="请输入私有证书文件路径" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label=".p12格式的密钥:" prop="keyPath">
                <el-input v-model="dialogParams.keyPath" placeholder="请输入.p12 格式的密钥文件路径，私钥和证书" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleDialogClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {deletePaymentPort, addOrEditPaymentPort, paymentTableDataPort} from '@/api/regionalManage'
import moment from "moment";

export default {
  name: "paymentManage",
  props:{
    rowData:{
      type:Object,
      default:()=>{}
    }
  },
  async mounted() {
    await this.getDataList();
  },
  data(){
    return {
      filterText:'',
      showResetDialog:false,
      showQrCodeVisible:false,
      showDialog:false,
      dialogParams:{
        showDialogVisible:false,
        cjr:'',
        cjsj:'',
        gxsj:'',
        gxr:'',
        title:'新增区域',
        id_:'',
        czID:'',
        czmc: '',
        qyID: '',
        qymc: '',
        dialogVisible:false,
        zflx:'',
        appId:'',
        mchId:'',
        mchKey:'',
        certSerialNo:'',
        apiV3Key:'',
        keyPath:'',
        privateKeyPath:'',
        privateCertPath:'',
        dialogType:'',
        form_data_rev_:''
      },
      dialogRules:{
        zflx:[
          {required:true,message:'请输入支付类型',trigger:'blur'}
        ],
        appId:[
          {required:true,message:'请输入应用id',trigger:'blur'}
        ],
        mchId:[
          {required:true,message:'请输入商户id',trigger:'blur'}
        ],
        mchKey:[
          {required:true,message:'请输入商户密钥',trigger:'blur'}
        ],
        certSerialNo:[
          {required:true,message:'请输入商户证书序列号',trigger:'blur'}
        ],
        apiV3Key:[
          {required:true,message:'请输入APIv3密钥',trigger:'blur'}
        ],
        keyPath:[
          {required:true,message:'请输入.p12 格式的密钥文件路径，私钥和证书',trigger:'blur'}
        ],
        privateKeyPath:[
          {required:true,message:'请输入私钥文件路径',trigger:'blur'}
        ],
        privateCertPath:[
          { required:true,message:'请输入私有证书文件路径',trigger:'blur'}
        ]
      },
      queryForm:{
        F_zflx:'',
        F_appId:'',
        F_mchId:'',
        orgId:''
      },
      pageParam:{
        page:1,
        size:10,
        total:0
      },
      loading:false,
      tableData:[],

    }
  },
  methods:{
    //查询列表事件
    //获取table表格数据
    async getDataList(){
      let params ={
        pageBean:{
          page:this.pageParam.page,
          pageSize:this.pageParam.size,
          showTotal:true
        },
        querys:[]
      }
      if(this.queryForm.F_zflx){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_zflx',
          relation:'AND',
          value:this.queryForm.F_zflx
        })
      }
      if(this.queryForm.F_appId){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_appId',
          relation:'AND',
          value:this.queryForm.F_appId
        })
      }
      if(this.queryForm.F_mchId){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_mchId',
          relation:'AND',
          value:this.queryForm.F_mchId
        })
      }
      if(this.rowData.fSsczid){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_czID',
          relation:'AND',
          value:this.rowData.fSsczid
        })
      }
      if(!this.rowData.fSsczid&&this.rowData.qyID){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_qyid',
          relation:'AND',
          value:this.rowData.qyID
        })
      }
      this.loading = true;
      await paymentTableDataPort(params).then((res)=>{
        const { rows,total } = res;
        this.tableData = rows;
        this.pageParam.total = total;
        setTimeout(()=>{
          this.loading = false;
        },500)
      })
    },
    //重置按钮事件
    handleReset(){
      this.queryForm.F_zflx ='';
      this.queryForm.appId ='';
      this.queryForm.mchId ='';
      this.pageParam.page = 1;
      this.handleSearch();
    },
    //查询按钮事件
    handleSearch(){
      this.getDataList();
    },
    //新增用户事件
    handleAdd(){
      this.showDialog = true;
      this.$nextTick(()=>{
        this.$refs.showDialog.open('add');
      })
    },
    //分页中页数跳转事件
    handleCurrentChange(val){
      this.pageParam.page = val;
      this.handleSearch();
    },
    //分页中size改变的界面跳转事件
    handleSizeChange(val){
      this.pageParam.size = val;
      this.handleSearch();
    },
    //提交事件
    async handleSubmit(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            qymc:this.dialogParams.qymc?this.dialogParams.qymc:'',
            qyID:this.dialogParams.qyID?this.dialogParams.qyID:'',
            czID:this.dialogParams.czID?this.dialogParams.czID:'',
            czmc:this.dialogParams.czmc?this.dialogParams.czmc:'',
            zflx:this.dialogParams.zflx?this.dialogParams.zflx:'',
            appId:this.dialogParams.appId?this.dialogParams.appId:'',
            mchId:this.dialogParams.mchId?this.dialogParams.mchId:'',
            mchKey:this.dialogParams.mchKey?this.dialogParams.mchKey:'',
            certSerialNo:this.dialogParams.certSerialNo?this.dialogParams.certSerialNo:'',
            apiV3Key:this.dialogParams.apiV3Key?this.dialogParams.apiV3Key:'',
            keyPath:this.dialogParams.keyPath?this.dialogParams.keyPath:'',
            privateKeyPath:this.dialogParams.privateKeyPath?this.dialogParams.privateKeyPath:'',
            privateCertPath:this.dialogParams.privateCertPath?this.dialogParams.privateCertPath:'',
            cjr:this.dialogParams.cjr?this.dialogParams.cjr:'',
            cjsj:this.dialogParams.cjsj?this.dialogParams.cjsj:'',
            gxr:'',
            gxsj:''
          }
          if(this.dialogParams.dialogType == 'edit'){
            this.dialogParams.gxsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
            params = {
              ...params,
              id_:this.dialogParams.id_?this.dialogParams.id_:'',
              form_data_rev_:this.dialogParams.form_data_rev_?this.dialogParams.form_data_rev_:0,
              gxr: this.dialogParams.gxr?this.dialogParams.gxr:'',
              gxsj: this.dialogParams.gxsj?this.dialogParams.gxsj:'',
            }
            this.submitAddOrEditEquipment(params);
          }else{
            this.dialogParams.cjsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
            params = {
              ...params,
              cjsj: this.dialogParams.cjsj?this.dialogParams.cjsj:'',
              cjr: this.dialogParams.cjr?this.dialogParams.cjr:'',
            }
            this.submitAddOrEditEquipment(params);
          }
        } else {
          return false;
        }
      });
    },
    //提交编辑设备接口事件
    async submitAddOrEditEquipment(params){
      await addOrEditPaymentPort(params).then((res)=>{
        console.log('打印新增编辑的res====>',res);
        const { code } = res;
        if(code == 200){
          this.dialogParams.dialogVisible = false;
          this.dialogParams.showDialogVisible = false;
          this.handleSearch();
        }
      })
    },
    //操作栏按钮
    async hanleOpt(type,row){
      console.log('打印row=====>',row);
      this.dialogParams.dialogType= type;
      switch (type){
        case 'add':
          this.dialogParams.czID = this.rowData.fSsczid;
          this.dialogParams.czmc = this.rowData.czmc;
          this.dialogParams.qyID = this.rowData.qyID;
          this.dialogParams.qymc = this.rowData.qymc;
          this.dialogParams.spldz = '';
          this.dialogParams.id_ = '';
          this.dialogParams.zflx = '';
          this.dialogParams.appId = '';
          this.dialogParams.mchId ='';
          this.dialogParams.mchKey = '';
          this.dialogParams.certSerialNo = '';
          this.dialogParams.apiV3Key = '';
          this.dialogParams.keyPath = '';
          this.dialogParams.privateKeyPath = '';
          this.dialogParams.privateCertPath = '';
          this.dialogParams.cjr = this.$store.state.user.username?this.$store.state.user.username:'';
          this.dialogParams.cjsj = '';
          this.dialogParams.title='新增支付';
          // await this.getEquipmentNum();
          break;
        case 'edit':
          this.dialogParams.id_ = row.ID_;
          this.dialogParams.title='编辑支付';
          this.dialogParams.zflx = row.F_zflx;
          this.dialogParams.appId = row.F_appId;
          this.dialogParams.mchId = row.F_mchId;
          this.dialogParams.mchKey = row.F_mchKey;
          this.dialogParams.certSerialNo = row.F_certSerialNo;
          this.dialogParams.apiV3Key = row.F_apiV3Key;
          this.dialogParams.keyPath = row.F_keyPath;
          this.dialogParams.privateKeyPath = row.F_privateKeyPath;
          this.dialogParams.privateCertPath = row.F_privateCertPath;
          this.dialogParams.qymc = row.F_qymc;
          this.dialogParams.qyID = row.F_qyID;
          this.dialogParams.czmc = row.F_czmc;
          this.dialogParams.czID = row.F_czID;
          this.dialogParams.cjsj = row.F_cjsj;
          this.dialogParams.cjr = row.F_cjr;
          this.dialogParams.gxr = row.F_gxr;
          this.dialogParams.gxsj = row.F_gxsj;
          this.dialogParams.form_data_rev_ = row.F_form_data_rev_;
          break;
        case 'delete':
          this.$confirm('确定是否删除该设备？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(async() => {
            await deletePaymentPort({ids:row.ID_}).then((res)=>{
              this.handleSearch();
            })
          })
          break;
      }
      if(!this.rowData.fSsczid && type == 'add'){
        this.$message.warning('请选择厂站!')
        return
      }
      if(type !== 'delete'){
        this.dialogParams.showDialogVisible = true;
        this.$nextTick(()=>{
          this.dialogParams.dialogVisible = true;
        })
      }
    },
    //弹窗关闭
    handleDialogClose(){
      this.$refs.dialogParams.resetFields();
      this.dialogParams.dialogVisible = false;
      this.dialogParams.showDialogVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.componentsSty{
  width: calc(100% - 30px);
  height: 100%;
}

</style>
