<template>
  <view class="container">
    <Header title="评论"></Header>
    <view class="content">
      <wd-form ref="form" :model="formdata" :rules="rules" class="remake">
        <wd-cell-group>
          <text class="textarea">{{ shopname }}</text>
          <view class="itemPicker">
            <view class="item01" prop="merchantServices">
              <text class="label">评分</text>
              <!-- 评分 -->
              <wd-rate
                v-model="formdata.merchantServices"
                active-color="#ff0000"
                size="50rpx"
                space="10px"
                @change="handlemerchant"
              />
            </view>

            <view class="item02">
              <text>{{ merList[formdata.merchantServices] }}</text>
            </view>
          </view>
          <!-- 内容描述 -->
          <view class="item03">
            <wd-textarea
              prop="evaluation"
              type="textarea"
              v-model="formdata.evaluation"
              placeholder="亲，分享您的看法，给其他人一个参考哦！"
              clearable
            />
          </view>

          <text class="textarea">上传图片/视频</text>
          <!-- 图片上传 -->
          <view class="wdUpload" prop="images">
            <wd-upload
              multiple
              :action="action"
              @change="handleFile"
              :file-list="formdata.images"
              :before-remove="beforeRemove"
              :header="headers"
            ></wd-upload>
          </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-cell-group>
      </wd-form>

      <wd-button type="error" block @click="handleSubmit">发布</wd-button>

      <wd-overlay :show="overshow">
        <view class="overlay">
          <wd-button block type="info" @click="deleteImg">删除图片</wd-button>
          <wd-button block type="info" @click="overshow = false">取消</wd-button>
        </view>
      </wd-overlay>
    </view>
  </view>
</template>
<script setup lang="ts">
import Header from './components/Header/index.vue';
import { getToken } from '@/utils/auth';
import { evaluation } from '@/api/order';
import { useToast } from 'wot-design-uni';
const uToast = useToast();
const form = ref();
const token = getToken();
// 上传图片地址
const action = ref(import.meta.env.VITE_APP_BASE_URL + '/sgyrdd/file/update');
const headers = ref();
/**
 * options
 */
const shopname = ref<string>('');
onLoad((options) => {
  shopname.value = options?.shopName;
  formdata.orderNumber = options?.orderNumber;
  headers.value = { Authorization: 'Bearer ' + token };
});

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

/**
 * 表单验证规则
 */
const rules = {
  images: [
    {
      required: true,
      validator: (value: any) => {
        if (value.length) {
          return true;
        } else {
          xma.showToast({
            title: '最少上传一张图片',
            icon: 'none',
            duration: 2000,
          });
          return false;
        }
      },
    },
  ],
  evaluation: [
    {
      required: true,
      message: '请填你的看法',
      validator: (value: string) => {
        console.log('看法', value);
        if (value && value.length) {
          return true;
        } else {
          xma.showToast({
            title: '请填你的看法',
            icon: 'none',
            duration: 2000,
          });
          return false;
        }
      },
    },
  ],
  merchantServices: [
    {
      required: true,
      validator: (value: any) => {
        if (value >= 1 && value <= 5) {
          return true;
        } else {
          xma.showToast({
            title: '请选服务评分',
            icon: 'none',
            duration: 2000,
          });
          return false;
        }
      },
    },
  ],
};

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

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

/**
 * 图片上传
 */
const fList = ref<any[]>([]);
function handleFile({ fileList: files }) {
  fList.value = files;
  formdata.images = files;
}
/**
 * 图片地址处理
 */
const proImage = () => {
  const data = fList.value.map((item) => {
    return JSON.parse(item.response).data.url;
  });
  return data.join(',');
};

const overshow = ref<boolean>(false);
const resolves = ref();
const beforeRemove = ({ resolve }) => {
  overshow.value = true;
  resolves.value = resolve;
};
const deleteImg = () => {
  resolves.value(true);
  overshow.value = false;
};
/**
 * Release提交
 */
const hdSubmit = async () => {
  await evaluation({
    ...formdata,
    images: proImage(),
  });
  uToast.success('评价成功');
  xma.redirectTo({
    url: `/pages/order/order?status=not_eval`,
  });
};

const handleSubmit = async () => {
  form.value.validate().then(({ valid, errors }) => {
    if (valid) {
      hdSubmit();
    }
  });
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  height: auto;
  background: #f4f4f4;
  min-height: calc(100vh - 1rpx);
  display: flex;
  flex-direction: column;
}

.overlay {
  width: 720rpx;
  margin: 0 auto;
  height: auto;
  position: absolute;
  bottom: 90rpx;
  left: 50%;
  transform: translateX(-50%);

  :deep(.wd-button) {
    margin-top: 14rpx;
    width: 720rpx;
    height: 110rpx;
    background: #ffffff;
    border-radius: 25rpx 25rpx 25rpx 25rpx;
    font-size: 36rpx;
  }
}

.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;

    :deep(.wd-textarea) {
      padding: 30rpx 0;
    }

    .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;

      :deep(.wd-upload__close) {
        left: 10rpx;
        top: 10rpx;
      }

      :deep(.wd-upload__status-content) {
        background-color: #000;
      }

      :deep(.wd-upload) {
        gap: 20rpx;

        .wd-upload__preview {
          width: calc((100% - 60rpx) / 4);
          margin: 0;
          border-radius: 12rpx;
          overflow: hidden;
        }
      }
    }
  }

  .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>

<!-- <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> -->
