<template>
  <div>
    <div>
      <h3 class="mt-4 mb-3">大屏数据范围</h3>
      <div>
        <el-form
          :inline="true"
          :model="formInline"
          ref="formRef"
          class="demo-form-inline"
        >
          <el-form-item label="">
            <el-select v-model="formInline.provinceId" placeholder="请选择省">
              <el-option label="重庆市" value="500000000000" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.cityId" placeholder="请选择市">
              <el-option label="市辖区" value="500100000000" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="formInline.countryId"
              placeholder="请选择区"
              @change="handleSelectArea"
            >
              <el-option label="大渡口区" value="500104000000" />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="subDistricts"
            :rules="[
              {
                required: true,
                message: '请选择街道',
                trigger: 'blur'
              }
            ]"
          >
            <el-select
              v-model="formInline.subDistricts"
              placeholder="请选择街道"
              multiple
              clearable
            >
              <el-option
                v-for="(item, index) in districtList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
              <el-button type="primary" @click="onSave">保存</el-button>
            </el-form-item> -->
        </el-form>
      </div>
    </div>
    <!-- <el-button type="primary" class="ml-2" @click="getSubDistrictsList"
        >拉取定位</el-button
      > -->

    <!-- <el-button type="primary" class="ml-2" @click="onSaveTag">保存</el-button> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps, onMounted, defineEmits, defineExpose } from "vue";
import { request } from "@/utils";
import { any } from "vue-types";
import { ElMessage } from "element-plus";
import { emit } from "process";

const props = defineProps({
  id: {
    type: [Number, String]
  }
});
const emits = defineEmits(["success"]);
const formRef = ref();
const list = ref([]);
const formInline = ref({
  provinceId: "500000000000", // 省
  cityId: "500100000000", // 市
  countryId: "500104000000", // 区
  subDistricts: []
});

const largeScreenTemplateValue = ref("");
const constantDistricts = [
  {
    citycode: "023",
    adcode: "500104",
    name: "茄子溪街道",
    center: "106.477358,29.401026",
    level: "street",
    districts: []
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "新山村街道",
    center: "106.491380,29.482165",
    level: "street",
    districts: []
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "春晖路街道",
    center: "106.473521,29.485163",
    level: "street",
    districts: []
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "九宫庙街道",
    center: "106.488889,29.433017",
    level: "street",
    districts: []
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "建胜镇",
    center: "106.533104,29.389476",
    level: "street",
    districts: []
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "跳磴镇",
    center: "106.446568,29.368499",
    level: "street",
    districts: []
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "八桥镇",
    center: "106.463511,29.418274",
    level: "street",
    districts: []
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "跃进村街道",
    center: "106.517294,29.488872",
    level: "street",
    districts: []
  }
];
const districtList = ref([]);

// 获取大屏数据功能范围
const getChannelLargeConfig = () => {
  return new Promise((resolve, reject) => {
    request
      .get(`/platformApi/statisticsService/mechanism/config`)
      .then(resp => {
        districtList.value = resp?.data?.subDistricts;
        resolve();
      });
  });
};
const getRoleLargeConfig = () => {
  if (!props.id) return;
  request
    .get(`/platformApi/statisticsService/mechanism/role/config`, {
      params: {
        roleId: props.id
      }
    })
    .then(resp => {
      formInline.value.subDistricts = resp?.data?.subDistricts || [];
    });
};
const test = () => {
  console.log("测试子组件触发");
};
const onSave = () => {
  // if (!formInline.value.subDistricts.length) {
  // }
  return new Promise(resolve => {
    formRef.value.validate(valid => {
      if (!valid) {
        return;
      }
      request
        .post("/platformApi/statisticsService/mechanism/role/config", {
          roleId: props?.id,
          config: formInline.value
        })
        .then(resp => {
          ElMessage.success(resp.message);
          emits("success");
          resolve();
        });
    });
  });
};
const getSubDistrictsList = () => {
  request.get("https://restapi.amap.com/v3/config/district", {
    params: {
      key: "81e0079ccf4c457759ab0ce09149ffa3",
      keywords: "重庆市",
      subdistrict: 3
    }
  });
};
const handleSelectArea = page => {};
const init = async () => {
  await getChannelLargeConfig();
  getRoleLargeConfig();
};

defineExpose({
  onSave,
  init
});
</script>
