<template>
  <div class="ckform">
    <el-form :model="allData.form"
             :rules="allData.rules"
             ref="userRef"
             label-width="80px">

      <el-row>
        <el-col :span="24">
          <el-form-item label="调度名字"
                        prop="dispatchName">
            <el-input v-model="allData.form.dispatchName"
                      placeholder="请输入调度名字" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="起点位置"
                        prop="startPoint">
            <el-input v-model="allData.form.startPoint"
                      placeholder="请输入起点位置" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="终点位置"
                        prop="endPoint">
            <el-input v-model="allData.form.endPoint"
                      @focus="openMapDialog"
                      placeholder="终点位置" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="接收人"
                        prop="receptionStaffUserId">
            <el-select filterable
                       v-model="allData.form.receptionStaffUserId"
                       placeholder="选择接收人"
                       @change='personchange'>
              <el-option v-for="dict in  allpeople"
                         :key="dict.userId"
                         :label="dict.nickName"
                         :value="dict.userId" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="联系方式"
                        prop="receptionStaffPhone">
            <el-input v-model="allData.form.receptionStaffPhone"
                      placeholder="联系方式" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="期望时间"
                        prop="expectTime">
            <el-date-picker type="datetime"
                            size="small"
                            v-model="allData.form.expectTime"
                            placeholder="请选择期望时间"
                            value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="运输车辆"
                        prop="vechicleId">
            <el-select filterable
                       v-model="allData.form.vechicleId"
                       placeholder="选择运输车辆"
                       @change='buschange'>
              <el-option v-for="item in allbuslist"
                         :key="item.id"
                         :label="item.vehicleType"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">

        </el-col>
      </el-row>

      <div class="dialog-footer">
        <el-button @click="closebg"
                   size="small"
                   class="cancel">取 消</el-button>
        <el-button type="primary"
                   size="small"
                   @click="confirms">提 交</el-button>
      </div>

    </el-form>
  </div>

  <!-- 地址选择 -->
  <el-dialog title="选择单位地址"
             v-model="mapDialogOpen"
             width="1100px"
             append-to-body
             destroy-on-close
             class="dialog-detail-box">
    <div class="map-box"
         style="height: 630px">
      <mapBox :isShowTool="false"
              :isShowSearch="true"
              :isSelectAddress="true"
              @getPlace="getAddress"></mapBox>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary"
                   @click="mapDialogOpen = false">确 定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>


import {
  listplanManagerPersonnel,
} from "@/api/business/planManagerPersonnel";

import {
  getperson,
  fxFloodsave,
  fxFloodcloseSave,
  getLevelList,

  Dispatchinfo,
  setMaterialsList,
  getcheliang,
  fxDispatchInfo
} from "@/api/cockpit";

import {
  listemergencyVehicle,
} from "@/api/business/emergencyVehicle";

import {
  listUser,
} from "@/api/system/user";

import { getImageUrl, removeAaary, findTreeObj } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();
import { gettree, getpointTrees } from "@/api/business/floodPoint";
import bus from "@/utils";

const mapDialogOpen = ref(false); //地图弹框
import mapBox from "@/components/Map/index.vue";
const weatherpop = ref(false);
const deptOptions = ref(undefined);
const allpeople = ref([]); //所有人
const allbuslist = ref([]); //所有车辆

const props = defineProps({
  yuanname: {
    type: String,
  },
  getpropsvalue: {
    type: String,
  },
  getnumber: {
    type: String,
  },
  materialsInfos: {
    type: Object,
  },
  pointfeature: {
    type: Object,
  }
})

const allData = reactive({
  personerlist: [],
  pickerOptionsEnd: {
    disabledDate: (time) => {
      return (
        time.getTime() < new Date().getTime()
      )
    },
  },
  form: {
    dispatchName: '',
    startPoint: props.pointfeature.position,
    startPointX: props.pointfeature.lon,
    startPointY: props.pointfeature.lat,
    endPoint: '',
    endPointX: '',
    endPointY: '',
    receptionStaffUserId: '',
    receptionStaffPhone: '',
    receptionStaff: '',
    expectTime: '',
    vechicleId: '',
    vechicleContactInformation: '',
    vechiclePersonLiable: '',
    vechicleUserId: '',

    materialsInfos: props.materialsInfos,
    outboundPersonnel: props.pointfeature && props.pointfeature.personLiable,
    outboundPersonnelPhone: props.pointfeature && props.pointfeature.contactInformation,
    outboundUserId: props.pointfeature && props.pointfeature.personLiableId,
  },

  rules: {
    dispatchName: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    startPoint: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    endPoint: [
      { required: true, message: '请输入', trigger: 'change' },
    ],
    receptionStaffUserId: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    receptionStaffPhone: [
      { required: true, message: '请输入', trigger: 'change' },
    ],
    expectTime: [
      { required: true, message: '请输入', trigger: 'change' },
    ],
    vechicleId: [
      { required: true, message: '请输入', trigger: 'change' },
    ],
  },

  type2: false,   //选择人员弹框
  watchkeeperList: {},  //当前值班人员的list
  detailvisibi: false,   //报警点详情的窗口
  indexnub: '',
  videonub: '',
  boxindex: 1, //防汛2才会用到 报警信息/险情上报的切换
  handleForm: {},

  userTreeList: [],

  selectList: [],
  //列表相关
  listTypeInfo: {
    levelList: [],
    tableData: [
      // {
      //   departmentId: 'xxxxxx',
      //   departmentName: 'xxxxxx',
      //   jobTitle: 'xxxxxx',
      //   personnelId: '2',
      //   personnelName: 'xxxxxx',
      //   personnelPhone: 'xxxxxx',
      // },
      // {
      //   departmentId: 'xxxxxx',
      //   departmentName: 'xxxxxx',
      //   jobTitle: 'xxxxxx',
      //   personnelId: '2',
      //   personnelName: 'xxxxxx',
      //   personnelPhone: 'xxxxxx',
      // },
      // {
      //   departmentId: 'xxxxxx',
      //   departmentName: 'xxxxxx',
      //   jobTitle: 'xxxxxx',
      //   personnelId: '2',
      //   personnelName: 'xxxxxx',
      //   personnelPhone: 'xxxxxx',
      // },
      // {
      //   departmentId: 'xxxxxx',
      //   departmentName: 'xxxxxx',
      //   jobTitle: 'xxxxxx',
      //   personnelId: '2',
      //   personnelName: 'xxxxxx',
      //   personnelPhone: 'xxxxxx',
      // },
      // {
      //   departmentId: 'xxxxxx',
      //   departmentName: 'xxxxxx',
      //   jobTitle: 'xxxxxx',
      //   personnelId: '2',
      //   personnelName: 'xxxxxx',
      //   personnelPhone: 'xxxxxx',
      // },
    ],
  },
  selectlevelList: [
    // { name: '蓝色预警', value: 1, },
    // { name: '黄色预警', value: 2, },
    // { name: '橙色预警', value: 3, },
    // { name: '红色预警', value: 4, },
  ]
});


// 获得所有人的接口
function getallpeople () {
  let params = {
    pageNum: 1,
    pageSize: 9999
  }
  listUser(params).then(
    (res) => {
      allpeople.value = res.data
    }
  );
}

function Getbuslist () {
  let params = {
    pageNum: 1,
    pageSize: 9999
  }
  listemergencyVehicle(params).then(
    (res) => {
      allbuslist.value = res.data
    }
  );
}


function changeitem (type) {
  allData.actived = type;
}

//打开单位地址地图弹框
function openMapDialog () {
  mapDialogOpen.value = true;
  setTimeout(() => {
    if (window.newfiberMap && allData.form.endPointX && allData.form.endPointY) {
      let endPoint = [allData.form.endPointX, allData.form.endPointY];
      newfiberMap.removeByIds(["addressSearch"]);
      newfiberMap.geojsonToMap(
        NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
          {
            id: "addressSearch",
            name: allData.form.endPoint,
            geometrys: `POINT(${endPoint.join(" ")})`,
            type: NewFiberMap.Enum.VectorType.ICON,
            style: {
              url:
                NewFiberMapConfig.SDK_INIT_SRC_PREFIX +
                "/static/images/running_path/marker.png",
              width: 50,
              height: 50,
            },
            labelOptions: {
              font: "13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC",
              color: "rgb(255,255,255,1)",
              pixelOffset: [0, -38],
              backgroundColor: "rgba(64,158,255,1)",
              showBackground: true,
              distanceDisplayCondition: [Number.MIN_VALUE, 55000],
            },
          },
        ])
      );
      newfiberMap.getMap().flyTo(newfiberMap.getLayers(['addressSearch'][0]));
    }
  }, 100);
}

function getAddress (val) {
  console.log("val", val);
  allData.form.endPoint = val.caseAddress;
  allData.form.endPointX = val.lonLat[0];
  allData.form.endPointY = val.lonLat[1];
}

function opentelephone (obj) {
  // console.log(obj);
}

function handleEdit (index, row) {

};

// 获取接收人/所有用户的信息
function getFXPersonnel () {
  getperson().then(res => {
    allData.personerlist = res.data
  });
}

// 获得等级相关
function GetLevelList () {
  getLevelList().then(res => {
    console.log(res.data);
    allData.selectlevelList = res.data
    var obj = allData.selectlevelList.filter(item => { return item.id == allData.form.planLevelTypeId })[0]
    console.log(obj);
    allData.form.planLevelTypeName = obj.planLevelTypeName
  })
}

// 根据传递过来的等级查询相关的人员
function Getperson () {
  listplanManagerPersonnel({ planId: allData.form.planLevelTypeId }).then(res => {
    console.log('GetpersonTree', res.data);
    let arr = []
    allData.form.detailSaveRequestList = []

    res.data.map(item => {
      arr.push(item.concatPersonnelUserId)
    })
    // allData.$refs.trees.setCheckedKeys(arr);

    proxy.$refs["trees"].setCheckedKeys(arr)


    let newARR = []
    arr.forEach(item => {
      let obj = findTreeObj(allData.userTreeList, item);
      if (obj) {
        console.log(obj);
        newARR.push(obj)
      }
    })

    allData.listTypeInfo.tableData = allData.selectList = newARR
    console.log('newARR', newARR);

    newARR.map(item => {
      allData.form.detailSaveRequestList.push({
        concatPersonnelName: item.departmentName, 	//联系人名称			
        concatPersonnelPhone: item.contactInformation,	//联系人手机号			
        concatPersonnelUserId: item.userId,	//联系人用户id			
        departmentName: item.departmentHead,	//单位名称			
        jobTitle: item.jobTitle,  //职位
      })
    })

    // allData.selectList = res.data
  });
}

function personchange (value) {
  var obj = allpeople.value.filter(item => { return item.userId == value })[0]
  allData.form.receptionStaffPhone = obj.phonenumber
  allData.form.receptionStaff = obj.nickName

}

function buschange (value) {
  var obj = allbuslist.value.filter(item => { return item.id == value })[0]
  allData.form.vechiclePersonLiable = obj.personLiable
  allData.form.vechicleContactInformation = obj.contactInformation
  allData.form.vechicleUserId = obj.userId

}


function opendiag2 () {
  allData.type2 = true
}

// 调度确认的按钮
function confirms () {
  proxy.$refs["userRef"].validate((valid) => {
    if (valid) {
      console.log('allData.form', allData.form);
      fxDispatchInfo(allData.form).then(res => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess("发布成功");
          bus.emit("closediaodu");

          allData.loading = false
          // 更新列表
        } else {
          proxy.$modal.msgWarning(res.msg);
        }
      })
    } else {
      console.log('error submit!!');
      return false;
    }
  })
}

// 默认tree接口
function gettreeList () {
  gettree().then(res => {
    console.log('tree', res.data);
    allData.userTreeList = res.data
  })
}

// 节点过滤
function filterNode (value, data) {
  if (!value) return true;
  return data.departmentName.includes(value)
}
// 节点过滤
function filterNode2 (value, data) {
  if (!value) return true;
  return data.departmentName.includes(value)
}

function check (data, node) {
  console.log(node);
  node.checkedNodes.map(item => {
    if (item.type == 0) {
      removeAaary(node.checkedNodes, item)
    }
  })
  node.halfCheckedNodes.map(item => {
    if (item.type == 0) {
      removeAaary(node.halfCheckedNodes, item)
    }
  })
  allData.selectList = [...node.checkedNodes, ...node.halfCheckedNodes]
  console.log(allData.selectList);

  for (var i = allData.selectList.length - 1; i > -1; i--) {
    if (allData.selectList[i].type == 0) {
      removeAaary(allData.selectList, allData.selectList[i])
    }
  }

  console.log(allData.selectList);

}
// 关闭弹框
function closebg () {
  bus.emit("showformTofalse");
  allData.loading = false
}
// 关闭选择人员弹框
function closebg2 () {
  allData.type2 = false
  allData.loading = false
}

onMounted(() => {
  getallpeople()
  Getbuslist()
  console.log('props', props);
  allData.form.planLevelTypeId = props.getpropsvalue
  // getFXPersonnel()
  // gettreeList()
  // GetLevelList()
  // Getperson()
});
</script>
<style lang="scss" scoped>
//@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  flex-direction: column;
}

.transpatents {
  background: transparent !important;
}

::v-deep .el-textarea__inner {
  background-color: #042c52;
  box-shadow: none;
}

::v-deep .el-button {
  color: #fefeff !important;
  background: #0f53db !important;
  border: none !important;
}

.dialog-footer {
  text-align: right;
  margin-top: 10px;
}

::v-deep .el-table {
  height: 200px;
}

::v-deep .el-tree__empty-block {
  min-height: 0;
}

::v-deep .el-tree {
  background: transparent;
}

::v-deep .el-tree-node__content:hover {
  background-color: #274470;
  color: #fff;
}

.custom-body {
  overflow-y: auto !important;
}

::v-deep .el-input__inner {
  color: #fff;
}

::v-deep .el-textarea__inner {
  color: #fff;
}

.ckform {
  padding: 20px;
  padding-top: 30px;
}
</style>