<template>
  <div class="app-container">
    <el-row class="m-t-0">
      <el-col :span="24">
        <el-container>
          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
            <div class="l">
              <i v-if="pageState === 'add'" class="el-icon-plus f-s-20"></i>
              <i v-else class="el-icon-edit f-s-20"></i>
              <font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
            </div>
          </el-header>
          <el-main class="border p-20 m-b-20">
            <el-form ref="form" :model="form" label-width="120px" :label-position="$store.state.app.isWideScreen ? 'top' : 'right'">

              <!-- 商铺选择 -->
              <el-form-item v-if="pageState === 'add'" label="所属商铺">
                <SelectionShopId v-model="form.shop_id" />
              </el-form-item>

              <!-- 类别名称 -->
              <el-form-item label="机型名称">
                <el-input v-model="form.class_name" placeholder="例如：运输型无人机" />
              </el-form-item>

              <!-- 飞机类型 -->
              <el-form-item label="机型类型">
                <el-select v-model="form.category" placeholder="请选择类型">
                  <el-option label="四旋翼" value="四旋翼" />
                  <el-option label="固定翼" value="固定翼" />
                  <el-option label="垂直起降" value="垂直起降" />
                </el-select>
              </el-form-item>

              <!-- 轴距 -->
              <el-form-item label="轴距">
                <el-input v-model="form.wheelbase" placeholder="单位：厘米">
                  <template #append>cm</template>
                </el-input>
              </el-form-item>

              <!-- 最大载重 -->
              <el-form-item label="最大载重">
                <el-input v-model="form.weight_max" placeholder="单位：克">
                  <template #append>克</template>
                </el-input>
              </el-form-item>

              <!-- 描述 -->
              <el-form-item label="机型描述">
                <el-input v-model="form.describe" type="textarea" placeholder="描述备注，非必填" />
              </el-form-item>

              <!-- 提交按钮 -->
              <el-form-item>
                <el-button
                  type="primary"
                  :icon="pageState === 'add' ? 'el-icon-plus' : 'el-icon-edit'"
                  @click="pageState === 'add' ? addPlaneClass() : savePlaneClass()"
                >
                  {{ pageState === 'add' ? '创建' : '更新' }}
                </el-button>
                <el-button v-if="pageState === 'add'" @click="setForm({ shop_id: form.shop_id })" class="iconfont icon-qingchu">
                  <font class="m-l-5">重填</font>
                </el-button>
              </el-form-item>

            </el-form>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SelectionShopId from '@/components/SelectionShopId'

export default {
  name: 'PlaneClassAdd',
  components: {
    SelectionShopId
  },
  data () {
    return {
      form: {
        shop_id: '',
        class_name: '',
        category: '四旋翼',
        wheelbase: '',
        weight_max: '',
        describe: ''
      },
      planeClassId: this.$route.params.id,
      pageState: 'add',
      planeClass: null
    }
  },
  computed: {
    // 机型列表
    planeClassList () {
      return this.$store.state.planeClassList || []
    }
  },
  methods: {
    setForm (data = {}) {
      this.form.shop_id = data.shop_id || ''
      this.form.class_name = data.class_name || ''
      this.form.category = data.category || '四旋翼'
      this.form.wheelbase = data.wheelbase || ''
      this.form.weight_max = data.weight_max || ''
      this.form.describe = data.describe || ''
      if (Object.keys(data).length === 0) {
        this.$message.warning('清空表单')
      }
    },
    initPage () {
      if (!this.planeClassId) {
        this.pageState = 'add'
      } else {
        this.pageState = 'edit'
        this.planeClass = this.planeClassList.find(item => item.id === this.planeClassId)
        if (this.planeClass) {
          this.setForm({ ...this.planeClass })
        } else {
          this.$message.warning('找不到对应机型信息')
        }
      }
    },
    async addPlaneClass () {
      const res = await this.$store.dispatch('fetchAddPlaneClass', this.form)
      if (res?.data?.status === 1) {
        this.$router.push('/model/index')
      }
    },
    async savePlaneClass () {
      this.form.id = this.planeClassId
      const res = await this.$store.dispatch('fetchSavePlaneClass', this.form)
      if (res?.data?.status === 1) {
        this.$router.push('/model/index')
      }
    }
  },
  watch: {
    planeClassList: {
      handler () {
        this.initPage()
      },
      immediate: true
    }
  },
  created () {
    if (this.planeClassList.length > 0) {
      this.initPage()
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
