<template>
  <div>
    <el-dialog title="大屏授权" v-model="dialogVisible">
      <el-card title="" :shadow="false">
        <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="streetCommunity"
                :rules="[
                  {
                    required: true,
                    message: '请选择街道社区',
                    trigger: 'blur'
                  }
                ]"
              >
                <el-cascader
                  placeholder="请选择社区街道"
                  v-model="formInline.streetCommunity"
                  :options="districtList"
                  :props="cascaderProps"
                  collapse-tags
                  collapse-tags-tooltip
                  :max-collapse-tags="3"
                  clearable
                />

                <!-- <el-select
                  v-model="formInline.subDistricts"
                  placeholder="请选择街道"
                  multiple
                  clearable
                >
                  <el-option
                    v-for="item in districtList"
                    :key="item.center"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select> -->
                <!-- <el-select
                  v-model="formInline.community"
                  placeholder="请选择社区"
                  multiple
                  clearable
                >
                  <el-option
                    v-for="item in districtList"
                    :key="item.center"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select> -->
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSave">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps, onMounted, defineEmits, computed, watch } from "vue";
import { request } from "@/utils";
import { ElMessage } from "element-plus";

const props = defineProps({
  staffId: {
    type: String
  },
  show: {
    type: Boolean,
    default: false
  }
});
const cascaderProps = { multiple: true };
const emits = defineEmits(["success", "update:show"]);

const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      if (n) {
        initData();
      }
    } else {
      formRef.value?.resetFields();
    }
  }
);

const formRef = ref();
const list = ref([]);
const formInline = ref({
  provinceId: "500000000000", // 省
  cityId: "500100000000", // 市
  countryId: "500104000000", // 区
  subDistricts: [],
  streetCommunity: [],
  communities: []
});

const largeScreenTemplateValue = ref("");
const constantDistricts = [
  {
    citycode: "023",
    adcode: "500104",
    name: "茄子溪街道",
    label: "茄子溪街道",
    value: "茄子溪街道",
    center: "106.477358,29.401026",
    level: "street",
    districts: [],
    children: [
      {
        label: "园林社区",
        value: "园林社区"
      },
      {
        label: "伏牛溪社区",
        value: "伏牛溪社区"
      },
      {
        label: "滨江社区",
        value: "滨江社区"
      },
      {
        label: "新港社区",
        value: "新港社区"
      },
      {
        label: "刘家坝社区",
        value: "刘家坝社区"
      },
      {
        label: "永丰社区",
        value: "永丰社区"
      },
      {
        label: "陈家坝社区",
        value: "陈家坝社区"
      },
      {
        label: "江州社区",
        value: "江州社区"
      },
      {
        label: "慧丰社区",
        value: "慧丰社区"
      },
      {
        label: "桥口社区",
        value: "桥口社区"
      },
      {
        label: "兴盛社区",
        value: "兴盛社区"
      }
    ]
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "新山村街道",
    label: "新山村街道",
    value: "新山村街道",
    center: "106.491380,29.482165",
    level: "street",
    districts: [],
    children: [
      {
        label: "钢花村社区",
        value: "钢花村社区"
      },
      {
        label: "平安社区",
        value: "平安社区"
      },
      {
        label: "沪汉社区",
        value: "沪汉社区"
      },
      {
        label: "光明社区",
        value: "光明社区"
      },
      {
        label: "新一社区",
        value: "新一社区"
      },
      {
        label: "冶建社区",
        value: "冶建社区"
      },
      {
        label: "翠园村社区",
        value: "翠园村社区"
      },
      {
        label: "锁口丘社区",
        value: "锁口丘社区"
      }
    ]
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "春晖路街道",
    label: "春晖路街道",
    value: "春晖路街道",
    center: "106.473521,29.485163",
    level: "street",
    districts: [],
    children: [
      {
        label: "阳光社区",
        value: "阳光社区"
      },
      {
        label: "新华社区",
        value: "新华社区"
      },
      {
        label: "松青路社区",
        value: "松青路社区"
      },
      {
        label: "古渡社区",
        value: "古渡社区"
      },
      {
        label: "锦城社区",
        value: "锦城社区"
      },
      {
        label: "柏华社区",
        value: "柏华社区"
      },
      {
        label: "锦愉社区",
        value: "锦愉社区"
      },
      {
        label: "翠华社区",
        value: "翠华社区"
      },
      {
        label: "锦凤社区",
        value: "锦凤社区"
      }
    ]
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "九宫庙街道",
    label: "九宫庙街道",
    value: "九宫庙街道",
    center: "106.488889,29.433017",
    level: "street",
    districts: [],
    children: [
      {
        label: "创新社区",
        value: "创新社区"
      },
      {
        label: "锦霞社区",
        value: "锦霞社区"
      },
      {
        label: "新工社区",
        value: "新工社区"
      },
      {
        label: "百花社区",
        value: "百花社区"
      },
      {
        label: "葛老溪社区",
        value: "葛老溪社区"
      }
    ]
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "建胜镇",
    label: "建胜镇",
    value: "建胜镇",
    center: "106.533104,29.389476",
    level: "street",
    districts: [],
    children: [
      {
        label: "新雨社区",
        value: "新雨社区"
      },
      {
        label: "建新社区",
        value: "建新社区"
      },
      {
        label: "回龙桥社区",
        value: "回龙桥社区"
      },
      {
        label: "百佳园社区",
        value: "百佳园社区"
      },
      {
        label: "建路社区",
        value: "建路社区"
      },
      {
        label: "白居寺社区",
        value: "白居寺社区"
      }
    ]
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "跳磴镇",
    label: "跳磴镇",
    value: "跳磴镇",
    center: "106.446568,29.368499",
    level: "street",
    districts: [],
    children: [
      {
        label: "白沙沱社区",
        value: "白沙沱社区"
      },
      {
        label: "蓝沁苑社区居委会",
        value: "蓝沁苑社区居委会"
      },
      {
        label: "幸福社区",
        value: "幸福社区"
      },
      {
        label: "华庭社区",
        value: "华庭社区"
      },
      {
        label: "中顺社区",
        value: "中顺社区"
      }
    ]
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "八桥镇",
    label: "八桥镇",
    value: "八桥镇",
    center: "106.463511,29.418274",
    level: "street",
    districts: [],
    children: [
      {
        label: "凤阳社区",
        value: "凤阳社区"
      },
      {
        label: "双林社区",
        value: "双林社区"
      },
      {
        label: "丽景社区",
        value: "丽景社区"
      },
      {
        label: "融城社区",
        value: "融城社区"
      },
      {
        label: "龙都社区",
        value: "龙都社区"
      },
      {
        label: "双城社区",
        value: "双城社区"
      },
      {
        label: "常嘉社区",
        value: "常嘉社区"
      },
      {
        label: "万有社区",
        value: "万有社区"
      },
      {
        label: "逸景社区",
        value: "逸景社区"
      },
      {
        label: "五一社区",
        value: "五一社区"
      }
    ]
  },
  {
    citycode: "023",
    adcode: "500104",
    name: "跃进村街道",
    label: "跃进村街道",
    value: "跃进村街道",
    center: "106.517294,29.488872",
    level: "street",
    districts: [],
    children: [
      {
        label: "跃新社区",
        value: "跃新社区"
      },
      {
        label: "钢堰社区",
        value: "钢堰社区"
      },
      {
        label: "堰兴社区",
        value: "堰兴社区"
      },
      {
        label: "大堰社区",
        value: "大堰社区"
      },
      {
        label: "马王街社区",
        value: "马王街社区"
      },
      {
        label: "跃进社区",
        value: "跃进社区"
      },
      {
        label: "东正社区",
        value: "东正社区"
      },
      {
        label: "渝钢社区",
        value: "渝钢社区"
      },
      {
        label: "革新社区",
        value: "革新社区"
      },
      {
        label: "钢铁社区",
        value: "钢铁社区"
      }
    ]
  }
];
const districtList = ref(constantDistricts);

const initData = () => {
  request
    .post("archivesService/mechanism/mechanismSetting/get", {
      staffId: props.staffId,
      keys: ["staffRegion"]
    })
    .then(resp => {
      try {
        formInline.value = JSON.parse(resp.data.list[0]?.value);
      } catch (error) {
        formInline.value = {
          provinceId: "500000000000", // 省
          cityId: "500100000000", // 市
          countryId: "500104000000", // 区
          subDistricts: [],
          streetCommunity: [],
          community: []
        };
      }
    });
};

const onSave = () => {
  // if (!formInline.value.subDistricts.length) {
  // }
  console.log("formInline.value", formInline.value);
  let subDistricts = Array.from(
    new Set(formInline.value.streetCommunity.map(v => v[0]))
  );
  let communities = formInline.value.streetCommunity.map(v => v[1]);

  formInline.value.subDistricts = subDistricts;
  formInline.value.communities = communities;

  formRef.value.validate(valid => {
    if (!valid) {
      return;
    }
    if (!formInline.value.streetCommunity.length) {
      return ElMessage.error("请选择街道社区");
    }

    request
      .post("archivesService/mechanism/mechanismSetting/update", {
        staffId: props?.staffId,
        settings: [
          { key: "staffRegion", value: JSON.stringify(formInline.value) }
        ]
      })
      .then(resp => {
        ElMessage.success(resp.message);
        emits("success");
        dialogVisible.value = false;
      });
  });
};
const getSubDistrictsList = () => {
  request.get("https://restapi.amap.com/v3/config/district", {
    params: {
      key: "81e0079ccf4c457759ab0ce09149ffa3",
      keywords: "重庆市",
      subdistrict: 3,
      extensions: "all"
    }
  });
};
const handleSelectArea = page => {};

onMounted(() => {});
</script>
