<template>
  <div>
      <!-- 填空题 -->
      <div class="input" v-if="item.type === 'Textarea' || item.type==='Input'"></div>

        <div class="select colum"  v-if='item.type==="Select"'>
            <div class="option" v-for='(item2,index2) in item.option' :key="index2">
              <div class="left">
                 <svg t="1608616724723" class="icon select-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1710" width="200" height="200"><path d="M946.986 372.374L558.08 797.651a61.202 61.202 0 0 1-45.972 20.801 61.202 61.202 0 0 1-45.976-20.801L77.226 372.374c-18.985-20.052-24.852-49.279-15.04-75.093s33.493-43.84 61.014-46.292h777.494c27.627 2.347 51.412 20.265 61.226 46.187 9.92 25.92 4.054 55.038-14.934 75.198z" p-id="1711" fill="#8a8a8a"></path></svg>
                <input type="text" v-model="item2.label" />
              </div>
              <div class="right" @click="delMulOption(forms,item,index2)">
                <svg t="1608532261848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1424" width="200" height="200"><path d="M516.096 84.65c236.773 0 428.715 191.943 428.715 428.715 0 236.773-191.942 428.715-428.715 428.715-236.773 0-428.715-191.942-428.715-428.715 0-236.772 191.942-428.714 428.715-428.714z m0 81.92c-191.53 0-346.795 155.266-346.795 346.795 0 191.53 155.266 346.795 346.795 346.795 191.53 0 346.795-155.265 346.795-346.795 0-191.53-155.266-346.794-346.795-346.794z m177.493 316.758c22.622 0 40.96 18.338 40.96 40.96s-18.338 40.96-40.96 40.96H338.603c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96h354.986z" fill="#8a8a8a" p-id="1425"></path></svg>
              </div>
            </div>
          </div>
      
      <el-time-select
        style="width:100%"
        v-if='item.type==="Timeselect"'
        v-model="forms[item.key]"
        :disabled='item.disabled'
        :clearable='item.clearable'
        :picker-options="item.pickeroptions"
        :placeholder="item.placeholder"
        :prefix-icon='item.prefixicon'
        value-format='HH:mm:ss'
        >
      </el-time-select>

      <el-time-picker
        style="width:100%"
        v-if='item.type==="Timepicker"'
        v-model="forms[item.key]"
        :disabled='item.disabled'
        :clearable='item.clearable'
        :placeholder="item.placeholder"
        :prefix-icon='item.prefixicon'
        :is-range='item.isrange'
        :start-placeholder='item.startplaceholder'
        :end-placeholder='item.endplaceholder'
        :range-separator='item.rangeseparator'
        value-format='HH:mm:ss'
        >
      </el-time-picker>

      <el-date-picker
        style="width:100%"
        v-if='item.type==="DatePicker" && ( item.datetype=="date" || item.datetype=="dates" || item.datetype=="daterange")'
        v-model="forms[item.key]"
        :type='item.datetype'
        :placeholder="item.placeholder"
        :clearable='item.clearable'
        :disabled='item.disabled'
        :prefix-icon='item.prefixicon'
        value-format="yyyy-MM-dd"
        :start-placeholder='item.startplaceholder'
        :end-placeholder='item.endplaceholder'
        :range-separator='item.rangeseparator'
        >
      </el-date-picker>
      <el-date-picker
        style="width:100%"
        v-if='item.type==="DatePicker" && item.datetype=="week"'
        v-model="forms[item.key]"
        type="week"
        format="yyyy 第 WW 周"
        value-format="yyyy-MM-dd"
        :placeholder="item.placeholder"
        :clearable='item.clearable'
        :disabled='item.disabled'
        :prefix-icon='item.prefixicon'
        :start-placeholder='item.startplaceholder'
        :end-placeholder='item.endplaceholder'
        :range-separator='item.rangeseparator'
        >
      </el-date-picker>
      <el-date-picker
        style="width:100%"
        v-if='item.type==="DatePicker" && ( item.datetype=="month"|| item.datetype=="monthrange" )  '
        v-model="forms[item.key]"
        :type='item.datetype'
        :placeholder="item.placeholder"
        :clearable='item.clearable'
        :disabled='item.disabled'
        :prefix-icon='item.prefixicon'
        value-format="yyyy-MM"
        :start-placeholder='item.startplaceholder'
        :end-placeholder='item.endplaceholder'
        :range-separator='item.rangeseparator'
        >
      </el-date-picker>
      <el-date-picker
        style="width:100%"
        v-if='item.type==="DatePicker" && item.datetype=="year"'
        v-model="forms[item.key]"
        type='year'
        :placeholder="item.placeholder"
        :clearable='item.clearable'
        :disabled='item.disabled'
        :prefix-icon='item.prefixicon'
        value-format="yyyy"
        :start-placeholder='item.startplaceholder'
        :end-placeholder='item.endplaceholder'
        :range-separator='item.rangeseparator'
        >
      </el-date-picker>
      <el-date-picker
        style="width:100%"
        v-if='item.type==="DatePicker" && (item.datetype=="datetime" || item.datetype=="datetimerange") '
        v-model="forms[item.key]"
        :type='item.datetype'
        :placeholder="item.placeholder"
        :clearable='item.clearable'
        :disabled='item.disabled'
        :prefix-icon='item.prefixicon'
        value-format="yyyy-MM-dd HH:mm:ss"
        :start-placeholder='item.startplaceholder'
        :end-placeholder='item.endplaceholder'
        :range-separator='item.rangeseparator'
        >
      </el-date-picker>

      <div class="raido colum"  v-if='item.type==="Radio"'>
        <div class="option" v-for='(item2,index2) in item.option' :key="index2">
          <div class="left">
            <svg t="1608533784342" class="icon radio-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2974" width="200" height="200"><path d="M512 1000.727273a488.727273 488.727273 0 1 1 488.727273-488.727273 488.727273 488.727273 0 0 1-488.727273 488.727273z m0-919.272728a430.545455 430.545455 0 1 0 430.545455 430.545455A430.545455 430.545455 0 0 0 512 81.454545z" fill="#8a8a8a" p-id="2975"></path></svg>
            <input type="text" v-model="item2.label" />
          </div>
          <div class="right" @click="delOption(forms,item,index2)">
            <svg t="1608532261848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1424" width="200" height="200"><path d="M516.096 84.65c236.773 0 428.715 191.943 428.715 428.715 0 236.773-191.942 428.715-428.715 428.715-236.773 0-428.715-191.942-428.715-428.715 0-236.772 191.942-428.714 428.715-428.714z m0 81.92c-191.53 0-346.795 155.266-346.795 346.795 0 191.53 155.266 346.795 346.795 346.795 191.53 0 346.795-155.265 346.795-346.795 0-191.53-155.266-346.794-346.795-346.794z m177.493 316.758c22.622 0 40.96 18.338 40.96 40.96s-18.338 40.96-40.96 40.96H338.603c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96h354.986z" fill="#8a8a8a" p-id="1425"></path></svg>
          </div>
        </div>
      </div>


       <div class="raido colum"  v-if='item.type==="Checkbox"'>
        <div class="option" v-for='(item2,index2) in item.option' :key="index2">
          <div class="left">
            <svg t="1608531360478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1486" width="200" height="200"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m0-85.333333H213.333333c-47.146667 0-85.333333 38.186667-85.333333 85.333333v597.333334c0 47.146667 38.186667 85.333333 85.333333 85.333333h597.333334c47.146667 0 85.333333-38.186667 85.333333-85.333333V213.333333c0-47.146667-38.186667-85.333333-85.333333-85.333333z" p-id="1487" fill="#dbdbdb"></path></svg>
            <input type="text" v-model="item2.label" />
          </div>
          <div class="right" @click="delMulOption(forms,item,index2)">
            <svg t="1608532261848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1424" width="200" height="200"><path d="M516.096 84.65c236.773 0 428.715 191.943 428.715 428.715 0 236.773-191.942 428.715-428.715 428.715-236.773 0-428.715-191.942-428.715-428.715 0-236.772 191.942-428.714 428.715-428.714z m0 81.92c-191.53 0-346.795 155.266-346.795 346.795 0 191.53 155.266 346.795 346.795 346.795 191.53 0 346.795-155.265 346.795-346.795 0-191.53-155.266-346.794-346.795-346.794z m177.493 316.758c22.622 0 40.96 18.338 40.96 40.96s-18.338 40.96-40.96 40.96H338.603c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96h354.986z" fill="#8a8a8a" p-id="1425"></path></svg>
          </div>
        </div>
      </div>

  </div>      
</template>

<script>
export default {
  name: "formitem",
  components: {
  },
  props: {
    // 表单对象
    form: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表单内的组件对象
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    forms() {
      return this.form
    }
  },
  data() {
    return {
    };
  },
  methods: {
    delOption (form, item, i) {
      console.log(form, item, i)
     item.option.splice(i,1)
    },
    delMulOption (form, item, i) {
      console.log(form, item, i)
      item.option.splice(i,1)
    }
  },
  watch: {}
};
</script>

<style>
.colum {
  max-width: 400px;
  display: flex;
  flex-direction: column;
}
.colum .option, .select .options {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px dashed #fff;
}
.option .left {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.option .right {
  width: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.colum .option:hover, .select .options:hover {
  border: 1px dashed #444;
  cursor: pointer;
}
/* .colum .option:hover .left {
  background-color: #F3F5F6;
}
.colum .option:hover .left input {
  background-color: #F3F5F6;
} */
.colum .option input, .select .options input{
  flex: 1;
  background-color: #ffffff;
  outline: none;
  border: none;
}
.input {
  min-width: 400px;
  max-width: 80%;
  height: 30px;
  border: 1px solid #DCDFE6;
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.radio-icon {
  width: 15px;
  height: 15px;
}
.select {
  display: flex;
  flex-direction: column;
}
.select .options {
  justify-content: flex-start;
}
.select-icon{
  width: 15px;
}
</style>
