<template>
  <div class="for-form-max-box scrollbar-box iotClassification-modelPage">
    <div class="for-form-box" v-for="(item,index) in modelData" :key="index">
      <div class="item-content-box">
        <p class="item-title-p" :class="item.isSelect || item.required ? 'item-title-check' : ''">{{item.label}}</p>
        <p class="item-examples-title-p">{{item.typeName}}:</p>
        <div class="item-examples-box">
          <!--文本框-->
          <el-input class="item-examples-demo" v-if="item.type == 'text'" placeholder="请输入"
                    maxLength='10' v-model="item.demoValue">
          </el-input>
          <!--文本域-->
          <el-input class="item-examples-demo" v-if="item.type == 'textarea'" placeholder="请输入"
                    maxLength='50' type="textarea" resize="none" v-model="item.demoValue" show-word-limit :autosize="{ minRows: 2, maxRows: 4}">
          </el-input>
          <!--密码框-->
          <el-input class="item-examples-demo" v-if="item.type == 'password'" placeholder="请输入"
                    maxLength='10' v-model="item.demoValue" show-password>
          </el-input>
          <!--计数器-->
          <el-input-number class="item-examples-demo" v-if="item.type == 'number'" v-model="item.demoValue"
                           controls-position="right" :min="1" :max="10">
          </el-input-number>
          <!--单选下拉框-->
          <el-select class="item-examples-demo" v-if="item.type == 'select'"
                     v-model="item.demoValue" placeholder="请选择">
            <el-option key="1" label="单选下拉框示例" value="1"></el-option>
          </el-select>
          <!--多选下拉框-->
          <el-select class="item-examples-demo" v-if="item.type == 'selectMultiple'"
                     v-model="item.demoValue" placeholder="请选择"
                     multiple collapse-tags>
            <el-option key="1" label="单选下拉框示例-1" value="1"></el-option>
            <el-option key="2" label="单选下拉框示例-2" value="2"></el-option>
          </el-select>
          <!--单选框-->
          <el-radio-group v-model="item.demoValue" class="item-examples-demo" style="margin-top:12px;" v-if="item.type == 'radio'">
            <el-radio :label="3">单选框示例-1</el-radio>
            <el-radio :label="6">单选框示例-2</el-radio>
          </el-radio-group>
          <!--复选框-->
          <el-checkbox-group v-model="item.demoValue" class="item-examples-demo" style="margin-top:12px;" v-if="item.type == 'checkbox'">
            <el-checkbox :label="1">复选框示例-1</el-checkbox>
            <el-checkbox :label="2">复选框示例-2</el-checkbox>
          </el-checkbox-group>
          <!--滑块-->
          <el-slider class="item-examples-demo" v-if="item.type == 'slider'" v-model="item.demoValue"></el-slider>
          <!--时间选择器-->
          <el-time-select class="item-examples-demo" v-if="item.type == 'timePicker'"
                          v-model="item.demoValue"
                          placeholder="选择时间">
          </el-time-select>
          <!--时间范围选择器-->
          <el-time-picker class="item-examples-demo" v-if="item.type == 'timePickerRange'"
                          is-range
                          v-model="item.demoValue"
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          placeholder="选择时间范围">
          </el-time-picker>
          <!--日期选择器-->
          <el-date-picker
            class="item-examples-demo" v-if="item.type == 'datePicker'"
            v-model="item.demoValue"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <!--日期范围选择器-->
          <el-date-picker
            class="item-examples-demo" v-if="item.type == 'datePickerRange'"
            v-model="item.demoValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <!--颜色选择器-->
          <el-color-picker
            class="item-examples-demo" v-if="item.type == 'colorPicker'"
            v-model="item.demoValue">
          </el-color-picker>
        </div>
        <div class="item-radio-max-box">
          <div @click="checkItem(item,index,'isSelect')">
            <p :class="item.isSelect?'check-p-one':''"
               class="el-icon-check"></p>
            <p :class="item.isSelect?'check-p-two':''">选择</p>
          </div>
          <div @click="checkItem(item,index,'required')">
            <p :class="item.required?'check-p-one':''"
               class="el-icon-check"></p>
            <p :class="item.required?'check-p-two':''">必填项</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { iotTypeTypeModelAndAttr,iotTypeSaveTypeModel } from "@/api/iotDevice/index";
  export default {
    name: 'modelPage',
    data(){
      return{
        classOption:[
          {label:'文本框',value:'text'},
          {label:'文本域',value:'textarea'},
          {label:'密码框',value:'password'},
          {label:'计数器',value:'number'},
          {label:'单选下拉框',value:'select'},
          {label:'多选下拉框',value:'selectMultiple'},
          {label:'单选框',value:'radio'},
          {label:'复选框',value:'checkbox'},
          {label:'滑块',value:'slider'},
          {label:'时间选择器',value:'timePicker'},
          {label:'时间范围选择器',value:'timePickerRange'},
          {label:'日期选择器',value:'datePicker'},
          {label:'日期范围选择器',value:'datePickerRange'},
          {label:'颜色选择器',value:'colorPicker'},
        ],
        //模型
        modelData:[],
      }
    },
    created(){

    },
    mounted(){
      this.initialize();
    },
    methods:{
      initialize(){
        let self = this;
        //模型
        iotTypeTypeModelAndAttr({id:this.$parent.propsData.typeId}).then(response => {
          for(let i=0;i<response.data.model.length;i++){
            if(response.data.model[i].type == 'checkbox' || response.data.model[i].type == 'datePickerRange'){
              response.data.model[i].demoValue = [];
            }else if(response.data.model[i].type == 'timePickerRange'){
              response.data.model[i].demoValue = null;
            }else if(response.data.model[i].type == 'number' || response.data.model[i].type == 'slider'){
              response.data.model[i].demoValue = 1
            }else{
              response.data.model[i].demoValue = '';
            }
            for(let o=0;o<self.classOption.length;o++){
              if(response.data.model[i].type == self.classOption[o].value){
                response.data.model[i].typeName = self.classOption[o].label+'示例';
              }
            }
          }
          this.$set(this,'modelData',response.data.model);
        });
      },
      //模块保存
      modelSubmit(){
        let self = this;
        let obj = {
          typeId:this.$parent.propsData.typeId,
          iotTypeParamRelationDtos: [],
        };
        for(let i=0;i<self.modelData.length;i++){
          if(self.modelData[i].required || self.modelData[i].isSelect){
            let minObj = {
              typeId: self.$parent.propsData.typeId,
              paramId: self.modelData[i].paramId,
              required: self.modelData[i].required,
              isSelect: self.modelData[i].isSelect,
            }
            obj.iotTypeParamRelationDtos.push(minObj);
          }
        }
        iotTypeSaveTypeModel(obj).then(response => {
          this.msgSuccess(response.message)
          this.outButton();
        });
      },
      //选中切换
      checkItem(item,index,type){
        if(type == 'isSelect'){
          this.$set(this.modelData[index],'required',item.isSelect?false:item.required);
          this.$set(this.modelData[index],'isSelect',!item.isSelect);
        }else if(type == 'required'){
          this.$set(this.modelData[index],'isSelect',item.required?item.isSelect:true);
          this.$set(this.modelData[index],'required',!item.required);
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotClassification-modelPage{
    flex:1;
    padding-bottom:26px;
    .for-form-box{
      display: inline-block;
      overflow: hidden;
      border:1px solid #dedede;
      border-radius:6px;
      width:360px;
      height:200px;
      margin:26px 0 0 26px;
      /*-webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);*/
      .item-content-box{
        height:100%;
        display: flex;
        flex-direction: column;
        .item-title-p{
          text-align: center;
          font-size:16px;
          line-height:40px;
          color: #333;
          background-color: #dedede;
        }
        .item-title-check{
          color: #fff;
          background-color: #0183FA;
        }
        .item-examples-title-p{
          line-height:45px;
          font-size:14px;
          color:#666;
          padding-left:20px;
        }
        .item-examples-box{
          flex:1;
          .item-examples-demo{
            width:300px;
            height:40px;
            margin:0 29px 0;
          }
        }
        .item-radio-max-box{
          border-top:1px solid #dedede;
          display: flex;
          div{
            display: flex;
            cursor: pointer;
            p{
              text-align: center;
              line-height: 20px;
            }
            p:nth-child(1){
              margin:9px 10px 9px 80px;
              width:20px;
              height:20px;
              border:1px solid #dedede;
              border-radius:2px;
              color:#dedede;
            }
            p:nth-child(2){
              margin:9px 0;
              font-size:14px;
              color:#333;
            }
            .check-p-one{
              border:1px solid #0183FA!important;
              color:#fff!important;
              background-color:#0183FA!important;
            }
            .check-p-two{
              color:#0183FA!important;
            }
          }
        }
      }
    }
  }
</style>
