<template>
  <div class="comp-bus-type">
    <el-form ref="formRef" :model="form" :rules="formRules" size="small" label-position="top">
      <el-row>
        <el-col :span="24">
          <el-form-item label=" " prop="userType">
            <el-radio-group v-model="form.userType" class="cbt-el-radio-group" @change="handleUserTypeChange">
              <el-row :gutter="40">
                <el-col :span="10">
                  <el-radio label="new" border class="cbt-el-radio new">
                    <div class="cbt-radio-block">
                      <div class="cbt-rb-title">新车车主</div>
                      <div class="cbt-rb-desc">针对未实名/已解绑的车辆</div>
                    </div>
                  </el-radio>
                </el-col>
                <el-col :span="10">
                  <el-radio label="old" border class="cbt-el-radio old">
                    <div class="cbt-radio-block">
                      <div class="cbt-rb-title">二手车新车主</div>
                      <div class="cbt-rb-desc">针对未解绑的车辆</div>
                    </div>
                  </el-radio>
                </el-col>
              </el-row>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label-width="0" prop="isDelegate">
            <el-checkbox v-model="form.isDelegate">是否委托人代办</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CompBusType',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        userType: 'new',
        isDelegate: false
      },
      formRules: {
        isDelegate: [
          { required: true, message: '请选择是否委托人代办', trigger: ['change', 'blur'] }
        ]
      },
      isTablet: window.OS.isTablet
    }
  },
  watch: {
    data() {
      this.updateInternalData()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.updateInternalData()
    },
    updateInternalData() {
      if (typeof this.data === 'object' && this.data !== null) {
        this.form.userType = (this.data.userType === 'new' || this.data.userType === 'old') ? this.data.userType : 'new'
        this.form.isDelegate = typeof this.data.isDelegate === 'boolean' ? this.data.isDelegate : false
      } else {
        this.form.userType = 'new'
        this.form.isDelegate = false
      }
    },

    // 校验
    async validate(isErrorAnchor = false) {
      try {
        await this.$refs.formRef.validate()
        return true
      } catch (e) {
        if (isErrorAnchor) {
          this.$refs.formRef.fields.filter(item => item.validateState === 'error')[0].$el.scrollIntoView(true)
        }
        let temp = {
          anchor: () => {
            this.$refs.formRef.fields.filter(item => item.validateState === 'error')[0].$el.scrollIntoView(true)
            temp = null
          }
        }
        throw temp
      }
    },
    // 获取数据
    getFormData() {
      return {
        userType: this.form.userType,
        isDelegate: this.form.isDelegate
      }
    },
    // 获取待缓存数据
    getPendingCacheData() {
      return this.getFormData()
    },

    /**
     * 监听用户类型改变的方法
     */
    handleUserTypeChange() {
      this.$emit('change', this.form.userType)
    }
  }
}
</script>

<style lang="scss">
.comp-bus-type {
  .cbt-el-radio-group {
    width: 100%;
  }
  .cbt-el-radio {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 346px;
    height: 106px;
    padding: 0 24px;
    border-radius: 4px;
    border-color: #f0f0f0;
    &.is-checked {
      background: rgba(42,104,255,0.04);
    }
    &:hover {
      border-color: #2a68ff;
    }
    .el-radio__inner {
      width: 16px;
      height: 16px;
    }
    .el-radio__input {
      flex: 0 0 auto;
    }
    .el-radio__label {
      padding-left: 16px;
    }
    .cbt-radio-block {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      z-index: 1;
      .cbt-rb-title {
        font-size: 16px;
        color: #212026;
      }
      .cbt-rb-desc {
        margin-top: 5px;
        font-size: 12px;
        color: #84858a;
      }
    }
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      display: block;
      width: 156px;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: right center;
    }
    &.new {
      &:after {
        background-image: url('../../assets/image/new_car_owner@2x.png');
      }
    }
    &.old {
      &:after {
        background-image: url('../../assets/image/used_car_new_owner@2x.png');
      }
    }
  }
}
</style>
