<template>
  <div class="formcon">
    <div class="formtop">
      <div class="left">
        <el-form-item label="编号：" prop="num">
          <el-input
            v-model="form.num"
            maxlength="4"
            :onkeyup="(form.num = form.num.replace(/^(0+)|[^\d]+/g, ''))"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="form.name"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="电话：" prop="tel">
          <el-input
            type="textarea"
            v-model="form.tel"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="地址：" prop="address">
          <el-input
            type="textarea"
            maxlength="200"
            show-word-limit
            v-model="form.address"
          ></el-input>
        </el-form-item>
      </div>
      <div class="right">
        <el-form-item label="纬度：">
          <el-input
            :onkeyup="(form.lat = form.lat.replace(/^(0+)|[^\d\.]+/g, ''))"
            v-model="form.lat"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="经度：">
          <el-input
            :onkeyup="(form.lng = form.lng.replace(/^(0+)|[^\d\.]+/g, ''))"
            v-model="form.lng"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="所属城市：">
          <i class="bs">*</i>
          <el-select
            v-model="form.cityId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="营业时间：">
          <el-input
            v-model="form.opening"
            type="textarea"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="描述：">
          <el-input
            type="textarea"
            maxlength="500"
            show-word-limit
            v-model="form.description"
          ></el-input>
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
import { museumGetCity } from "@/configue/api";
export default {
  props: ["data", "rule", "roleList"],
  data() {
    return {
      form: this.data,

      options: [],
    };
  },
  methods: {},
  async mounted() {
    let res = await museumGetCity();
    this.options = res.data;
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  padding-right: 60px;
}
/deep/.el-input__count-inner {
  background: transparent;
}
.bs {
  position: absolute;
  z-index: 99;
  left: -93px;
  top: 0px;
  color: #f56c6c;
  font-size: 14px;
}
.formcon {
  width: 100%;
  .formtop,
  .formbom {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative;
    > div {
      width: 40%;
      &:first-of-type {
        margin-right: 5%;
      }
    }
  }
  .formbom {
    align-items: center;
  }
}
</style>
