<template>
  <el-dialog
    :title="$t(!isEdit ? 'create' : 'edit')"
    v-model="visible"
    :width="500"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="100px"
      label-position="right"
    >
      <el-form-item :label="$t('organization.OrganizationLogo')" prop="LogoUrl">
        <sc-upload
          v-model="form.LogoUrl"
          :title="$t('organization.UploadLogo')"
          :width="90"
          :height="90"
        ></sc-upload>
      </el-form-item>
      <el-form-item
        :label="$t('organization.OrganizationName')"
        prop="OrganizationName"
      >
        <el-input
          v-model="form.OrganizationName"
          clearable
          :placeholder="$t('organization.OrgNameRequire')"
          style="width: 60%"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('organization.PatientType')" prop="PatientType">
        <el-select v-model="form.PatientType" style="width: 60%">
          <el-option
            :label="$t('organization.PatientType0')"
            :value="0"
          ></el-option>
          <el-option
            :label="$t('organization.PatientType1')"
            :value="1"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('organization.CountryName')" prop="CountryCode">
        <el-select
          v-model="form.CountryCode"
          @change="changeCountry"
          style="width: 60%"
        >
          <el-option
            v-for="item in countries"
            :key="item.c"
            :label="item.n"
            :value="item.c"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        :label="$t('organization.ProvinceName')"
        prop="ProvinceCode"
      >
        <el-select
          v-model="form.ProvinceCode"
          @change="changePovince"
          clearable
          style="width: 60%"
        >
          <el-option
            v-for="item in provinces"
            :key="item.c"
            :label="item.n"
            :value="item.c"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('organization.CityName')" prop="CityCode">
        <el-select
          v-model="form.CityCode"
          @change="changeCity"
          clearable
          style="width: 60%"
        >
          <el-option
            v-for="item in cities"
            :key="item.c"
            :label="item.n"
            :value="item.c"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        :label="$t('organization.FrontOrganization')"
        prop="ParentCode"
      >
        <el-select v-model="form.ParentCode" clearable style="width: 60%">
          <el-option
            v-for="item in organizations"
            :key="item.Key"
            :label="item.Value"
            :value="item.Key"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">{{
        $t("dialogBox.cancelButtonText")
      }}</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">{{
        $t("dialogBox.saveButtonText")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isEdit: false,
      form: {},
      rules: {
        OrganizationName: [
          {
            required: true,
            message: this.$t("organization.OrgNameRequire"),
            trigger: "blur",
          },
        ],
        PatientType: [
          {
            required: true,
            message: this.$t("organization.PatientTypeRequire"),
            trigger: "blur",
          },
        ],
      },
      visible: false,
      isSaveing: false,
      organizations: [],
      regions: [],
      countries: [],
      provinces: [],
      cities: [],
    };
  },
  methods: {
    //显示
    open(isEdit = false) {
      this.isEdit = isEdit;
      this.visible = true;
      this.initOrganizations();
      this.initRegions();
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var method = !this.isEdit
            ? "AddOrganization"
            : "ModifyOrganizationAsync";
          await this.$API.wing.post(method, this.form, () => {
            this.$emit("success");
            this.$message.success("操作成功");
            this.visible = false;
          });
          this.isSaveing = false;
        } else {
          return false;
        }
      });
    },
    //表单注入数据
    async setData(data) {
      var res = await this.$API.wing.post("GetOrganizationAsync", {
        OrganizationCode: data.OrganizationCode,
      });
      this.form = res;
      this.organizations = this.organizations.filter(
        (x) => x.Key != data.OrganizationCode
      );
      this.changeCountry(this.form.CountryCode);
      this.changePovince(this.form.ProvinceCode);
    },
    async initOrganizations() {
      this.organizations = await this.$API.wing.post(
        "GetOrganizationSelectList"
      );
    },
    async initRegions() {
      var res = await this.$API.wing.post(
        "GetRegions",
        { Version: "0.9", LanguageType: "zh-CN" },
        null,
        "/IRegionService"
      );
      this.regions = JSON.parse(res.ReginData).datas;
      this.countries = this.regions.filter((x) => x.g == "0");
    },
    changeCountry(country) {
      this.provinces = this.regions.filter((x) => x.f == country);
      this.form.RegionCode = country;
    },
    changePovince(province) {
      this.cities = this.regions.filter((x) => x.f == province);
      this.form.RegionCode = province;
    },
    changeCity(city) {
      this.form.RegionCode = city;
    },
  },
};
</script>

<style>
</style>
