<template>
  <a-form :form="form">
    <title-divider title="基础信息" width="150px"></title-divider>
    <row-list :col="2">
      <row-item>
        <a-form-item
          label="设备名称"
          class="marginBottom"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <label>{{ sbInfo.sbName }}</label>
        </a-form-item>
      </row-item>
      <row-item>
        <a-form-item
          label="设备编号"
          class="marginBottom"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <label>{{ sbInfo.sbNo }}</label>
        </a-form-item>
      </row-item>

      <row-item>
        <a-form-item
          class="future-item-bottom"
          label="日期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-date-picker
            style="width: 100%"
            v-decorator="['fillDate', {initialValue: sbInfo.fillDate?BaseTool.Moment(sbInfo.fillDate, BaseTool.Date.PICKER_NORM_DATE_PATTERN):BaseTool.Moment(),
                                       rules: [{required: true, message: '日期不能为空'}]}]"
            :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
          />
        </a-form-item>
      </row-item>
    </row-list>
    <template v-for="natureDict in natureList" >
      <title-divider :key="natureDict.id" :title="natureDict.label" v-show="natureDict.show" width="150px"></title-divider>
      <row-list :key="natureDict.id" :col="2" v-if="natureList.length > 0">
        <template v-for="fillInfo in fillInfoList" v-if="fillInfo.nature === natureDict.value">
          <template v-if="fillInfo.type === DictCache.VALUE.FILL_INFO_TYPE.FILL_INFO_TYPE_PROJECT_QUANTITY">
            <row-item :key="fillInfo.infoId">
              <a-form-item
                class="future-item-bottom"
                label="作业名称"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-tree-select
                  v-decorator="[fillInfo.infoId,
                                {initialValue: getProjectQuantityListIdValueDefault(fillInfo)['resultDesc'],
                                 rules: [{required: true, message: '作业名称不能为空'}]}]"
                  @change="changeProjectQuantity($event, fillInfo)"
                  :treeNodeFilterProp="'title'"
                  placeholder="请选择作业"
                  :allow-clear="true"
                  :show-search="true"
                  :replaceFields="{children:'children', title:'title', key:'key', value: 'id' }"
                  :tree-default-expand-all="true"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :treeData="projectQuantityList"
                />
              </a-form-item>
            </row-item>

            <row-item :key="fillInfo.infoId+1">
              <a-form-item
                class="future-item-bottom"
                label="作业位置"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <!-- 解决校验问题 -->
                <a-input-number
                  v-show="false"
                  v-decorator="['test', {initialValue: 111, rules: [{required: true}]}]" />
                <a-input-group compact>
                  <a-form-item>
                    <a-input-number
                      style=" width: 80px; text-align: center"
                      :min="0"
                      :step="0.001"
                      :formatter="BaseTool.Amount.formatter"
                      :parser="BaseTool.Amount.parser"
                      @focus="inputNumberFocus(fillInfo.infoId+'ProjectQuantityS')"
                      v-decorator="[fillInfo.infoId+'ProjectQuantityS', {initialValue: fillInfo.resultStart||0, rules: [{required: true, message: '不能为空'}]}]"
                      placeholder="起始值" />
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                      value="~"
                      disabled
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-input-number
                      style="width: 80px; text-align: center; border-left: 0"
                      :min="0"
                      :step="0.001"
                      :formatter="BaseTool.Amount.formatter"
                      :parser="BaseTool.Amount.parser"
                      @focus="inputNumberFocus(fillInfo.infoId+'ProjectQuantityE')"
                      v-decorator="[fillInfo.infoId+'ProjectQuantityE', {initialValue: fillInfo.resultEnd||0, rules: [{required: true, message: '不能为空'}]}]"
                      placeholder="结束值"
                    />
                  </a-form-item>
                  <a-form-item v-show="false">
                    <a-input-number
                      style="width: 80px; text-align: center; border-left: 0"
                      :min="0"
                      :step="0.001"
                      :formatter="BaseTool.Amount.formatter"
                      :parser="BaseTool.Amount.parser"
                      @focus="inputNumberFocus(fillInfo.infoId+'ProjectQuantityT')"
                      v-decorator="[fillInfo.infoId+'ProjectQuantityT', {initialValue: fillInfo.resultEliminate||0, rules: [{required: true, message: '不能为空'}]}]"
                      placeholder="未工作"
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      style=" width: 50px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                      v-decorator="[fillInfo.infoId+'Unit', {initialValue: getUnit(fillInfo,'siteUnit')}]"
                      disabled
                    />
                  </a-form-item>
                </a-input-group>
              </a-form-item>
            </row-item>

            <row-item :key="fillInfo.infoId+2">
              <a-form-item
                class="future-item-bottom"
                label="完成量"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <!-- 解决校验问题 -->
                <a-input-number
                  v-show="false"
                  v-decorator="['test', {initialValue: 111, rules: [{required: true}]}]" />
                <a-input-group compact>
                  <a-form-item>
                    <a-input-number
                      style="width: 100px; text-align: center; border-left: 0"
                      :min="0"
                      :step="0.001"
                      :formatter="BaseTool.Amount.formatter"
                      :parser="BaseTool.Amount.parser"
                      @focus="inputNumberFocus(fillInfo.infoId+'ProjectQuantityV')"
                      v-decorator="[fillInfo.infoId+'ProjectQuantityV', {initialValue: fillInfo.resultNumber||0, rules: [{required: true, message: '不能为空'}]}]"
                      placeholder="完成量"
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      style=" width: 50px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                      v-decorator="[fillInfo.infoId+'VUnit', {initialValue: getUnit(fillInfo,'unit')}]"
                      disabled
                    />
                  </a-form-item>
                </a-input-group>
              </a-form-item>
            </row-item>

            <row-item :key="fillInfo.infoId+3">
              <a-form-item
                class="future-item-bottom"
                label="作业备注"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input
                  v-decorator="[fillInfo.infoId+'RemarkProjectQuantity', {initialValue: fillInfo.remark}]" />
              </a-form-item>
            </row-item>
          </template>
          <template
            v-else-if="fillInfo.type === DictCache.VALUE.FILL_INFO_TYPE.FILL_INFO_TYPE_DATE_TIME"
          >
            <row-item :key="fillInfo.infoId+1">
              <a-form-item
                label="运行开始时间"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >

                <a-date-picker
                  style="width: 100%"
                  v-decorator="[fillInfo.infoId+'TimeS', {initialValue: fillInfo.startTime?BaseTool.Moment(fillInfo.startTime, BaseTool.Date.PICKER_NORM_DATETIME_PATTERN):
                                                            BaseTool.Moment(),
                                                          rules: [{required: true, message: '运行开始时间不能为空'}]}]"
                  :show-time="{ defaultValue: BaseTool.Moment('00:00:00', 'HH:mm:ss') }"
                  :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
                />
              </a-form-item>
            </row-item>

            <row-item :key="fillInfo.infoId+2">
              <a-form-item
                label="运行结束时间"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-date-picker
                  style="width: 100%"
                  v-decorator="[fillInfo.infoId+'TimeE', {initialValue: fillInfo.endTime?BaseTool.Moment(fillInfo.endTime, BaseTool.Date.PICKER_NORM_DATETIME_PATTERN):
                                                            BaseTool.Moment(),
                                                          rules: [{required: true, message: '运行结束时间不能为空'}]}]"
                  :show-time="{ defaultValue: BaseTool.Moment('23:59:59', 'HH:mm:ss') }"
                  :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
                />
              </a-form-item>
            </row-item>

            <row-item :key="fillInfo.infoId+3">
              <a-form-item
                label="未工作小时"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-input-number
                  style="width: 80px; text-align: center; border-left: 0"
                  :min="0"
                  :step="0.01"
                  :formatter="BaseTool.Amount.formatter"
                  :parser="BaseTool.Amount.parser"
                  @focus="inputNumberFocus(fillInfo.infoId+'TimeR')"
                  v-decorator="[fillInfo.infoId+'TimeR', {initialValue: fillInfo.resultEliminate||0, rules: [{required: true, message: '不能为空'}]}]"
                  placeholder="未工作小时"
                />
                <a-input
                  style=" width: 50px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                  value="小时"
                  disabled
                />
              </a-form-item>
            </row-item>

          </template>

          <row-item v-else :key="fillInfo.infoId">
            <a-form-item
              class="future-item-bottom"
              :label="fillInfo.name"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <!--<a-input
              v-decorator="[fillInfo.infoId, {rules: [{required: true, message: fillInfo.name+'不能为空'}]}]"/>-->
              <!-- :default-value="value1" @change="onChange1" -->
              <a-select
                v-decorator="[fillInfo.infoId,
                              {initialValue: getSelectOptionDefault(fillInfo),
                               rules: [{required: true, message: fillInfo.name+'不能为空'}]}]"
                v-if="fillInfo.type === DictCache.VALUE.FILL_INFO_TYPE.FILL_INFO_TYPE_XIA_LA"
                placeholder="请选择">
                <a-select-option
                  v-for="(label,value) in getSelectOptions(fillInfo)"
                  :key="value"
                  :label="label"
                  :value="parseInt(value)">{{ label }}
                </a-select-option>
              </a-select>

              <a-radio-group
                v-else-if="fillInfo.type === DictCache.VALUE.FILL_INFO_TYPE.FILL_INFO_TYPE_DAN_XUAN"
                v-decorator="[fillInfo.infoId, {initialValue: getRadioGroupDefault(fillInfo),rules: [{required: true, message: fillInfo.name+'不能为空'}]}]"
                :options="getRadioGroup(fillInfo)" />

              <template
                v-else-if="fillInfo.type === DictCache.VALUE.FILL_INFO_TYPE.FILL_INFO_TYPE_FAN_WEI"
              >
                <!-- 解决校验问题 -->
                <a-input-number
                  v-show="false"
                  v-decorator="['test', {initialValue: 111, rules: [{required: true}]}]" />
                <a-input-group compact>
                  <a-form-item>
                    <a-input-number
                      style=" width: 80px; text-align: center"
                      :min="0"
                      :step="0.001"
                      :formatter="BaseTool.Amount.formatter"
                      :parser="BaseTool.Amount.parser"
                      @focus="inputNumberFocus(fillInfo.infoId+'Start')"
                      v-decorator="[fillInfo.infoId+'Start', {initialValue: fillInfo.resultStart||0, rules: [{required: true, message: '不能为空'}]}]"
                      placeholder="起始值" />
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                      value="~"
                      disabled
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-input-number
                      style="width: 80px; text-align: center; border-left: 0"
                      :min="0"
                      :step="0.001"
                      :formatter="BaseTool.Amount.formatter"
                      :parser="BaseTool.Amount.parser"
                      @focus="inputNumberFocus(fillInfo.infoId+'End')"
                      v-decorator="[fillInfo.infoId+'End', {initialValue: fillInfo.resultEnd||0, rules: [{required: true, message: '不能为空'}]}]"
                      placeholder="结束值"
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-input-number
                      style="width: 80px; text-align: center; border-left: 0"
                      :min="0"
                      :step="0.001"
                      :formatter="BaseTool.Amount.formatter"
                      :parser="BaseTool.Amount.parser"
                      @focus="inputNumberFocus(fillInfo.infoId+'Eliminate')"
                      v-decorator="[fillInfo.infoId+'Eliminate', {initialValue: fillInfo.resultEliminate||0, rules: [{required: true, message: '不能为空'}]}]"
                      placeholder="未工作"
                    />
                  </a-form-item>
                  <a-form-item v-if="fillInfo.codeValue === DictCache.VALUE.FILL_INFO_CODE_VALUE.FILL_INFO_CODE_VALUE_GLS">
                    <a-input
                      style=" width: 50px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                      value="KM"
                      disabled
                    />
                  </a-form-item>
                  <a-form-item v-if="fillInfo.codeValue === DictCache.VALUE.FILL_INFO_CODE_VALUE.FILL_INFO_CODE_VALUE_SJS">
                    <a-input
                      style=" width: 50px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                      value="小时"
                      disabled
                    />
                  </a-form-item>
                </a-input-group>
              </template>
              <a-textarea
                :rows="3"
                v-else-if="fillInfo.type === DictCache.VALUE.FILL_INFO_TYPE.FILL_INFO_TYPE_STRING"
                v-decorator="[fillInfo.infoId,{initialValue: fillInfo.resultDesc}]"/>
            </a-form-item>
          </row-item>
        </template>
      </row-list>
    </template>
  </a-form>
</template>

<script>

export default {
  name: 'FillForm',
  components: {
  },
  data () {
    return {
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 } // 2的倍数
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      // 下拉框map
      natureList: [],
      natureShowMap: {},
      projectQuantityUnitMap: {},
      selectOptionMap: {},
      radioGroupMap: {},
      selectProjectQuantity: {}
    }
  },
  props: {
    fillInfoList: {
      type: Array,
      default: () => []
    },
    sbInfo: {
      type: Object,
      default: () => {}
    },
    projectQuantityList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    fillInfoList (fillInfoListValue) {
      this.natureShowMap = {}
      fillInfoListValue.forEach(fillInfo => {
        this.natureShowMap[fillInfo.nature] = true
      })
      const natureList = this.DictCache.getChildrenList(this.DictCache.TYPE.FILL_INFO_NATURE)
      natureList.forEach(natureItem => {
        if (this.natureShowMap[natureItem.value]) {
          natureItem.show = true
        } else {
          natureItem.show = false
        }
      })
      this.natureList = natureList
    }
  },
  created () {
    this.natureShowMap = {}
    // 下拉框map
    this.fillInfoList.forEach(fillInfo => {
      this.natureShowMap[fillInfo.nature] = true
    })
    const natureList = this.DictCache.getChildrenList(this.DictCache.TYPE.FILL_INFO_NATURE)
    natureList.forEach(natureItem => {
      if (this.natureShowMap[natureItem.value]) {
        natureItem.show = true
      } else {
        natureItem.show = false
      }
    })
    this.natureList = natureList
    this.projectQuantityUnitMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.FILL_PROJECT_QUANTITY_UNIT)
  },
  methods: {
    changeProjectQuantity (val, fillInfo) {
      const { form: { setFieldsValue } } = this
      let selectItem = null
      this.BaseTool.TREE.treeFilter(this.projectQuantityList, (item) => {
        if (item.id === val) {
          selectItem = item.item
        }
        return item
      })
      if (!selectItem) {
        const p = {}
        p[fillInfo.infoId + 'Unit'] = null
        p[fillInfo.infoId + 'VUnit'] = null
        setFieldsValue(p)
        return
      }
      const p = {}
      p[fillInfo.infoId + 'VUnit'] = this.projectQuantityUnitMap[selectItem.unit]
      p[fillInfo.infoId + 'Unit'] = this.projectQuantityUnitMap[selectItem.siteUnit]
      setFieldsValue(p)
    },
    inputNumberFocus (key) {
      const { form: { getFieldValue, setFieldsValue } } = this
      const v = getFieldValue(key)
      if (v === 0) {
        const p = {}
        p[key] = null
        setFieldsValue(p)
      }
    },
    getItem (resultDesc, list) {
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (item.id === resultDesc) {
          return item.item
        } else {
          const myList = item.children
          if (myList && myList.length > 0) {
            const t = this.getItem(resultDesc, myList)
            if (t) {
              return t
            }
          }
        }
      }
    },
    getUnit (fillInfo, unitStr) {
      let selectItem = {}
      if (this.BaseTool.String.isNotBlank(fillInfo.resultDesc)) {
        // this.BaseTool.TREE.treeFilter(this.projectQuantityList, (item) => {
        //   if (item.id === fillInfo.resultDesc) {
        //     selectItem = item.item
        //   }
        // })
        selectItem = this.getItem(fillInfo.resultDesc, this.projectQuantityList)
      } else {
        if (this.projectQuantityList && this.projectQuantityList.length > 0) {
          selectItem = this.projectQuantityList[0].item
        }
      }
      const unit = selectItem[unitStr]
      if (unit) {
        return this.projectQuantityUnitMap[unit]
      }
      console.log(1111, selectItem)
      return '无'
    },
    getProjectQuantityListIdValueDefault (fillInfo) {
      let selectItem = {}
      let resultStr = null
      if (this.BaseTool.String.isNotBlank(fillInfo.resultDesc)) {
        const selectList = this.projectQuantityList.filter((item) => { return item.id === fillInfo.resultDesc })
        if (selectList && selectList.length > 0) {
          selectItem = selectList[0]
        }
        resultStr = fillInfo.resultDesc
      } else {
        if (this.projectQuantityList && this.projectQuantityList.length > 0) {
          selectItem = this.projectQuantityList[0]
          resultStr = this.projectQuantityList[0].id
        }
      }
      selectItem.resultDesc = resultStr
      return selectItem
    },
    getSelectOptions (fillInfo) {
      if (this.BaseTool.Object.isBlank(this.selectOptionMap[fillInfo.dictType])) {
        this.selectOptionMap[fillInfo.dictType] = this.DictCache.getLabelByValueMapByType(fillInfo.dictType)
      }
      return this.selectOptionMap[fillInfo.dictType]
    },
    getSelectOptionDefault (fillInfo) {
      if (this.BaseTool.Object.isNotBlank(fillInfo.resultValue)) {
        return fillInfo.resultValue
      }
      const options = this.getSelectOptions(fillInfo)
      const keys = Object.keys(options)
      if (this.BaseTool.Object.isNotBlank(keys) && keys.length > 0) {
        return parseInt(keys[0])
      }
      return null
    },
    getRadioGroup (fillInfo) {
      if (this.BaseTool.Object.isBlank(this.radioGroupMap[fillInfo.dictType])) {
        this.radioGroupMap[fillInfo.dictType] = this.DictCache.getChildrenList(fillInfo.dictType)
      }
      return this.radioGroupMap[fillInfo.dictType]
    },
    getRadioGroupDefault (fillInfo) {
      if (this.BaseTool.Object.isNotBlank(fillInfo.resultValue)) {
        return fillInfo.resultValue
      }
      const options = this.getRadioGroup(fillInfo)
      if (this.BaseTool.Object.isNotBlank(options) && options.length > 0) {
        return options[0].value
      }
      return null
    }
  }
}
</script>
<style>
  .future-item-bottom {
    margin-bottom: 6px;
  }
</style>
