<template>
  <div class="order-transfer">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="CPID">
          <el-input v-model.trim="formInline.cpId" clearable placeholder="请输入CPID"></el-input>
        </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="flowcp" label="CPID"></el-table-column>
        <el-table-column align="center" prop="flowcpName" label="配置名称"></el-table-column>
        <el-table-column align="center" prop="alertUrl" label="同步接口链接"></el-table-column>
        <el-table-column align="center" prop="mobType" label="类型"></el-table-column>
        <el-table-column align="center" prop="date" label="状态" width="150">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" @change="statusChanges($event,scope.row)"
                       active-color="#13ce66" :disabled="scope.row.auditStatus == 0"
                       active-text="生效"
                       inactive-text="失效"  :active-value="0" :inactive-value="1">
            </el-switch>
          </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('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="110px"  :model="addform" class="order-add-form" size="small">
        <el-form-item label="CPID" prop="flowcp">
          <el-input v-model.trim="addform.flowcp" clearable placeholder="请输入CPID"></el-input>
        </el-form-item>
        <el-form-item label="配置名称" prop="flowcpName">
          <el-input  v-model.trim="addform.flowcpName" clearable placeholder="请输入配置名称"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="mobType">
          <el-select v-model="addform.mobType" clearable placeholder="请选择类型">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" v-if="!addFlag">
          <el-switch v-model="addform.status"
                     active-color="#13ce66"
                     active-text="是"
                     inactive-text="否"  :active-value="0" :inactive-value="1">
          </el-switch>
        </el-form-item>
        <p>类型备注：1 不返回号码给合作方（代码中体现是手机号会多一层加密）；0 返回手机号给合作方（只加密一次）</p>
        <el-form-item label="同步接口链接" class="addform-teaxt" prop="alertUrl">
          <el-input v-model.trim="addform.alertUrl" clearable 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="flowcp" label="CPID"></el-table-column>
        <el-table-column align="center" prop="flowcpName" label="配置名称"></el-table-column>
        <el-table-column align="center" prop="alertUrl" label="同步接口链接"></el-table-column>
        <el-table-column align="center" prop="mobType" label="类型"></el-table-column>
        <el-table-column align="center" prop="date" label="状态" width="150">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"  disabled
                       active-color="#13ce66"
                       active-text="生效"
                       inactive-text="失效"  :active-value="0" :inactive-value="1">
            </el-switch>
          </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: "flowSynchronous",
  components:{AddBox},
  data(){
    return{
      page:1,
      limit:10,
      total:0,
      loading:false,
      formInline: {
        cpId:'',
      },
      dataList:[],
      VersionList:[], //历史记录
      dialogVisible:false,
      dialogVisible1:false,
      addVisible:false,
      addTittle:'配置同步参数',
      addBoxTitle:'请选择流量数据同步审核模板',
      seeFlag:false,
      addform: {
        flowcpName:'', //	名称
        flowcp:'', //cpid
        status:0,//状态
        mobType: '1',//类型
        alertUrl: '',//同步接口链接
        draftType:3, //草稿类型
        auditVersion:0, //版本
        auditSource:'', //版本
        auditStatus:0, //审核状态
      },
      addFlag:false,
      prevform:{},
      rules:{
        flowcp: [
          { required: true, message: '请输入CPID', trigger: 'blur' },
        ],
        flowcpName: [
          { required: true, message: '请输入配置名称', trigger: 'blur' },
        ],
        mobType: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        alertUrl: [
          { required: true, message: '请输入同步接口链接', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.getList()
  },
  methods:{
    onSubmit() {
      this.getList()
    },
    getList(){
      this.loading = true
      let {cpId} = this.formInline
      let parms = {cpId,
        pageSize: this.limit,
        pageNum: this.page,
      }
      get("/partner-sync/flow/page", 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:'',
        flowcpName:'', //	名称
        flowcp:'', //cpid
        status:0,//状态
        mobType: '1',//类型
        alertUrl: '',//同步接口链接
        draftType:3, //草稿类型
        auditVersion:0, //版本
        auditStatus:0, //审核状态
      };
      this.seeFlag = false
      this.addFlag = false
      if (type === 'add'){
        this.addTittle = '配置同步参数';
        this.dialogVisible = true
        this.addFlag = true
      }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("/partner-sync/flow/version", parms).then((res) => {
        if (res.code === 10000) {
          this.VersionList = res.data
          this.loading = false

        }
      });
    },
    //编辑产品转接回显
    eidtChannelData(row,type){
      let {flowcpName,flowcp,status,mobType,alertUrl,id,auditVersion,auditStatus,auditSource,auditTemplateId} = row
      this.addform = {
        flowcpName,flowcp,status,mobType,alertUrl,id,
        draftType:3,
        auditVersion:auditVersion ? auditVersion : 0,
        auditSource,auditStatus,
        auditTemplateId:auditTemplateId ? auditTemplateId : null
      }
      this.prevform = JSON.stringify(this.addform)
      this.dialogVisible = true
    },
    //列表内开关
    statusChanges(val,row){
      let {flowcpName,flowcp,mobType,alertUrl,id,auditVersion,auditStatus,auditSource,auditTemplateId} = row
      let parms = { flowcpName,flowcp,
        status:val,
        mobType,alertUrl,id,
        auditVersion:id ? auditVersion + 1 : auditVersion,
        auditSource,auditStatus,auditTemplateId}
      post("/partner-sync/flow/submit", parms).then((res) => {
        if (res.code === 10000) {
          this.$message.success(res.message);
          this.getList()
        }
      });
    },
    resetClick(){
      this.formInline = {
        cpId:''
      }
      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 { flowcpName,flowcp,status,mobType,alertUrl,draftType,id} = this.addform
      let JSONData = { flowcpName,flowcp,status,mobType,alertUrl,id}
      let parms = { cpid:flowcp,json:JSON.stringify(JSONData),draftType}
      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 { flowcpName,flowcp,status,mobType,alertUrl,id,auditVersion,auditSource,auditStatus} = this.addform
      let parms = { flowcpName,flowcp,status,mobType,alertUrl,id,
        auditVersion:id ? auditVersion + 1 : auditVersion,
        auditSource,auditStatus,...data}
      this.$refs['addFrom'].validate((valid) => {
        if(valid){
          if (JSON.stringify(this.addform) !== this.prevform){
            post("/partner-sync/flow/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-teaxt{
      width: 100%;
    }
    .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>
