<template>
  <div class="container">
    <!-- :prop="`formDynamic[${index}].alarmType`" -->
    <!-- <Button type="primary" @click="showModal">Display dialog box</Button>
    <Modal
      v-model="modal1"
      :title="title"
      width="40"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal"
    >
      <Form ref="formDynamic" :model="formCustom" :label-width="0">
        <Row
          v-for="(item, index) in formCustom.formDynamic"
          :key="index"
          style="position: relative"
        >
          <Col span="2">
            {{ item.name + (index + 1) }}
          </Col>
          <Col span="16">
            <Row v-for="(val, i) in item.formItems" :key="i">
              <Col span="4">
                <FormItem
                  :prop="'formDynamic.' + index + '.formItems.' + i + '.logic'"
                  :rules="{
                    required: true,
                    message: '请选择告警等级',
                    trigger: 'change',
                  }"
                  style="display:flex"
                >
                <span>{{val.sublogic}}</span>
                  <Select
                    v-model="val.logic"
                    style="width: 75%"
                    placeholder="告警等级"
                    :disabled="val.disabled"
                  >
                    <Option
                      v-for="subItem in alarmList"
                      :value="subItem.value"
                      :key="subItem.value"
                      >{{ subItem.label }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="4">
                <FormItem
                  :prop="'formDynamic.' + index + '.formItems.' + i + '.baohan'"
                  :rules="{
                    required: true,
                    message: '请选择包含关系',
                    trigger: 'change',
                  }"
                >
                  <Select
                    v-model="val.baohan"
                    style="width: 100%"
                    placeholder="告警等级"
                    :disabled="val.disabled"
                  >
                    <Option
                      v-for="item in alarmList"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Button
                @click="handleRemove(index)"
                v-if="i != 0"
                style="position: absolute; right: 0px"
                >删除</Button
              >
            </Row>
          </Col>
          <Col span="2">
            {{ item.text }}
          </Col>
          <Col span="2">
            <FormItem
              :prop="'formDynamic.'+index+'.alarmType'"
              :rules="{
                required: true,
                message: '请选择告警等级',
                trigger: 'change',
              }"
            >
              <Select
                v-model="item.alarmType"
                style="width: 100%"
                placeholder="告警等级"
                :disabled="item.disabled"
              >
                <Option
                  v-for="firstitem in alarmList"
                  :value="firstitem.value"
                  :key="firstitem.value"
                  >{{ firstitem.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="2">
            <Button
              type="dashed"
              @click="handleAdd('formDynamic')"
              icon="md-add"
              v-if="
                index == formCustom.formDynamic.length - 1 && title == '新增'
              "
              >新增</Button
            >
            <Button
              type="dashed"
              @click="handleEdit('formDynamic')"
              icon="md-add"
              v-if="title == '编辑' && showEdit"
              >编辑</Button
            >
            <Button
              type="dashed"
              @click="handleSave('formDynamic')"
              icon="md-add"
              v-if="title == '编辑' && !showEdit"
              >保存</Button
            >
          </Col>
        </Row>
        <FormItem class="sub-add">
          <span @click="handleAddSub('formDynamic')"
            >新增一条子策略 子策略与现有子策略间为</span
          >
          <Select
            v-model="formCustom.logical"
            placeholder="逻辑判断"
            style="width: 200px"
          >
            <Option
              v-for="item in cityList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            > </Select
          >关系
        </FormItem>
      </Form>
    </Modal> -->
  </div>
</template>
<script>
export default {
  name: "EquipmentMonitor",
  components: {},
  data() {
    return {
      modal1: false,
      cityList: [
        {
          value: "与",
          label: "与",
        },
        {
          value: "或",
          label: "或",
        },
        {
          value: "非",
          label: "非",
        },
      ],
      alarmList: [
        {
          value: "一级",
          label: "一级",
        },
        {
          value: "二级",
          label: "二级",
        },
        {
          value: "三级",
          label: "三级",
        },
      ],
      formCustom: {
        formDynamic: [
          {
            name: "策略",
            formItems: [
              {
                logic: "",
                baohan: "",
                disabled: false,
                sublogic: ''
              },
            ],
            text: "判定为",
            alarmType: "",
            disabled: false,
          },
        ],
        logical : ''
      },
      title: "新增",
      showEdit: true,
    };
  },
  mounted() {},
  methods: {
    handleAdd(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formCustom.formDynamic.push({
            name: "策略",
            formItems: [
              {
                logic: "",
                baohan: "",
                disabled: false,
                sublogic: ''
              },
            ],
            text: "判定为",
            alarmType: "",
          });
        }
      });
    },
    handleAddSub(name) {
      console.log(this.formCustom.logical)
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formCustom.formDynamic[
            this.formCustom.formDynamic.length - 1
          ].formItems.push({
            logic: "",
            baohan: "",
            disabled: false,
            sublogic: this.formCustom.logical
            // sublogic: this.formCustom.formDynamic[this.formCustom.formDynamic.length - 1]
          });
          this.formCustom.logical = ''
        }
      });
    },
    handleRemove(index) {
      this.formCustom.formDynamic[
        this.formCustom.formDynamic.length - 1
      ].formItems.splice(index, 1)
    },
    showModal() {
      this.modal1 = true
      this.title = "新增"
      // this.title = "编辑"
      // this.formCustom.formDynamic = this.getStrategy(
      //   this.formCustom.formDynamic
      // )
    },
    getStrategy(arr) {
      return arr.map((v, index) => {
        v.disabled = !v.disabled
        if (v.formItems) v.formItems = this.getStrategy(v.formItems);
        return v;
      });
    },
    handleEdit() {
      this.formCustom.formDynamic = this.getStrategy(
        this.formCustom.formDynamic
      );
      this.showEdit = false;
    },
    handleSave() {
      // this.formCustom.formDynamic = this.getStrategy(
      //   this.formCustom.formDynamic
      // );
      // this.showEdit = true
    },
  },
};
</script>
<style scoped lang="stylus">
.sub-add {
  display: flex;
  align-items: center;
}

>>> .ivu-col {
  position: initial;
}
</style>
