<template>
  <div>
    <el-form
      :model="sizeForm"
      :rules="rules"
      label-position="right"
      label-suffix=":"
      label-width="150px"
      ref="ruleForm"
    >
      <dg-row>
        <dg-col>
          <el-form-item label="应用系统名称" prop="appName">
            <dg-select
              :data="appNameList"
              @change="changeAppName"
              clearable
              filterable
              label-name="value"
              placeholder="请选择应用系统名称"
              v-model="sizeForm.appName"
              value-name="code"
            />
          </el-form-item>
          <!--<el-form-item label="应用代码" prop="appId">
                      <el-input
                          readonly
                          maxlength="50"
                          placeholder="在此显示应用代码，不可修改"
                          v-model.trim="sizeForm.appId"
                          :data="appNameList"
                          label-name="appId"
                          value-name="code"
                      />
                    </el-form-item>-->
          <el-form-item label="服务资源名称" prop="serviceName">
            <dg-select
              :data="serviceData"
              :loading="loading"
              :remote-method="remoteSvcNameMethod"
              @change="changeSvcName"
              clearable
              filterable
              label-name="serviceName"
              placeholder="请输入服务资源名称或关键字"
              remote
              v-model.trim="sizeForm.serviceName"
              value-name="serviceCode"
            />
          </el-form-item>
          <el-form-item label="服务资源标识符" prop="serviceCode">
            <el-input
              :data="serviceData"
              label-name="serviceCode"
              maxlength="50"
              placeholder="在此显示服务资源标识符，不可修改"
              readonly
              v-model.trim="sizeForm.serviceCode"
              value-name="serviceCode"
            />
          </el-form-item>
        </dg-col>
      </dg-row>
    </el-form>
    <div class="dg-layer-demo" v-footer>
      <dg-button @click="handleClose">取消</dg-button>
      <dg-button @click="handleSave" type="primary">保存</dg-button>
    </div>
  </div>
</template>

<script>
import * as Api from '@/api/service-delegate';
export default {
  name: 'delegate-dialog',
  props: {
    id: String,
    formData: Object
  },
  data() {
    return {
      list: [],
      loading: false,
      sizeForm: {
        serviceName: '',
        appName: '',
        appId: '',
        serviceCode: ''
      },
      appNameList: [],
      serviceData: [],
      rules: {
        appName: [{ required: true, message: '请选择应用名称', trigger: 'blur' }],
        serviceName: [{ required: true, message: '请选择服务名称', trigger: 'blur' }]
      }
    };
  },
  created() {
    if (this.id) {
      this.sizeForm = this.formData;
    }
    this.getAppList();
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('close');
    },
    handleSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let api;
          if (this.id) {
            api = 'patch';
          } else {
            api = 'save';
          }
          Api[api](this.sizeForm)
            .then(() => {
              this.$emit('success');
              this.$message.success('保存成功！');
            })
            .catch((error) => this.$message.error({ message: error }));
        }
      });
    },
    remoteSvcNameMethod(query) {
      if (query !== '') {
        this.loading = true;
        const queryParams = {
          serviceName: query
        };
        setTimeout(() => {
          this.loading = false;
          Api.dropMenu(queryParams).then((res) => {
            this.serviceData = res;
          });
        }, 200);
      } else {
        this.serviceData = [];
      }
    },
    getAppList() {
      const that = this;
      Api.getAppName()
        .then((res) => {
          that.appNameList = res;
        })
        .catch((error) => {
          that.$message.error({ message: error });
        });
    },
    changeAppName(val) {
      this.sizeForm.appId = val;
    },
    changeSvcName(val) {
      this.sizeForm.serviceCode = val;
    }
  }
};
</script>

<style scoped>
</style>