<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{objOption.MenuId==0?'新增地区信息':'修改地区信息'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg q-px-md text-grey-6">地区信息</div>
        <div class="row wrap">
          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.Name" ref="Name"
            class="col-6 q-pr-lg q-pb-lg" label="地区名称" :rules="[val => !!val || '请填地区名称']" />
          <q-select filled stack-label class="col-6 q-pr-lg" option-value="Id" option-label="Name"
            v-model="objOption.CodeLevel" :options="LevelList" emit-value map-options label="等级"
            @input="changeType()" />
        </div>
        <div class="row wrap">
          <q-select clearable use-input :disable="objOption.CodeLevel==1" filled stack-label class="col-6 q-pr-lg q-pb-lg" option-value="ID"
            option-label="Name" v-model="objOption.CountryId" :options="CountryList" emit-value map-options label="所属国家"
            @input="changeProvice()" @filter="filterCountry" />
          <q-select clearable use-input :disable="objOption.CodeLevel==2" filled stack-label class="col-6 q-pr-lg" option-value="ID"
            option-label="Name" v-model="objOption.ProviceId" :options="ProviceList" emit-value map-options label="所属省份"
            @input="changeCity()" @filter="filterProvice" />
        </div>
        <div class="row wrap">
          <q-select clearable use-input :disable="objOption.CodeLevel==3" filled stack-label class="col-6 q-pr-lg q-pb-lg" option-value="ID"
            option-label="Name" v-model="objOption.CityId" :options="CityList" emit-value map-options label="所属城市"
            @filter="filterCity" />
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="setArea" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    queryCountryList,
    queryAreaList,
    queryAreaInfo,
    saveArea
  } from '../../api/common/common'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          ID: 0, //地区编号
          Name: "", //地区名称
          ParentID: "", //父节点编号
          CodeLevel: 1, //等级(1-国家，2-省份，3-城市，4-区县)
          CountryId: "", //国家编号
          ProviceId: "", //省份编号
          CityId: "", //城市编号
        },
        //等级列表
        LevelList: [{
            Id: 1,
            Name: "国家"
          },
          {
            Id: 2,
            Name: "省"
          },
          {
            Id: 3,
            Name: "市"
          },
          {
            Id: 4,
            Name: "区县"
          },
        ],
        optionTitle: "",
        CountryList: [], //国家列表
        AllCountryList: [], //所有国家
        ProviceList: [], //省份列表
        AllProviceList: [], //所有省份
        CityList: [], //城市列表
        AllCityList: [], //所有城市列表
        saveLoading: false,
      }
    },

    created() {
      this.getCountryList();
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //筛选国家
      filterCountry(val, update) {
        update(() => {
          if (val === '') {
            this.CountryList = JSON.parse(JSON.stringify(this.AllCountryList))
          } else {
            const needle = val.toLowerCase();
            this.CountryList = this.AllCountryList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      //筛选省份
      filterProvice(val, update) {
        update(() => {
          if (val === '') {
            this.ProviceList = JSON.parse(JSON.stringify(this.AllProviceList))
          } else {
            const needle = val.toLowerCase();
            this.ProviceList = this.AllProviceList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      //筛选城市
      filterCity(val, update) {
        update(() => {
          if (val === '') {
            this.CityList = JSON.parse(JSON.stringify(this.AllCityList))
          } else {
            const needle = val.toLowerCase();
            this.CityList = this.AllCityList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      //获取国家列表
      getCountryList() {
        queryCountryList({}).then(res => {
          this.CountryList = res.Data;
          this.AllCountryList = res.Data;
        })
      },
      //类型切换
      changeType() {
        this.objOption.CountryId = "";
        this.objOption.ProviceId = "";
        this.objOption.CityId = "";
      },
      //获取省份
      changeProvice() {
        if (this.objOption.CountryId != "") {
          queryAreaList({
            ParentID: this.objOption.CountryId
          }).then(res => {
            if (res.Code == 1) {
              this.ProviceList = res.Data;
              this.AllProviceList = res.Data;
            }
          })
        }
      },
      //获取城市列表
      changeCity() {
        if (this.objOption.ProviceId != "") {
          queryAreaList({
            ParentID: this.objOption.ProviceId
          }).then(res => {
            if (res.Code == 1) {
              this.CityList = res.Data;
              this.AllCityList = res.Data;
            }
          })
        }
      },
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.ID > 0) {
          queryAreaInfo({
            ID: this.saveObj.ID
          }).then(res => {
            var tempData = res.Data;
            this.objOption.ID = tempData.ID;
            this.objOption.Name = tempData.Name;
            this.objOption.ParentID = tempData.ParentID;
            this.objOption.CodeLevel = tempData.CodeLevel;
            if (tempData.CountryId && tempData.CountryId == 0) {
              this.objOption.CountryId = "";
            } else {
              this.objOption.CountryId = tempData.CountryId;
            }
            if (tempData.ProviceId && tempData.ProviceId == 0) {
              this.objOption.ProviceId = "";
            } else {
              this.objOption.ProviceId = tempData.ProviceId;
            }
            if (tempData.CityId && tempData.CityId == 0) {
              this.objOption.CityId = "";
            } else {
              this.objOption.CityId = tempData.CityId;
            }
            if (tempData.ProviceId && tempData.ProviceId > 0) {
              this.changeProvice()
            }
            if (tempData.CityId && tempData.CityId > 0) {
              this.changeCity();
            }
          })
          this.optionTitle = "修改地区信息"
        } else {
          this.optionTitle = "新增地区"
          this.objOption.ID = 0;
          this.objOption.Name = '';
          this.objOption.ParentID = '';
          this.objOption.CodeLevel = 1;
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //保存菜单
      setArea() {
        this.saveLoading = true;
        if (this.objOption.CodeLevel == 2) {
          this.objOption.ParentID = this.objOption.CountryId;
        }
        if (this.objOption.CodeLevel == 3) {
          this.objOption.ParentID = this.objOption.ProviceId;
        }
        if (this.objOption.CodeLevel == 4) {
          this.objOption.ParentID = this.objOption.CityId;
        }
        saveArea(this.objOption).then(res => {
          this.saveLoading = false
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: '数据保存成功！',
            position: 'top'
          })
          this.$emit("success")
          this.closeSaveForm()
        }).catch(() => {
          this.saveLoading = false
        })
      }
    },
  }
</script>