<template>
<div class="order-draft">
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="草稿名称">
        <el-input v-model.trim="formInline.name" clearable placeholder="请输入草稿名称"></el-input>
      </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 @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="draftType" label="草稿类型">
        <template slot-scope="scope">
          {{scope.row.draftType ? scope.row.draftType === 1 ? '产品转接' : '产品权限' : ''}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="draftName" label="草稿名称"></el-table-column>
      <el-table-column align="center" prop="createUser" label="发起人"></el-table-column>
      <el-table-column align="center" prop="createTime" label="发起时间"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addClick(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteClick(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>
    <el-dialog :title="addTittle" :visible.sync="dialogVisible" width="60%" @close="$refs.addFrom.clearValidate()">
      <el-form ref="addFrom" :rules="rules" label-position="left" label-width="92px"  :model="addform" class="order-add-form" size="small">
        <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 v-if="addform.draftType === 1 " prop="handle" label="映射接口">
          <el-input v-model.trim="addform.handle" clearable placeholder="IE地址，多个用1分隔"></el-input>
        </el-form-item>
        <el-form-item v-if="addform.draftType === 2 " prop="ip" label="ip地址">
          <el-input v-model.trim="addform.ip" 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="addform.draftType === 2 " prop="busiType" label="业务类型">
          <el-select v-model="addform.busiType" clearable placeholder="请选择业务类型">
            <el-option label="办理" value="0"></el-option>
            <el-option label="查询" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="addform.draftType === 2 " prop="invokeFace" label="接口限制">
          <el-input v-model.trim="addform.invokeFace" clearable placeholder="请输入接口限制"></el-input>
        </el-form-item>
        <el-form-item v-if="addform.draftType === 2 " label="备注">
          <el-input type="textarea" clearable v-model="addform.note"></el-input>
        </el-form-item>
        <el-form-item class="addform-sub">
          <el-button @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>
  </div>
</div>
</template>

<script>
import { post, get } from "@/api/common";
import AddBox from "@/components/flowOderAdd/addBox";
export default {
  name: "index",
  components:{AddBox},
  data(){
    return{
      page:1,
      limit:10,
      total:10,
      formInline:{
        name:'',
        addTime:'',
        draftTypes:'1,2'
      },
      dataList:[],
      loading:false,
      dialogVisible:false,
      addVisible:false,
      addTittle:'配置产品转接',
      addBoxTitle:'请选择产品转接审核模板',
      addform: {
        spid:'', //spid
        cpid:'', //cpid
        channel:'', //合作伙伴ID
        handle:'',//映射接口
        channelStatus: '1',//产品状态
        invokeFace: '',//接口限制
        draftType:1, //草稿类型
        ip:'', //ip
        status: '1',//产品状态
        busiType:'', //业务类型
        note:'', //备注
        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' },
        ],
        ip: [
          { required: true, message: '请输入ip地址', trigger: 'blur' },
        ],
        busiType: [
          { required: true, message: '请选择业务类型', trigger: 'change' }
        ],
        invokeFace: [
          { required: true, message: '请输入接口限制', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.getList()
  },
  methods:{
    onSubmit(){
      this.getList()
    },
    resetClick(){
      this.formInline = {
        name:'',
        addTime:'',
        draftTypes:'1,2'
      }
      this.page = 1
      this.limit = 10
      this.getList()
    },
    getList(){
      this.loading = true
      let { name,addTime,draftTypes} = this.formInline
      if(!addTime){
        addTime = []
      }
      get("/manager/draft/list", {
        name,draftTypes,
        startTime:addTime.length ? addTime[0] : null,
        endTime:addTime.length ? addTime[1] : null,
        pageSize: this.limit,
        pageNum: this.page,
      }).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
      });
    },
    //切换当前页条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.limit = val
      this.getList()
    },
    //切换页数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val
      this.getList()
    },
    //编辑
    addClick(row){
      if (row.draftType){
        //产品转接
        if (row.draftType === 1){
          this.addTittle = '编辑产品转接'
          this.addBoxTitle = '请选择产品转接审核模板'
          this.eidtChannelData(row)
        }else if (row.draftType === 2){
          this.addTittle = '编辑产品权限'
          this.addBoxTitle = '请选择产品权限审核模板'
          this.eidtChannelData(row)
        }
      }else {
        this.$message.error('无效草稿信息');
      }
    },
    //编辑产品转接回显
    eidtChannelData(row){
      let {id,channel,cpid,spid,ip,handle,channelStatus,invokeFace,busiType,note,draftType,unifiedId,auditVersion,auditStatus,auditSource,auditTemplateId} = row
      this.addform = {id,channel,cpid,spid,ip,handle,channelStatus,invokeFace,busiType,note,draftType,unifiedId,
        auditVersion:auditVersion ? auditVersion : 0,
        auditSource,auditStatus,
        auditTemplateId:auditTemplateId ? auditTemplateId : null}
      this.prevform = JSON.stringify(this.addform)
      this.dialogVisible = true
    },
    //保存草稿
    setdraftClick(){
      let { id,channel,cpid,spid,ip,handle,channelStatus,invokeFace,busiType,note,draftType} = this.addform
      let parms = {}
      if (draftType === 1){
        parms = { id,channel,cpid,spid,handle,channelStatus,invokeFace,draftType}
      }else if (draftType === 2){
        parms = {id,channel,cpid,spid,ip,channelStatus,invokeFace,busiType,note,draftType}
      }
      this.$refs['addFrom'].validate((valid) => {
        if (valid){
          if (JSON.stringify(this.addform) !== this.prevform){
            post("/manager/draft/submit", parms).then((res) => {
              if (res.code === 10000) {
                this.$message.success(res.message);
                this.dialogVisible = false
                this.getList()
              }
            });
          }else {
            this.$message.warning('未修改内容 请修改内容后重试');
            return false;
          }
        }else {
          this.$message.warning('请完善信息');
          return false;
        }
      })

    },
    setSubmitClick(){
      this.addVisible = true
      this.$nextTick(() => {
        this.$refs.addBox.getTemplate(this.addform.auditTemplateId)
      })
    },
    addBoxClick(data){
      let { id,channel,cpid,spid,ip,handle,channelStatus,invokeFace,busiType,note,draftType,unifiedId,auditVersion,auditSource,auditStatus} = this.addform
      let parms = {}
      if (draftType === 1){
        parms = { channel,cpid,spid,handle,status:channelStatus,draftId:id,id:unifiedId,
          auditVersion:id ? auditVersion + 1 : auditVersion,
          auditSource,auditStatus,...data}
        this.$refs['addFrom'].validate((valid) => {
          if (valid){
            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 if (draftType === 2){
        parms = { channel,cpid,spid,ip,status:channelStatus,busiType,invokeFace,note,draftId:id,id:unifiedId,
          auditVersion:id ? auditVersion + 1 : auditVersion,
          auditSource,auditStatus,...data }
        this.$refs['addFrom'].validate((valid) => {
          if (valid){
            post("/manager/unified-Limit/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()
              }
            });
          }
        })
      }
    },
  //  删除
    deleteClick(row){
      this.$confirm('是否删除草稿箱内容，删除后无法恢复？', '确认信息')
        .then(_ => {
          get("/manager/draft/delete", {
            id:row.id,
          }).then((res) => {
            this.$message.success(res.message);
            this.getList()
          });
        }).catch(_ => {});
    },
  }
}
</script>

<style lang="scss" scoped>
.order-draft{
  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>
