<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ pageInfo[pageType].title }}</span>
      <div>
        <el-button
          size="small"
          type="primary"
          v-if="['add', 'edit'].includes(pageType)"
          @click="_onSave"
          >保存</el-button
        >
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <el-form
        ref="formRef"
        :model="listQuery"
        :inline="true"
        label-position="top"
        :rules="rules"
      >
        <div
          style="
            width: 25%;
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
          "
        >
          <div style="position: relative; width: 90px; height: 100px">
            <el-upload
              action="/mosty-api/mosty-base/minio/image/upload/id"
              :on-change="upImgFile"
              :on-success="upImg"
              :show-file-list="false"
            >
              <el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
              <el-icon v-else>
                <Plus></Plus>
              </el-icon>
              <span
                v-if="imgUrl"
                style="position: absolute; top: -52px; right: -20px"
              >
                <el-icon size="20" @click.stop="deletImg">
                  <Close />
                </el-icon>
              </span>
            </el-upload>
          </div>
        </div>
        <el-form-item style="width: 20%" prop="ssbmdm" label="所属部门">
          <MOSTY.Department
            width="100%"
            clearable
            v-model="listQuery.ssbmdm"
            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
          />
        </el-form-item>
        <el-form-item style="width: 40%" prop="bklb" label="布控类别">
          <el-select v-model="listQuery.bklb" placeholder="请选择布控类别">
            <el-option
              v-for="dict in dict.D_BZ_CLBKLX"
              :key="dict.value"
              :value="dict.value"
              :label="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 40%" prop="bkcph" label="车牌号">
          <el-input
            v-model="listQuery.bkcph"
            placeholder="请输入布控车辆车牌号"
            style="width: 100%"
            clearable
          />
        </el-form-item>

        <el-form-item style="width: 40%" prop="bkkssj" label="开始时间">
          <el-date-picker
            v-model="listQuery.bkkssj"
            type="datetime"
            placeholder="请选中开始时间"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
        </el-form-item>
        <el-form-item style="width: 40%" prop="bkjssj" label="结束时间">
          <el-date-picker
            v-model="listQuery.bkjssj"
            type="datetime"
            placeholder="请选中结束时间"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
        </el-form-item>

        <el-form-item style="width: 40%" prop="bkqy" label="布控区域">
          <el-input
            v-model="listQuery.bkqy"
            placeholder="请输入布控区域"
            style="width: 100%"
            clearable
          />
        </el-form-item>
        <el-form-item style="width: 40%" prop="bkzt" label="布控状态">
          <el-select v-model="listQuery.bkzt" placeholder="请选择布控状态">
            <el-option
              v-for="dict in dict.D_BZ_RCBKZT"
              :key="dict.value"
              :value="dict.value"
              :label="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 40%" prop="bkfw" label="布控范围">
          <el-select v-model="listQuery.bkfw" placeholder="请选择布控状态">
            <el-option
              v-for="dict in dict.D_BZ_RCBKFW"
              :key="dict.value"
              :value="dict.value"
              :label="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 40%" prop="bkczlx" label="布控操作类型">
          <el-input
            v-model="listQuery.bkczlx"
            placeholder="请输入布控区域"
            style="width: 100%"
            clearable
          />
        </el-form-item>
        <el-form-item style="width: 40%" prop="bkdxtzm" label="布控对象特征码">
          <el-input
            v-model="listQuery.bkdxtzm"
            placeholder="请输入布控区域"
            style="width: 100%"
            clearable
          />
        </el-form-item>
        <el-form-item style="width: 40%" prop="bkkk" label="布控卡口">
          <div class="diviput" @click="showJcz = true">
            <span v-if="listQuery.bkkk">{{ listQuery.bkkk }}</span>
            <span class="placeholder" v-else> 请选择布控卡口</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { BkrwinsertEntity, BkrweditEntity } from "@/api/mosty-jcz.js";
import * as MOSTY from "@/components/MyComponents/index";
import emitter from "@/utils/eventBus.js";
import Jczloder from "@/components/loder/Jczloder.vue";
import GdMap from "@/components/GdMap/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  dict: {
    type: Object,
    default: () => {}
  }
});
const rules = reactive({
  bkdxtzm: [
    {
      required: true,
      message: "请输入布控对象特征码"
    }
  ],
  bkbsm: [
    {
      required: true,
      message: "请输入布控标识码"
    }
  ],
  bkkk: [
    {
      required: true,
      message: "请选择布控卡口"
    }
  ],
  bkjssj: [
    {
      required: true,
      message: "请选择布控结束时间"
    }
  ],
  bkkssj: [
    {
      required: true,
      message: "请选择布控开始时间"
    }
  ],
  bkzt: [
    {
      required: true,
      message: "请选择布控状态"
    }
  ],
  bkcph: [
    {
      required: true,
      message: "请输入布控车辆车牌号"
    }
  ],
  bkqy: [
    {
      required: true,
      message: "请输入布控区域",
      trigger: "change"
    }
  ],
  bklb: [
    {
      required: true,
      message: "请输入布控类别",
      trigger: "change"
    }
  ],
  bkmc: [
    {
      required: true,
      message: "请输入布控名称"
    }
  ]
});
const formRef = ref(null);
const emit = defineEmits(["getjczgetXfllList"]);
const dialogForm = ref(false);
const listQuery = ref({});
const pageInfo = {
  edit: {
    title: "编辑",
    url: ""
  },
  add: {
    title: "新增",
    url: ""
  },
  detail: {
    title: "详情"
  }
};

let pageType = ref("add");

// 初始化数据
const init = (type, row) => {
  pageType.value = type;
  dialogForm.value = true;
  // 根据type和row初始化表单数据
  tabHeightFn();
  if (type == "edit") {
    listQuery.value = { ...row };
  } else {
    listQuery.value = {};
  }
};
//保存
const _onSave = () => {
  if (!formRef) return;
  formRef.value.validate((valid, fields) => {
    if (valid) {
      const promes = { ...listQuery.value, bklx: "02" };
      if (pageType.value == "add") {
        BkrwinsertEntity(promes).then((res) => {
          ElMessage({ message: "新增成功", type: "success" });
          emit("getjczgetXfllList");
          close();
        });
      } else {
        BkrweditEntity(promes).then((res) => {
          ElMessage({ message: "修改成功", type: "success" });
          emit("getjczgetXfllList");
          close();
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
  console.log();
};
// 图片上传
const imgUrl = ref();
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
const upImg = (row) => {
  listQuery.value.bkzp = row.data;
  imgUrl.value = urlImg.value + row.data;
};

//打开弹窗
const showJcz = ref(false);

const JczMsg = (val) => {
  listQuery.value.bkkk = val.jczmc;
  listQuery.value.kkId = val.id;
};
//页面关闭
const close = () => {
  dialogForm.value = false;
  listQuery.value = {};
};
// 表格高度计算
const tableHeight1 = ref();
const tabHeightFn = () => {
  tableHeight1.value = window.innerHeight - 450;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;
  .head_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .cntinfo {
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
  }
}
.my_transfer {
  height: calc(100% - 50px);
  display: flex;
  .btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
  }
  .left {
    margin: 12px;
    flex: 1;
    position: relative;
    .tableBox {
      position: absolute;
      width: 100%;
    }
    .serch {
      position: relative;
      width: 100%;
      // height: 96px;
      > .el-form--inline {
        display: block;
        width: 100%;
        padding: 0;
        > .el-form-item--default {
          width: 31%;
        }
      }
    }
    .tableBox {
      width: 100%;
    }
  }
  .right {
    width: 380px;
    margin: 12px;
  }
}
.phone {
  width: 95px;
  height: 120px;
  .el-image {
    width: 95px;
    max-height: 120px;
  }
}
::v-deep .el-upload {
  width: 90px;
  height: 100px;
  border: 1px dashed #000000;
  margin-bottom: 14px;
  .el-icon {
    margin-top: 34px;
    font-size: 26px;
  }
  .el-image {
    width: 100%;
    height: 100%;
  }
}
.mapbox {
  width: 1000px;
  padding: 0 10px;
  height: 400px;
  box-sizing: border-box;
  background: #000;
}
.diviput {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #c0c4cc;
  color: #000;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  .placeholder {
    color: #b5b5b5;
  }
}
::v-deep .el-icon svg {
  color: #000000 !important;
}
</style>
