<template>
  <div class="order-manage">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="合作伙伴ID">
          <el-input v-model.trim="formInline.id" clearable placeholder="请输入合作伙伴ID"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴名称">
          <el-input v-model.trim="formInline.name" clearable placeholder="请输入合作伙伴名称"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴秘钥">
          <el-input v-model.trim="formInline.password" clearable placeholder="请输入合作伙伴秘钥"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴类别">
          <el-select v-model="formInline.category" clearable placeholder="请选择合作伙伴类别">
            <el-option label="全部" value=""></el-option>
            <el-option label="省分线下渠道" value="省分线下渠道"></el-option>
            <el-option label="博源验证码短信发送" value="博源验证码短信发送"></el-option>
            <el-option label="集团渠道" value="集团渠道"></el-option>
            <el-option label="社会代理和其他渠道" value="社会代理和其他渠道"></el-option>
            <el-option label="非订购渠道" value="非订购渠道"></el-option>
            <el-option label="互联网渠道" value="互联网渠道"></el-option>
            <el-option label="省分线上渠道" value="省分线上渠道"></el-option>
            <el-option label="手动恢复渠道" value="手动恢复渠道"></el-option>
            <el-option label="自有线上渠道" value="自有线上渠道"></el-option>
          </el-select>
        </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-select v-model="formInline.type" clearable placeholder="请选择合作伙伴类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="客户端" value="0"></el-option>
            <el-option label="短信" value="1"></el-option>
            <el-option label="手厅" value="2"></el-option>
            <el-option label="H5" value="3"></el-option>
            <el-option label="营业厅" value="4"></el-option>
            <el-option label="微厅" value="5"></el-option>
            <el-option label="腾讯审核渠道" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口类型">
          <el-select v-model="formInline.handleType" clearable placeholder="请选择接口类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="客户端订购接口" value="0"></el-option>
            <el-option label="短信订购接口" value="1"></el-option>
            <el-option label="手厅订购接口" value="2"></el-option>
            <el-option label="h5订购接口" value="3"></el-option>
            <el-option label="vac订购接口" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上线时间">
          <el-date-picker v-model="formInline.addTime" clearable
                          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 label="下线时间">
          <el-date-picker v-model="formInline.endTime" clearable
                          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 border :data="dataList" style="width: 100%">
        <el-table-column align="center" prop="id" label="合作伙伴ID"></el-table-column>
        <el-table-column align="center" prop="name" label="合作伙伴名称"></el-table-column>
        <el-table-column align="center" prop="password" label="合作伙伴秘钥"></el-table-column>
        <el-table-column align="center" prop="category" label="合作伙伴类别"></el-table-column>
        <el-table-column align="center" prop="shape" 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="type" label="合作伙伴类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == '0'">客户端</span>
            <span v-if="scope.row.type == '1'">短信</span>
            <span v-if="scope.row.type == '2'">手厅</span>
            <span v-if="scope.row.type == '3'">H5</span>
            <span v-if="scope.row.type == '4'">营业厅</span>
            <span v-if="scope.row.type == '5'">微厅</span>
            <span v-if="scope.row.type == '6'">腾讯审核渠道</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="handleType" label="接口类型">
          <template slot-scope="scope">
            <span v-if="scope.row.handleType == 0">客户端订购接口</span>
            <span v-if="scope.row.handleType == 1">短信订购接口</span>
            <span v-if="scope.row.handleType == 2">手厅订购接口</span>
            <span v-if="scope.row.handleType == 3">h5订购接口</span>
            <span v-if="scope.row.handleType == 4">vac订购接口</span>
          </template>
        </el-table-column>
<!--        <el-table-column align="center" prop="userName" label="合作方名称"></el-table-column>-->
        <el-table-column align="center" prop="onlineTime" label="上线时间"></el-table-column>
        <el-table-column align="center" prop="offlineTime" label="下线时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addClick('edit', scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="addClick('authority', scope.row)">配置产品</el-button>
            <el-button type="text" size="small" @click="addClick('transfer', 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  ref="addFrom" :rules="rules" label-position="left" label-width="110px"  :model="addform" class="order-add-form" size="small">
        <el-form-item label="合作伙伴ID" prop="id">
          <el-input v-model.trim="addform.id" :disabled="addFlag === 2" clearable placeholder="请输入合作伙伴ID"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴名称" prop="name">
          <el-input v-model.trim="addform.name" clearable placeholder="请输入合作伙伴名称"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴秘钥" prop="password">
          <el-input v-model.trim="addform.password" clearable placeholder="请输入合作伙伴秘钥"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴类别" prop="category">
          <el-select v-model="addform.category" clearable placeholder="请选择合作伙伴类别">
            <el-option label="省分线下渠道" value="省分线下渠道"></el-option>
            <el-option label="博源验证码短信发送" value="博源验证码短信发送"></el-option>
            <el-option label="集团渠道" value="集团渠道"></el-option>
            <el-option label="社会代理和其他渠道" value="社会代理和其他渠道"></el-option>
            <el-option label="非订购渠道" value="非订购渠道"></el-option>
            <el-option label="互联网渠道" value="互联网渠道"></el-option>
            <el-option label="省分线上渠道" value="省分线上渠道"></el-option>
            <el-option label="手动恢复渠道" value="手动恢复渠道"></el-option>
            <el-option label="自有线上渠道" value="自有线上渠道"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作伙伴形态" prop="shape">
          <el-input v-model.trim="addform.shape" clearable placeholder="请输入合作伙伴形态"></el-input>
        </el-form-item>
        <el-form-item label="合作伙伴状态">
          <el-switch v-model="addform.status"
                     active-color="#13ce66"
                     active-text="生效"
                     inactive-text="失效"  active-value="0" inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="合作伙伴类型" prop="type">
          <el-select v-model="addform.type" clearable placeholder="请选择合作伙伴类型">
            <el-option label="客户端" value="0"></el-option>
            <el-option label="短信" value="1"></el-option>
            <el-option label="手厅" value="2"></el-option>
            <el-option label="H5" value="3"></el-option>
            <el-option label="营业厅" value="4"></el-option>
            <el-option label="微厅" value="5"></el-option>
            <el-option label="腾讯审核渠道" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口类型" prop="handleType">
          <el-select v-model="addform.handleType" clearable placeholder="请选择接口类型">
            <el-option label="客户端订购接口" :value="0"></el-option>
            <el-option label="短信订购接口" :value="1"></el-option>
            <el-option label="手厅订购接口" :value="2"></el-option>
            <el-option label="h5订购接口" :value="3"></el-option>
            <el-option label="vac订购接口" :value="4"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="合作方名称">-->
<!--          <el-input v-model="addform.partnerName" placeholder="请输入合作方名称"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="上线时间" prop="onlineTime">
          <el-date-picker v-model="addform.onlineTime" :picker-options="pickerOptionsStart" clearable type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择上线时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下线时间" prop="offlineTime">
          <el-date-picker v-model="addform.offlineTime" :picker-options="pickerOptionsEnd" :disabled="addform.onlineTime == null" clearable type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择下线时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="addform-sub">
          <el-button type="primary" @click="SubmitClick">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {get, post} from "@/api/common";

export default {
  name: "index",
  data(){
    return{
      page:1,
      limit:10,
      total:10,
      formInline:{
        id:'', //合作伙伴id
        name:'', //合作伙伴名称
        password:'', //合作伙伴密钥
        category:'', //合作伙伴类别
        status:'', // 合作伙伴状态
        type:'', //合作伙伴类型
        handleType:'',//接口类型
        addTime:[],
        endTime:[],
      },
      dataList:[],
      addTittle:'新增合作伙伴',
      dialogVisible:false,
      addform:{
        id:'', //合作伙伴id
        name:'', //合作伙伴名称
        password:'', //合作伙伴密钥
        category:'', //合作伙伴类别
        status:'0', // 合作伙伴状态
        type:'', //合作伙伴类型
        shape:'', //合作伙伴形态
        handleType:'',//接口类型
        onlineTime:null,//	上线日期
        offlineTime:null,//下线日期
      },
      prevform:{},
      rules:{
        id: [
          { required: true, message: '请输入合作伙伴ID', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入合作伙伴名称', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入合作伙伴秘钥', trigger: 'blur' },
        ],
        category: [
          { required: true, message: '请选择合作伙伴类型', trigger: 'change' }
        ],
        shape: [
          { required: true, message: '请输入合作伙伴形态', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择合作伙伴类型', trigger: 'change' }
        ],
        handleType: [
          { required: true, message: '请选择接口类型', trigger: 'change' }
        ],
        onlineTime: [
          { required: true, message: '请选择上线时间', trigger: 'change' }
        ],
        offlineTime: [
          { required: true, message: '请选择下线时间', trigger: 'change' }
        ],
      },
      addFlag:1,
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.addform.offlineTime;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime() || time.getTime() > Date.now();
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.addform.onlineTime;
          if (beginDateVal) {
            return (time.getTime() < new Date(beginDateVal).getTime()
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
    }
  },
  watch: {
    'addform.onlineTime'() {
      if (this.addform.onlineTime == null) {
        this.addform.offlineTime = null
      }
    }
  },
  created() {
    this.getList()
  },
  methods:{
    onSubmit(){
      this.getList()
    },
    getList(){
      this.loading = true
      let { id,name,password,category,status,type,handleType,addTime,endTime} = this.formInline
      if(!addTime){addTime = []}
      if(!endTime){endTime = []}
      let parms = {
        id,name,password,category,status,type,handleType,
        startOnlineTime:addTime.length ? addTime[0] : null,
        endOnlineTime:addTime.length ? addTime[1] : null,
        startOfflineTime:endTime.length ? endTime[0] : null,
        endOfflineTime:endTime.length ? endTime[1] : null,
        pageSize: this.limit,
        pageNum: this.page,
      }
      get("/manager/channel/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:'', //合作伙伴id
          name:'', //合作伙伴名称
          password:'', //合作伙伴密钥
          category:'', //合作伙伴类别
          status:'0', // 合作伙伴状态
          type:'', //合作伙伴类型
          shape:'', //合作伙伴形态
          handleType:'',//接口类型
          onlineTime:null,//	上线日期
          offlineTime:null,//下线日期
      }
      this.addFlag = 1
      if (type === 'add'){
        this.addTittle = '新增合作伙伴';
        this.dialogVisible = true
        this.addFlag = 1
      }else if (type === 'edit'){
        this.addTittle = '编辑合作伙伴';
        this.eidtChannelData(row)
        this.addFlag = 2
      }else if (type === 'authority'){
        this.$router.push({name:'orderAuthority',query:{id:row.id}})
      }else if (type === 'transfer'){
        this.$router.push({name:'orderTransfer',query:{id:row.id}})
      }
    },
    eidtChannelData(row){
      let { id,name,password,category,status,type,shape,handleType,onlineTime,offlineTime} = row
      this.addform = {
        id,name,password,category,status,type,shape,handleType,onlineTime,offlineTime
      }
      this.prevform = JSON.stringify(this.addform)
      this.dialogVisible = true
    },
    resetClick(){
      this.formInline = {
          id:'', //合作伙伴id
          name:'', //合作伙伴名称
          password:'', //合作伙伴密钥
          category:'', //合作伙伴类别
          status:'', // 合作伙伴状态
          type:'', //合作伙伴类型
          handleType:'',//接口类型
          addTime:[],
          endTime:[],
      }
      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()
    },
    SubmitClick(){
      this.addFlag === 1 ? this.setsaveClick() : this.setUpdateClick()
    },
    //  新增提交审核
    setsaveClick(){
      let { id,name,password,category,status,type,shape,handleType,onlineTime,offlineTime} = this.addform
      let parms = { id,name,password,category,status,type,shape,handleType,onlineTime,offlineTime }
      this.$refs['addFrom'].validate((valid) => {
        if (valid){
            post("/manager/channel/save", parms).then((res) => {
              if (res.code === 10000) {
                this.$message.success(res.message);
                this.dialogVisible = false
                this.getList()
              }
            });
        }else {
          this.$message.warning('请完善信息');
          return false;
        }
      })

    },
    //  修改审核
    setUpdateClick(){
      let { id,name,password,category,status,type,shape,handleType,onlineTime,offlineTime} = this.addform
      let parms = { id,name,password,category,status,type,shape,handleType,onlineTime,offlineTime }
      this.$refs['addFrom'].validate((valid) => {
        if (valid){
          if (JSON.stringify(this.addform) !== this.prevform){
            post("/manager/channel/update", 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;
        }
      })
    },
  }
}
</script>

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