<!-- 租户编辑弹窗 -->
<template>
  <a-modal
    :width="640"
    :visible="visible"
    :confirm-loading="loading"
    :title="isUpdate ? '修改租户' : '添加租户'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
    <a-row :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="租户编号:" name="code">
            <a-input
              allow-clear
              :maxlength="150"
              placeholder="请输入租户编号"
              v-model:value="form.code"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="平台logo:">
            <UploadOss v-if="visible" ref="logoUpload" :default-list="initUpload"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="租户名称:" name="name">
            <a-input
              allow-clear
              :maxlength="150"
              placeholder="请输入租户名称"
              v-model:value="form.name"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="用户账号:" name="username">
            <a-input
              allow-clear
              :maxlength="20"
              placeholder="请输入用户账号"
              v-model:value="form.username"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="!isUpdate" :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="登录密码:" name="password">
            <a-input-password
              :maxlength="20"
              placeholder="请输入登录密码"
              v-model:value="form.password"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :md="10" :sm="8" :xs="24">
          <a-form-item
            label="所属区域:"
            name="provinceCode"
            :label-col="{ sm: { span: 10 }, xs: { span: 9 } }"
          >
            <a-select
              v-model:value="form.provinceCode"
              :get-popup-container="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              style="width: 100%"
              placeholder="请选择省"
              allow-clear
              @change="selectArea(form.provinceCode, 'province', 'city')"
            >
              <a-select-option
                v-for="(item, index) in provinceList"
                :key="index"
                :value="item.citycode"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="7" :sm="4" :xs="24">
          <a-form-item
            name="cityCode"
            :wrapper-col="{ sm: { span: 24 }, xs: { span: 24 } }"
          >
            <a-select
              v-model:value="form.cityCode"
              allow-clear
              :get-popup-container="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              style="width: 100%"
              placeholder="请选择市"
              @change="selectArea(form.cityCode, 'city', 'district')"
            >
              <a-select-option
                v-for="(item, index) in cityList"
                :key="index"
                :value="item.citycode"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="7" :sm="4" :xs="24">
          <a-form-item
            :wrapper-col="{ sm: { span: 24 }, xs: { span: 24 } }"
            name="districtCode"
          >
            <a-select
              v-model:value="form.districtCode"
              :get-popup-container="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              allow-clear
              style="width: 100%"
              placeholder="请选择区"
              @change="selectArea(form.districtCode, 'district', 'street')"
            >
              <a-select-option
                v-for="(item, index) in districtList"
                :key="index"
                :value="item.citycode"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="平台名称:" name="platformName">
            <a-input
              allow-clear
              :maxlength="8"
              placeholder="请输入平台名称(长度不超过8个字)"
              v-model:value="form.platformName"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="机场地址:">
            <a-input
              allow-clear
              placeholder="请输入机场地址"
              v-model:value="form.airportUrl"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import UploadOss from "@/components/UploadOss.vue";

export default {
  name: "TenantEdit",
  emits: ["done", "update:visible"],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  components: { UploadOss },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        // code: [
        //   {
        //     required: true,
        //     message: "请输入租户编号",
        //     type: "string",
        //     trigger: "blur",
        //   },
        // ],
        name: [
          {
            required: true,
            message: "请输入租户名称",
            type: "string",
            trigger: "blur",
          },
        ],
        provinceCode: [
          {
            required: true,
            message: "请选择所属区域",
            type: "string",
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            message: "请输入登录账号",
            type: "string",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入登录密码",
            type: "string",
            trigger: "blur",
          },
        ],
        platformName: [
          {
            required: true,
            message: "请输入平台名称",
            type: "string",
            trigger: "blur",
          },
        ]
      },
      provinceList: [],
      cityList: [],
      districtList: [],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      initUpload: ''
    }
  },
  created() {
    this.getAreaList()
  },
  watch: {
    data() {
      if (this.$refs.form) {
        this.$refs.form.clearValidate();
      }
    },
    visible() {
      if(this.visible) {
        if (this.data) {
          this.form = Object.assign({}, this.data);
          this.isUpdate = true;
          this.initUpload = this.data.logo
          if(this.provinceList.length) {
            if(this.form.provinceCode) {
              this.provinceList.forEach((item) => {
                if (item.citycode === this.form.provinceCode) {
                  this.cityList = item.itemList
                }
              })
            }
            if(this.form.cityCode) {
              this.cityList.forEach((item) => {
                if (item.citycode === this.form.cityCode) {
                  this.districtList = item.itemList
                }
              })
            }
          }
        } else {
          this.form = {platformName: '河湖长眼巡检平台'};
          this.isUpdate = false;
          this.initUpload = ''
        }
      } else {
        this.form = {platformName: '河湖长眼巡检平台'}
      }
    }
  },
  methods: {
    /* 获取省市区列表 */
    getAreaList() {
      this.provinceList = []
      this.$http.get('/city/queryCityList').then(res => {
        this.provinceList = res.data
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    /* 选择省市区 */
    selectArea(value, type, name){
      if (type === 'province') {
        this.cityList = []
        this.districtList = []
        this.form.cityCode = null
        this.form.cityName = null
        this.form.districtCode = null
        this.form.districtName = null
      } 
      if (type === 'city') {
        this.districtList = []
        this.form.districtCode = null
        this.form.districtName = null
      }
      this.getListBycode(value, type, name)
    },
     /* 根据选择的选中的code返回子项列表 */
    getListBycode(code, name, childrenName) {
      if(code) {
        this[name + 'List'].forEach((item) => {
          if (item.citycode == code) {
            this[childrenName + 'List'] = item.itemList
            this.form[name+'Name'] = item.name
          }
        })
      } else {
        this[childrenName + 'List'] = []
        this.form[name+'Name'] = null
      }
    },
    /* 保存编辑 */
    save() {
      this.$refs.form
        .validate()
        .then(() => {
          this.loading = true;
          this.$refs.logoUpload.startUpload().then((res)=> {
            if(!res.includes('error')) {
              this.form.logo = res[0]
              this.$http[this.isUpdate ? "put" : "post"](
                this.isUpdate ? "/tenant/edit" : "/tenant/add",
                this.form
              )
                .then((res) => {
                  this.loading = false;
                  if (res.data.code === 0) {
                    this.$message.success(res.data.msg);
                    if (!this.isUpdate) {
                      this.form = {};
                    }
                    this.updateVisible(false);
                    this.$emit("done");
                  } else {
                    this.$message.error(res.data.msg);
                  }
                })
                .catch((e) => {
                  this.loading = false;
                  this.$message.error(e.message);
                });
            }
          })
        })
        .catch(() => {});
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

<style scoped>
</style>
