import Mock from './Mock.vue'

export default {
  title: 'mock用法示例/Mock',
  component: Mock,
}

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes), // 接受所有的props
  components: { Mock },
  template: '<Mock v-bind="$props" />', // 对应文案案例的源码展示区
})

// mock基础用法案例
export const Base = Template.bind({})
Base.parameters = {
  mockData: [
    {
      url: 'https://syman/render', // 需要模拟的接口。地址支持/:foo/:bar和/foo?bar=true方式传参
      method: 'POST', // 支持GET,POST,PUT,PATCH,DELETE
      status: 200, // 支持所有http状态码
      response: {
        title: '本段文字由接口动态渲染',
      },
      delay: 0, // 模拟请求延迟,单位毫秒
    },
  ],
}

// mock测试不同传参方式的情况
export const Param = Template.bind({})
Param.args = {
  showParamDemo: true,
};
Param.parameters = {
  mockData: [
    {
      url: 'https://syman/api?a=', // 需要模拟的接口。地址支持/:foo/:bar和/foo?bar=true方式传参。PS:如果请求带?a=*参数，则模拟接口也必须带上参数才能mock到
      method: 'GET', // 支持GET,POST,PUT,PATCH,DELETE
      status: 200, // 支持所有http状态码
      response: (request) => {
        const { searchParams } = request

        return {
          value: searchParams.a,
        }
      },
      delay: 1000, // 模拟请求延迟,单位毫秒
    },
    {
      url: 'https://syman/user/:id', // 需要模拟的接口。地址支持/:foo/:bar和/foo?bar=true方式传参。动态参数前加:符号
      method: 'POST', // 支持GET,POST,PUT,PATCH,DELETE
      status: 200, // 支持所有http状态码
      response: (request) => {
        const { url, body } = request

        return {
          value: url + JSON.parse(body).demo,
        }
      },
      delay: 1000, // 模拟请求延迟,单位毫秒
    },
  ],
}

// mock测试不同状态码的情况
export const Status = Template.bind({})
Status.args = {
  showStatusDemo: true,
};
Status.parameters = {
  mockData: [
    {
      url: 'https://syman/api', 
      method: 'GET',
      status: 200, 
      response: {
        msg: '请求成功'
      },
    },
  ],
}
