<template>
  <div class="zhamendiaodu flex">
    <div class="elForm">
      <el-form
          ref="ruleForm"
          :model="form"
          label-width="120"
          :rules="rules"
        >
        <el-form-item label="预测情况">
          <el-input
            v-model="form.remark"
            :disabled='true'
          ></el-input>
        </el-form-item>
        <el-form-item label="解决建议" prop="commandOpenPump">
          <el-select 
            v-model="form.commandOpenPump"
            placeholder="请选择解决建议"
            style="width:100%">
              <el-option v-for="item in pupNum"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开泵数量" prop="commandOpenNumber">
          <el-select 
            v-model="form.commandOpenNumber"
            placeholder="请选择开泵数"
            style="width:100%">
              <el-option v-for="item in pumpArray"
                :key="item"
                :label="item"
                :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="希望执行时间" prop="commandTime">
          <el-date-picker
            v-model="form.commandTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择执行时间"
            style="width:100%"
          />
        </el-form-item>
        <el-form-item label="通知人员">
          <div>{{form.commandUsers}}{{(serveData?.dutyPersonPhone)}}</div>
          <!-- <el-tree-select
            style="width: 100%"
            v-model="form.recipient"
            :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="调度指令" prop="commandContent">
          <el-input
            type="textarea"
            v-model="form.commandContent"
            :autosize="{ minRows: 4, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="现场图片" prop="fileList">
          <ImageFileUpload :limit="4" :listType="'picture-card'" :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="指令下发时间" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.commandTime }}
          </template>
        </el-table-column>
        <el-table-column label="指令开闸孔数" prop="commandOpenNumber"/>
        <el-table-column label="指令类容" prop="commandContent" show-overflow-tooltip/>
 <el-table-column label="指令通知人员" >
    <template #default="scope">
            {{getChineseFun(userData, "userId",scope.row.commandUsers, "nickName")}}
          </template>

        </el-table-column>
        <el-table-column label="指令通知人员手机号" >
    <template #default="scope">
            {{getChineseFun(userData, "userId",scope.row.commandUsers, "phonenumber")}}
          </template>

        </el-table-column>

        <!-- <el-table-column label="状态" prop="status" width="90">
          <template #default="{ row }">
            <span :class="row.status==1?'blue':''">{{row.status==0?'未执行':'已执行'}}</span>
          </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 class="paginationBox">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="paginationQuery.sizes"
              :total="paginationQuery.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
    </div>
  </div>
</template>

<script setup name="zhamendiaodu">
import { ElMessageBox } from 'element-plus';
import { pumpDispatchCommandPublish,dispatchOutbound,getGateScheduling,pumpDispatchCommand} from '@/api/FloodControlAndDrainage.js';
// import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { listUser } from '@/api/user';
import { getChineseFun } from '@/utils/ruoyi';
import { ref } from 'vue';

const { proxy } = getCurrentInstance();
const emit = defineEmits(["closePop"]);
const props = defineProps({
  Getproperties: {
    type: Object,
  },
  // 数据id
  dataID: {
    type: [String, Number],
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
});
const pupNum = [
  {
    label:'开闸',
    value:'1'
  },
  {
    label:'关闸',
    value:'0'
  }
]
const rules = reactive({
  commandOpenPump: [
    { required: true, message: '请选择决策建议', trigger: 'change' },
  ],
  commandTime: [
    { required: true, message: '请选择执行时间', trigger: 'change' },
  ],
  commandContent: [
    { required: true, message: '请输入调度指令', trigger: 'blur' },
  ],
})
let serveData =ref({})
let userData =ref([])
let tableData =ref([])
let pumpArray =ref([])
let form =ref({})
let paginationQuery= reactive({
    current: '1',
    size: '10',
    total: 0,
  })
function onSubmit(){
  proxy.$refs["ruleForm"].validate(valid => {
    if (valid) {
      ElMessageBox.confirm(
        '审核通过后调度指令后系统将向APP发送调度指令并通过语音外呼自动语音拨打电话提醒!',
        `确认要将调度指令下发给${serveData.value.name}值班及带班领导吗？`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
      .then(() => {
        debugger
        pumpDispatchCommandPublish(form.value).then(res => {
          if (res && res.code == 200) {
            if(serveData.value.dutyPersonPhone!=''){
              let params={
                phones:serveData.value.dutyPersonPhone,
                // phones:'15927167920',
                title:serveData.value.gateName,
                notice:form.value.commandContent
    
              }
              console.log('语音',params);
              dispatchOutbound(params).then(res => {
                if (res && res.code == 200) {
                  proxy.$modal.msgSuccess("已下发")
                  getInfo()
                }else{
                  proxy.$modal.msgError(res.msg)
                }
              });
            }
          }else{
            proxy.$modal.msgError(res.msg)
          }
        });

      })
      .catch(() => {
      })
    }
  })
}

/** 查询用户tree列表 */
function getInfo() {
    console.log('Getproperties',props.Getproperties);
  let params={
    id:props.Getproperties.dataId,
  }
  getGateScheduling(params).then(res => {
    if (res && res.code == 200) {
      serveData.value=res.data
      for(let i=1;i<=serveData.value.gateHole;i++){
        pumpArray.value.push(i)
      }
      let text1=serveData.value?.dispatchInstructionBegin||'';
      let text2=serveData.value?.dispatchInstructionEnd||'';
      form.value={
        commandState:'1',
        pumpSiteId:serveData.value.gateId,
        siteType:'sz',
        remark:serveData.value.forecastSituation,
        commandOpenPump:serveData.value.suggestionFlag,
        commandOpenNumber:serveData.value.suggestionOpenGateHole,
        commandUsers:serveData.value.dutyPerson,
        commandContent:text1+`${serveData.value.suggestionOpenGateHole}`+text2,
      }
      getData()
    }
  })
}

function getData() {
    let params={
        siteType:'sz',
           pageNum:paginationQuery.current,
    pageSize: paginationQuery.size,
        pumpSiteId:props.Getproperties.dataId,
    }
  pumpDispatchCommand(params).then(res=>{
    if(res.code==200){
        
      tableData.value=res.data

      paginationQuery.total = res.total;

    }
  })
}

function handleClick(row) {
  form.value.commandOpenNumber=row.actualOpenNumber
}
/** 查询用户tree列表 */
function getlistUser() {

  listUser().then(res => {
    userData.value = res.data;
  });

}
const handleSizeChange = val => {
  paginationQuery.size = val;
  getData()
};
const handleCurrentChange = val => {
  paginationQuery.current = val;
  getData()
};
watch(
  () => form.value.commandOpenNumber,
  (value) => {
    let text1=serveData.value.dispatchInstructionBegin||''
    let text2=serveData.value.dispatchInstructionEnd||''
    let text=text1+`${value}`+text2;
    form.value.commandContent=text
  }
);
onMounted(() => {
  getInfo();
  getlistUser()
});
</script>

<style lang="scss" scoped>
.zhamendiaodu{
  height:100%;
  overflow: hidden;
  .elForm{
    width: 40%;
    overflow: auto;
    color: #CCDFFF;
  }
  .elTable{
    width: 60%;
    height:calc(100% - 120px);
    // 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;
}
.pointer{cursor: pointer;}
</style>