<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="checkbox">
                <div class="checkbox-content-qx">
                  <el-checkbox v-model="checkFx" @change="checkFxBtn">全部</el-checkbox>
                </div>
                <el-checkbox-group v-model="queryParams.fxType" class="keyword_checkbox" @change="checkFx1Btn">
                  <el-checkbox v-for="item in fxlx" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div class="main-item">
            <div class="label">监控维度</div>
            <div class="main-right">
              <div class="checkbox">
                <div class="checkbox-content-qx">
                  <el-checkbox v-model="checkJkwd" @change="checkJkwdBtn">全部</el-checkbox>
                </div>
                <el-checkbox-group v-model="queryParams.jkwdType" class="keyword_checkbox" @change="checkJkwd1Btn">
                  <el-checkbox v-for="item in jkwd" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
                </el-checkbox-group>
              </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.radio" label="1">每天</el-radio>
            <el-radio v-model="queryParams.radio" 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="queryParams.time"
              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.radio" label="2">手机短信</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.phone" placeholder="请输入手机号"></el-input>
          </div>
        </div>
        <div class="search">
          <span class="btn1">保存</span>
          <span class="btn2">重置</span>
        </div>
      </div>

    </div>
</template>

<script>
  export default {
    name: 'MonitorSettings',
    data() {
      return {
        fxlx:[
          {
            value:'1',
            label:'工商风险'
          },
          {
            value:'2',
            label:'司法风险'
          },
        ],
        jkwd:[
          {
            value:'1',
            label:'法院公告'
          },
          {
            value:'2',
            label:'裁判文书'
          },
          {
            value:'3',
            label:'开庭公告'
          },
          {
            value:'3',
            label:'股权冻结'
          },
        ],
        checkFx: true,
        checkJkwd: true,
        queryParams:{
          fxType:[],
          jkwdType:[],
          time:[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
          radio:'1',
          phone:''
        }
      }
    },
    created() {

    },
    methods: {
      checkFxBtn(val) {
        this.queryParams.fxType = [];
        this.checkFx = true;
      },
      checkFx1Btn(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" 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);
      }
      .main-right {
        width: calc(100% - 112px);
        .checkbox{
          display: flex;
          align-items: flex-start;
          .checkbox-content-qx{
            margin-right: 24px;
          }
        }
      }
      ::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>
