<template>
  <div class="configRules">
    <a-spin :spinning="spinning">
      <div class="toolbox-automate-rules-create-body">
        <div class="toolbox-automate-rules-create-content_title"><h3>开关配置</h3></div>
        <div class="toolbox-automate-rules-create-content">
          <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <div class="moduler">
              <!-- 应用对象 -->
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">落地页链接预警</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-model-item ref="landingSwitch" prop="landingSwitch">
                    <a-radio-group v-model="form.landingSwitch" @change="landingSwitchChange" :disabled='disabled'>
                      <a-radio-button value="on">开启</a-radio-button>
                      <a-radio-button value="off">关闭</a-radio-button>
                    </a-radio-group>
                  </a-form-model-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">监测链接预警</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-model-item ref="monitoringLinkSwitch" prop="monitoringLinkSwitch">
                    <a-radio-group v-model="form.monitoringLinkSwitch" @change="monitoringLinkSwitchChange" :disabled='disabled'>
                      <a-radio-button value="on">开启</a-radio-button>
                      <a-radio-button value="off">关闭</a-radio-button>
                    </a-radio-group>
                  </a-form-model-item>
                </div>
              </div>
            </div>
          </a-form-model>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost, deleteAction } from '@/api/manage'
import { Switch } from 'ant-design-vue'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import qs from 'qs'
export default {
  components: {
    Treeselect,
  },
  props: {
    disabled: {
      type: Boolean,
      default() {
        return false
      },
    },
  },
  data() {
    return {
      ruleDetail:{},
      url: {
        onOrOffMonitoringLink: '/rule/switch/onOrOffMonitoringLink',
        onOrOffLandingPage: '/rule/switch/onOrOffLandingPage',
      },

      currentRuleId: '',

      spinning: false,

      form: {
        landingSwitch: 'off',
        monitoringLinkSwitch: 'off',
      },
      rules: {
        templateName: [
          { required: true, message: '请填写规则的具体名称', trigger: 'blur' },
          { min: 2, message: '长度不得小于2', trigger: 'blur' },
        ],
      },
    }
  },
  watch: {},
  methods: {
    landingSwitchChange(e) {
      console.log(e.target.value)
      postAction(
        this.url.onOrOffLandingPage,
        qs.stringify({
          accountId: this.ruleDetail.accountId,
          switchType: e.target.value,
        })
      ).then((res) => {
        console.log(res)

        this.$message(res.message)
      })
    },
    monitoringLinkSwitchChange(e) {
      console.log(e.target.value)
      postAction(
        this.url.onOrOffMonitoringLink,
        qs.stringify({
          accountId: this.ruleDetail.accountId,
          switchType: e.target.value,
        })
      ).then((res) => {
        console.log(res)

        this.$message(res.message)
      })
    },

    // form-modal 自带方法
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log('submit!', valid)
        } else {
          s
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },

    displayRender({ labels }) {
      return labels[labels.length - 1]
    },

    saveHandler() {
      this.$router.replace('/earlyWarningRules/useRuleList')
      this.$bus.$emit('remove', '/earlyWarningRules/ruleModule')
    },

    // goBack() {
    //     this.$router.push('/earlyWarningRules/index')
    //     this.$bus.$emit('remove', '/earlyWarningRules/configRules')

    // },

    // huixianzhi
    getTempletDetail() {
      if (this.$route.query.id) {
        this.spinning = true
        getAction(this.url.queryDetailById, {
          id: this.$route.query.id,
        }).then((res) => {
          console.log(res)
          if (res.success) {
            this.spinning = false

            res.result.ruleList.map((item, index) => {
              item.ruleDetail.forEach((ele, ind) => {
                ele.baseIndex = [ele.ruleDimension, ele.indicatorCode]
                getAction(this.url.ruleCondition, {
                  dataType: ele.dataType,
                }).then((result) => {
                  console.log(result)
                  if (result.success) {
                    ele.conditionList = result.result
                    console.log(this.form)
                    this.form = {}
                    this.form = res.result
                  }
                })
              })
            })

            this.form = res.result
          }
        })
      } else {
        this.spinning = false
      }
    },
  },

  filters: {},

  mounted() {
    // console.log(this.$route.query);
     var data = JSON.parse(localStorage.getItem('getRuleDetail'))
     this.ruleDetail=data;
     this.spinning=true;
     postAction('/rule/switch/echoSwitchStatus',qs.stringify({
       accountId:this.ruleDetail.accountId
     })).then(res=>{
       console.log(res);
       this.spinning=false;
       if(res.success){
         
         this.form.landingSwitch=res.result.landing_page?'off':'on';
         this.form.monitoringLinkSwitch=res.result.monitoring_link?'off':'on';
       }
     })
  },
}
</script>

<style lang="scss" scoped>
.configRules {
  .add-rule:hover {
    color: #2F88FF;
    border-color: #2F88FF;
  }
  .add-rule {
    cursor: pointer;

    height: 40px;
    border-radius: 2px;
    border: 1px dashed #dadfe3;
    font-size: 12px;
    display: flex;
    flex-flow: row column;
    justify-content: center;
    align-items: center;
    color: #666;
    margin-top: 16px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }
  .toolbox-automate-rules-create-body {
    margin: 16px 12px 12px;
    padding: 32px 32px 16px;
    background-color: #fff;
    border-radius: 4px;
  }
  .toolbox-automate-rules-create-content_title {
    background-color: #fff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 28px;
    h3 {
      font-size: 22px;
      margin: 0;
      font-weight: 400;
      height: 30px;
      line-height: 30px;
    }
  }
  .toolbox-automate-rules-create-content {
    padding-left: 28px;
  }
  .moduler {
    .opt {
      text-align: right;
    }
    width: 100%;
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    // border-radius: 4px;
    // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    .moduler-title {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-bottom: 20px;
    }
    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
    }
    .row-item:last-of-type {
      margin-bottom: 0;
    }
    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 9px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 10px;
      width: 120px;

      .text-item {
        font-size: 14px;
        width: 100px;
      }
    }
    .row-item .required-item::after {
      content: '*';
      // width: 4px;
      // height: 4px;
      // border-radius: 2px;
      // background: #f45858;
      color: #f5222d;
      font-size: 14px;
      position: absolute;
      left: -40px;
      top: -1px;
      font-family: SimSun, sans-serif;

      // transform: translateY(-50%);
    }
    .row-item .input-item {
      min-width: 480px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
    }
    .adName {
      display: flex;
      .nameList {
        width: 90%;
      }
      .item {
        display: inline-block;
        width: 30%;
        margin-left: 15px;
        margin-bottom: 10px;
      }
    }
  }

  .toolbox-automate-rules-create-content_rules-and-condition_rules {
    margin-bottom: 24px;
  }
  .toolbox-automate-rules-create-content_rules-and-condition_rules,
  .toolbox-automate-rules-create-content_rules-and-condition_condition {
    width: 1138px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dadfe3;
  }
  .toolbox-automate-rules-create-content_rules-and-condition_rules,
  .toolbox-automate-rules-create-content_rules-and-condition_condition {
    .title {
      font-size: 14px;
      font-weight: 600;
      color: #333;

      border-bottom: 1px solid #E4E9ED;
      padding-left: 24px;
      padding: 12px;
      // display: flex;
      // justify-content: flex-start;
      align-items: center;
      .condition-title {
        padding-right: 17px;
      }
    }
    .title2 {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      height: 56px;
      border-bottom: 1px solid #E4E9ED;
      padding-left: 24px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .condition-title {
        padding-right: 17px;
      }
    }
    .content {
      padding: 15px;

      .add-rule {
        cursor: pointer;

        height: 40px;
        border-radius: 2px;
        border: 1px dashed #dadfe3;
        font-size: 12px;
        display: flex;
        flex-flow: row column;
        justify-content: center;
        align-items: center;
        color: #666;
        margin-top: 16px;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
      }
      .add-rule:hover {
        color: #2F88FF;
        border-color: #2F88FF;
      }
      .rules-list-item {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        position: relative;
        .rules-list-item-delete {
          position: absolute;
          right: 24px;
          height: 30px;
          padding-left: 24px;
          border-left: 1px solid #DADFE3;
          cursor: pointer;
        }
        .rules-list-item-subject {
          width: 120px;
          margin-right: 16px;
          display: flex;
          .ruleName {
            display: block;
            width: 100%;
            height: 32px;
            line-height: 32px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
          }
        }
      }
      .rules—list_item:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  .selectedExist {
    width: 500px;
    padding-top: 5px;
    .inventory-tags-lists-header {
      background-color: #F8F9FA;
      border: 1px solid #E4E9ED;
      height: 36px;
      line-height: 33px;
      border-radius: 4px 4px 0 0;
      font-weight: bold;
      display: flex;
    }

    .inventory-tags-lists-container {
      border: 1px solid #E4E9ED;
      margin-top: -1px;
      height: 100%;
      padding: 4px 0px;
      border-radius: 0 0 4px 4px;
      height: 300px;
      overflow: auto;
    }

    .inventory-tags-lists-item {
      width: 100%;
      height: 37px;
      line-height: 37px;
      padding-left: 12px;
      padding-right: 12px;
      display: flex;
      font-size: 14px;
      color: #333;
    }

    .input {
      margin-bottom: 16px;
    }
    .campaign-have-list {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333;
      border: 1px solid #DADFE3;
      border-radius: 4px;
      margin-bottom: 16px;
      height: 388px;
      .campaign-have-header {
        height: 38px;
        width: 100%;
        padding-left: 13px;
        line-height: 38px;
        background: #f8f9fa;
        border-radius: 4px 4px 0px 0px;
        border-bottom: 1px solid #DADFE3;
      }
      .campaign-have-list ul {
        width: 100%;
        height: 350px;
        padding-top: 6px;
      }
      li {
        padding: 6px 10px;
        cursor: pointer;
      }
      li:hover {
        background: #EDF1F5;
      }
      .ad-d-flex-between {
        justify-content: space-between !important;
      }

      .ad-d-flex,
      .ad-btn {
        display: flex;
        align-items: center;
      }
      .byted-loading-v {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 996;
        background-color: hsla(0, 0%, 96%, 0.9);
      }
      .info {
        width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .landing-type {
        color: #999;
        font-size: 12px;
        white-space: nowrap;
      }
    }
    .noAccountID {
      font-size: 14px;
      text-align: center;
      color: #999;
      line-height: 388px;
    }
    .fenye {
      height: 60px;
      padding-top: 12px;
      text-align: right;
    }
  }
}
</style>
<style lang="scss">
.configRules {
  .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    position: relative;
    padding: 12px 16px;
    padding-left: 40px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    height: 46px;
    transition: all 0.3s;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .content {
    .ant-form-item {
      margin-bottom: 0;
      width: 100%;
    }
  }
  .ant-radio-button-wrapper {
    min-width: 70px;
    text-align: center;
  }
  .ant-checkbox-wrapper,
  .ant-checkbox-group-item {
    display: block;
    padding: 5px 15px;
  }

  .ant-checkbox-wrapper:first-child {
    padding: 0 15px 5px;
  }
}
</style>