
 <!--
@zname: 行政区域组件-template写法
@author: 张泽贤
@time: 2023-02-03
@doc:
-->
<template>
  <div>
    <a-col :span="5">
      <p-select mode="multiple" v-model="provinceValue" placeholder="请选择省" :options="provinceEnums" @change="provinceChange" :disabled="st === 1"></p-select>
    </a-col>
    <a-col :span="5">
      <p-select mode="multiple" v-model="cityValue" placeholder="请选择市" :options="cityEnums" @change="cityChange" :disabled="st === 1"></p-select>
    </a-col>
    <a-col :span="6">
      <p-select mode="multiple" v-model="districtValue" placeholder="请选择区" :options="districtEnums" @change="districtChange" :disabled="st === 1"></p-select>
    </a-col>
  </div>
</template>

<script>
import { axios } from '@/utils/request';
import { UPCLOUD_RDC_TMS_MAINDATA_SERVICE } from '@/config/serviceSettings.js';

export default {
  props: {
    province: {
      type: Array,
      default: () => [],
    },
    city: {
      type: Array,
      default: () => [],
    },
    district: {
      type: Array,
      default: () => [],
    },
    st: {
      /**0=不显示,1=查看,2=新建,3=修改,4=复制 */
      type: Number,
      default: 0,
    },
  },
  watch: {
    province(v) {
      if (v.length) {
        this.provinceValue = v;
        this.getByPid({ fatherid: v.join(',') }, 'cityEnums');
      }
    },
    city(v) {
      if (v.length) {
        this.cityValue = v;
        this.getByPid({ fatherid: v.join(',') }, 'districtEnums');
      }
    },
    district(v) {
      if (v.length) {
        this.districtValue = v;
        this.getByPid({ fatherid: v.join(',') }, 'districtEnums');
      }
    },
  },
  data() {
    return {
      provinceEnums: [],
      cityEnums: [],
      districtEnums: [],

      provinceValue: [],
      cityValue: [],
      districtValue: [],
    };
  },
  created() {
    this.getByPid({ fatherid: '01' }, 'provinceEnums');
  },
  methods: {
    getByPid(data, list) {
      return axios.post(UPCLOUD_RDC_TMS_MAINDATA_SERVICE + '/zone/get-by-pid', data).then((res) => {
        if (res.success) {
          this[list] = res.data.map((item) => {
            return {
              value: item.zoneid,
              label: item.zname,
            };
          });
        } else {
          this.$exception(res);
        }
      });
    },
    provinceChange() {
      this.districtEnums = [];
      this.cityValue = [];
      this.districtValue = [];
      this.getByPid({ fatherid: this.provinceValue.join(',') }, 'cityEnums');
    },
    cityChange() {
      this.districtEnums = [];
      this.districtValue = [];
      this.getByPid({ fatherid: this.cityValue.join(',') }, 'districtEnums');
    },
    districtChange() {},
  },
};
</script>