<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">页面详情（新模式）</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-detail
            label-width="100"
            :is-border="isBorder"
            :list="list"
            :size="size"
            @onCustom="handleCustom"
          >
            <template slot="desc" slot-scope="scope">
              {{scope.row}}-- 插槽 --{{scope.prop}}
            </template>
          </xd-detail>
        </div>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">页面详情（老模式）</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-content-info>
            <template slot-scope="scope">
              <div v-if="scope.label === 'refund'">
                <el-button type="primary" v-if="isRefund">退款</el-button>
              </div>
              <div v-else-if="scope.label === 'submit'">
                <el-button type="primary">去下单</el-button>
              </div>
              <div v-else-if="scope.label === 4">
                <span class="red">{{scope.item.value}}</span> 元
              </div>
            </template>
          </xd-content-info>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XdJsonView from "@/components/XdJsonView";
import XdContentInfo from "@/components/XdContentInfo";
import XdDetail from "@/components/XdDetail";

export default {
  name: 'index',
  components: {
    XdContentInfo,
    XdDetail
  },
  data() {
    return {
      isBorder: false,
      size: 'mini', //default/mini/small
      width: '100px',
      list: [
        {
          title: '基础信息',
          items: [
            {label: 'ID', value: '58be336aDhRGLa', type: 'normal', field: 'id', params: {}},
            {label: '描述11', value: 33, type: 'normal', field: 'desc'},
            {label: '单位', value: 33, type: 'unit', field: 'unit', params: {unit: '元',color: '#999'}},
            {label: '百分比', value: 8877, type: 'ratio', field: 'ratio'},
            {label: '折扣', value: 8877, type: 'ratio', field: 'ratio', params: {unit: '折'}},
            {label: '价格&折扣', value: [8877, 1000], type: 'priceAndRatio', field: 'priceAndRatio', params: {unit:['元','折']}},
            {label: '价格&折扣', value: [8877, 1000], type: 'priceAndRatio', field: 'priceAndRatio', params: {unit: ['元', '%']}},
            {
              label: '价格&折扣',
              value: [8877, 1000],
              type: 'priceAndRatio',
              field: 'priceAndRatio',
              params: {unit: ['¥', '%']}
            },
            //N/Y/true/false/0/1/2
            {label: '状态', value: 'Y', type: 'status', field: 'status', params: {message: ['已启用', '已禁用']}},
            {label: '价格', value: 25, type: 'price', field: 'price'},
            {label: '价格', value: 250, type: 'price', field: 'price', params: {unit: '元'}},
            {label: '价格', value: 999, type: 'price', field: 'price', params: {unit: '¥'}},
            {label: '标签', value: ['价格', '类型'], type: 'tag', field: 'tag'},
            {
              label: '图片列表',
              value: [
                {"src": "https://admin-cake-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/code.png"},
                {"src": "https://admin-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/auth-f.jpg"},
                {"src": "https://jfbcommontest.oss-cn-beijing.aliyuncs.com/20210528162651174.jpeg"},
                {"src": "https://jfbcommontest.oss-cn-beijing.aliyuncs.com/20210528164013618.jpg"},
              ],
              type: 'images-list',
              field: 'images-list',
              params: {width: 100, height: 100}
            },
            {
              label: '商品展示',
              iconTypeList: ['差'],
              value: {
                thumb: 'https://jfbcommontest.oss-cn-beijing.aliyuncs.com/20210528164013618.jpg',
                title: '源氏木语实木餐桌现代简约饭桌小户型橡木桌椅组合餐厅家具办公桌',
                icon: '实',
                specific: '橡木单个餐桌（1200*75)',
                status: '完成',
                notice: '全球十五大药品巨头首次齐聚医疗器械及医药保健展区，全球十大医疗器械企业也集体亮相，将展示医学影像、生命科学等细分领域的前沿科技。',
              },
              type: 'product',
              field: 'product',
              params: {width: 150, height: 150}
            },
            {
              label: '取票码',
              value: ['取票码:A1**1', '取票码:1**4'],
              type: 'tag',
              field: 'ticket',
              params: {
                handle: true,
                name: '查看',
                type: 'default'
              }
            },
            {
              label: '展示图',
              value: [{"src": "https://admin-cake-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/code.png"}, {"src": "https://admin-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/auth-f.jpg"}],
              type: 'images',
              field: 'images',
              params: {width: 150, height: 150}
            },
            {
              label: '缩略图',
              value: 'https://admin-cake-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/code.png',
              type: 'image',
              field: 'image',
              params: {width: 80, height: 80}
            },
            {
              label: '操作',
              value: [
                {ui: 'link', url: '/images/code', target: '_blank', name: '查看', type: 'primary'},
                {ui: 'button', icon: 'el-icon-delete', name: '删除', type: 'danger'},
              ],
              type: 'operate',
              field: 'operate',
            },
          ],
        },
        {
          title: '订票人信息',
          items: [
            {
              label: '手机号',
              value: 33, type: 'normal',
              field: 'iPhone',
              params: {
                handle: true,
                name: '获取手机号',
                type: 'default'
              }
            },
            {label: '姓名', value: '张三', type: 'normal', field: 'name'},
            {label: '证件类型', value: '身份证', type: 'normal', field: 'type'},
            {
              label: '证件号码',
              value: '131039**********3993',
              type: 'normal',
              field: 'id_number',
              params: {
                handle: true,
                name: '获取证件号码',
                type: 'default'
              }
            }
          ],
        },
        {
          title: '渠道信息',
          items: [
            {
              label: '影院渠道',
              value: '淘票票',
              type: 'normal',
              field: 'channel',
            },
            {
              label: '',
              value: '',
              type: 'splitLine',
            },
            {label: '姓名', value: '张三', type: 'normal', field: 'name'},
            {label: '票源订单号', value: '2940804576465694743', type: 'normal', field: 'type'},
          ],
        }
      ]
    }
  },
  computed: {
    isRefund() {
      return false
    }
  },
  methods: {
    handleCustom({row, btn}) {
      console.log(row, btn)
    },
    handlePagination() {
      if (this.pageSize > 3) this.hasNextPage = false;
      else this.hasNextPage = true;
    },

    handleClick() {
      this.show = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  &__item {
    margin-bottom: 20px;

    &-h1 {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-weight: bold;
      background: #efefef;
      font-size: 16px;
      text-align: left;
      margin-bottom: 30px;
    }

    &-body {
      padding: 0 20px;
    }
  }
}

@media screen and (max-width: 768px) {
  .app-container {
    padding: 10px;
    margin: 0;
    &__item{
      margin-bottom: 10px;

      &-body {
        padding: 0 10px;
      }
    }
  }
}
</style>
