<template>
  <el-dialog :close-on-click-modal="false" custom-class="edit-dialog" width="60%" :append-to-body="nest"
    :close-on-press-escape="false" :visible.sync="dialogVisible" :title="title">
    <EditDialogContent>
      <el-form ref="form" :model="form" label-width="180" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标签编号" prop="rfidNo">
              <el-input v-model="form.rfidNo" readonly placeholder="请输入标签编号" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="是否有效" prop="isValid">
              <el-select v-model="form.isValid" placeholder="请选择" style="width: 100%;">
                <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="厂商" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入厂商" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-card v-if="form.id">
          <div slot="header">
            <span>绑定车辆</span>
            <!-- <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              style="margin-left: 10px;"
              size="mini"
              @click="handleVehicleAdd"
              v-if="vehicleList.length < 1"
              v-hasPermi="['gangkou:rfid:add', 'gangkou:rfid:edit']"
              >添加</el-button
            > -->
          </div>
          <el-table
            ref="hostTable"
            v-loading="vehicleListLoading"
            tooltip-effect="dark"
            :data="vehicleList"
            border
          >
            <el-table-column label="车辆编号" align="center" prop="vehicleNumber" sortable='custom' show-overflow-tooltip min-width='120' />
            <el-table-column label="车牌号" align="center" prop="vehicleNo" show-overflow-tooltip min-width='120' />
            <el-table-column label="车辆类型" align="center" prop="vehicleType" show-overflow-tooltip min-width='120' />
            <el-table-column label="设备型号" align="center" prop="vehicleModel" show-overflow-tooltip min-width='120' />
            <!-- <el-table-column width="86px" align="center" label="操作" fixed="right" v-if="!nest" v-hasPermi="['gangkou:vehicle:edit', 'gangkou:rfid:edit']">
              <template slot-scope="scope">
                <el-popconfirm
                  title="确定解绑当前车辆吗？"
                  @confirm="handleVehicleUnbind(scope.row)"
                >
                  <el-link slot="reference" style="margin-right: 5px;" type="danger" v-hasPermi="['gangkou:rfid:edit']">解绑</el-link>
                </el-popconfirm>
                <el-link type="primary" v-hasPermi="['gangkou:vehicle:edit']" @click="handleVehicleEdit(scope.row)">编辑</el-link>
              </template>
            </el-table-column> -->
          </el-table>
        </el-card>
      </el-form>
    </EditDialogContent>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeVisible">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </span>
    <VehicleEditDialog ref="vehicleEditDialog" nest @refresh="getVehicleList"></VehicleEditDialog>
    <!-- <SelectDialog ref="selectDialog" @confirm="handleVehicleSelect"></SelectDialog> -->
  </el-dialog>
</template>

<script>
import TableEditMixin from '@/mixins/table-edit-mixin';
import EditDialogContent from '@/components/EditDialogContent';
import { addRfid, updateRfid } from "@/api/gangkou/device/rfid";
import VehicleEditDialog from '@/views/gangkou/vehicle/components/EditDialog';
import { listVehicle } from "@/api/gangkou/vehicle/vehicle";
import SelectDialog from '@/views/gangkou/vehicle/components/SelectDialog.vue';

export default {
  name: 'EditDialog',
  mixins: [TableEditMixin],
  components: {EditDialogContent, VehicleEditDialog, SelectDialog},
  dicts: ['sys_yes_no'],
  pageInfo: {
    defaultForm: {
      vehicleId: null,
      rfidNo: null,
      manufacturer: null,
      isValid: 'Y',
      remark: null
    },
    title: 'RFID标签',
    updateApi: updateRfid,
    addApi: addRfid,
  },
  props: {
    // 是否嵌套在其他信息页面中，此时不可编辑绑定关系
    nest: [Boolean],
  },
  watch: {
    form: {
      handler(val) {
        this.getVehicleList();
      },
      immediate: true,
    }
  },
  data() {
    return {
      rules: {
        rfidNo: [
          { required: true, message: "标签编号不能为空", trigger: "blur" }
        ],
        isValid: [
          { required: true, message: "是否有效不能为空", trigger: "blur" }
        ],
      },
      vehicleList: [],
      vehicleListLoading: false
    }
  },
  methods: {
    // 获取车辆列表
    getVehicleList() {
      this.vehicleList = [];
      if (!this.form.vehicleId) {
        return;
      }
      this.vehicleListLoading = true;
      listVehicle({ id: this.form.vehicleId }).then(res => {
        this.vehicleList = res.data || [];
        this.vehicleListLoading = false;
      }).catch(e => {
        this.vehicleListLoading = false;
      });
    },
    // 添加车辆
    handleVehicleAdd() {
      this.$refs.selectDialog.open();
    },
    // 选择绑定车辆
    handleVehicleSelect(row) {

    },
    // 车辆解绑
    handleVehicleUnbind(row) {

    },
    // 车辆编辑
    handleVehicleEdit(row) {
      this.$refs.vehicleEditDialog.open(row);
    },
  }
}
</script>

<style scoped lang="scss">
</style>