<template>
  <div class="contentDiv">

    <template v-for="(obj, index) in array">

      <div v-if="obj.type && obj.type!='none' && obj.type!='child'" v-show="obj.type && obj.type!='hide'" class="FlowContentHC box">
        <div class="FlowContenL"><span class="red" v-if="obj.required">*</span>{{obj.name}}</div>
        <div v-if="obj.type" class="FlowContentIcon iconfont icon-edit"></div>
        <div class="FlowContenR box_f1" @click="FlowEdit(index)">

          <span v-show="!obj.showBol" v-if="obj.type=='checkbox'">{{checkArrStr(obj.select)}}</span>
          <span v-show="!obj.showBol" v-else>{{typeof(obj.value)=='object'?obj.value.name:obj.value}}</span>

          <textarea v-show="obj.showBol" class="textarea" rows="4" v-if="obj.type=='text'||obj.type=='textarea'" v-model="obj.value"></textarea>
          <input v-show="obj.showBol" class="input" v-if="obj.type=='datetime'" v-model="obj.value" type="datetime-local">
          <input v-show="obj.showBol" class="input" v-if="obj.type=='date'" v-model="obj.value" type="date">
          <input v-show="obj.showBol" class="input" v-if="obj.type=='time'" v-model="obj.value" type="time">
          <select v-model='obj.value' class="input" v-show="obj.showBol" v-if="(obj.type=='select' || obj.type=='radio') && obj.select && Array.isArray(obj.select)">
            <option v-for="op in obj.select" :value="op">{{op.name}}</option>
          </select>

          <div v-show="obj.showBol" v-if="obj.type=='checkbox' && obj.select && Array.isArray(obj.select)">
              <label class="label" v-for="citem in obj.select">
                <input v-model="citem.checked" class="checkboxinput" type="checkbox" :name="obj.name" :value="citem.value">
                <span>{{citem.name}}</span>
              </label>
          </div>



        </div>
      </div>

      <d-flowContentTable v-else-if="obj.table && obj.type && obj.type=='child' && Array.isArray(obj.table)" ref="flowContentTable" :content="arritem" v-for="(arritem, index) in obj.table" :key="index"></d-flowContentTable>

      <div class="FlowContentH box" v-else>
        <div class="FlowContenL">{{obj.name}}</div>
        <div class="FlowContenR box_f1" v-html="obj.value"></div>
      </div>

    </template>

  </div>
</template>

<script>
    import DFlowContentTable from './DFlowContentTable.vue'
    export default {
        name: "d-flowContent",
        mounted() {
          if(this.content && Array.isArray(this.content))this.array = this.content
        },
        data () {
            return {
              array: []
            }
        },
        props: {
          content: Array
        },
        components: {DFlowContentTable},
        methods: {
          FlowEdit(index) {
            this.$set(this.array[index], 'showBol', true)

            switch(this.array[index].type) {
              default :
                //text

                break;
            }
          },
          checkedBol(val, arr) {
            let bol = false
            arr.forEach((item)=>{
              if(val == item.value) {
                bol =  true
              }
            })
            return bol
          },
          checkArrStr(arr) {
            return arr.filter((item)=>{
              return item.checked === true;
            }).map((item)=>{
              return item.name
            }).toString()
          },
          getData() {
            //this.$refs.flowContentTable.getData()
            //console.log(this.array)
            return this.array
          }
        }
    }
</script>

<style scoped>
.contentDiv {
  width: 100%;
  height: auto;
  position: relative;
  font-size: 14px;
}
.FlowContentH, .FlowContentHC {
  margin-top: 10px;
  height: auto;
  box-sizing: border-box;
  position: relative;
}

.FlowContenL {
  color: #999;
  height: 20px;
  line-height: 20px;
  padding-right: 10px;
}
.FlowContenR {
  line-height: 20px;
  position: relative;
}
.FlowContentIcon {
  width: 20px;
  line-height: 18px;
  color: #04be02;
}
.red {
  color: #f20;
  line-height: 20px;
  padding-right: 5px;
}
.FlowContenR .textarea, .FlowContenR .input{
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  width: 90%;
  margin-top: -5px;
  outline:none;
  font-size: 14px;
  display: block;
  background-color: #fff;

  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline:none;
}
.label {
  padding-left: 5px;
}
.label span {
  padding-right: 5px;
  font-size: 14px;
}
.checkboxinput {
  border: 1px solid #ddd;
  background-color: #fff;
}
</style>
