<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 class="iconfont el-icon-link f-s-20"></i>
              <font class="m-l-10 f-s-18 fb">飞机对频</font>
            </div>
          </el-header>
          <el-main class="border p-20">
            <el-form label-width="120px">
              <el-form-item label="物理ID">
                <el-tag :type="macAdd === null ? 'danger' : ''">
                  {{ macAdd === null ? 'NoThing' : macAdd }}
                </el-tag>
              </el-form-item>

              <el-form-item label="商铺分配">
                <span>{{ getShopName(shop_id) }}</span>
              </el-form-item>

              <el-form-item label="飞机信息">
                <span>{{ getAirName(plane_id) }}</span>
              </el-form-item>

              <el-form-item>
                <el-button
                  icon="iconfont icon-jiekou m-r-5"
                  :type="macAdd === null ? 'info' : 'primary'"
                  @click="onSubmit"
                  :disabled="macAdd === null"
                >
                  对频
                </el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { apiCrosFrequency } from '@/utils/api/table'

export default {
  name: 'crosFrequency',
  data () {
    return {
      shop_id: null,
      plane_id: null
    }
  },
  computed: {
    shopList () {
      return this.$store.state.shopList
    },
    airList () {
      return this.$store.state.airList
    },
    macAdd () {
      return this.$store.state.crosFrequency
    }
  },
  created () {
    this.shop_id = this.$route.params.shop_id
    this.plane_id = this.$route.params.plane_id
    console.log('shop_id:', this.shop_id, 'plane_id:', this.plane_id)
  },
  methods: {
    /**
     * 获取商铺名称
     */
    getShopName (id) {
      const shop = this.shopList.find(item => item.shop_id === id)
      return shop ? shop.name : '未知商铺'
    },
    /**
     * 获取飞机名称和 mac 地址
     */
    getAirName (id) {
      const air = this.airList.find(item => item.id === id)
      return air ? `${air.name}` : '未知飞机'
    },
    /**
     * 检查是否已有同名 mac 地址
     */
    isMacAdd () {
      return this.airList.some(item => item.macadd === this.macAdd)
    },
    /**
     * 提交表单
     */
    onSubmit () {
      const params = { macAdd: this.macAdd, id: this.plane_id }
      if (this.isMacAdd()) {
        this.$confirm('已经有同名mac地址,请谨慎操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          apiCrosFrequency(params)
        }).catch(() => {
          this.$message.info('取消对频')
        })
      } else {
        apiCrosFrequency(params)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rspan {
  float: right;
  color: #8492a6;
  font-size: 13px;
}
</style>
