<template>
  <div class='app-container'>
    <!-- 搜索 -->
    <el-form inline>
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="getDialog">新增</el-button>
        <el-button type="primary" icon="Upload" plain :disabled="data.idsList.length <= 0"
          @click="getPush(data.idsList)">批量推送</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="data.tableData" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="购买渠道" align="center" prop="shopNick" />
      <el-table-column label="会员昵称" align="center" prop="buyerNick" />
      <el-table-column label="收货人" align="center" prop="receiverInfo.name" />
      <el-table-column label="手机号" align="center" prop="receiverInfo.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.receiverInfo.province }}{{ scope.row.receiverInfo.city }}{{ scope.row.receiverInfo.area }}{{
          scope.row.receiverInfo.detailAddress }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="buyerMessage" />
      <el-table-column label="当前状态" align="center" :formatter="statusFormatter" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="getPush([scope.row.id])">推送</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize"
      @pagination="getList" />
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="新增" width="500px" :before-close="getClose">
      <el-form :model="data.dialogForm" :rules="data.rules" ref="dialogForm" label-width="auto">
        <el-form-item label="购买渠道：" prop="shopCode">
          <el-select v-model="data.dialogForm.shopCode" placeholder="请选择店铺编码" @change="handleChangeShopCode">
            <el-option v-for="item in storeOptions" :key="item.storeCode" :value="item.storeCode"
              :label="item.storeName" />
          </el-select>
        </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="receiverInfo.name">
          <el-input v-model="data.dialogForm.receiverInfo.name" placeholder="请输入收货人" />
        </el-form-item>
        <el-form-item label="手机号码：" prop="receiverInfo.mobile">
          <el-input v-model="data.dialogForm.receiverInfo.mobile" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="数量：" prop="planQty">
          <el-input-number v-model="data.dialogForm.planQty" :min="1" />
        </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>
        <el-form-item class="address" label="收货地址：" required>
          <el-form-item prop="receiverInfo.province">
            <el-input v-model="data.dialogForm.receiverInfo.province" placeholder="省" />
          </el-form-item>
          <span>/</span>
          <el-form-item prop="receiverInfo.city">
            <el-input v-model="data.dialogForm.receiverInfo.city" placeholder="市" />
          </el-form-item>
          <span>/</span>
          <el-form-item>
            <el-input v-model="data.dialogForm.receiverInfo.area" placeholder="区" />
          </el-form-item>
        </el-form-item>
        <el-form-item label="详细地址：" prop="receiverInfo.detailAddress">
          <el-input v-model="data.dialogForm.receiverInfo.detailAddress" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="备注：" prop="buyerMessage">
          <el-input v-model="data.dialogForm.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, push } from '@/api/service/resend.js'

import { useAddress, useStore, useCommon } from '@/hooks/index'
const { addressOptions, getAddress } = useAddress()
const { storeOptions, getStore } = useStore()
const { pushStatusOptions } = useCommon()

const { proxy } = getCurrentInstance()

const data = reactive({
  form: {
    pageNum: 1,
    pageSize: 10
  },
  // 列表
  tableData: [],
  // 表单
  dialogForm: {
    sourcePlatformCode: "MUZEN",
    sourcePlatformName: "猫王",
    receiverInfo: {},
    planQty: 1
  },
  // 校验
  rules: {
    shopCode: [{ required: true, message: '请选择购买渠道', trigger: 'change' }],
    buyerNick: [{ required: true, message: '请输入会员昵称', trigger: 'blur' }],
    planQty: [{ required: true, message: '请输入数量', trigger: 'blur' }],
    logisticsName: [{ required: true, message: '请输入物流公司', trigger: 'blur' }],
    logisticsCode: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
    receiverInfo: {
      name: [{ required: true, message: '请输入收货人名称', trigger: 'blur' }],
      mobile: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
      province: [{ required: true, message: '请输入省', trigger: 'blur' }],
      city: [{ required: true, message: '请输入区', trigger: 'blur' }],
      detailAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    },
    buyerMessage: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  },
  // 推送
  idsList: []
})

// 遮罩层
const loading = ref(false)
// 总数据
const total = ref(0)

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

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

// 购买渠道
const handleChangeShopCode = (e) => {
  data.dialogForm.shopNick = storeOptions.value.find(i => i.storeCode == e).storeName
}

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

// 取消
const getClose = () => {
  dialogVisible.value = false
  proxy.$refs.dialogForm.resetFields()
  data.dialogForm = {
    sourcePlatformCode: "MUZEN",
    sourcePlatformName: "猫王",
    receiverInfo: {},
    planQty: 1
  }
}

// 多选
const handleSelectionChange = (e) => {
  data.idsList = []
  e.map(i => data.idsList.push(i.id))
}


// 推送
const getPush = (id) => {
  push({ idList: id }).then(res => {
    if (res.code === 0) {
      proxy.$modal.msgSuccess('推送成功！')
    }
  })
}

// 计算属性
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 : []
})

getAddress()
getStore()
getList()

// 字典翻译
const statusFormatter = (row) => {
  return proxy.selectDictLabel(pushStatusOptions.value, row.pushStatus)
}
</script>

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

  .el-form-item {
    width: 100%;
    flex: 1;
  }

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