<template>
  <div  class="go-title-03">
    <div class="contbox max-w">
      <el-row style="margin-top:20px;">
          <el-col :span="4">
              <span class="labspan">任务详情：</span>
          </el-col>
          <el-col :span="20">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="taskContent"></el-input>

          </el-col>
      </el-row>
    </div>
    <div class="flex jc-sb sectionbox">
      <div class="sectionboxleftli secli">
        <div class="sectitle">用户名</div>
        <n-input
          size="small"
          v-model:value="taskUserName"
          :minlength="1"
          type="text"
          placeholder="人员姓名"
        >  
        </n-input>
        <div class="selectbox">
          <n-select 
            clearable
            size="small" 
            @change="selectChange"
            placeholder="请选择单位" 
            key="id"  
            label-field="unitName"
            value-field="unitName"
            v-model:value="unitsValue" 
            :options="unitsOptions" 
          />
        </div>
        <div class="btnbox">
          <n-button type="info" @click="getPeopleList">查询</n-button>
        </div>
        <div class="btnbox">
          <n-button type="success" @click="sendClick">发送</n-button>
        </div>
      </div>
      <div class="sectionboxrightli secli">
        <el-table
          ref="multipleTable"
          size="mini"
          :data="TableDatas"
          tooltip-effect="dark"
          :reserve-selection="true"
          class="tabbox"
          @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
            >
              <!-- <template slot-scope="scope">
                  <span style="color:#ffffff;">{{scope.row.name}}</span> &nbsp;
                  <el-tag size="mini" v-show="scope.row.unitName">{{ scope.row.unitName }}</el-tag>

                  <el-tag size="mini" type="success" v-show="scope.row.online == 1"  style="margin-left:12px;">在线</el-tag>
              </template> -->
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, ref, onMounted, defineComponent } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { EventBus } from '@/utils/eventBus'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();
const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const taskUserName = ref()
const unitsValue = ref()
const taskContent = ref()
const receivePeople = ref()
const lng = ref()
const lat = ref()

const { w, h } = toRefs(props.chartConfig.attr)
const {
  textColor,
  textSize,
  secBackground,
  InpBackgroundColor,
  InpBorderColor,
  InpTextColor,
  InpTextSize,
  unitsOptions,
  treeSize,
  treeColor,
  TableColumns,
  TableDatas
} = toRefs(props.chartConfig.option)


onMounted(() => {
  getReceiveGroup()
  getPeopleList()
  // 获取eventBus传过来的值
  EventBus.on(props.chartConfig.id + 'taskGraphic', (data) => {
    lng.value = data.lng
    lat.value = data.lat
  });
})
const getReceiveGroup =  ()=>{
  axios({
      method: "get",
      url: VITE_GLOB_API_URL + '/api/FireManagement/GetUserUnit',
      data: {
        pageIndex: 1,
        pageSize: 999,
      },
      headers: {
          'X-Token': localStorage.getItem("X-Token")
      }
  }).then(res => {
      props.chartConfig.option.unitsOptions = res.data.result
  })
}
const getPeopleList = ()=>{
  let srcs = '/api/FireManagement/LoadFireClueUser?username='+taskUserName.value+'&unitname='+unitsValue.value
  axios({
      method: "get",
      url: VITE_GLOB_API_URL + '/api/FireManagement/LoadFireClueUser',
      params: {
        username: taskUserName.value,
        unitname: unitsValue.value
      },
      headers: {
          'X-Token': localStorage.getItem("X-Token")
      }
  }).then(res => {
      props.chartConfig.option.TableDatas = res.data.result
  })
}
const selectChange = (e)=>{
  unitsValue.value = e
}
const handleSelectionChange = (val)=> {
  receivePeople.value = val
}
const sendClick = ()=>{
  if(!receivePeople.value || receivePeople.value.length == 0){
    ElMessage({
      message: '请选择接收人',
      type: 'warning',
    })
    return
  }
  let querys = {
      content: taskContent.value,
      lng: lng.value,
      lat: lat.value,
      recipientUsers: receivePeople.value.map(e => e.id)
  }
  axios({
      method: "post",
      url: VITE_GLOB_API_URL + '/api/FireManagement/IssuedFireClueTask',
      data: querys,
      headers: {
          'X-Token': localStorage.getItem("X-Token")
      }
  }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          message: res.data.message,
          type: 'success',
        })
      } else {
        ElMessage({
          message: res.data.message,
          type: 'error',
        })
      }
      if(!res){
        ElMessage({
          message: res,
          type: 'error',
        })
      }
  })
}
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  height: v-bind('h');
  .contbox{
    margin-bottom: 15px;
  }
  .max-w{
    width: 100%;
  }
  .column{
    flex-direction: column;
  }
  .flex{
    display: flex;
  }
  .jc-sb{
    justify-content: space-between;
  }
  .jc-sa{
    justify-content: space-around;
  }
  .jc-c{
    justify-content: center;
  }
  .ai-c{
    align-items: center;
  }
  .sectionbox{
    height: calc(100% - 51px);
  }
  .btnbox{
    margin-top: 10px;
    margin-right: 30px;
    text-align: right;
  }
  .labspan{
    color: v-bind('textColor[3]');
  }
  .secli{
    background: v-bind('secBackground[0]');
    border: 1px solid v-bind('secBackground[1]');
    height: 100%;
    font-size: v-bind('textSize+"px"');
    .sectitle{
      margin: 10px 10px 10px;
      color: v-bind('textColor[0]');
    }
    .tpclearbtn{
      height: 16px;
      line-height: 14px;
      border-radius: 3px;
      padding: 0 5px;
      border: 1px solid v-bind('secBackground[1]');
      cursor: pointer;
    }
  }
  .sectionboxleftli{
    width: 55%;
  }
  .sectionboxrightli{
    width: 44%;
    overflow: hidden;
  }
  .tabbox{
    height: 100%;
  }
  :deep(.n-input){
    margin-bottom: 15px;
    width: 90%;
    margin-left: 5%;
    background: v-bind('InpBackgroundColor');
  }
  :deep(.n-input__input-el) {
    color: v-bind('InpTextColor');
    font-size: v-bind('InpTextSize+"px"');
  }
  :deep(.n-input__state-border){
    border-color: v-bind('InpBorderColor');
  }
  
  :deep(.n-base-selection){
    width: 90%;
    margin-left: 5%;
    margin-bottom: 15px;
    font-size: v-bind('treeSize+"px"');
  }
  :deep(.n-base-selection .n-base-selection-label){
    background: v-bind('InpBackgroundColor');   
  }
  :deep(.n-base-selection .n-base-selection-label .n-base-selection-input){
    color: v-bind('treeColor');
  }
  :deep(.n-base-select-menu){
    background: v-bind('InpBackgroundColor'); 
  }
  :deep(.n-base-select-menu .n-base-select-option){
    color: v-bind('treeColor');
    font-size: v-bind('treeSize+"px"');
  }
  :deep(.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border){
    border-color: v-bind('InpBorderColor');
  }

  
::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    background-color: rgba(0, 0, 0, .1)
  }
  
  ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .1);
    background-color: rgba(0, 0, 0, .1)
  }
  
  ::v-deep .el-table th{
    padding:0px!important;
    color: v-bind('textColor[1]');
    font-size: v-bind('treeSize+"px"');
  }
  ::v-deep table thead th{
    text-align: left!important;
    text-indent:1px;
  }
  
  ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell{
    border-bottom:0px!important;
    border:0px !important;
  }
  
  /*最外层透明*/
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent !important;
    color: v-bind('textColor[2]');
    font-size: v-bind('textSize+"px"');
  }
  /* 表格内背景颜色 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent !important;
  }
  
  ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell{
    border:0px!important;
  }
  ::v-deep .el-table__body-wrapper{
    width:100%;
    border:0px!important;
  }
  ::v-deep .el-input__inner {
    background: v-bind('InpBackgroundColor');
    border-color: v-bind('InpBorderColor');
    color: v-bind('InpTextColor');
    font-size: v-bind('InpTextSize+"px"');
  }

  ::v-deep .el-textarea__inner {
    background: v-bind('InpBackgroundColor');
    border-color: v-bind('InpBorderColor');
    color: v-bind('InpTextColor');
    font-size: v-bind('InpTextSize+"px"');
    box-shadow: none;
  }
  
  /* 滑道样式 */
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar{
    width:10px;
    background:#304156;
    border-radius: 6px;
  }
  /* 定义滑块的样式 */
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.3);
  }
  /* 定义滑块鼠标移入时的样式 */
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.4);
  }
  
  
  /* 整个滚动条的样式 */
  ::-webkit-scrollbar {
    width: 5px; /* 滚动条宽度 */
  }
  /* 滚动轨道的样式 */
  ::-webkit-scrollbar-track {
    background: #00611A; /* 轨道背景颜色 */
  }
  /* 滚动滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background: #0EB687; /* 滑块背景颜色 */
  }
  /* 当鼠标悬停在滑块上时改变颜色 */
  ::-webkit-scrollbar-thumb:hover {
    background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
  }

}
</style>
