<template>
  <view class="container">
    <Header title="评论"></Header>
    <view class="content">
      <wd-form ref="form" :model="formdata" :rules="rules" class="remake">
        <text class="textarea">{{ shopname }}</text>
        <view class="itemPicker">
          <view class="item01">
            <text class="label">评分</text>
            <wd-rate
              prop="merchantServices"
              v-model="formdata.merchantServices"
              active-color="#ff0000"
              size="50rpx"
              space="10px"
              @change="handlemerchant"
            />
          </view>
          <view class="item02">
            <text>{{ merList[formdata.merchantServices] }}</text>
          </view>
        </view>
        <wd-textarea
          prop="evaluation"
          v-model="formdata.evaluation"
          placeholder="亲，分享您的看法，给其他人一个参考哦！"
          :rules="[{ required: true, message: '请填写你的评价' }]"
        />
        <text class="textarea">上传图片/视频</text>
        <wd-upload
          class="wdUpload"
          accept="media"
          multiple
          :action="fileUPload"
          @change="handleFile"
        ></wd-upload>

        <!-- <view class="tuijian" v-if="show">
              <view class="tjTitle">
                <text class="textarea">我要推荐菜</text>
                <text class="textRight">
                  查看全部(30)
                  <wd-icon name="arrow-right"></wd-icon>
                </text>
              </view>
              <view class="itemtuijianList">
                <wd-checkbox-group shape="button">
                  <wd-checkbox modelValue="jingmai" checked-color="#f00" shape="button"></wd-checkbox>
                  <wd-checkbox modelValue="asd" shape="button">沃特</wd-checkbox>
                </wd-checkbox-group>
              </view>
            </view> -->

        <wd-cell title="匿名评价" prop="isAnonymous" class="itemSwichval">
          <wd-switch
            size="48rpx"
            active-color="#EC1B1B"
            v-model="formdata.isAnonymous"
            active-value="1"
            inactive-value="0"
          />
        </wd-cell>
      </wd-form>

      <wd-button type="error" block @click="handleSubmit">发布</wd-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import Header from './components/Header/index.vue';
import { evaluation } from '@/api/order';
const form = ref();
/**
 * options
 */
const shopname = ref<string>('');
onLoad((options) => {
  shopname.value = options?.shopName;
  formdata.orderNumber = options?.orderNumber;
});

const formdata = reactive<{
  orderNumber: string;
  evaluation: string;
  images: string[];
  isAnonymous: number;
  descriptionMatches: number;
  merchantServices: number;
}>({
  orderNumber: '',
  evaluation: '',
  images: [],
  isAnonymous: 0,
  descriptionMatches: 0,
  merchantServices: 0,
});

const rules = {};

/**
 * 显示推荐菜
 */
const show = ref<boolean>(false);

/**
 * 评分
 */
const merchantServices = ref<number>(0);
const merList = ref({
  1: '非常差',
  2: '差',
  3: '一般',
  4: '好',
  5: '非常好',
});
const handlemerchant = (e) => {
  merchantServices.value = e.value;
};

/**
 * 图片上传
 */
const fileUPload = ref<string>('/');

function handleFile({ files }) {}

const handleSubmit = async () => {
  const res = await evaluation();
  console.log(formdata);
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: auto;
  background: #f4f4f4;
  min-height: calc(100vh - 1rpx);
  display: flex;
  flex-direction: column;
}

.content {
  margin: 25rpx 20rpx 0;
  padding-top: 88rpx;

  .remake {
    width: auto;
    height: auto;
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 25rpx;
    margin-bottom: 172rpx;
    padding: 20rpx;

    .itemPicker {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 32rpx;
      padding-bottom: 24rpx;
      border-bottom: 1rpx solid #e8e8e8;

      .item01 {
        display: flex;
        align-items: center;
        gap: 29rpx;

        .label {
          width: 64rpx;
          height: 32rpx;
          font-family:
            PingFang SC Bold,
            PingFang SC Bold;
          font-weight: 400;
          font-size: 32rpx;
          color: #333333;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .textarea {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      line-height: 32rpx;
      text-align: left;
    }

    .wdUpload {
      margin-top: 25rpx;
    }
  }

  .tuijian {
    margin-top: 72rpx;

    .tjTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;

      .textRight {
        font-size: 24rpx;
      }
    }
  }

  .itemSwichval {
    width: auto;
    padding: 0;
    margin-top: 72rpx;

    :deep(.wd-cell__wrapper) {
      padding: 0;
      align-items: center;
    }
  }
}

.wd-cel {
  --wot-size-side-padding: 0px;
}
</style>
