<template>
  <div :style="textStyle">
    <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover' }"
      @change="handleChange"
    />
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import { addresData } from './address'
export default defineComponent({
  name: 'FcAddress',
  props: {
    title: String,
    size: String,
    align: String
  },
  data() {
    return {
      value: [],
      options: addresData
    }
  },
  computed: {
    textStyle() {
      return {
        textAlign: this.align || 'left'
      }
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
})
</script>
<style>
._fc-title {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 16px;
}

._fc-title.h1,
._fc-title.h2 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eee;
}

._fc-title.h1 {
  font-size: 32px;
  line-height: 1.2;
}

._fc-title.h2 {
  font-size: 24px;
  line-height: 1.225;
}

._fc-title.h3 {
  font-size: 20px;
  line-height: 1.43;
}

._fc-title.h4 {
  font-size: 16px;
}

._fc-title.h5 {
  font-size: 14px;
}

._fc-title.h6 {
  font-size: 12px;
}
</style>
