<template>
  <div class="support-wrap">
    <van-cell-group inset class="mt12_i">
      <van-field required v-model="fieldValue" is-link readonly label="投诉类型" placeholder="选择投诉类型" @click="showPicker = true" />
      <van-field required v-model="fieldValue" is-link readonly label="处理方式" placeholder="选择处理方式" @click="showPicker = true" />
      <van-field required v-model="fieldValue" name="username" label="投诉内容" placeholder="请输入投诉内容" />
    </van-cell-group>

    <van-cell-group inset class="mt12_i">
      <van-field v-model="fieldValue" is-link readonly label="涉及订单" placeholder="选择涉及订单" @click="showPicker = true" />
      <van-field v-model="fieldValue" is-link readonly label="涉及商品" placeholder="选择涉及商品" @click="showPicker = true" />
    </van-cell-group>

    <van-cell-group inset class="mt12_i">
      <van-field required v-model="fieldValue" name="username" label="联系电话" placeholder="请输入联系电话" />
      <van-field v-model="fieldValue" name="username" label="联系邮箱" placeholder="请输入联系邮箱" />
    </van-cell-group>
    <div class="buy-btn-wrap">
      <el-button class="btn_main">
        保存
      </el-button>
    </div>
  </div>
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker :model-value="pickerValue" :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
  </van-popup>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
let pageTitle: any = ref("HOTKING-个人中心-售后服务");
useHead(() => ({
  title: pageTitle.value,
}));
const user = useUserStore();
user.value.adminTitle = "售后服务";
const rules = {
  type: [{ required: true, message: "询价的型号 必填", trigger: "blur" }],
  number: [{ required: true, message: "询价的数量 必填", trigger: "blur" }],
};
const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;
const columns = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];
const fieldValue = ref("");
const showPicker = ref(false);
const pickerValue = ref<any[]>([]);
const onConfirm = ({ selectedValues, selectedOptions }: any) => {
  showPicker.value = false;
  pickerValue.value = selectedValues;
  fieldValue.value = selectedOptions[0].text;
};
</script>
<style scoped lang="scss">
.support-wrap {
  min-height: calc(100vh - 44px);
  background: #f7f7f7;
  padding-top: 1px;
  .buy-btn-wrap {
    display: flex;
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    left: 0;
    padding: 0 30px;
    z-index: 1;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
    .btn_main {
      border-radius: 25px !important;
      flex: 1;
      height: 42px !important;
      &.is-disabled {
        background: #e9e9e9;
        color: #fff;
      }
    }
  }
}
</style>