<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="hostNo">
              <el-input v-model="form.hostNo" placeholder="请输入主机编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流量卡号" prop="simNo">
              <el-input v-model="form.simNo" placeholder="请输入流量卡号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <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="8">
            <el-form-item label="厂商" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入厂商" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备类型" prop="hostType">
              <el-input v-model="form.hostType" placeholder="请输入设备类型" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安装日期" prop="setupDate">
              <el-date-picker clearable
                v-model="form.setupDate"
                style="width:100%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择安装日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生效日期" prop="effectiveDate">
              <el-date-picker clearable
                v-model="form.effectiveDate"
                style="width:100%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择生效日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="失效日期" prop="expiringDate">
              <el-date-picker clearable
                v-model="form.expiringDate"
                style="width:100%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择失效日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最后工作时间" prop="lastWorkDate">
              <el-date-picker clearable
                v-model="form.lastWorkDate"
                style="width:100%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择最后工作时间">
              </el-date-picker>
            </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:host:add', 'gangkou:host: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:host: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:host: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>
    <SelectDialog ref="selectDialog" @confirm="handleVehicleSelect"></SelectDialog>
  </el-dialog>
</template>

<script>
import TableEditMixin from '@/mixins/table-edit-mixin';
import EditDialogContent from '@/components/EditDialogContent';
import { addHost, updateHost } from "@/api/gangkou/device/host";
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,
      hostType: null,
      manufacturer: null,
      hostNo: null,
      simNo: null,
      setupDate: null,
      effectiveDate: null,
      expiringDate: null,
      lastWorkDate: null,
      isValid: null,
      remark: null
    },
    title: '主机',
    updateApi: updateHost,
    addApi: addHost,
  },
  props: {
    // 是否嵌套在其他信息页面中，此时不可编辑绑定关系
    nest: [Boolean],
  },
  data() {
    return {
      rules: {
        hostNo: [
          { required: true, message: "主机编号不能为空", trigger: "blur" }
        ],
        simNo: [
          { required: true, message: "流量卡号不能为空", trigger: "blur" }
        ],
        isValid: [
          { required: true, message: "是否有效不能为空", trigger: "blur" }
        ],
      },
      vehicleList: [],
      vehicleListLoading: false
    }
  },
  watch: {
    form: {
      handler(val) {
        this.getVehicleList();
      },
      immediate: true,
    }
  },
  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.vehicleEditDialog.open(row);
    },
  }
}
</script>

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