<template>
  <div class='app-container'>
    <div v-if="data.form.id" style="margin-bottom: 20px;">
      <div>售后进度：</div>
      <el-steps style="max-width: 600px" :active="1" finish-status="success">
        <el-step v-for="item in data.steps" :title="item">
          <template #icon>
            <i class="spot el-step__line-inner" />
          </template>
        </el-step>
      </el-steps>
    </div>
    <el-form :model="data.form" :rules="data.rules" ref="form" label-width="auto">
      <el-form-item label="买家昵称" prop="buyerNick">
        <el-input v-model="data.form.buyerNick" placeholder="请输入买家昵称" />
      </el-form-item>
      <el-form-item label="收货人" prop="contact">
        <el-input v-model="data.form.contact" placeholder="请输入收货人名称" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="data.form.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="收货地址" prop="provinceName">
        <div class="address">
          <el-select v-model="data.form.provinceName" placeholder="省">
            <el-option v-for="item in addressOptions" :key="item.id" :value="item.name" :label="item.name" />
          </el-select>
          <span>/</span>
          <el-select v-model="data.form.cityName" placeholder="市">
            <el-option v-for="item in cityOptions" :key="item.id" :value="item.name" :label="item.name" />
          </el-select>
          <span>/</span>
          <el-select v-model="data.form.areaName" placeholder="区">
            <el-option v-for="item in areaOptions" :key="item.id" :value="item.name" :label="item.name" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="data.form.address" type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number v-model="data.form.quantity" :min="1" />
      </el-form-item>
    </el-form>
    <el-button class="submit" type="primary" round @click="getSubmit">提交</el-button>
  </div>
</template>

<script setup>
import { submit } from '@/api/mobile/apply'
import { useAddress } from '@/hooks/index'
const { addressOptions, getAddress } = useAddress()

const { proxy } = getCurrentInstance()

const data = reactive({
  // 表单
  form: {
    shopCode: "A100001",
    quantity: 0,
    oid: "",
    outSkuId: 564
  },
  // 进度条
  steps: ['待质检', '质检完成', '待维修', '维修中', '维修完成', '已发货'],
  // 校验
  rules: {
    buyerNick: [{ required: true, message: '请输入买家昵称', trigger: 'blur' }],
    contact: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    provinceName: [{ required: true, message: '请选择收货地址', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  }
})

// 计算属性
const cityOptions = computed(() => {
  return data.form.provinceName ? addressOptions.value.find(i => i.name == data.form.provinceName).childList : []
})

const areaOptions = computed(() => {
  return data.form.cityName ? cityOptions.value.find(i => i.name == data.form.cityName).childList : []
})

// 提交
const getSubmit = () => {
  proxy.$refs.form.validate((valid) => {
    if (valid) {
      submit({ exchangeApplyOrderList: [data.form] }).then(res => {
        if (res.code === 0) {
          proxy.$modal.msgSuccess('提交成功！')
          proxy.$refs.form.resetFields()
          data.form = {
            shopCode: "A100001",
            quantity: 0,
            oid: "",
            outSkuId: 564
          }
        }
      })
    } else {
      return false
    }
  })
}

onMounted(() => {
  document.title = '换新申请'
  getAddress()
})
</script>

<style lang="scss" scoped>
:deep(.el-steps) {
  .el-step__head {
    margin-left: 6px;
  }

  .el-step__title {
    font-size: 10px;
    line-height: 1;
  }

  .el-step__icon {
    width: 20px;
    position: absolute;
  }

  .el-step__main {
    margin-top: 30px;
  }
}

.spot {
  transform: scale(3);
  border-radius: 50%;
}

.el-form {
  .info {
    line-height: 1;
    margin-top: 10px;
    font-size: 8.5px;
    opacity: 0.5;
  }

  .el-image {
    width: 146px;
  }

  .address {
    width: 100%;
    display: flex;
    align-items: center;

    span {
      margin: 0 4px
    }
  }
}

.submit {
  width: 100%;
  height: 40px;
}
</style>