<template>
  <div class="waybil_form">
    <h4 class="head_title">{{title}}</h4>
   <!-- <div class="select_type">
      <div style="margin-right: 20px;">
        <el-radio v-model="radio" label="1">保存到地址簿</el-radio>
      </div>
      <div class="card_book" @click="addressBook"><i class="el-icon-collection icon_address"></i>地址簿</div>
    </div> -->
    <el-form style="width: 100%;" :model="ruleForm" :rules="rules" :label-position="labelPosition" label-width="80px"
      ref="ruleForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      <!-- <el-form-item label="省市区" prop="region">
        <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address" placeholder="请输入详细地址"></el-input>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
  import {
    regionData,
    CodeToText
  } from 'element-china-area-data'
  export default {
    name: 'waybillForm',
    props: {
      // 表单tabel数据
      title: {
        type: String,
        default: () => '',
      },
      // 绑定值
      ruleForm: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        labelPosition: 'left',
        options: regionData,
        selectedOptions: [],
        radio: '',
        rules: {
          name: {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          },
          phone: {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          },
          region: {
            required: true,
            message: '请选择省市区',
            trigger: 'blur,change'
          },
          address: {
            required: true,
            message: '请输入地址',
            trigger: 'blur'
          },
        }
      }
    },
    watch: {
      ruleForm: {
        handler(newVal) {
          this.selectedOptions = newVal.regionCode
        },
        deep: true // 开启深度监听
      }
    },
    methods: {
      handleChange(value) {
        this.getCodeToText(value)
      },
      addressBook() {
        this.$emit('addressBook')
      },
      getCodeToText(codeArray) {
        this.selectedOptions = codeArray
        this.ruleForm.regionCode = codeArray
        // console.log(codeArray, 8887)
        let area = "";
        switch (codeArray.length) {
          case 1:
            area += CodeToText[codeArray[0]];
            break;
          case 2:
            area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
            break;
          case 3:
            area +=
              CodeToText[codeArray[0]] +
              "/" +
              CodeToText[codeArray[1]] +
              "/" +
              CodeToText[codeArray[2]];
            break;
          default:
            break;
        }
        this.ruleForm.region = area
      },
      //子组件校验，传递到父组件
      validateForm() {
        let flag = null
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            flag = true
          } else {
            flag = false
          }
        })
        return flag
      },
      // 重置
      resetForm() {
        this.selectedOptions = []
        this.$refs.ruleForm.resetFields();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .head_title {
    display: flex;
    justify-content: center;
    width: calc(100% - 6px);
    padding-bottom: 6px;
    padding-left: 5px;
    border-bottom: 1px solid #E4E7ED;
    margin: 10px 0px;
  }

  .waybil_form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .select_type {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 80px;
  }

  .icon_address {
    font-size: 23px;
    margin-right: 5px;
  }

  .card_book {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
</style>
