<!--
 * @Author: your name
 * @Date: 2024-01-25 16:21:46
 * @LastEditTime: 2024-01-26 10:10:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
-->
<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}</span>
      <div>
        <!-- <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button> -->
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <el-steps class="box_main" :active="stepActive" finish-status="success">
      <el-step title="步骤1" />
      <el-step title="步骤2" />
    </el-steps>
    <el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top" v-if="stepActive == 0">
      <el-form-item style="width: 48%" prop="fgRwmc" label="任务名称">
        <el-input v-model="listQuery.fgRwmc" placeholder="请输入任务名称" style="width: 100%" clearable />
      </el-form-item>
      <el-form-item style="width: 45%" label="方格" prop="fgData">
        <div :class="listQuery.fgData.length === 0 ? 'ipt mj' : 'ipt'" @click.stop="fgVisible = true">
          <el-tag v-for="(tag, idx) in listQuery.fgData" :key="tag.id" class="mx-1" closable :type="tag.type"
            @close="handleClose(idx)">
            {{ tag.fgmc }}
          </el-tag>
        </div>
      </el-form-item>
      <el-form-item style="width: 48%" prop="dkjgsj" label="间隔时间">
        <el-input v-model="listQuery.dkjgsj" type="number" placeholder="请输入间隔时间" style="width: 100%" clearable />
      </el-form-item>
      <div class="center-btn"><el-button style="margin-top: 12px" @click="next">下一步</el-button></div>
    </el-form>
    <div class="box_main" v-if="stepActive == 1">
      <el-button style="margin: 12px 0 10px 0;" @click="addDw" v-if="openType!=='detail'">新增点位</el-button>
      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
        @chooseData="chooseData">
        <!-- 操作 -->
        <template #controls="{ row, index }">
          <el-button @click="deletList(index)" type="danger" size="small">删除</el-button>
        </template>
      </MyTable>
      <div class="center-btn">
        <el-button style="margin-top: 12px" @click="stepActive--; pageData.tableData = []">上一步</el-button>
        <el-button style="margin-top: 12px" @click="submit" v-if="openType!=='detail'">提交</el-button>
      </div>
    </div>
  </div>
  <FgLoad v-model="fgVisible" @choosedUsers="hanlderChoose" :Single="true" />
  <AddDw v-model="showDialog" v-if="showDialog" :data="listQuery.fgData"
    :dic="{ D_ZDXL_FGXLRW_YJYS, D_ZDXL_FGXLRW_YJDJ, D_ZDXL_FGXLRW_RWZT }" @submit="dwSubmit" />
</template>

<script setup>
import FgLoad from "./fgLoad.vue";
import AddDw from "./addDw.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js";
import {
  ref,
  defineExpose,
  reactive,
  onMounted,
  defineEmits,
  getCurrentInstance
} from "vue";
const props = defineProps({
  dic: Object
});
const { proxy } = getCurrentInstance();
const { D_ZDXL_FGXLRW_YJYS, D_ZDXL_FGXLRW_YJDJ, D_ZDXL_FGXLRW_RWZT } = proxy.$dict("D_ZDXL_FGXLRW_YJYS", "D_ZDXL_FGXLRW_YJDJ", "D_ZDXL_FGXLRW_RWZT");
const showDialog = ref(false);
const stepActive = ref(0)
const emit = defineEmits(["updateDate"]);
const dialogForm = ref(false); //弹窗
const listQuery = ref({ fgData: [] }); //表单
const fgVisible = ref(false);
const loading = ref(false);
const elform = ref();
const title = ref("");
const openType=ref("")
const rules = reactive({
  fgRwmc: [{ required: true, message: "请输入任务名称", trigger: "change" }],
  fgData: [{ required: true, message: "请选择方格", trigger: "change" }],
  dkjgsj: [{ required: true, message: "请输入间隔时间", trigger: "change" }],
  sblx: [{ required: true, message: "请选择任务类型", trigger: "change" }],
  jd: [{ required: true, message: "请选择坐标", trigger: ["change", "blur"] }]
});
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType: "checkBox"
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageNum: 1
  }, //分页
  controlsWidth: 210, //操作栏宽度
  tableColumn: [
    { label: "点位名称", prop: "bxdMc", showOverflowTooltip: true },
    { label: "经度", prop: "jd", showOverflowTooltip: true },
    { label: "维度", prop: "wd", showOverflowTooltip: true },
  ]
});
onMounted(() => {
});

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  openType.value = type;
  title.value = row ? "编辑任务" : "新增任务";
  if (row) {
    getDataById(row);
  } else {
    stepActive.value = 0;
    listQuery.value = { fgData: [] };
    pageData.tableData = [];
  }
};
// 根据id查询详情
const getDataById = (row) => {
  qcckGet({ fgrwid: row.id }, "/mosty-yjzl/tbZdyrw/getFgrwXq").then(async (res) => {
    listQuery.value = res;
    listQuery.value.fgData = [{...res.fgxx,
      fgmc: res.fgmc,
      id: res.fgId,
    }]
    console.log(listQuery.value.fgData ,'listQuery.value.fgData ');

    pageData.tableData=res.bxds
  });
};
const next = () => {
  elform.value.validate((valid) => {
    if (!valid) return false;
    stepActive.value++;
  });

}
const addDw = () => {
  showDialog.value = true
}
//选择方格
function hanlderChoose(arr) {
  const jzryList = arr.map((item) => {
    return {
      id: item.id,
      fgmc: item.mc1,
      x1: item.x1,
      y1: item.y1,
      x2: item.x2,
      y2: item.y2,
      x11: item.x11,
      y11: item.y11,
      x21: item.x21,
      y21: item.y21,
      zxX: item.zxX,
      zxY: item.zxY,
    };
  });
  listQuery.value.fgData = jzryList;
}

const dwSubmit = (val) => {
  console.log(val, 'val');
  pageData.tableData.push(val)
}
// 提交
const submit = () => {
  // elform.value.validate((valid) => {
  //   if (!valid) return false;
  loading.value = true;
  if (title.value == "新增任务") {
    console.log(listQuery.value, pageData.tableData);

    const pramas = {
      fgRwmc: listQuery.value.fgRwmc,
      fgId: listQuery.value.fgData[0].id,
      dkjgsj: listQuery.value.dkjgsj,
      dtoList: pageData.tableData.map(item => {
        return {
          bxdMc: item.bxdMc,
          jd: item.jd,
          wd: item.wd
        }
      })
    }
    qcckPost(pramas, "/mosty-yjzl/tbZdyrw/addTbZdyrw")
      .then((res) => {
        proxy.$message({ type: "success", message: "新增成功" });
        close();
        emit("updateDate");
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    // qcckPut(listQuery.value, "/mosty-yszx/tbYsSxt/update")
    //   .then((res) => {
    //     proxy.$message({ type: "success", message: "修改成功" });
    //     close();
    //     emit("updateDate");
    //   })
    //   .catch(() => {
    //     loading.value = false;
    //   });
  }
  // });
};
const deletList = (idx) => {
  console.log(idx, 'idx');
  pageData.tableData.splice(idx, 1)
}
// 关闭
const close = () => {
  listQuery.value = { qcys: "#409eff" };
  dialogForm.value = false;
  loading.value = false;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.mapBox {
  width: 100%;
  height: 600px;
}

.latlng {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
  position: relative;
  background: #001238;
}

.mj::after {
  content: "请选择方格";
  position: absolute;
  top: 0;
  left: 12px;
  color: #c0c4cc;
}

.box_main {
  padding: 2rem 12rem 0rem 12rem;
  width: 100%;
}

.center-btn {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
</style>
