<template>
  <div class="city-select-form">
    <el-form-item
      :key="item.model"
      :prop="item.model"
      :label="item.label || ''"
      :label-width="item.labelWidth || item['label-width'] || ''"
      :required="item.required || false"
      :rules="item.rules || []"
      :size="item.size"
    >
      <template v-for="(select, index) in selects">
        <el-select v-bind:key="index" :style="{ 'width': item.modelWidth || item['model-width'] || '100px', 'float': 'left', 'marginRight': '10px' }"
          v-bind="item['attrs' + index]"
          v-on="$listeners"
          v-model="select['model']"
          :placeholder="item['placeholder' + index]"
          :disabled="item.disabled || false"
          @change="isSelectChange(index)"
        >
          <el-option
            v-for="option in select.arr"
            :label="option.label"
            :value="option.value"
            :key="option.value"
          ></el-option>
        </el-select>
      </template>
      <template v-if="formData[item.model]">
        <div class="self-icon el-icon-circle-check" style="color: #237f00;"></div>
      </template>
      <div class="self-icon el-icon-circle-close" style="color: #b01c40;"></div>
    </el-form-item>
  </div>
</template>

<script>
import address from './address'

export default {
  name: 'CitySelectForm',
  componentName: 'CitySelectForm',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      str: '', // 记录一下
      selects: [] // 动态添加，当前显示的选择框个数
    }
  },
  mounted () {
    if (this.str === '') {
      /* 按照配置项，解析返回数据 */
      let _data = this.formData[this.item.model]
      let arr = []
      if (_data) {
        arr = _data.split(this.item.separator)
      }
      /* 回显 */
      this.analysisAddress(address, 0, arr[0] || '')
      /* 第一个选项为空 */
      for (let i = 0; i <= arr.length; i++) {
        this.isSelectChange(i, arr[i + 1] || '')
      }
    }
  },
  methods: {
    /* 解析地址 */
    analysisAddress (json, i, val) {
      let arr = []
      for (let k in json) {
        if (k !== 'name' && json[k].name) {
          arr.push({ 'label': json[k].name, 'value': k })
        }
      }
      if (arr.length) {
        this.selects.push({ arr: arr, index: i, model: val || '' })
      }
    },
    /* 是否选择 */
    isSelectChange (index, val) {
      let json = address
      let i = 0
      for (; i <= index; i++) {
        /* 当前选中的 value值 */
        let tempVal = this.selects[i] && this.selects[i].model
        if (tempVal && json[tempVal] && json[tempVal].name) {
          json = json[tempVal]
        } else {
          break
        }
      }
      if (i <= index) { return }
      /* 删除后续selects数据 */
      for (let j = index + 1; j < this.selects.length;) {
        this.selects.splice(j)
      }
      /* 如果有，则重新添加 */
      if (json.name) {
        this.analysisAddress(json, (index + 1), val || '')
      }
      /* 重新给 formData赋值 - 双向绑定 */
      let arr = []
      for (let k = 0; k < this.selects.length; k++) {
        arr.push(this.selects[k].model)
      }
      this.formData[this.item.model] = this.str = arr.join(this.item.separator)
    }
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler (value) {
        /* 单独处理 - ajax结果在组件渲染之后 */
        if (value[this.item.model] && this.str === '' && value[this.item.model] !== this.str) {
          this.str = value[this.item.model]
          let _data = this.str
          this.selects = []
          let arr = []
          if (_data) {
            arr = _data.split(this.item.separator)
          }
          /* 回显 */
          this.analysisAddress(address, 0, arr[0] || '')
          /* 第一个选项为空 */
          for (let i = 0; i <= arr.length; i++) {
            this.isSelectChange(i, arr[i + 1] || '')
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
  .self-icon {
    display: none !important;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 21px;
    line-height: 22px;
  }
  .is-error .self-icon.el-icon-circle-close { display: inline-block !important; }
  .is-success .self-icon.el-icon-circle-check { display: inline-block !important; }
</style>
