<template>
<div class="order-transfer">
  <div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
    <el-form-item label="spid">
      <el-input v-model.trim="formInline.spid" clearable placeholder="请输入spid"></el-input>
    </el-form-item>
    <el-form-item label="cpid">
      <el-input v-model.trim="formInline.cpid" clearable placeholder="请输入cpid"></el-input>
    </el-form-item>
    <el-form-item label="合作伙伴ID">
      <el-input v-model.trim="formInline.channel" clearable placeholder="请输入合作伙伴ID"></el-input>
    </el-form-item>
    <el-form-item label="产品状态">
      <el-select v-model="formInline.status" clearable placeholder="请选择产品状态">
        <el-option label="全部" value=""></el-option>
        <el-option label="生效" value="0"></el-option>
        <el-option label="失效" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="添加时间">
      <el-date-picker v-model="formInline.addTime" clearable format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
      <el-button plain type="primary" @click="addClick('add')">新增</el-button>
      <el-button @click="resetClick">刷新</el-button>
    </el-form-item>
  </el-form>
  </div>
  <div>
    <el-table :loading="loading" border :data="dataList" style="width: 100%">
      <el-table-column align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="spid" label="SPID"></el-table-column>
      <el-table-column align="center" prop="cpid" label="CPID"></el-table-column>
      <el-table-column align="center" prop="channel" label="合作伙伴ID"></el-table-column>
      <el-table-column align="center" prop="handle" label="映射接口名"></el-table-column>
      <el-table-column align="center" prop="insertTime" label="创建时间"></el-table-column>
      <el-table-column align="center" prop="date" label="状态">
        <template slot-scope="scope">
          {{scope.row.status ? scope.row.status === '1' ? '失效' : '生效' : ''}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="auditStatus" label="审核状态">
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus == 0">待审核</span>
          <span v-if="scope.row.auditStatus == 1">审核通过</span>
          <span v-if="scope.row.auditStatus == 2">审核拒绝</span>
          <span v-if="scope.row.auditStatus == 11">审核通过(已编辑)</span>
          <span v-if="scope.row.auditStatus == 12">审核拒绝(已编辑)</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addClick('copy', scope.row)">复制</el-button>
          <el-button type="text" size="small" @click="addClick('see', scope.row)">查看</el-button>
          <el-button :disabled="scope.row.auditStatus == 0" type="text" size="small" @click="addClick('edit', scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="addClick('Version', scope.row)">版本</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 10px">
      <el-pagination background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
    </div>
  </div>
  <el-dialog :title="addTittle" :visible.sync="dialogVisible" width="60%" @close="$refs.addFrom.clearValidate()">
    <el-form :disabled="seeFlag" :rules="rules" ref="addFrom" label-position="left" label-width="92px"  :model="addform" class="order-add-form" size="small">
      <el-form-item v-if="seeFlag" label="编号">
        <el-input  v-model.trim="addform.id" clearable placeholder="请输入编号"></el-input>
      </el-form-item>
      <el-form-item label="合作伙伴ID" prop="channel">
        <el-input v-model.trim="addform.channel" clearable placeholder="请输入合作伙伴ID"></el-input>
      </el-form-item>
      <el-form-item label="cpid" prop="cpid">
        <el-input v-model.trim="addform.cpid" clearable placeholder="请输入cpid"></el-input>
      </el-form-item>
      <el-form-item label="spid" prop="spid">
        <el-input v-model.trim="addform.spid" clearable placeholder="请输入spid"></el-input>
      </el-form-item>
      <el-form-item label="映射接口" prop="handle">
        <el-input v-model.trim="addform.handle" clearable placeholder="IE地址，多个用1分隔"></el-input>
      </el-form-item>
      <el-form-item label="产品状态">
        <el-switch v-model="addform.channelStatus"
          active-color="#13ce66"
          active-text="生效"
          inactive-text="失效"  active-value="0" inactive-value="1">
        </el-switch>
      </el-form-item>
      <el-form-item  v-if="seeFlag" label="添加时间">
        <el-date-picker v-model="addform.insertTime" clearable type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择添加时间">
        </el-date-picker>
      </el-form-item>
<!--      <el-form-item label="接口限制">-->
<!--        <el-input v-model="addform.invokeFace" placeholder="请输入接口限制"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item class="addform-sub">
        <el-button v-if="!addform.id" @click="setdraftClick">保存草稿</el-button>
        <el-button type="primary" @click="setSubmitClick">提交审核</el-button>
      </el-form-item>
    </el-form>
    <AddBox v-if="addVisible" ref="addBox" :addTitle="addBoxTitle" @setFlow="addBoxClick" />
  </el-dialog>
  <el-dialog title="查看历史记录" :visible.sync="dialogVisible1" width="60%" >
    <el-table :loading="loading" border :data="VersionList" style="width: 100%">
      <el-table-column align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="spid" label="SPID"></el-table-column>
      <el-table-column align="center" prop="cpid" label="CPID"></el-table-column>
      <el-table-column align="center" prop="channel" label="合作伙伴ID"></el-table-column>
      <el-table-column align="center" prop="handle" label="映射接口名"></el-table-column>
      <el-table-column align="center" prop="insertTime" label="创建时间"></el-table-column>
      <el-table-column align="center" prop="date" label="状态">
        <template slot-scope="scope">
          {{scope.row.status ? scope.row.status === '1' ? '失效' : '生效' : ''}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="auditStatus" label="审核状态">
        <template slot-scope="scope">
          <span v-if="scope.row.auditStatus == 0">待审核</span>
          <span v-if="scope.row.auditStatus == 1">审核通过</span>
          <span v-if="scope.row.auditStatus == 2">审核拒绝</span>
          <span v-if="scope.row.auditStatus == 11">审核通过(已编辑)</span>
          <span v-if="scope.row.auditStatus == 12">审核拒绝(已编辑)</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="auditVersion" label="版本"></el-table-column>

    </el-table>
  </el-dialog>
</div>
</template>

<script>
import { post, get } from "@/api/common";
import AddBox from "@/components/flowOderAdd/addBox";
export default {
  name: "orderTransfer",
  components:{AddBox},
  data(){
    return{
      page:1,
      limit:10,
      total:0,
      loading:false,
      formInline: {
        spid:'',
        cpid:'',
        channel:'',//合作伙伴ID
        status: '',
        addTime:[]
      },
      dataList:[],
      VersionList:[], //历史记录
      dialogVisible:false,
      dialogVisible1:false,
      addVisible:false,
      addTittle:'配置产品转接',
      addBoxTitle:'请选择产品转接审核模板',
      seeFlag:false,
      addform: {
        id:'', //编号
        spid:'', //spid
        cpid:'', //cpid
        channel:'', //合作伙伴ID
        handle:'',//映射接口
        channelStatus: '1',//产品状态
        invokeFace: '',//接口限制
        draftType:1, //草稿类型
        auditVersion:0, //版本
        auditSource:'', //版本
        auditStatus:0, //审核状态
      },
      prevform:{},
      rules:{
        channel: [
          { required: true, message: '请输入合作伙伴ID', trigger: 'blur' },
        ],
        cpid: [
          { required: true, message: '请输入cpid', trigger: 'blur' },
        ],
        spid: [
          { required: true, message: '请输入spid', trigger: 'blur' },
        ],
        handle: [
          { required: true, message: '请输入映射接口', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    let id = this.$route.query.id
    if (id){
      this.formInline.channel = id
    }
    this.getList()
  },
  methods:{
    onSubmit() {
      this.getList()
    },
    getList(){
      this.loading = true
      let { spid,cpid,channel,status,addTime} = this.formInline
      if(!addTime){
        addTime = []
      }
      let parms = {
        spid,cpid,channel,status,
        startTime:addTime.length ? addTime[0] : null,
        endTime:addTime.length ? addTime[1] : null,
        pageSize: this.limit,
        pageNum: this.page,
      }
      get("/manager/unified-invoke/list", parms).then((res) => {
        this.dataList = res.data.records
        this.total = res.data.total;
        this.limit = res.data.size;
        this.page = res.data.current;
        this.loading = false
      });
    },
    addClick(type,row){
      this.addform = {
        id:'',
        spid:'',
        cpid:'',
        channel:'',
        handle:'',
        channelStatus: '1',
        invokeFace: '',
        draftType:1,
        auditVersion:0, //版本
        auditStatus:0, //审核状态
      };
      if (this.$route.query.id){
        this.addform.channel = this.$route.query.id
      }
      this.seeFlag = false
      if (type === 'add'){
        this.addTittle = '配置产品转接';
        this.dialogVisible = true
      }else if (type === 'copy'){
        this.addTittle = '配置产品转接';
        this.eidtChannelData(row,false)
      }else if (type === 'see'){
        this.addTittle = '查看产品转接';
        this.seeFlag = true
        this.eidtChannelData(row,true)
      }else if (type === 'edit'){
        this.addTittle = '编辑产品转接';
        this.eidtChannelData(row,true)
      }else if(type === 'Version'){
        this.getVersionList(row.auditSource)
      }
    },
    //获取版本历史数据
    getVersionList(auditSource){
      this.dialogVisible1 = true
      this.loading = true
      let parms = {value:auditSource}
      post("/manager/unified-invoke/version", parms).then((res) => {
        if (res.code === 10000) {
          this.VersionList = res.data
          this.loading = false

        }
      });
    },
    //编辑产品转接回显
    eidtChannelData(row,type){
      let {channel,cpid,spid,handle,status,id,insertTime,auditVersion,auditStatus,auditSource,auditTemplateId} = row
      this.addform = {
        channel,cpid,spid,handle,
        channelStatus:status,
        id:type ? id : null,
        insertTime,
        draftType:1,
        auditVersion:auditVersion ? auditVersion : 0,
        auditSource,auditStatus,
        auditTemplateId:auditTemplateId ? auditTemplateId : null
      }
      this.prevform = JSON.stringify(this.addform)
      this.dialogVisible = true
    },
    resetClick(){
      this.formInline = {
          spid:'',
          cpid:'',
          channel:'',
          status: '',
          addTime:[]
      }
      this.page = 1
      this.limit = 10
      this.getList()
    },
    //切换当前页条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.limit = val
      this.getList()
    },
    //切换页数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getList()
    },
    //保存草稿箱
    setdraftClick(){
      let { channel,cpid,spid,handle,channelStatus,invokeFace,draftType,id} = this.addform
      let parms = { channel,cpid,spid,handle,channelStatus,invokeFace,draftType,unifiedId:id}
      this.$refs['addFrom'].validate((valid) => {
        if (valid){
          post("/manager/draft/submit", parms).then((res) => {
            if (res.code === 10000) {
              this.$message.success(res.message);
              this.dialogVisible = false
            }
          });
        }else {
          this.$message.warning('请完善信息');
          return false;
        }
      })
    },
  //  提交审核
    setSubmitClick(){
      this.addVisible = true
      this.$nextTick(() => {
        this.$refs.addBox.getTemplate(this.addform.auditTemplateId)
      })
    },
    addBoxClick(data){
      let { channel,cpid,spid,handle,channelStatus,id,auditVersion,auditSource,auditStatus} = this.addform
      let parms = { channel,cpid,spid,handle,status:channelStatus,id,
        auditVersion:id ? auditVersion + 1 : auditVersion,
        auditSource,auditStatus,...data }
      this.$refs['addFrom'].validate((valid) => {
        if (valid){
          if (JSON.stringify(this.addform) !== this.prevform){
            post("/manager/unified-invoke/submit", parms).then((res) => {
              if (res.code === 10000) {
                this.$message.success(res.message);
                this.dialogVisible = false
                this.addVisible = false
                this.$refs.addBox.dialogVisible = false
                this.getList()
              }
            });
          }else {
            this.$message.warning('未修改内容 请修改内容后重试');
            return false;
          }
        }else {
          this.$message.warning('请完善信息');
          return false;
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.order-transfer{
  padding: 20px !important;
  .order-add-form{
    display: flex;
    flex-wrap: wrap;
    .el-form-item{
      width: 50%;
      .el-input{
        width: 80%;
      }
    }
    .addform-sub{
      width: 100%;
      text-align: center;
     ::v-deep .el-form-item__content{
        margin-left: 0 !important;
      }
      .el-button+.el-button{
        margin-left: 100px;
      }
    }
  }
}
</style>
