<template>
  <div>
    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button
            v-if="!infoActive"
            type="primary"
            size="small"
            @click="submit"
            :loading="btnLoading"
          >保存</el-button
          >
          <el-button size="small" @click="close">关闭</el-button>
        </div>
      </div>

      <div class="dialogWrapper">
        <div class="label">任务包基本信息</div>
        <el-descriptions
          class="margin-top"
          :column="3"
          border
        >
          <!--        <template #extra>-->
          <!--          <el-button type="primary">Operation</el-button>-->
          <!--        </template>-->
          <el-descriptions-item label="方格名称">
            {{ form?.fgMc }}
          </el-descriptions-item>
          <el-descriptions-item label="预警等级">
            <dict-tag :options="D_ZDXL_FGXLRW_YJDJ" :value="form?.fgYjdj" :tag="false" />
          </el-descriptions-item>
          <el-descriptions-item label="警情数量">
            {{ form?.fgYjjqsl }}
          </el-descriptions-item>
          <el-descriptions-item label="高发时段">
            {{ form?.fgYjgfsd }}
          </el-descriptions-item>
          <el-descriptions-item label="高发类型">
            {{ form?.fgJqtjLx }}
          </el-descriptions-item>
          <el-descriptions-item label="任务日期">
            {{ form?.rwRq }}
          </el-descriptions-item>
          <el-descriptions-item label="小时统计">
            {{ form?.fgJqtjXsLabel }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="label" style="margin-top: 1rem">任务包下发编辑信息</div>
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          :inline="true"
          :disabled="infoActive"
        >
          <el-form-item prop="xlghSc" label="巡逻时长:">
            <el-input-number
              style="width: 80%;"
              min="0"
              placeholder="请填写巡逻时长"
              v-model="form.xlghSc"
            ></el-input-number>
            <el-tag size="small" type="warning">分钟</el-tag>
          </el-form-item>
          <el-form-item prop="xlghPcRy" label="盘查人员:">
            <el-input
              placeholder="请填写盘查人员"
              clearable
              v-model="form.xlghPcRy"
            ></el-input>
          </el-form-item>
          <el-form-item prop="xlghPcCl" label="盘查车辆:">
            <el-input
              placeholder="请填写盘查车辆"
              clearable
              v-model="form.xlghPcCl"
            ></el-input>
          </el-form-item>
          <el-form-item prop="xlghXllc" label="巡逻里程:">
            <el-input-number
              style="width: 80%;"
              min="0"
              placeholder="请填写巡逻里程"
              v-model="form.xlghXllc"
            ></el-input-number>
            <el-tag size="small" type="warning">公里</el-tag>
          </el-form-item>
          <el-form-item prop="xfbbName" label="下发巡组:">
            <el-input
              placeholder="请填写下发巡组"
              clearable
              v-model="form.xfbbName"
              @click="visible = true"
              readonly
            ></el-input>
          </el-form-item>

          <template v-for="(item, index) in form?.bddList" :key="index">
            <el-form-item :prop="`bddList[${index}].xlghDkcs`" :label="`打卡点${index + 1}:`" :rules="checkPointRules">
              <el-input-number
                style="width: 100%;"
                :placeholder="`输入打卡点${index + 1}需打卡次数`"
                clearable
                v-model="item.xlghDkcs"
              />
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>

    <distribute-patrol-team-dialog v-model="visible" @selection-change="handleChange" />
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } from "vue";
import { updateData } from "@/api/service/dailyTaskPackage";
import DictTag from "@/components/DictTag/index.vue";
import DistributePatrolTeamDialog
  from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/DistributePatrolTeamDialog.vue";
const { proxy } = getCurrentInstance();
const { D_ZDXL_FGXLRW_YJDJ } = proxy.$dict("D_ZDXL_FGXLRW_YJDJ");
const btnLoading = ref(false); //按钮截流
const title = ref("修改");
const formRef = ref(null);
const infoActive = ref(true);
const visible = ref(false);

//级联选择器配置
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:modelValue', 'ok']);

const dialogFormVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  }
})

//表单数据
const form = ref({
  bddList: []
});

// 打卡点验证规则
const checkPointRules = [
  { required: true, message: '请输入打卡次数', trigger: 'change' },
  {
    validator: (rule, value, callback) => {
      if (value < 1) {
        callback(new Error('打卡次数必须大于0'));
      } else {
        callback();
      }
    },
    trigger: 'change'
  }
];

//表单验证
const rules = reactive({
  xlghXllc: [
    {
      required: true,
      message: "请填写巡逻里程",
      trigger: "change"
    }
  ],
  xlghSc: [
    {
      required: true,
      message: "请填写巡逻时长",
      trigger: "change"
    }
  ],
  xlghPcRy: [
    {
      required: true,
      message: "请填写盘查人员",
      trigger: "change"
    }
  ],
  xlghPcCl: [
    {
      required: true,
      message: "请填写盘查车辆",
      trigger: "change"
    }
  ],
  xfbbName: [
    {
      required: true,
      message: "请填写下发巡组",
      trigger: "change"
    }
  ],
});

//新增
function open(row = {}, type) {
  infoActive.value = type === 'view';
  form.value = { ...row, xfbbName: row?.xfxz };
  title.value = "编辑信息";
  dialogFormVisible.value = true;
}

//关闭弹窗
function close() {
  formRef.value.resetFields();
  dialogFormVisible.value = false;
}

const handleChange = (val) => {
  form.value.xfbbId = val?.[0]?.id;
  form.value.xfbbName = `${val?.[0]?.fzrXm}警组`;
}

//提交
const submit = async () => {
  try {
    await formRef.value.validate()

    await updateData(form.value)
    proxy.$message({
      type: "success",
      message: "修改成功"
    });
    dialogFormVisible.value = false;
    emits("ok")

  } catch (error) {
    console.log(error);
  }
}


defineExpose({ open })
</script>

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

.dialog {
  .dialogWrapper {
    margin: 20px 20px 0 20px;

    .el-form--inline {
      padding: 0 0 0rem 0;
    }
  }
}

.label {
  margin-bottom: 1rem;
}
</style>
