<template>
  <!--监控维度设置-->
    <div class="app-container MonitorSettings">
      <div class="content" style="height: 100%;">
        <div class="m-title">监控维度设置</div>
        <div class="m-main">
          <div class="main-item">
            <div class="label">风险类型</div>
            <div class="main-right">
              <div class="select-popper">
                <span :class="{ color_text: sffx.length }">司法风险{{sffx.length > 0 ? sffx.length:''}}<i class="el-icon-caret-bottom"></i></span>
                <el-select ref="tenderTypeSelect" v-model="sffx" class="select-multiple" collapse-tags multiple @change="handleSelect" placeholder="请选择">
                  <el-checkbox-group v-model="sffx">
                    <el-option v-for="(i,index) in selectList" :key="index" :label="i.dimensionName" :value="i.dimensionName">
                      <el-checkbox style="width: 100%;" :label="i.dimensionName" @change="changeSffx(i)">{{i.dimensionName}}</el-checkbox>
                    </el-option>
                  </el-checkbox-group>
                </el-select>
              </div>
              <div class="select-popper">
                <span :class="{ color_text: gsfx.length }">工商风险{{gsfx.length > 0 ? gsfx.length:''}}<i class="el-icon-caret-bottom"></i></span>
                <el-select ref="tenderTypeSelect" v-model="gsfx" class="select-multiple" collapse-tags multiple  placeholder="请选择">
                  <el-checkbox-group v-model="gsfx">
                    <el-option v-for="(i,index) in selectList1" :key="index" :label="i.dimensionName" @change="handleSelect1" :value="i.dimensionName">
                      <el-checkbox style="width: 100%;" :label="i.dimensionName" @change="changeGsfx(i)">{{i.dimensionName}}</el-checkbox>
                    </el-option>
                  </el-checkbox-group>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="m-title">监控推送时间设置</div>
        <div class="m-main">
          <div class="main-item">
            <div class="label">推送频率</div>
            <!--<el-radio v-model="queryParams.pushFrequency" label="0">每小时</el-radio>-->
            <el-radio v-model="queryParams.pushFrequency" label="1">每天</el-radio>
            <el-radio v-model="queryParams.pushFrequency" label="2">工作日（排除节假日）</el-radio>
          </div>
          <div class="main-item" style="line-height: 32px;">
            <div class="label">推送时段</div>
            <el-time-select
              placeholder="起始时间"
              v-model="startTime"
              @change="startChangeTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '22:00'
              }">
            </el-time-select>
            <span style="margin:0 8px;">至</span>
            <el-time-select
              placeholder="结束时间"
              v-model="endTime"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00',
                minTime: startTime
              }">
            </el-time-select>
          </div>
        </div>
        <div class="m-title">监控接收方式</div>
        <div class="m-main">
          <div class="main-item">
            <div class="label">接收方式</div>
            <el-radio-group v-model="queryParams.receiveMode">
              <!--<el-radio v-model="queryParams.radio" label="1">全部</el-radio>-->
              <el-radio label="0" @click.native.prevent="clickRadio()">手机短信</el-radio>
              <!--<el-radio v-model="queryParams.radio" label="3">PC</el-radio>-->
            </el-radio-group>
          </div>
          <div class="main-item" style="line-height: 32px;">
            <div class="label">手机号码</div>
            <el-input class="phone" v-model="queryParams.phones" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" onkeyup="value = value.replace(/[^\d]/g,'');"></el-input>
          </div>
        </div>
        <div class="search">
          <span class="btn1" @click="handleAdd">保存</span>
          <span class="btn2" @click="handleResetting">重置</span>
        </div>
      </div>

    </div>
</template>

<script>
  import { rulesSelect,insertOrUpdate,rulesDetail } from '@/api/monitoring/monitoring'
  export default {
    name: 'MonitorSettings',
    data() {
      return {
        selectList:[],
        selectList1:[],
        arr:[],
        sffx:[],
        gsfx:[],
        checkFx: true,
        checkJkwd: true,
        queryParams:{
          pushFrequency:'1',
          receiveMode:'0',
          phones:''
        },
        startTime: '',
        endTime: '',
        detail:{}
      }
    },
    created() {
      rulesSelect().then(res => {
        this.selectList=res.data;
        for(let i in res.data){
          if(res.data[i].dimensionName === '司法风险'){
            this.selectList=res.data[i].children;
            for(let i=0; i<this.selectList.length; i++){
              this.arr.push(this.selectList[i].dimensionName)
            }
          }
          if(res.data[i].dimensionName === '工商风险'){
            this.selectList1=res.data[i].children
          }
        }
        rulesDetail({}).then(res => {
          console.log(res)
          if(res.data){

            this.queryParams={
              pushFrequency:res.data.pushFrequency.toString(),
              receiveMode:res.data.receiveMode.toString(),
              phones:res.data.phones
            }
            this.startTime =res.data.timePeriodStart
            this.endTime = res.data.timePeriodEnd
            if(res.data.dimension){
              let dimension=res.data.dimension.split(',');
              for(let item in dimension){
                if (this.arr.indexOf(dimension[item]) == -1) {
                  console.log(dimension[item])
                  this.gsfx.push(dimension[item])
                } else {
                  this.sffx.push(dimension[item])
                }
              }
            }
          }
        })
      })

    },
    methods: {
      changeSffx(val) {
        if (this.sffx.indexOf(val.dimensionName) == -1) {
          this.sffx.push(val.dimensionName)
        } else {
          this.sffx.splice(this.sffx.indexOf(val.dimensionName), 1)
        }
      },
      changeGsfx(val) {
        if (this.gsfx.indexOf(val.dimensionName) == -1) {
          this.gsfx.push(val.dimensionName)
        } else {
          this.gsfx.splice(this.gsfx.indexOf(val.dimensionName), 1)
        }
      },
      handleSelect(val) {

      },
      handleSelect1(val) {

      },
      // 开始时间改变
      startChangeTime(value){
        this.endTime = ""
      },
      handleAdd(){
        if(this.queryParams.receiveMode === '0' && !this.queryParams.phones){
          return this.$message.warning('手机号码不能为空');
        }
        let params={
          pushFrequency:Number(this.queryParams.pushFrequency),
          riskType:'',
          dimension:'',
          receiveMode:Number(this.queryParams.receiveMode),
          phones:this.queryParams.phones,
        }
        if(this.sffx.length > 0 && this.gsfx.length > 0){
          params.riskType='司法风险,工商风险'
          params.dimension=this.sffx.join()+','+this.gsfx.join()
        }
        if(this.sffx.length > 0 && this.gsfx.length === 0){
          params.riskType='司法风险'
          params.dimension=this.sffx.join()
        }
        if(this.sffx.length === 0 && this.gsfx.length > 0){
          params.riskType='工商风险'
          params.dimension=this.gsfx.join()
        }
        if(this.startTime){
          params.timePeriodStart=this.startTime
        }
        if(this.endTime){
          params.timePeriodEnd=this.endTime
        }
        insertOrUpdate(params).then(res => {
          this.$message.success(res.msg);
        })
      },
      handleResetting(){
        this.sffx=[];
        this.gsfx=[];
        this.startTime =''
        this.endTime = ''
        this.queryParams={
          pushFrequency:'1',
          receiveMode:'0',
          phones:''
        }
      },
      changeTime(val){
        console.log(val)
      },
      clickRadio(){
        this.queryParams.receiveMode = this.queryParams.receiveMode === '0' ? '1' : '0'
      },
    }
  }
</script>

<style lang="scss">
  .el-popper[x-placement^="bottom"] {
    margin-top: 5px !important;
  }
  .el-select-dropdown__item.selected,
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
    color: #3181fa;
    font-size: 0;
  }
</style>
<style lang="scss" scoped>
  .MonitorSettings{
    .content{
      background: #ffffff;
      padding: 16px;
    }
    .m-title{
      border-left: 2px solid rgba(35,35,35,0.8);;
      padding-left: 8px;
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      font-weight: 700;
      color: #232323;
      margin-bottom: 16px;
    }
    .m-main{
      border-bottom: 1px solid #EEEEEE;
      margin-bottom: 16px;
    }
    .main-item {
      margin-bottom: 16px;
      display: -webkit-box;
      align-items: flex-start;
      .label {
        width: 88px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(35, 35, 35, 0.8);
      }
      .color_text {
        color: #0081ff;
      }
      .main-right {
        width: calc(100% - 112px);
        .select-popper {
          text-align: center;
          display: inline-block;
          position: relative;
          color: #333333;
          font-size: 14px;
          cursor: pointer;
          margin: 0px 12px;
          margin-bottom: 16px;
        }

        .select-popper .select-popper-img {
          width: 24px;
          height: 12px;
          position: absolute;
          top: -10px;
          right: 2px;
        }
        .select-multiple {
          position: absolute;
          left: 0;
          top: -6px;
          opacity: 0;
          line-height: 22px;
          .el-input {
            width: 100%;
            line-height: 22px;
            .el-input__inner {
              width: 100%;
              height: 22px !important;
            }
          }
          .el-tag__close.el-icon-close {
            display: none;
          }
        }
      }
      ::v-deep .el-date-editor.el-input{
        width: 160px;
        height: 32px;
        .el-input__inner{
          height: 32px;
        }
        .el-range__icon{
          line-height: 27px;
        }
        .el-range__close-icon{
          line-height: 27px;
        }
      }
      ::v-deep .phone{
        width: 228px;
        height: 32px;
        border-radius: 2px 2px 2px 2px;
      }
    }
    .search{
      margin: 24px 0 0 88px;
      span{
        width: 60px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px 4px 4px 4px;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        font-size: 14px;
      }
      .btn1{
        background: #0081FF;
        border: 1px solid #0081FF;
        color: #FFFFFF;
        margin-right: 12px;
      }
      .btn2{
        border: 1px solid #DCDFE6;
        background: #ffffff;
        color: rgba(35,35,35,0.8);
      }
    }
  }
</style>
