<template>
  
  <div class="pumpContentBox flex">
    <div class="elForm">
      <el-form
          ref="ruleForm"
          :model="form"
          label-width="100"
          :rules='rules'
        >
        <el-form-item label="预测情况">
          <el-input
            v-model="form.qk"
            :disabled='true'
          ></el-input>
        </el-form-item>
        <el-form-item label="指派人员" prop="dispatchUser">
          <el-select 
            v-model="form.dispatchUser"
            placeholder="请选择指派人员"
            multiple
            filterable
            collapse-tags
            style="width:100%">
              <el-option v-for="item in userData"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId" />
          </el-select>
          <!-- <el-tree-select
            style="width: 100%"
            v-model="form.dispatchUser"
            :data="userData"
            placeholder="请选择接收人员"
            node-key="id"
            filterable
            multiple
            show-checkbox
            collapse-tags
            :render-after-expand="false"
            clearable
            :props="{
              value: 'id',
              label: 'name',
              children: 'children',
            }"
          /> -->
        </el-form-item>
        <el-form-item label="排渍车辆">
          <el-select 
            v-model="form.dispatchCar"
            placeholder="请选择排渍车辆"
            multiple
            filterable
            collapse-tags
            style="width:100%">
              <el-option v-for="item in carData"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="应急排水泵">
          <el-input-number v-model="form.pumpNumber" placeholder="请输入数量" style="width:40%"/>
        </el-form-item>
        <el-form-item label="预计值守" prop="datetimerange">
          <el-date-picker
            v-model="form.datetimerange"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY-MM-DD HH:mm:ss"
            style="width:100%"
          />
        </el-form-item>
        <el-form-item label="其他物资" prop="goodList">
          <div class="goodList">
            <el-row :gutter="10" v-for="(item,index) in form.goodList" :key="index" style="margin-bottom:10px">
              <el-col :span="12">
                <el-select 
                  filterable
                  v-model="item.supplyGoodId"
                  placeholder="请选择物资"
                  style="width:100%">
                    <el-option v-for="item in wzList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"/>
                </el-select>
              </el-col>
              <el-col :span="9">
                <el-input-number v-model="item.supplyGoodNum" placeholder="请输入数量" style="width:100%"/>
              </el-col>
              <el-col :span="3" v-if="index==0">
                <el-button type="primary" :icon="Plus" circle @click="addGoodList()"/>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="调度指令">
          <el-input
            type="textarea"
            v-model="dispatchInstruct"
            :autosize="{ minRows: 4, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="现场图片" prop="fileList">
          <ImageFileUpload :limit="4" :listType="'picture'" :saveFileArr="form.fileList"></ImageFileUpload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">下发调度建议</el-button>
          <!-- <el-button type="primary" @click="">视频通话</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="elTable">
      <el-table :data="tableData" height="100%" class="dispatchTable" stripe>
        <el-table-column label="场次降雨" prop="rainfallVenue" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.rainBeginTime!=''?moment(scope.row.rainBeginTime).format("YYYY-MM-DD HH:mm:ss"):'暂无' + "-" + scope.row.rainEndTime!=''?moment(scope.row.rainEndTime).format("YYYY-MM-DD HH:mm:ss"):'暂无'}}
          </template>
        </el-table-column>
        <el-table-column label="累计降雨量(mm)" prop="rainfall"/>
        <el-table-column label="气象预警级别">
          <template #default="scope">
            {{
              scope.row.warnGrade == "1"
                ? "Ⅰ"
                : scope.row.warnGrade == "2"
                ? "Ⅱ"
                : scope.row.warnGrade == "3"
                ? "Ⅲ"
                : scope.row.warnGrade == "4"
                ? "Ⅳ"
                : scope.row.warnGrade == "5"
                ? "预警"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="值守人">
          <template #default="scope">
            {{getChineseFun(userData, "userId",scope.row.watchUser, "nickName")}}
          </template>
        </el-table-column>
        <el-table-column label="是否内涝">
          <template #default="scope">
            {{
              scope.row.isWaterlogging == "0"
                ? "否"
                : scope.row.isWaterlogging == "1"
                ? "是"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <span @click="handleClick(scope.row)" class="pointer">选用</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="zishuidiaodu">
import { Plus } from '@element-plus/icons-vue'
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { ElMessageBox } from 'element-plus';
import { watchDispatchList ,dispatchOutbound,distributeTask} from "@/api/FloodControlAndDrainage.js";
import { vehicleListN } from "@/api/carApi";
import {listByGroupUnit } from '@/api/user';
import { getChineseFun } from '@/utils/ruoyi';
import { getDataName } from '@/utils/util.js'
// import { listUser } from '@/api/user';
import { managementWarehouseGoodList ,areaPersonList} from '@/api/MonitorAssetsOnMap';
const { proxy } = getCurrentInstance();
const props = defineProps({
  Getproperties: {
    type: Object,
  },
  // 数据id
  dataID: {
    type: [String, Number],
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
});
console.log(props)
let carData =ref([])
let userData =ref([])
let tableData =ref([])
let wzList =ref([])
let dispatchInstruct =ref('')

let baseInfo=ref({
  name:props.dataCode=="waterlogging"?props.Getproperties.wellCode:props.Getproperties.name,
  user:props.dataCode=="waterlogging"?props.Getproperties.peopleUser:props.Getproperties.watchAreaId,
})

let form =ref({
  dispatchType:'2',
  qk:`${baseInfo.value.name}可能发生内涝`,
  goodList:[
    {
      supplyGoodId:'',
      supplyGoodNum:0
    }
  ],
  dispatchUser:[],
  dispatchCar:[],
  watchPointId:props.dataID,
  fileList:[]
})

const rules = reactive({
  dispatchUser: [
    { required: true, message: '请选择指派人员', trigger: 'change' },
  ],
  datetimerange: [
    { required: true, message: '请选择预计执行时间', trigger: 'change' },
  ],
})
// 添加物资列表
function addGoodList(){
  form.value.goodList.push(
    {
      supplyGoodId:'',
      supplyGoodNum:0,
    }
  )
}
function onSubmit(){
  proxy.$refs["ruleForm"].validate(valid => {
    if (valid) {
      ElMessageBox.confirm(
        '审核通过后调度指令后系统将向APP发送调度指令并通过语音外呼自动语音拨打电话提醒!',
        `确认要将调度指令下发给${baseInfo.value.name}值班及带班领导吗？`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
      .then(() => {
        let parms=JSON.parse(JSON.stringify(form.value))
        parms.planWatchStartTime=proxy.moment(parms.datetimerange[0]).format("YYYY-MM-DD HH:mm:ss")
        parms.planWatchEndTime=proxy.moment(parms.datetimerange[1]).format("YYYY-MM-DD HH:mm:ss")
        parms.dispatchCar=parms.dispatchCar.length>0?parms.dispatchCar.join(","):''
        parms.dispatchUser=parms.dispatchUser.length>0?parms.dispatchUser.join(","):''
        parms.dispatchInstruct=dispatchInstruct.value
        parms.rainBeginTime=`${proxy.moment().format("YYYY-MM-DD")} 08:00:00`
        parms.rainEndTime=`${proxy.moment().add(1, 'days').format("YYYY-MM-DD")} 08:00:00`
        parms.dispatchImageAttachUrl= parms.fileList.length>0?(parms.fileList.map(i=>{return i.url})).join(','):''
        parms.taskType=props.dataCode=="waterlogging"?1:props.dataCode=="waterlogging_scheduling"?2:3
        delete parms.datetimerange
        
        distributeTask(parms).then(res => {
          if (res && res.code == 200) {
              let params={
                phones:getChineseFun(userData.value, "userId", form.value.dispatchUser.join(","), "phonenumber"),
                // phones:'15927167920',
                title:baseInfo.value.name,
                notice:dispatchInstruct.value
              }
              dispatchOutbound(params).then(res => {
                if (res && res.code == 200) {
                  proxy.$modal.msgSuccess("已下发")
                  emit('closePop',true)
                }else{
                  proxy.$modal.msgError(res.msg)
                }
              });
          }else{
            proxy.$modal.msgError(res.msg)
          }
        });
      })
      .catch(() => {
      })
    }
  })
}

/** 查询用户tree列表 */
function getData() {
  watchDispatchList({watchPointId:props.dataID,taskType:props.dataCode=="waterlogging"?1:props.dataCode=="waterlogging_scheduling"?2:3}).then(res=>{
    if(res.code==200){
      tableData.value=res.data
    }
  })
  areaPersonList({id:baseInfo.value.user}).then(res => {
    userData.value = res.data;
  });
  vehicleListN().then(res => {
    carData.value = res.data;
  });
  managementWarehouseGoodList().then(res => {
    wzList.value = res.data;
  });
}

function handleClick(row) {
  form.value.goodList=row.goodList
  form.value.dispatchUser=(row.dispatchUser.split(',')).map(Number)
  form.value.dispatchCar=row.dispatchCar!=''?row.dispatchCar.split(','):[]
}

watch(
  () => form.value,
  (value) => {
    console.log('w')
    let ry=''
    if(value.dispatchUser.length>0){
      ry= getChineseFun(userData.value, "userId", value.dispatchUser.join(","), "nickName")
    }
    let cl=''
    if(value.dispatchCar.length>0){
      cl= getChineseFun(carData.value, "id", value.dispatchCar.join(","), "licensePlate")
    }
    let textWz='无'
    let text=[]
    if(value.goodList.length>0){
      value.goodList.forEach(element => {
        if( element.supplyGoodId!=''&&element.supplyGoodNum>0){
          let name=getDataName({
            dataList:wzList.value,
            value:"id",
            label:"name",
            data: element.supplyGoodId
          })
          text.push(`${name}`+`${element.supplyGoodNum}`)
        }
      });
    }
    if(text.length>0){
      textWz=text.join("、")
    }
    let timeText='请填写预计值守时间'
    if (value.datetimerange && value.datetimerange.length > 0) {
      timeText = `预计值守时间${proxy.moment(value.datetimerange[0]).format("YYYY-MM-DD HH:mm:ss")}~${proxy.moment(value.datetimerange[1]).format("YYYY-MM-DD HH:mm:ss")}`;
    }
    let content = `${value.qk || ""}，建议指派${value.pq || ""}值守人员${
        ry || ""
      }立即前往值守点，派遣车辆${cl || ""},应急排水泵${value.pumpNumber || "0"}个，派遣物资${
        textWz || ""
      }，${timeText}。`;
      dispatchInstruct.value=content
  },
  { immediate: true ,deep:true}
);
onMounted(() => {
  console.log(props)
  getData();
});
</script>

<style lang="scss" scoped>
.pumpContentBox{
  height: 760px;
  .elForm{
    width:40%;
    overflow-y: auto;
    color: #CCDFFF;
  }
  .elTable{
    width:60%;
    overflow: hidden;
    padding-left: 20px;
  }
}
:deep(.el-textarea__inner){
  background: none;
  // box-shadow:0 0 1px #4364ac;
}
:deep(.el-form-item__label){
  color: #CCDFFF !important;
}
:deep(.el-textarea__inner){
  color: #CCDFFF !important;
}
:deep(.el-input__inner){
  color: #CCDFFF !important;
}
:deep(.el-textarea__inner){
  box-shadow:0 0 0 1px #4364ac inset !important;
}
:deep(.el-date-editor.el-input__wrapper){
  box-shadow:0 0 0 1px #4364ac inset !important;
}
:deep(.el-input-number__decrease){
  background: none;
  color: #409eff;
  border-color: #4364ac;
}
:deep(.el-input-number__increase){
  background: none;
  color: #409eff;
  border-color: #4364ac;
}
.goodList{
  width: 100%;
  overflow: hidden;
}
.pointer{
  cursor: pointer;
}
</style>