<template>
  <div class="mt-location">
    <div class="location">
      <i
        :style="iconStyleExtra"
        v-if="prefixIcon"
        class="iconfont location-icon"
        :class="prefixIcon"
      ></i>
      <input
        @input="onChange"
        @change="onChange"
        v-model="iptVal"
        v-if="editable"
        class="location-content"
      />
      <div class="location-content" v-else>
        {{ data }}
      </div>
      <i
        @click.stop="onClickIcon"
        style="iconStyleExtra"
        v-if="closeIcon"
        class="iconfont location-icon"
        :class="closeIcon"
      ></i>
    </div>
    <div v-if="showList">
      <div class="list" v-for="(item, index) in list" :key="index">
        <template v-if="showSearchIcon">
          <i class="iconfont list-icon" :class="searchIcon" v-if="!searchIconKey"></i>
          <WlPic v-else :src="item[searchIconKey]"></WlPic>
        </template>
        <div contenteditable="false" class="list-content">
          {{ valueKey ? item[valueKey] : item }}
        </div>
        <i
          @click.stop="onClickSearchIcon"
          style="iconStyleExtra"
          v-if="searchCloseIcon"
          class="iconfont list-icon"
          :class="searchCloseIcon"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
/*
 * @Author: yangxin
 * @Date: 2021-10-15 15:39:19
 * @Last Modified by: yangxin
 * @Last Modified time: 2021-10-15 17:40:59
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "MtLocation",
  components: { WlPic },
  props: {
    data: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    editable: {
      type: Boolean,
      default: false,
    },
    prefixIcon: {
      type: String,
      default: "icon-mobile-ui-charulianjie",
    },
    closeIcon: {
      type: String,
      default: "icon-mobile-ui-guanbi2fill",
    },
    iconStyleExtra: {
      type: Object,
      default: () => {},
    },
    showList: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    valueKey: {
      type: String,
      default: "",
    },
    listStyleExtra: {
      type: Object,
      default: () => {},
    },
    showSearchIcon: {
      type: Boolean,
      default: true,
    },
    searchIcon: {
      type: String,
      default: "icon-mobile-ui-ai219",
    },
    searchIconKey: {
      type: String,
      default: "",
    },
    searchCloseIcon: {
      type: String,
      default: "icon-mobile-ui-guanbi",
    },
  },
  data() {
    return {
      iptVal: this.value || this.data,
    };
  },
  methods: {
    onClickSearchIcon(data) {
      this.$emit("onClickSearchIcon", data);
    },
    onClickCloseIcon() {
      this.$emit("onClickCloseIcon");
    },
    onChange() {
      this.$emit("input", this.iptVal);
      this.$emit("onChange", this.iptVal);
    },
  },
};
</script>

<style lang="scss" scoped>
.mt-location {
  .location {
    @extend %flex-between;
    padding: j(12) 0;
    font-size: j(18);
    background-color: #f6f6f6;
    border-radius: j(10);
    height: j(48);
    box-sizing: border-box;
    &-icon {
      width: j(42);
      text-align: center;
      font-size: j(18);
      color: #cdcdcd;
      flex-shrink: 0;
    }
    &-content {
      flex: 1;
      font-size: j(18);
      outline: none;
      word-break: keep-all;
      height: 100%;
      overflow: hidden;
    }
  }
  .list {
    @extend %flex-between;
    padding: j(12);
    font-size: j(18);
    height: j(48);
    box-sizing: border-box;
    border-top: j(1) solid #f6f6f6;
    &-icon {
      width: j(42);
      text-align: center;
      font-size: j(16);
      color: #cdcdcd;
      flex-shrink: 0;
    }
    &-content {
      flex: 1;
      font-size: j(18);
      outline: none;
      word-break: keep-all;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
