<template>
  <div>
    <HtResult :visible.sync="successVisible"></HtResult>
    <HtResult status="fail"
              :visible.sync="failVisible"
              label="demo.result.text_3"></HtResult>
    <div>
      <ShowCode :formatCode="formatCode"
                :subTitle="$t('demo.result.text_1')"
                :title="$t('demo.result.text_1')">
        <el-button type="primary"
                   @click.stop="successVisible=true">{{$t('demo.result.text_1')}}</el-button>
      </ShowCode>
    </div>
    <div>
      <ShowCode :formatCode="failCode"
                :subTitle="$t('demo.result.text_2')"
                :title="$t('demo.result.text_2')">
        <el-button type="primary"
                   @click.stop="failVisible=true">{{$t('demo.result.text_2')}}</el-button>
      </ShowCode>
    </div>
    <div class="demo-block">
      <h2 class="demo-header-text">Attributes</h2>
      <MdView url="md/ht-result/attributes.md">
      </MdView>
    </div>
    <div class="demo-block">
      <h2 class="demo-header-text">Slots</h2>
      <MdView url="md/ht-result/slot.md">
      </MdView>
    </div>
  </div>
</template>
<script>
import { code, failCode } from './code'
export default {
  name: 'result',
  data() {
    return {
      successVisible: false,
      failVisible: false,
      formatCode: code,
      failCode,
    }
  },
  components: {
    MdView: () => import('@/views/MdView'),
    ShowCode: () => import('@/components/common/show-code'),
  },
}
</script>
<style lang="scss" scoped>
</style>
