<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="商铺分配">
                <el-select v-model="shop_id" filterable placeholder="请选择" @blur="air_id = ''; disabled = true"
                  :disabled="macAdd === null ? true : false">
                  <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.shop_id">
                    <el-avatar class="vm" shape="square" :size="25"
                      :src="$store.state.settings.host + '/Data/UploadFiles/logo/' + item.logo">
                    </el-avatar>
                    <span class="rspan">{{ item.name }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="飞机列表">
                <el-radio-group v-if="airList.length != 0" v-model="air_id" @change="disabled = false;">
                  <el-radio class="m-b-10 m-l-0" v-for="item in airList" :key="item.id" :label="item.id" border>
                    {{ item.name }}
                    {{ item.macadd }}
                  </el-radio>
                </el-radio-group>
                <span v-else>No data</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 ? 'disabled' : false">对频
                </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,
      air_id: null
    }
  },
  computed: {
    // 获取商铺列表
    shopList () {
      return this.$store.state.shopList
    },
    // 过滤掉 不对应客户的 飞机列表
    airList () {
      return this.$store.state.airList.filter((item) => item.shop_id === this.shop_id)
    },
    // 对频信息 物理地址
    macAdd () {
      return this.$store.state.crosFrequency
    }
  },
  methods: {
    /**
     * @Description: 检查飞机发布过来的 mac地址  是否已经存在
     * @Return: bool
     */
    isMacAdd () {
      let b = false
      this.$store.state.airList.map((item) => {
        if (item.macadd === this.macAdd) {
          b = true
        }
      })
      return b
    },
    /**
     * @description: 提交表单
     */
    onSubmit () {
      const params = { macAdd: this.macAdd, id: this.air_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>
