<template>
  <div class="taskadd">
    <el-form :model="taskinfo" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="系统工单：">
            <el-input v-model="taskinfo.taskCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件分类：">
            <el-select
              v-model="taskinfo.taskEventCategory"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in task_event_category"
                :label="item.label"
                :value="parseInt(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件来源：">
            <el-select
              v-model="taskinfo.taskType"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in task_type"
                :label="item.label"
                :value="parseInt(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件类型：">
            <el-select
              v-model="taskinfo.taskEventType"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in task_event_type"
                :label="item.label"
                :value="parseInt(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来件工单号：">
            <el-input v-model="taskinfo.taskOtherId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办理时限：">
            <el-date-picker
              v-model="taskinfo.taskReqCompleteTime"
              type="datetime"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="行政区：">
            <el-select
              v-model="taskinfo.taskArea"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in sys_area"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="处理时限：">
            <el-input  :disabled="taskinfo.taskType=='2'?false:true" v-model="taskinfo.taskTime" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="班组区域：">
            <el-tree-select
              v-model="taskinfo.taskDeptRange"
              multiple
              :data="treedept"
              check-strictly="true"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="录单员：">
            <el-select
              v-model="taskinfo.taskReporter"
              placeholder="请选择人员"
              style="width: 100%"
              filterable
              allow-create
            >
              <el-option
                v-for="item in allusers"
                :label="item.nickName"
                :value="item.userId+''"
              />
            </el-select>
          </el-form-item>
        </el-col>











<!--        <el-col :span="12">-->
<!--          <el-form-item label="投诉人电话">-->
<!--            <el-input v-model="taskinfo.taskComplainConnect" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->


<!--        <el-col :span="12">-->
<!--          <el-form-item label="来件时间:">-->
<!--            <el-date-picker-->
<!--              v-model="taskinfo.taskTime"-->
<!--              type="datetime"-->
<!--              placeholder="请选择"-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-col>-->







        <el-col :span="12">
          <el-form-item label="任务内容：">
            <el-input v-model="taskinfo.taskContent" />
          </el-form-item>
        </el-col>



<!--        <el-col :span="12">-->
<!--          <el-form-item label="是否需要确认:">-->
<!--            <el-select-->
<!--              v-model="taskinfo.remark"-->
<!--              class="m-1"-->
<!--              placeholder="请选择"-->
<!--            >-->
<!--              <el-option label="是" value="1"></el-option>-->
<!--              <el-option label="否" value="0"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->



        <el-col :span="24">
          <el-form-item label="来件备注：">
            <el-input v-model="taskinfo.taskFromRemark"  type="textarea"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="道路名：">
            <el-input v-model="taskinfo.taskAddrRoad" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="详细地址：">
            <div style="position: relative; width: 100%">
              <div style="width: 80%">
                <el-input v-model="taskinfo.taskAddr" />
              </div>
              <el-button
                type="primary"
                style="position: absolute; right: 0; top: 0"
                @click="searchaddr"
                >查询</el-button
              >
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <!-- <el-form-item label="照片附件"> </el-form-item> -->
        </el-col>


        <el-col :span="12">
          <div style="padding-left: 30px">
            <MapSelect ref="mapSelect" v-model:formv="formlocation"></MapSelect>
          </div>
        </el-col>


        <el-col :span="12">
          <div class="tiplab">实景照片：</div>
          <div style="padding-left: 120px">
            <ImageUpload v-model="fileList" :limit="3"></ImageUpload>
          </div>
          <div class="tiplab">派单照片：</div>
          <div style="padding-left: 120px">
            <ImageUpload v-model="fileList1" :limit="1"></ImageUpload>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { ref, watch, defineComponent, onMounted } from "vue";
import { listTask } from "@/api/system/task";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { useDict } from "@/utils/dict";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import MapSelect from "@/components/MapSelect";
import { Plus } from "@element-plus/icons-vue";
// 文件上传组件
import ImageUpload from "@/components/ImageUpload";
import moment from "moment";
import { treeselect as deptTreeselect } from "@/api/system/dept";

export default defineComponent({
  name: "taskadd",
  components: { MapSelect },
  props: {
    taskinfo: Object,
  },
  setup(props, context) {
    const mapSelect = ref(null);
    const formlocation = ref({ addr: "", locations: "" });
    const {
      task_status,
      task_type,
      task_event_type,
      task_event_category,
      sys_area,
    } = useDict(
      "task_status",
      "task_type",
      "task_event_type",
      "task_event_category",
      "sys_area"
    );
    const taskinfo = ref({});


    watch(
      () => formlocation.value.addr,
      () => {
        taskinfo.value.taskAddr = formlocation.value.addr;
      }
    );
    watch(
      () => formlocation.value.locations,
      () => {
        taskinfo.value.taskLocation = formlocation.value.locations;
        if (formlocation.value.locations != "") {
          mapSelect.value.getlocationaddr(
            formlocation.value.locations,
            (data) => {
              var qu = data.regeocode.addressComponent.district;
              if (qu) {
                for (var i in sys_area.value) {
                  if (sys_area.value[i].label == qu) {
                    taskinfo.value.taskArea = sys_area.value[i].value;
                  }
                }
              }
            }
          );
        }
      }
    );
    const store = useStore();
    const getters = computed(() => store.getters);


    const searchaddr = () => {
      if (taskinfo.value.taskAddr) {
        mapSelect.value.searchaddr(taskinfo.value.taskAddr);
      } else {
        ElMessage.warning("请输入地址");
      }
    };
    const alldept = ref([]);
    listDept().then((response) => {
      alldept.value = cloneDeep(response.data);
    });
    const allusers = ref([]);
    listUser({ pageSize: 1000 }).then((res) => {
      allusers.value = res.rows;
    });
    const doinit = (data) => {
      // console.log(getters.value)
      listTask({ taskCode: moment().year() + "" }).then((res) => {
        var max =  res.rows.reduce((a,b) => { return Math.max(parseFloat(a.taskCode) ? parseFloat(a.taskCode) : a, parseFloat(b.taskCode)); })
        taskinfo.value.taskCode =
          moment().format("yyyyMMDD") + (Array(4).join(0) + (max + 1)).slice(-4);
      });
      taskinfo.value = data;

      if (data.taskId == null) {
        fileList.value = "";
        fileList1.value = "";
        formlocation.value = { addr: "", locations: "" };
        taskinfo.value.taskReporter = getters.value.userId.toString();

      } else {
        if (
          taskinfo.value.taskDeptRange != null &&
          taskinfo.value.taskDeptRange != "" &&
          taskinfo.value.taskDeptRange != undefined &&
          !Array.isArray(taskinfo.value.taskDeptRange)
        ) {
          taskinfo.value.taskDeptRange = taskinfo.value.taskDeptRange
            .split(",")
            .map((i) => parseInt(i));
        }
        if (taskinfo.value.taskReporter == null ||
          taskinfo.value.taskReporter == "" ||
          taskinfo.value.taskReporter == undefined) {
           taskinfo.value.taskReporter = getters.value.userId.toString();
        }
        if (
          taskinfo.value.taskPics != null &&
          taskinfo.value.taskPics != "" &&
          taskinfo.value.taskPics != undefined
        ) {
          fileList.value = taskinfo.value.taskPics;
        }
        if (
          taskinfo.value.taskVideos != null &&
          taskinfo.value.taskVideos != "" &&
          taskinfo.value.taskVideos != undefined
        ) {
          fileList1.value = taskinfo.value.taskVideos;
        }
        if (
          taskinfo.value.taskAddr != null &&
          taskinfo.value.taskAddr != "" &&
          taskinfo.value.taskAddr != undefined
        ) {
          formlocation.value.addr = taskinfo.value.taskAddr;
          formlocation.value.locations = taskinfo.value.taskLocation;
        }
      }
    };
    onMounted(() => {
      doinit(props.taskinfo);
    });

    const fileList = ref([]);
    const fileList1 = ref([]);
    watch(
      () => fileList.value,
      () => {
        taskinfo.value.taskPics = fileList.value;
      }
    );
    watch(
      () => fileList1.value,
      () => {
        taskinfo.value.taskVideos = fileList1.value;
      }
    );
    watch(()=>taskinfo.value.taskType,()=>{
      if(task_type.value && task_type.value.length>0){
        for (const index in task_type.value) {
          var typec = task_type.value[index];
          if((typec.value+"") === (taskinfo.value.taskType+"")){
            taskinfo.value.taskTime  = moment().add(typec.remark,'hours').format('YYYY-MM-DD HH:mm:ss')
          }
        }
      }
    })

    const updateallvalue = () => {
      context.emit("update:taskinfo", taskinfo.value);
    };

    function setdatakey(dept) {
      if (dept.children) {
        dept.children = dept.children.map((i) => {
          return setdatakey(i);
        });
      }
      dept["value"] = dept.id;
      return dept;
    }

    const treedept = ref([
      {
        value: "1",
        label: "ss",
      },
      {
        value: "2",
        label: "ss1",
      },
    ]);
    deptTreeselect().then((res) => {
      treedept.value = [setdatakey(res.data[0])];
    });

    return {
      mapSelect,
      MapSelect,
      formlocation,
      taskinfo,
      searchaddr,
      alldept,
      allusers,
      treedept,
      task_status,
      task_type,
      task_event_type,
      task_event_category,
      sys_area,
      fileList,
      fileList1,
      doinit,
      updateallvalue,
    };
  },
});
</script>

<style lang="scss" scoped>
.taskadd {
  .el-select {
    width: 100% !important;
  }
  .tiplab{
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    font-weight: 700;
    padding-left: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
}
</style>

<style>
.el-date-editor {
  width: 100% !important;
}

.el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
}

.el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 100px;
}
</style>
