<template>
  <el-dialog
    :title="$t('vinno.' + mode)"
    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" :width="90" :height="90"></sc-upload>
      </el-form-item>
      <el-form-item
        :label="$t('organization.OrganizationName')"
        prop="OrganizationName"
      >
        <el-input
          v-model="form.OrganizationName"
          style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('organization.PatientType')"
        prop="PatientType"
        style="width: 100%"
      >
        <el-select v-model="form.PatientType">
          <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"
        style="width: 100%"
      >
        <el-select
          v-model="form.CountryCode"
          @change="changeCountry(form.CountryCode)"
        >
          <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"
        style="width: 100%"
      >
        <el-select
          v-model="form.ProvinceCode"
          @change="changePovince(form.ProvinceCode)"
        >
          <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"
        style="width: 100%"
      >
        <el-select v-model="form.CityCode">
          <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"
        style="width: 100%"
      >
        <el-select v-model="form.ParentCode">
          <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 {
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      form: {
        id: "",
        appId: "",
        appName: "",
        secret: "",
        type: [],
        exp: "",
      },
      rules: {
        appId: [{ required: true, message: "请输入应用标识" }],
        appName: [{ required: true, message: "请输入应用名称" }],
        secret: [{ required: true, message: "请输入秘钥" }],
        type: [
          { required: true, message: "请选择类型范围", trigger: "change" },
        ],
        exp: [
          { required: true, message: "请选择授权到期日期", trigger: "change" },
        ],
      },
      visible: false,
      isSaveing: false,
      organizations: [],
      regions: [],
      countries: [],
      provinces: [],
      cities: [],
    };
  },
  methods: {
    //显示
    open(mode = "create") {
      this.mode = mode;
      this.visible = true;
      this.initOrganizations();
      this.initRegions();
      return this;
    },
    //表单提交方法
    async submit() {
      var method =
        this.mode == "create" ? "AddOrganization" : "ModifyOrganizationAsync";
      await this.$API.wing.post(method, this.form);
      this.visible = false;
      this.$message.success("操作成功");
    },
    //表单注入数据
    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" },
        "/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);
    },
    changePovince(province) {
      this.cities = this.regions.filter((x) => x.f == province);
    },
  },
};
</script>

<style>
</style>
