<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="vehicleNo">
              <el-input v-model="form.vehicleNo" placeholder="请输入车牌号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆编号" prop="vehicleNumber">
              <el-input v-model="form.vehicleNumber" placeholder="请输入车辆编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型" prop="vehicleType">
              <el-input v-model="form.vehicleType" placeholder="请输入设备类型" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="vehicleModel">
              <el-input v-model="form.vehicleModel" placeholder="请输入设备型号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发动机号" prop="engineNo">
              <el-input v-model="form.engineNo" placeholder="请输入发动机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发动机型号" prop="engineModel">
              <el-input v-model="form.engineModel" placeholder="请输入发动机型号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备马力" prop="horsePower">
              <el-input v-model="form.horsePower" placeholder="请输入设备马力" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆轴数" prop="axlesNumber">
              <el-input v-model="form.axlesNumber" placeholder="请输入车辆轴数" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="装卸能力" prop="loadingCapacity">
              <el-input v-model="form.loadingCapacity" placeholder="请输入装卸能力" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发动机厂家" prop="engineManufacturer">
              <el-input v-model="form.engineManufacturer" placeholder="请输入发动机厂家" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆识别代码" prop="vinNo">
              <el-input v-model="form.vinNo" 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="handleHostAdd"
              v-if="hostList.length < 1"
              v-hasPermi="['gangkou:vehicle:add', 'gangkou:vehicle:edit']"
              >添加</el-button
            >
          </div>
          <el-table
            ref="hostTable"
            v-loading="hostListLoading"
            tooltip-effect="dark"
            :data="hostList"
            border
          >
            <el-table-column label="主机编号" align="center" prop="hostNo" show-overflow-tooltip min-width='120' />
            <el-table-column label="设备类型" align="center" prop="hostType" show-overflow-tooltip min-width='120' />
            <el-table-column label="厂商" align="center" prop="manufacturer" show-overflow-tooltip min-width='120' />
            <el-table-column label="是否有效" align="center" prop="isValid" show-overflow-tooltip min-width='80'>
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isValid"/>
              </template>
            </el-table-column>
            <el-table-column label="安装日期" align="center" prop="setupDate" show-overflow-tooltip min-width='120' />
            <el-table-column width="80px" align="center" label="操作" fixed="right" v-if="!nest" v-hasPermi="['gangkou:vehicle:edit', 'gangkou:host:edit']">
              <template slot-scope="scope">
                <el-popconfirm
                  title="确定解绑当前主机设备吗？"
                  @confirm="handleHostUnbind(scope.row)"
                >
                  <el-link slot="reference" style="margin-right: 5px;" type="danger" v-hasPermi="['gangkou:vehicle:edit']">解绑</el-link>
                </el-popconfirm>
                <el-link type="primary" v-hasPermi="['gangkou:host:edit']" @click="handleHostEdit(scope.row)">编辑</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card style="margin-top: 10px;" v-if="form.id">
          <div slot="header">
            <span>绑定RFID标签</span>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              style="margin-left: 10px;"
              size="mini"
              @click="handleRfidAdd"
              v-hasPermi="['gangkou:vehicle:add', 'gangkou:vehicle:edit']"
              >添加</el-button
            >
          </div>
          <el-table
            ref="rfidTable"
            v-loading="rfidListLoading"
            tooltip-effect="dark"
            :data="rfidList"
            border
          >
          <el-table-column label="标签编号" align="center" prop="rfidNo" show-overflow-tooltip min-width='120' />
          <el-table-column label="厂商" align="center" prop="manufacturer" show-overflow-tooltip min-width='120' />
          <el-table-column label="是否有效" align="center" prop="isValid" show-overflow-tooltip min-width='120' >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isValid"/>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip min-width='160' />
          <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="确定解绑当前RFID标签设备吗？"
                  @confirm="handleRfidUnbind(scope.row)"
                >
                  <el-link slot="reference" style="margin-right: 5px;" type="danger" v-hasPermi="['gangkou:vehicle:edit']">解绑</el-link>
                </el-popconfirm>
              <el-link type="primary" v-hasPermi="['gangkou:rfid:edit']" @click="handleRfidEdit(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>
    <RfidEditDialog ref="rfidEditDialog" nest @refresh="getRfidList"></RfidEditDialog>
    <HostEditDialog ref="hostEditDialog" nest @refresh="getHostList"></HostEditDialog>
    <HostSelectDialog ref="hostSelectDialog" @confirm="handleHostSelect"></HostSelectDialog>
    <InputDialog ref="rfidInputDialog" @refresh="getRfidList"></InputDialog>
  </el-dialog>
</template>

<script>
import EditDialogContent from '@/components/EditDialogContent';
import TableEditMixin from '@/mixins/table-edit-mixin';
import { addVehicle, updateVehicle } from "@/api/gangkou/vehicle/vehicle";
import { listRfid, delRfid } from "@/api/gangkou/device/rfid";
import { listHost, delHost, hostCheckBind } from "@/api/gangkou/device/host";
import RfidEditDialog from '@/views/gangkou/device/rfid/components/EditDialog';
import HostEditDialog from '@/views/gangkou/device/host/components/EditDialog';
import HostSelectDialog from '@/views/gangkou/device/host/components/SelectDialog';
import InputDialog from '@/views/gangkou/device/rfid/components/InputDialog';

export default {
  name: 'EditDialog',
  mixins: [TableEditMixin],
  dicts: ['sys_yes_no'],
  components: { EditDialogContent, RfidEditDialog, HostEditDialog, HostSelectDialog, InputDialog },
  pageInfo: {
    defaultForm: {
      vehicleNo: null,
      vehicleNumber: null,
      vehicleType: null,
      vehicleModel: null,
      engineNo: null,
      vinNo: null,
      engineModel: null,
      horsePower: null,
      axlesNumber: null,
      loadingCapacity: null,
      engineManufacturer: null,
      remark: null
    },
    title: '车辆档案',
    updateApi: updateVehicle,
    addApi: addVehicle,
  },
  props: {
    // 是否嵌套在其他信息页面中，此时不可编辑绑定关系
    nest: [Boolean],
  },
  data() {
    return {
      rules: {
        vehicleNo: [
          { required: true, message: "车牌号不能为空", trigger: "blur" }
        ],
        vehicleNumber: [
          { required: true, message: "车辆编号不能为空", trigger: "blur" }
        ],
        vehicleType: [
          { required: true, message: "车辆类型不能为空", trigger: "change" }
        ],
        vinNo: [
          { required: true, message: "车辆识别代码不能为空", trigger: "blur" }
        ],
      },
      rfidList: [],
      rfidListLoading: false,
      hostList: [],
      hostListLoading: false

    }
  },
  watch: {
    form: {
      handler(val) {
        this.getRfidList();
        this.getHostList();
      },
      immediate: true,
    }
  },
  methods: {
    // 获取RFID列表
    getRfidList() {
      this.rfidList = [];
      if (!this.form.id) {
        return;
      }
      this.rfidListLoading = true;
      listRfid({ vehicleId: this.form.id }).then(res => {
        this.rfidList = res.data || [];
        this.rfidListLoading = false;
      }).catch(e => {
        this.rfidListLoading = false;
      });
    },
    // 获取主机列表
    getHostList() {
      this.hostList = [];
      if (!this.form.id) {
        return;
      }
      this.hostListLoading = true;
      listHost({ vehicleId: this.form.id }).then(res => {
        this.hostList = res.data || [];
        this.hostListLoading = false;
      }).catch(e => {
        this.hostListLoading = false;
      });
    },
    // 添加主机
    handleHostAdd() {
      this.$refs.hostSelectDialog.open();
    },
    // 选中主机
    handleHostSelect(row) {

    },
    // 添加RFID
    handleRfidAdd() {
      this.$refs.rfidInputDialog.open(this.form);
    },
    // 主机解绑
    handleHostUnbind(row) {

    },
    // 主机编辑
    handleHostEdit(row) {
      this.$refs.hostEditDialog.open(row);
    },
    // RFID解绑
    handleRfidUnbind(row) {
      delRfid(row.id).then(res => {
        this.$message.success("解绑成功");
        this.getRfidList();
      });
    },
    // RFID编辑
    handleRfidEdit(row) {
      this.$refs.rfidEditDialog.open(row);
    }
  }
}
</script>

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