<template>
  <div>
    <co-header fixed title="附件列表">
      <fallback slot="left"></fallback>
    </co-header>
    <div class="co-wrapper">
      <div class="co-view-cell co-line-down" v-for="(item, i) in datas" :class="{'co-line-up': i == 0}">
        <div class="co-view-cell-img co-col-xs-2">
          <span v-if="returnIcon(item.url)" class="xs-icon" :class="returnIcon(item.url)"></span>
          <img :src="item.url" v-if="!returnIcon(item.url)" />
        </div>
        <div class="co-view-cell-content co-col-xs-10">
          <p class="title co-ellipsis-2" v-text="item.name"></p>
          <div class="co-cell-wrapper">
            <div style="flex: 2;" v-text="item.createdOn"></div>
            <div v-text="item.size"></div>
            <div v-text="'浏览：' + item.readCount"></div>
          </div>
        </div>
        <i class="co-cell-allow-right"></i>
      </div>
      <p style="padding: 5px 10px;">表单-附件-列表</p>
      <div class="co-transverse-scroll co-appendix">
        <div class="co-scorll" :style="{width: 'calc(100vw / 4 * 5)'}">
          <div class="co-appendix-item co-appendix-item-no-name" v-for="(item, i) in datas">
            <span v-if="returnIcon(item.url)" class="xs-icon" :class="returnIcon(item.url)"></span>
            <img :src="item.url" v-if="!returnIcon(item.url)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="es6">

  export default {
    data() {
      return {
        datas: [
          {
            'id': 1,
            'name': '宏天BPM X3软件V3.0用户手册.docx',
            'size': '14.3 MB',
            'createdOn': '2018-06-22 17:33',
            'readCount': '9',
            'url': 'http://test.coracle.com:8386/uf/2018/06/22/宏天bpm x3软件v3.0用户手册-180622173253.docx'
          },
          {
            'id': 1,
            'name': '到cs前端开发计划.xls',
            'size': '19.4 MB',
            'createdOn': '2018-06-22 17:33',
            'readCount': '4',
            'url': 'http://test.coracle.com:8386/uf/2017/12/06/舟到cs前端开发计划-171206091912.pdf'
          },
          {
            'id': 1,
            'name': '宏天BPM X3软件V3.0用户手册.docx',
            'size': '14.3 MB',
            'createdOn': '2018-06-22 17:33',
            'readCount': '9',
            'url': 'http://test.coracle.com:8386/uf/2018/06/22/宏天bpm x3软件v3.0用户手册-180622173253.xls'
          },
          {
            'id': 1,
            'name': '2.jpg',
            'size': '200 KB',
            'createdOn': '2018-06-22 17:33',
            'readCount': '2',
            'url': 'http://test.coracle.com:8386/uf/2018/07/24/2-180724175729.jpg_t.jpg'
          },
          {
            'id': 1,
            'name': '一路有你.mp3',
            'size': '200 KB',
            'createdOn': '2018-06-22 17:33',
            'readCount': '2',
            'url': 'http://test.coracle.com:8386/uf/2018/06/22/宏天bpm x3软件v3.0用户手册-180622173253.mp3'
          }
        ]
      };
    },

    methods: {
      returnIcon(pathUrl) {
        let suffix = pathUrl.substring(pathUrl.lastIndexOf('.') + 1, pathUrl.length).toLocaleLowerCase();
        let icon = '';
        if ('.jpg|.jpeg|.gif|.bmp|.png|'.indexOf(suffix + '|') > -1) {
          /* 图片*/
          icon = '';
        } else if ('.amr|.wav|.mp3|'.indexOf(suffix + '|') > -1) {
          icon = 'xs-icon-audio';
        } else if ('.mp4|.mov|'.indexOf(suffix + '|') > -1) {
          /* 视频*/
          icon = 'xs-icon-vedio';
        } else if ('.doc|.docx|'.indexOf(suffix + '|') > -1) {
          icon = 'xs-icon-word';
        } else if ('.xls|.xlsx|'.indexOf(suffix + '|') > -1) {
          icon = 'xs-icon-excel';
        } else if ('.ppt|.pptx|'.indexOf(suffix + '|') > -1) {
          icon = 'xs-icon-ppt';
        } else if ('.pdf|'.indexOf(suffix + '|') > -1) {
          icon = 'xs-icon-pdf';
        } else if ('.zip'.indexOf(suffix + '|') > -1) {
          /* 办公*/
          icon = 'xs-icon-zip';
        } else {
          // 对不起，app不支持该附件类型！
          icon = 'xs-icon-not-other';
        }
        return icon;
      }
    }
  };
</script>

<style lang="less">

</style>
