<template>
  <div class="noticeConfig-addPage">
    <div class="title-box">
      <p>配置</p>
      <p class="add-button-one-90" @click="backClick">返回</p>
    </div>
    <div class="addPage-big scrollbar-box">
      <div class="max-for-box" v-for="(item,index) in dataList" :key="index">
        <el-form :model="form" ref="form" :rules="rules" label-width="100px" class="form-box">
          <el-form-item label="通知方式：" prop="name" style="margin:40px 0;">
            <el-checkbox-group v-model="checkList" style="margin-top:2px;">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
              <el-checkbox label="复选框 C"></el-checkbox>
              <el-checkbox label="禁用" disabled></el-checkbox>
              <el-checkbox label="选中且禁用" disabled></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="通知内容：" prop="name" style="margin:40px 0;">
            <div class="for-list-box">
              <div class="for-min-box" v-for="(minItem,minIndex) in item.list" :key="minIndex">
                <div>
                  <p>{{minItem.type==1?'文字':(minItem.type==2?'变量':'')}}</p>
                  <p>{{minItem.name}}</p>
                  <p class="el-icon-error" @click="delBL(index,minIndex)"></p>
                </div>
              </div>
              <p class="add-button-p" @click="buttonDialogClick(1,index)">插入</p>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <p class="add-obj-button-p" @click="addButton">+ 新增通知规则</p>
    </div>
    <el-dialog title='新增变量' v-if="dialogOpen" :visible.sync="dialogOpen" width="600px">
      <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="100px">
        <el-form-item label="内容类型：" prop="name">
          <el-radio-group v-model="dialogForm.type1">
            <el-radio :label="1" style="width:160px;">文字</el-radio>
            <el-radio :label="2" style="width:160px;">变量</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="变量类型：" prop="name">
          <el-radio-group v-model="dialogForm.type1">
            <el-radio :label="1" style="width:160px;">一般变量</el-radio>
            <el-radio :label="2" style="width:160px;">比较</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="变量定义：" prop="name">
          <el-select v-model="value" placeholder="请选择" style="width:420px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变量定义：" prop="name">
          <div style="display: flex">
            <el-select v-model="value" class="variable-select-left" placeholder="请选择" style="width:160px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="value" class="variable-select-center" placeholder="请选择" style="width:100px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="value" class="variable-select-right" placeholder="请选择" style="width:160px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div style="display: flex">
          <p style="flex:1;"></p>
          <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;" @click="buttonDialogClick(2)">取消</p>
          <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;" @click="submitForm">确定</p>
          <p style="flex:1;"></p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "addPage",
    data() {
      return {
        checkList:[],
        dataList:[
          {
            type:1,
            list:[{name:'我是名字',type:1},{name:'我是名字',type:2},],
          },
          {
            type:2,
            list:[{name:'我是名字',type:1},{name:'我是名字',type:2},],
          },
          {
            type:2,
            list:[{name:'我是名字',type:1},{name:'我是名字',type:2},],
          },
          {
            type:2,
            list:[{name:'我是名字',type:1},{name:'我是名字',type:2},],
          },
          {
            type:2,
            list:[{name:'我是名字',type:1},{name:'我是名字',type:2},],
          }
        ],
        listIndex:null,
        form:{},
        // 表单校验
        rules: {
          name: [
            { required: true, message: "请输入预案名称", trigger: "blur" },
            { required: true, message: "请输入预案名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //弹窗
        dialogOpen:false,
        dialogForm:{},
        value:'',
        options:[{value:'11',label:'111'},{value:'22',label:'222'},]
      }
    },
    methods: {
      backClick(){
        this.$parent.goPage(1);
      },
      addButton(){
        this.dataList.push({type:1, list:[]});
      },
      //弹窗开关
      buttonDialogClick(type,index){
        if(type == 1){
          this.$set(this,'listIndex',index);
          this.$set(this,'dialogOpen',true);
        }else if(type == 2){
          this.$set(this,'dialogOpen',false);
        }
      },
      submitForm(){
        this.dataList[this.listIndex].list.push({name:'我是名字',type:1});
        this.$set(this,'dialogOpen',false);
      },
      delBL(index,minIndex){
        this.dataList[index].list.splice(minIndex,1)
      },
    }
  }
</script>

<style scoped lang="scss">
  .noticeConfig-addPage {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
      font-weight:500;
    }
    .title-box{
      display: flex;
      color:#0045AF;
      padding-left:20px;
      border-bottom:1px solid #e0e0e0;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        font-size:16px;
        font-weight:500;
      }
      p:nth-child(2){
        margin:20px;
        width:70px;
        line-height:40px;
        font-size:14px;
      }

    }
    .addPage-big{
      flex: 1;
      display: flex !important;
      flex-direction: column;
      .max-for-box:nth-child(1){
        border:none;
      }
      .max-for-box{
        margin:0 80px;
        border-top:1px solid #e0e0e0;
        .for-list-box{
          flex:1;
          .for-min-box{
            display: inline-block;
            font-size:14px;
            font-weight:500;
            border:1px solid #e0e0e0;
            border-radius:6px;
            margin: 0 20px 20px 0;
            div{
              display: flex;
              padding-right:10px;
              p:nth-child(1){
                text-align: center;
                border-right:1px solid #e0e0e0;
                width:40px;
                line-height:40px;
              }
              p:nth-child(2){
                line-height:20px;
                padding:10px 10px;
              }
              p:nth-child(3){
                margin-top:14px;
                cursor: pointer;
                color:#666;
              }
              .el-icon-error:hover{
                color:#FE2B2B;
              }
            }
          }
          .add-button-p{
            border-radius:6px;
            width:100px;
            line-height:40px;
            text-align: center;
            display: inline-block;
            border:1px solid #0045AF;
            color:#0045AF;
            font-size:14px;
            cursor: pointer;
          }
        }
      }
      .add-obj-button-p{
        width:300px;
        line-height:40px;
        margin:40px auto;
        text-align: center;
        font-size:14px;
        color:#0183FA;
        border-radius:4px;
        border:1px dashed #0183FA;
        font-weight:500;
        cursor: pointer;
      }
    }
  }
</style>
<style lang="scss">
  .variable-select-left input{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .variable-select-center input{
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .variable-select-right input{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
</style>
