<template>
  <div class='app-container'>
    <!-- 搜索 -->
    <el-form inline>
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="getDialog">推送</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="data.tableData">
      <el-table-column label="店铺编码" align="center" prop="shopeCode" />
      <el-table-column label="会员昵称" align="center" prop="buyerNick" />
      <el-table-column label="收货人" align="center" prop="name" />
      <el-table-column label="手机号" align="center" prop="mobile" />
      <el-table-column label="数量" align="center" prop="planQty" />
      <el-table-column label="物流公司" align="center" prop="logisticsName" />
      <el-table-column label="快递单号" align="center" prop="logisticsCode" />
      <el-table-column label="地址" align="center">
        <template #default="scope">
          {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area }}{{ scope.row.detailAddress }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="buyerMessage" />
    </el-table>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="新增" width="500px">
      <el-form :model="data.dialogForm" :rules="data.rules" ref="dialogForm" label-width="auto">
        <el-form-item label="店铺编码：" prop="shopCode">
          <el-input v-model="data.dialogForm.shopCode" placeholder="请输入店铺编码" />
        </el-form-item>
        <el-form-item label="会员昵称：" prop="buyerNick">
          <el-input v-model="data.dialogForm.buyerNick" placeholder="请输入会员昵称" />
        </el-form-item>
        <el-form-item label="收货人：" prop="name">
          <el-input v-model="data.receiverInfo.name" placeholder="请输入收货人" />
        </el-form-item>
        <el-form-item label="手机号码：" prop="mobile">
          <el-input v-model="data.receiverInfo.mobile" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="数量：" prop="planQty">
          <el-input v-model="data.dialogForm.planQty" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="物流公司：" prop="logisticsName">
          <el-input v-model="data.dialogForm.logisticsName" placeholder="请输入物流公司" />
        </el-form-item>
        <el-form-item label="快递单号：" prop="logisticsCode">
          <el-input v-model="data.dialogForm.logisticsCode" placeholder="请输入快递单号" />
        </el-form-item>
        <div class="address">
          <el-form-item label="收货地址：" prop="province">
            <el-input v-model="data.receiverInfo.province" placeholder="省" />
          </el-form-item>
          <span>/</span>
          <el-form-item>
            <el-input v-model="data.receiverInfo.city" placeholder="市" />
          </el-form-item>
          <span>/</span>
          <el-form-item>
            <el-input v-model="data.receiverInfo.area" placeholder="区" />
          </el-form-item>
        </div>
        <el-form-item label="详细地址：" prop="detailAddress">
          <el-input v-model="data.receiverInfo.detailAddress" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="备注：" prop="buyerMessage">
          <el-input v-model="data.receiverInfo.buyerMessage" type="textarea" :autosize="{ minRows: 5 }"
            placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="getClose">取消</el-button>
        <el-button type="primary" @click="getSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, submit } from '@/api/service/resend.js'

import { useAddress } from '@/hooks/index'
const { addressOptions, getAddress } = useAddress()

const { proxy } = getCurrentInstance()

const data = reactive({
  form: {
    pageNum: 1,
    pageSize: 10
  },
  // 列表
  tableData: [],
  // 表单
  dialogForm: {
    shopCode: "A1000002",
    sourcePlatformCode: "MUZEN",
    sourcePlatformName: "猫王",
    shopNick: "猫王旗舰店"
  },
  receiverInfo: {},
  // 校验
  rules: {
    shopCode: [{ required: true, message: '请选择店铺编码', trigger: 'change' }],
    buyerNick: [{ required: true, message: '请输入会员昵称', trigger: 'blur' }],
    name: [{ required: true, message: '请输入收货人名称', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
    planQty: [{ required: true, message: '请输入数量', trigger: 'blur' }],
    logisticsName: [{ required: true, message: '请输入物流公司', trigger: 'blur' }],
    logisticsCode: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
    province: [{ required: true, message: '请输入省', trigger: 'blur' }],
    detailAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    buyerMessage: [{ required: true, message: '请输入备注', trigger: 'blur' }]
  }
})

// 列表
const getList = () => {
  list(data.form).then(res => {
    if (res.code === 0) {
      data.tableData = res.data.records
    }
  })
}

// 弹窗
const dialogVisible = ref(false)
// 打开弹窗
const getDialog = () => {
  dialogVisible.value = true
}

// 提交
const getSubmit = () => {
  proxy.$refs.dialogForm.validate((valid) => {
    if (valid) {
      submit({ deliveryOrder: data.dialogForm }).then(res => {
        if (res.code === 0) {
          proxy.$modal.msgSuccess('新增成功！')
          getClose()
        }
      })
    } else {
      return false
    }
  })
}

// 取消
const getClose = () => {
  dialogVisible.value = false
  proxy.$refs.dialogForm.resetFields()
  data.dialogForm = {
    shopCode: "A1000002",
    sourcePlatformCode: "MUZEN",
    sourcePlatformName: "猫王",
    shopNick: "猫王旗舰店"
  }
  data.receiverInfo = {}
}

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

const areaOptions = computed(() => {
  return data.receiverInfo.city ? cityOptions.value.find(i => i.id === data.receiverInfo.city).childList : []
})

watch(data.receiverInfo, (val) => {
  data.dialogForm.receiverInfo = val
})

getList()
getAddress()
</script>

<style lang="scss" scoped>
.address {
  width: 100%;
  display: flex;
  align-items: center;

  span {
    margin: 0 4px
  }
}
</style>