<template>
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item
          label="模板名称"
          prop="templateName"
          :rules="[
            { required: true, message: '模版名称不能为空', trigger: 'blur' },
          ]"
        >
          <el-input style="width: 95%" v-model="form.templateName" placeholder="请输入模板名称" />
          <i :class="{ 'arrowRight': !all, 'arrowDown': all}" class="el-icon-arrow-right operate" @click="expandAll(form.inspectItem.length)"></i>
        </el-form-item>

        <div v-for="(item,itemIndex) in form.inspectItem" class="item">
          <el-form-item
            :label="'检查项' + (itemIndex + 1)"
            :prop="'inspectItem.' + itemIndex + '.itemName'"
            :key="'item'+itemIndex"
            :rules="[
              { required: true, message: '检查项不能为空', trigger: 'blur' },
            ]"
          >
            <el-input size="mini" style="width: 92%" v-model="item.itemName" placeholder="请输入检查项名称" />
            <i class="el-icon-remove-outline remove operate" @click="removeItem(form.inspectItem,itemIndex)"/>
            <i class="el-icon-circle-plus-outline add operate" @click="addItem(form.inspectItem,1)" v-if="itemIndex == form.inspectItem.length -1"/>
            <i class="el-icon-arrow-right arrowDown operate" :ref="'item' + itemIndex" @click="explanItem(itemIndex)"></i>
          </el-form-item>

          <div style="padding-right: 20px" :ref="'content' + itemIndex">
            <el-form-item
              v-for="(content,index) in item.content"
              :label="index > 0 ? '' :'检查内容'"
              :prop="'inspectItem.' + itemIndex + '.content.'+ index"
              :key="'content' + index"
              :rules="[
                { required: true, message: '检查内容不能为空', trigger: 'blur' },
              ]"
            >
              <el-input type="textarea" size="mini" v-model="item.content[index]" placeholder="请输入检查内容" style="width: 87%"/>
              <i class="el-icon-remove-outline remove operate" @click="removeItem(item.content,index)"/>
              <i class="el-icon-circle-plus-outline add operate" @click="addItem(item.content,2)" v-if="index == item.content.length -1"/>
            </el-form-item>
          </div>
        </div>

      </el-form>
    </div>
</template>

<script>
  export default {
    name: "edit-template",
    data(){
        return{
          form: {
            templateName: "",
            inspectItem:[
              {
                itemName: "",
                content:[""]
              }
            ]
          },
          all: true,
        }
    },
    methods:{
      addItem(data,type){
        if(1 == type){
          data.push({
            itemName: "",
            content:[""]
          });
        }else{
          data.push("")
        }
      },
      removeItem(data,index){
        data.splice(index,1);
      },
      expandAll(num){
        if(this.all){
          this.all = false;
          for(var i = 0; i<num; i++){
            this.$refs["item" + i][0].classList.remove('arrowDown');
            this.$refs["item" + i][0].classList.add('arrowRight');
            this.$refs["content" + i][0].style.display = 'none';
          }
        }else{
          this.all = true;
          for(var i = 0; i<num; i++){
            this.$refs["item" + i][0].classList.remove('arrowRight');
            this.$refs["item" + i][0].classList.add('arrowDown');
            this.$refs["content" + i][0].style.display = 'block';
          }
        }

      },
      explanItem(index){
        if("none" != this.$refs["content" + index][0].style.display){
          this.$refs["item" + index][0].classList.remove('arrowDown');
          this.$refs["item" + index][0].classList.add('arrowRight');
          this.$refs["content" + index][0].style.display = 'none';
        }else {
          this.$refs["item" + index][0].classList.remove('arrowRight');
          this.$refs["item" + index][0].classList.add('arrowDown');
          this.$refs["content" + index][0].style.display = 'block';
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-form-item{
    margin-bottom: 17px !important;
  }

  .operate{
    margin-left: 3px;
  }

  .item{
    padding-right: 20px
  }

  .add{
    color: blue;
  }

  .remove{
    color: red;
  }

  .arrowRight{
    cursor: pointer;
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }
  .arrowDown{
    cursor: pointer;
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(90deg);
  }

</style>
