<template>
  <app-dialog v-model="visible" :loading="loading" :title="title" append-to-body class="detail-dialog" @cancel="onCancel" @confirm="onConfirm" width="600px">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row type="flex" justify="center">
        <app-filter-item :span="24" label="名称" prop="name">
          <el-input v-model="form.name" clearable placeholder="请输入" />
        </app-filter-item>
      </el-row>
      <el-row type="flex" justify="center">
        <app-filter-item :span="24" label="编码" prop="code">
          <el-input v-model="form.code" clearable placeholder="请输入" />
          <div>
            <i class="tips">
              每三位编码组成一个识别码，12位-15位数，依次指定：
              <br />
              省（自治区、直辖市、特别行政区），
              <br />
              市（地区、自治州、盟），
              <br />
              县（市辖区、县级市、旗），乡镇，村
            </i>
          </div>
        </app-filter-item>
      </el-row>
      <el-row type="flex" justify="center">
        <app-filter-item prop="longitude" :span="24" label="经度">
          <el-input v-model="form.longitude" placeholder="请输入经度" />
          <div>
            <i class="tips"> 经度整数部分为0-180，小数部分为0到6位! </i>
          </div>
        </app-filter-item>
      </el-row>
      <el-row type="flex" justify="center">
        <app-filter-item prop="latitude" :span="24" label="纬度">
          <el-input v-model="form.latitude" placeholder="请输入纬度" />
          <div>
            <i class="tips"> 纬度整数部分为0-90，小数部分为0到6位! </i>
          </div>
        </app-filter-item>
      </el-row>
    </el-form>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import API from '@/api/business/area.js';
export default {
  name: 'areaDialog',
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => [],
    },
    parent: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    var checkLg = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        let numTemp = value;
        let num = parseFloat(numTemp);
        if (num < 0 || num > 180) {
          callback(new Error('经度在0-180之间,请根据提示填写!'));
        } else {
          callback();
        }
      }
    };
    var checklt = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        let numTemp = value;
        let num = parseFloat(numTemp);
        if (num < 0 || num > 90) {
          callback(new Error('纬度在0-90之间,请根据提示填写!'));
        } else {
          callback();
        }
      }
    };
    return {
      form: {
        name: '',
        longitude: '',
        latitude: '',
        parentId: '',
        code: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'change',
          },
        ],
        code: [
          {
            required: true,
            message: '编码不能为空',
            trigger: 'change',
          },
          { pattern: '^[0-9]+$', message: '编码为 12 到 15 位数字,请根据提示填写', trigger: 'change' },
          { min: 12, max: 15, message: '编码为 12 到 15 位数字,请根据提示填写', trigger: 'change' },
        ],
        longitude: [
          { validator: checkLg, trigger: 'blur' },
          { pattern: '^[0-9]+(.[0-9]{1,6})?$', message: '格式错误,请根据提示填写', trigger: 'change' },
        ],
        latitude: [
          { validator: checklt, trigger: 'blur' },
          { pattern: '^[0-9]+(.[0-9]{1,6})?$', message: '格式错误,请根据提示填写', trigger: 'change' },
        ],
      },
      loading: false,
    };
  },
  mounted() {},
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
      this.form.longitude = this.form.longitude ? this.form.longitude.toString() : '';
      this.form.latitude = this.form.latitude ? this.form.latitude.toString() : '';

      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    onCancel() {
      this.visible = false;
    },
    onConfirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            await API.saveArea(this.form);
            this.$message.success('操作成功');
            this.onCancel();
            this.$emit('confirm');
          } finally {
            this.loading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .app-dialog-content {
  height: 40vh !important;
}
.tips {
  color: #aaa;
  font-style: normal;
}
</style>
