<template>
  <div class="allmaterial" style="padding: 0;margin: 0;">
    <!-- <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          
        </div>
      </div> -->
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table no-bottom-table" separator="none" title="" :data="dataList" :columns="columns"
        row-key="name">

        <template v-slot:body-cell-title="props">
          <q-td :props="props">
            <span>{{getType(props.row,'title')}}</span>
          </q-td>
        </template>

        <template v-slot:body-cell-Content="props">
          <q-td :props="props">
            <div style="width: 200px;">
              <span v-if="props.row.Type==1">{{getType(props.row,'content')}}</span>
              <q-img v-if="props.row.Type==2 || props.row.Type==3 || props.row.Type==6"
                :src="getType(props.row,'content')" style="width: 80px;height: 80px;border-radius: 6px;display: flex;">
              </q-img>
              <audio controls="controls"
                v-if='props.row.Type==4 && props.row.AudioModel && props.row.AudioModel.AudioPath'
                style="width: 200px;height: 40px;">
                <source :src="props.row.AudioModel.AudioPath" type="audio/ogg">
                <source :src="props.row.AudioModel.AudioPath" type="audio/mpeg">
              </audio>
              <video width="200" height="120" controls="controls"
                v-if="props.row.Type==5 && props.row.VideoModel && props.row.VideoModel.VideoPath">
                <source :src="props.row.VideoModel.VideoPath" type="video/ogg" />
                <source :src="props.row.VideoModel.VideoPath" type="video/mp4" />
                <source :src="props.row.VideoModel.VideoPath" type="video/webm" />
              </video>
              <div v-if="props.row.Type==7 && props.row.FileModel && props.row.FileModel.FilePath!=''"
                @click.stop="showUpLoadFile(props.row.FileModel)">
                <i v-if="props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='PDF'"
                  class="iconfont icon-pdf"></i>
                <i v-else-if="props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='TXT'"
                  class="iconfont icon-txt"></i>
                <i v-else-if="props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='DOCX' || 
                            props.row.FileModel.FilePath.substring(props.row.FileModel.FilePath.lastIndexOf('.')+1,props.row.FileModel.FilePath.length).toUpperCase()=='DOC'
                            " class="iconfont icon-word"></i>
                <i v-else class="iconfont icon-excel"></i>
              </div>
            </div>

          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">

            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
              v-if="props.row.Type==1 || props.row.Type==3 || props.row.Type==6 " @click="goedit(props.row)" />
            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="移动"
              @click="plmove(props)" />
            <q-btn flat size="xs" icon="delete" color="negative" class="q-mr-xs" label="删除"
              @click="goDetailed(props.row,'0')" />
          </q-td>
        </template>

      </q-table>
    </div>
    <div v-if="Isadd==true">
      <alladdsc :allclassifyList="allclassifyList" :type='showtype' @editsuccess="getchildren" :editobj='editobj'
        @getcancel='Isadd=false'></alladdsc>
    </div>

  </div>
</template>

<script>

  import alladdsc from './allAddSC'
  import {
    delWecharMediumInfo,//删除素材
  } from '../../../api/system/wechat';
  export default {
    components: {
      alladdsc,
    },
    name: "allmaterial",
    props: {
      dataList: {
        type: Array,
        default: [],
      },
      allclassifyList: {
        type: Array,
        default: [],
      }
    },
    data() {
      return {
        loading: false,
        Isadd: false,

        ISsystem: false,
        editobj: null,
        showtype: 1,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
        },
        //公告column
        columns: [{
          name: 'title',
          field: 'title',
          label: '标题',
          align: 'left'
        },
        {
          name: 'Content',
          field: 'Content',
          label: '内容',
          align: 'left',
        },
        {
          name: 'UpdateByName',
          field: 'UpdateByName',
          label: '上传者',
          align: 'left'
        },
        {
          name: 'MediumGroupName',
          field: 'MediumGroupName',
          label: '分组',
          align: 'left'
        },
        {
          name: 'TypeName',
          field: 'TypeName',
          label: '类型',
          align: 'left'
        },
        {
          name: 'UpdateTime',
          field: 'UpdateTime',
          label: '添加时间',
          align: 'left'
        },
        {
          name: 'optioned',
          label: '操作',
          field: 'DeptId'
        }
        ],

      }
    },
    created() {

    },
    methods: {

      getType(row, name) {
        let title = ''
        let content = ''
        if (row.Type == 1) {
          title = row.TextModel.Title
          content = row.TextModel.Content
        } else if (row.Type == 2) {
          title = row.ImageModel.ImageName
          content = row.ImageModel.ImagePath
        } else if (row.Type == 3) {
          title = row.ImgTextModel.Title
          content = row.ImgTextModel.ImgPath
        } else if (row.Type == 4) {
          title = row.AudioModel.AudioName
          content = row.AudioModel.AudioPath
        } else if (row.Type == 5) {
          title = row.VideoModel.VideoName
          content = row.VideoModel.VideoPath
        } else if (row.Type == 6) {
          title = row.AppletModel.Title
          content = row.AppletModel.ImagePath
        } else if (row.Type == 7) {
          title = row.FileModel.FileName
          content = row.FileModel.FilePath
        }
        if (name == 'title') {
          return title
        } else if (name == 'content') {
          return content
        }


      },
      showUpLoadFile(i) {
        // 文件类型进行判断

        if (
          i.FileName.substring(
            i.FileName.lastIndexOf(".") + 1,
            i.FileName.length
          ).toUpperCase() == "PDF" ||
          i.FileName.substring(
            i.FileName.lastIndexOf(".") + 1,
            i.FileName.length
          ).toUpperCase() == "TXT"
        ) {
          this.previewPDF(i.Url);
        } else {
          window.open(
            "https://view.officeapps.live.com/op/view.aspx?src=" + i.FilePath
          );
        }
      },
      goDetailed(row) {//删除
        let delMsg = {
          MediumIds: row.Id,
        };
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除该素材？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          delWecharMediumInfo(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '删除成功！',
                position: 'top'
              })
              this.$emit('editsuccess')
            }
          })
        }).onCancel(() => {

        });
      },
      plmove(row) {
        this.dataList[row.rowIndex].check = !this.dataList[row.rowIndex].check
        this.$emit('getmove')
      },
      goedit(row) {
        this.editobj = {}
        this.editobj.Id = row.Id;
        this.editobj.MediaGroupId = row.MediaGroupId;
        this.editobj.Type = row.Type;
        if (row.Type == 1) {
          this.editobj.TextModel = JSON.parse(JSON.stringify(row.TextModel));
        } else if (row.Type == 3) {
          this.editobj.ImgTextModel = JSON.parse(JSON.stringify(row.ImgTextModel));
        } else if (row.Type == 6) {
          this.editobj.AppletModel = JSON.parse(JSON.stringify(row.AppletModel));
        }
        this.showtype = row.Type.toString()

        this.Isadd = true
      },
      getchildren() {
        this.$emit('editsuccess')
        this.Isadd = false
      },

    }
  }

</script>

<style>
  .allmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
    background-color: red;
    border: 0;
  }

  .allmaterial .state-item {
    padding: 2px 5px;
    border-radius: 3px;
    text-align: center;
    font-size: 10px;
  }

  .allmaterial .frIdlist {
    padding: 3px 10px;
    border-radius: 3px;
    background: #EEEEEF;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }

  .class-popover .q-pr-lg {
    padding-right: 0;
    margin-top: 20px;
  }

  .allmaterial .el-date-editor.el-input {
    width: 100%;
  }

  .allmaterial .el-date-editor.el-input input {
    background-color: transparent !important;
  }

  .allmaterial .el-range-editor .el-range-input {
    background: none;
  }

  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

  .allmaterial .el-drawer.rtl {
    overflow: inherit;
  }

  .allmaterial .icon-excel,
  .allmaterial .icon-pdf,
  .allmaterial .icon-txt,
  .allmaterial .icon-wenjian,
  .allmaterial .icon-yasuobao,
  .allmaterial .icon-shipin,
  .allmaterial .icon-word {
    font-size: 38px;
    color: green;
    line-height: 75px;
  }
</style>