<template>
  <section>
    <div v-if="!show" class="from">
      <div class="icon-wrap"><i class="icon" /> <span>搜索</span></div>
      <el-form ref="ruleForm" :model="form" label-width="95px">
        <el-form-item label="机型" prop="model">
          <el-select v-model="form.model" clearable class="input-with-select el-input--small">
            <el-option
              v-for="item in dataModel"
              :key="item.id"
              :label="item.defName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="架次" prop="sortie">
          <el-select v-model="form.sortie" clearable class="input-with-select el-input--small" :loading="sortiesLoading">
            <el-option
              v-for="item in dataSortie"
              :key="item.id"
              :label="item.defName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="labelShow()" label="AO(号/名称)" prop="aoName">
          <el-input v-model="form.aoName" clearable class="input-with-select el-input--small" @change="searchAoname" />
        </el-form-item> -->
        <p class="btn">
          <el-button size="small" type="primary" @click="searchForm">查询</el-button>
          <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
        </p>
      </el-form>
    </div>
  </section>
</template>
<script>
export default {
  name: 'Left',
  props: {
    show: {
      type: Boolean,
      default: null
    },
    dataModel: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      form: {
        model: '',
        modelName: '',
        sortie: '',
        sortieName: '',
        aoName: ''
      },
      sortiesLoading: true,
      dataSortie: [],
      isCollapse: false
    }
  },
  watch: {
    dataModel(newV) {
      if (newV.length <= 0) return
      this.$nextTick(() => {
        this.form.model = newV[0].id
        this.form.modelName = newV[0].defName
        this.getAddRecursion()
      })
    },
    'form.model': {
      immediate: true,
      handler(val) {
        if (!val) {
          return
        }
        const model = this.dataModel.find((r) => r.id === val)
        this.$set(this.form, 'modelName', (model && model.defName) || '')
        this.getAddRecursion()
      }
    },
    'form.sortie': {
      immediate: true,
      handler(val) {
        if (!val) {
          return
        }
        const sorties = this.dataSortie.find((r) => r.id === val)
        this.$set(this.form, 'sortieName', (sorties && sorties.defName) || '')
      }
    }
  },
  mounted() {
    this.getAddRecursion()
  },
  methods: {
    labelShow() {
      if (this.$parent.$parent &&
        this.$parent.$parent.name === 'right' &&
        this.$parent.$parent.isActive === 'ag') {
        return false
      } else {
        return true
      }
    },
    searchForm() {
      this.$parent.$children
        .filter(function(item) {
          return item.name === 'tree'
        })[0]
        .getTreeData(this.form)
    },
    searchAoname() {
      const that = this
      if (that.$parent.$parent.name === 'right') {
        that.$parent.$parent.getTableData()
      } else {
        this.searchForm()
      }
    },
    /**
     * 获取架次数据
     */
    getAddRecursion() {
      this.sortiesLoading = true
      const params = { searchItems: { items: [{ fieldName: 'aircraftTypeId', operator: 'EQ', value: this.form.model }] }, sortItem: [{ fieldName: 'modifyTime', sortOrder: 'asc' }] }
      params.openProps = [{ name: 'aircraftType' }]
      this.$api
        .searchApi('AircraftSorties', params)
        .then((res) => {
          this.dataSortie = []
          if (res) {
            this.dataSortie = res && res.items && res.items.content
            this.$nextTick(() => {
              if (this.dataSortie.length) {
                this.form.sortie = this.dataSortie[0].id
                this.form.sortieName = this.dataSortie[0].defName
                this.searchForm()
              }
            })
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
        .catch((err) => console.log(err))
        .finally(() => {
          this.$nextTick(() => {
            this.sortiesLoading = false
          })
        })
    },
    resetForm() {
      if (this.dataModel.length) {
        this.form.model = this.dataModel[0].id
        this.getAddRecursion()
      }
      this.form.aoName = null
    }
  }
}
</script>

  <style lang="scss" >
  .from {
    border: 1px solid #ccc;
    padding: 20px 20px 5px 20px;
    border-radius: 5px;
    box-sizing: border-box;
    .icon-collapse {
      display: inline-block;
      width: 21px;
      height: 21px;
      background-size: contain;
      cursor: pointer;
      position: absolute;
      z-index: 10;
      top: 20px;
      right: 20px;
    }
    .tobottom {
      background: url("/icons/tobottom.png") no-repeat;
    }
    .totop {
      background: url("/icons/totop.png") no-repeat;
    }
    .icon-wrap {
      margin-bottom: 10px;
      position: relative;
      .icon {
        display: inline-block;
        width: 21px;
        height: 21px;
        background: url("/icons/r-access.png") no-repeat;
        background-size: contain;
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
        // font-size: 12px;
      }
    }
    .btn {
      text-align: center;
    }
    .el-form-item {
    margin-bottom: 8px;
  }
  }

  /deep/.el-input {
    height: 32px;
  }
  /deep/.el-button {
    border-radius: 5px;
    padding: 12px 30px;
  }

  </style>