<template>
  <!--监控维度设置-->
    <div class="app-container MonitorSettings">
      <div class="content">
        <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 @change="handleSelect" multiple placeholder="请选择">
                  <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-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 @change="handleSelect" multiple placeholder="请选择">
                  <el-option v-for="(i,index) in selectList1" :key="index" :label="i.dimensionName" :value="i.dimensionName">
                    <el-checkbox style="width: 100%;" :label="i.dimensionName" @change="changeGsfx(i)">{{i.dimensionName}}</el-checkbox>
                  </el-option>
                </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-picker
              is-range
              class="timePicker"
              v-model="time"
              :picker-options="{ step: '01:00' }"
              @change="changeTime"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
          </div>
        </div>
        <div class="m-title">监控接收方式</div>
        <div class="m-main">
          <div class="main-item">
            <div class="label">接收方式</div>
            <!--<el-radio v-model="queryParams.radio" label="1">全部</el-radio>-->
            <el-radio v-model="queryParams.receiveMode" label="0">手机短信</el-radio>
            <!--<el-radio v-model="queryParams.radio" label="3">PC</el-radio>-->
          </div>
          <div class="main-item" style="line-height: 32px;">
            <div class="label">手机号码</div>
            <el-input class="phone" v-model="queryParams.phones" placeholder="请输入手机号"></el-input>
          </div>
        </div>
        <div class="search">
          <span class="btn1" @click="handleAdd">保存</span>
          <span class="btn2">重置</span>
        </div>
      </div>

    </div>
</template>

<script>
  import { rulesSelect,insertOrUpdate,rulesDetail } from '@/api/monitoring/monitoring'
  export default {
    name: 'MonitorSettings',
    data() {
      return {
        selectList:[],
        selectList1:[],
        sffx:[],
        gsfx:[],
        checkFx: true,
        checkJkwd: true,
        queryParams:{
          fxType:[],
          jkwdType:[],
          pushFrequency:'0',
          receiveMode:'0',
          phones:''
        },
        time:''
      }
    },
    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
          }
          if(res.data[i].dimensionName === '工商风险'){
            this.selectList1=res.data[i].children
          }
        }
      })
      rulesDetail({}).then(res => {
        console.log(res)
      })
    },
    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) {
        // console.log(val)
      },
      handleAdd(){
        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.time.length > 0){
          params.timePeriodStart=this.time[0]
          params.timePeriodEnd=this.time[1]
        }
        console.log(params)
        insertOrUpdate(params).then(res => {
          console.log(res)
        })
      },
      changeTime(val){
        console.log(val)
      },
      checkFx1Btn(val){
        console.log(val)
        if (val.length > 0) {
          this.checkFx = false;
        } else if (val.length == 0) {
          this.checkFx = true;
        }
      },
      checkJkwdBtn(val) {
        this.queryParams.jkwdType = [];
        this.checkJkwd = true;
      },
      checkJkwd1Btn(val){
        console.log(val)
        if (val.length > 0) {
          this.checkJkwd = false;
        } else if (val.length == 0) {
          this.checkJkwd = true;
        }
      },
    }
  }
</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 .timePicker{
        width: 228px;
        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>
