<template>
  <div>
    <page-module name="业务类型" icon="star">
      <el-radio-group v-model="ownerType" @change="handleOwnerType">
        <el-row :gutter="40" class="new-car-owner-box">
          <el-col :span="12">
            <el-radio :label="0" border class="new-car-owner">
              <el-row>
                <el-col class="owner-type-title">原车解绑</el-col>
                <el-col class="owner-type-info">由原车主现场解绑</el-col>
              </el-row>
            </el-radio>
          </el-col>
          <el-col :span="12">
            <el-radio :label="1" border class="used-car-new-owner">
              <el-row>
                <el-col class="owner-type-title">二手车解绑</el-col>
                <el-col class="owner-type-info">由新车主代解绑</el-col>
              </el-row>
            </el-radio>
          </el-col>
        </el-row>
      </el-radio-group>
    </page-module>
    <steps :data="stepsData" :index="stepIndex" :margin="margin" />
  </div>
</template>

<script>
export default {
  name: 'OwnerType',
  props: {
    curType: {
      type: [Number, String],
      default: () => 0
    },
    stepIndex: {
      type: [Number, String],
      default: () => 0
    }
  },
  data() {
    return {
      ownerType: 0,
      stepsData: ['车卡信息录入', '客户确认'],
      margin: '0 200px 0 200px'
    }
  },
  watch: {
    curType: {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.ownerType = val
          if (val === 0) {
            this.stepsData = ['车卡信息录入', '客户确认']
            this.margin = '0 200px 0 200px'
          } else {
            this.stepsData = ['车卡信息录入', '客户信息录入', '人脸识别']
            this.margin = '0 0 0 0'
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    handleOwnerType(val) {
      if (this.$route.name === 'CardUnbindingStepOne') {
        this.$emit('change-type', val)
        return false
      }
      const owner = val
      this.$router.push({
        name: 'CardUnbindingStepOne',
        params: { owner }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.special-business-card-binding{
  .new-car-owner-box .el-radio{
    display: flex;
    width: 346px;
    height: 106px;
    align-items: center;
    padding-left: 24px;
  }
  .new-car-owner{
    background: url('~@/assets/special-business/new_car_owner@2x.png') no-repeat;
    background-size: 45%;
    background-position: right
  }
  .used-car-new-owner{
    background: url('~@/assets/special-business/used_car_new_owner@2x.png') no-repeat;
    background-size: 45%;
    background-position: right
  }
  .owner-type-title{
    font-size: 16px;
    color: #212026;
    padding-bottom: 5px;
  }
  .owner-type-info{
    font-size: 12px;
    color: #84858a;
  }
}
</style>
