<style>
  .selectMaterial .imgstyle {
    width: 100%;
    height: 126px;
    border-radius: 4px;
  }
  .selectMaterial .imgstyle2 {
    width: 100%;
    height: 180px;
    border-radius: 4px;
  }

  .selectMaterial .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #8c939d;
    position: relative;
    overflow: hidden;
  }

  .selectMaterial .addDutyMain {
    display: inline-block;
    width: 118px;
    height: 118px;
    font-size: 40px;
    border: 1px dashed #d9d9d9;
    line-height: 118px;
  }

  .selceimg .onetext {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
  }
  .selceimg .icon-excel,
    .selceimg .icon-pdf,
    .selceimg .icon-txt,
    .selceimg .icon-wenjian,
    .selceimg .icon-yasuobao,
    .selceimg .icon-shipin,
    .selceimg .icon-word {
  font-size: 38px;
  color: green;
  line-height: 75px;
}
</style>

<!--订单操作-->
<template>
  <div class="selectMaterial">
    <q-dialog v-model="IsShow" persistent>
      <q-card style="width: 900px; max-width: 80vw;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">选择素材</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-separator />


        <q-card-section class="q-pt-none">
          <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md" style="margin-top: 0;">
              <div class="col-4">
                <q-select filled stack-label @input="resetSearch" option-value="Id" option-label="Name"
                  v-model="msg.MediaGroupId" ref="Id" :options="xialaList" label="分组" :dense="false" emit-value
                  map-options />
              </div>
              <div class="col-4">
                <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Content"
                  label="输入搜索内容" />
              </div>
              <div class="col-4" v-if="materialType==2">
                <q-btn class="q-mr-md" icon="cloud_upload" label="本地上传" @click="localUpload" />
              </div>
            </div>
          </div>
          <div class="q-pa-md">

            <div class="q-col-gutter-md row items-start" v-if="data.length>0 && msg.Type!=5 && msg.Type!=7">
              <div class="col-2 selceimg" v-for="(x,y) in data" @click="Selectobj = x">
                <q-img v-if="x.Type==2" :src="x.ImageModel.ImagePath" class="imgstyle"
                  :style="{border:x.Id == Selectobj.Id?'3px solid #91d5ff':'3px solid #FFF'}">
                  <div class="absolute-bottom text-subtitle1 text-center onetext"
                    style="padding: 0;padding: 0 5px;font-size: 12px;">
                    {{x.ImageModel.ImageName}}
                  </div>
                </q-img>
                <q-img v-if="x.Type==3 && x.ImgTextModel" :src="x.ImgTextModel.ImgPath" class="imgstyle"
                  :style="{border:x.Id == Selectobj.Id?'3px solid #91d5ff':'3px solid #FFF'}">
                  <div class="absolute-bottom text-subtitle1 text-center onetext"
                    style="padding: 0;padding: 0 5px;font-size: 12px;">
                    {{x.ImgTextModel.Title}}
                  </div>
                </q-img>


                <q-img v-if="x.Type==6 && x.AppletModel" :src="x.AppletModel.ImagePath" class="imgstyle"
                  :style="{border:x.Id == Selectobj.Id?'3px solid #91d5ff':'3px solid #FFF'}">
                  <div class="absolute-bottom text-subtitle1 text-center onetext"
                    style="padding: 0;padding: 0 5px;font-size: 12px;">
                    {{x.AppletModel.Title}}
                  </div>
                </q-img>
              </div>

            </div>
            <div class="q-col-gutter-md row items-start" v-if="data.length>0 && (msg.Type==5 || msg.Type==7)">
              <div class="col-3 selceimg" v-for="(x,y) in data" @click="Selectobj = x">
                <q-card class="imgstyle2" v-if="x.Type==5 && x.VideoModel"
                  :style="{border:x.Id == Selectobj.Id?'3px solid #91d5ff':'3px solid #FFF'}">
                  <q-card-section>
                    <video width="155" height="120" controls="controls" v-if="x.VideoModel && x.VideoModel.VideoPath">
                      <source :src="x.VideoModel.VideoPath" type="video/ogg" />
                      <source :src="x.VideoModel.VideoPath" type="video/mp4" />
                      <source :src="x.VideoModel.VideoPath" type="video/webm" />
                    </video>
                    <div class="onetext" style="margin-top: 5px;">{{x.VideoModel && x.VideoModel.VideoName
                      ?x.VideoModel.VideoName:''}}</div>
                  </q-card-section>
                </q-card>
                <q-card class="imgstyle2" v-if="x.Type==7 && x.FileModel"
                  :style="{border:x.Id == Selectobj.Id?'3px solid #91d5ff':'3px solid #FFF'}">
                  <q-card-section>
                    <div class="iconfontfile " v-if="x.FileModel && x.FileModel.FilePath!=''"
                          @click.stop="showUpLoadFile(x.FileModel)">
                          <i v-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='PDF'"
                              class="iconfont icon-pdf"></i>
                          <i v-else-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='TXT'"
                              class="iconfont icon-txt"></i>
                          <i v-else-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='DOCX' || 
                          x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='DOC'
                          " class="iconfont icon-word"></i>
                          <i v-else class="iconfont icon-excel"></i>
                      </div>
                      <div class="onetext" style="margin-top: 5px;">{{x.FileModel && x.FileModel.FileName ? x.FileModel.FileName:''}}</div>
                  </q-card-section>
                </q-card>
              </div>
            </div>
            <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
              :input="true" @input="changePage" />
            <div v-if="data.length==0"
              style="width: 100%;height: 50px;display: flex;align-items: center;justify-content: center;">暂无数据</div>
          </div>
          <q-inner-loading :showing="loading">
            <q-spinner-gears size="50px" color="primary" />
          </q-inner-loading>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
          <q-btn color="accent" class="q-mr-md" label="确定" @click="saveOrderInfo()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <q-dialog v-model="Islocal" persistent>
      <q-card style="width: 800px; max-width: 80vw;">
        <q-card-section>
          <div class="text-h6">新建图片素材</div>
        </q-card-section>
        <q-separator />
        <q-card-section class="q-pt-none" style="margin-top: 15px;height: 300px;">
          <el-form ref="localMsg" :model="localMsg" label-width="120px" v-if="materialType==2 ">
            <el-form-item label="素材分组：">
              <div class="q-gutter-sm" style="align-items: flex-start;display: flex;">

                <div style="width: 400px;">
                  <q-select filled stack-label option-value="Id" option-label="Name" v-model="localMsg.MediaGroupId"
                    ref="Id" :options="classifyList" label="分组" :dense="false" emit-value map-options />
                </div>
              </div>
            </el-form-item>
            <el-form-item label="上传图片：">
              <el-upload class="avatar-uploader addDutyMain" action="" :before-upload="uploadFile"
                :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon" v-if="localMsg.ImageModel.ImagePath==''"></i>
                <q-img v-else :src="localMsg.ImageModel.ImagePath"
                  style="width: 100%;height: 100%;border-radius: 6px;display: flex;">
                </q-img>
              </el-upload>
              <div>(图片大小不超过2M，支持JPG、JPEG及PNG格式)</div>
            </el-form-item>


          </el-form>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn class="q-mr-md" label="取消" @click="Islocal = false" />
          <q-btn color="accent" class="q-mr-md" label="上传" @click="savelocal()" />
        </q-card-actions>
      </q-card>
    </q-dialog>

  </div>

</template>
<script>
  import {
    wechatUploadSelfFile
  } from "../../api/common/common"; //上传图片
  import {
    getMediumTypeEnumList,
    getWeChatMediumGroupList,
    getWeChatMediumPageList,//素材列表
    setWeChatMediumInfo,//新增素材
  } from '../../api/system/wechat';
  export default {
    props: {

      materialType: {
        type: Number,
        default: 1
      },
      classifyList: {
        type: Array,
        default: [],
      },
    },
    data() {
      return {
        loading: false,
        IsShow: true,
        Islocal: false,
        saveStart: false,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          MediaGroupId: 0,//分组
          Type: 0,//类型
          Content: '',
        },
        data: [],
        pageCount: 0,
        Selectobj: { Id: 0 },
        localMsg: {//本地上传对象
          Id: 0,
          Type: 0,
          Is_Sync: 1,
          MediaGroupId: '',
        },
        xialaList: [],

      }
    },
    created() {
      this.msg.Type = this.materialType;
      this.gettype()
      let obj = {
        Id: 0,
        Name: '全部'
      }
      let data = JSON.parse(JSON.stringify(this.classifyList))
      data.unshift(obj)
      this.xialaList = data
      this.getList()
    },
    mounted() {

    },
    watch: {

    },
    methods: {
      gettype() {
        this.localMsg.Type = this.materialType;
        this.localMsg.Id = 0;
        this.localMsg.Is_Sync = 1;
        this.localMsg.MediaGroupId = '';
        if (this.materialType == 2) {//图片
          this.localMsg.ImageModel = {
            ImageName: '',
            ImagePath: ''
          };
        } else if (this.materialType == 3) {//图文
          this.localMsg.ImgTextModel = {
            ImgName: '',
            ImgPath: '',
            Title: '',
            Description: '',
            ImgLink: '',
          };
        } else if (this.materialType == 6) {//小程序
          this.localMsg.AppletModel = {
            AppletId: '',
            Page: '',
            Title: '',
            ImageName: '',
            ImagePath: '',
          };
        }
      },
      //关闭弹窗
      closeEditOrder() {
        //   this.IsShowEditOrder = false;
        this.$emit('close')
      },
      getList() {//获取数据
        this.loading = true
        getWeChatMediumPageList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount
          this.data.forEach(x => {
            x.check = false
          })


        })
      },
      changePage(e) {
        this.msg.pageIndex = e;
        this.getList()
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList()
      },
      saveOrderInfo() {//保存返回数据
        if (this.Selectobj.Id == 0) {
          this.$q.notify({
            type: 'negative',
            message: `还未选择`,
            position: 'top'
          })
          return
        }
        this.$emit('success', this.Selectobj)
      },
      localUpload() {//图片模式的时候本地上传
        this.Islocal = true

      },

      savelocal() {//本地上传操作
        //这里做上传操作  刷新列表
        setWeChatMediumInfo(this.localMsg).then(res => {
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: '操作成功',
            position: 'top'
          })
          this.Selectobj = JSON.parse(JSON.stringify(this.localMsg))
          this.Selectobj.Id = res.Data
          this.$emit('success', this.Selectobj)
          this.gettype()
        })
      },
      uploadFile(files) {//图片上传
        if (this.materialType == 2 || this.materialType == 3 || this.materialType == 6) {//图文和图片、小程序的时候处理
          let types = ['image/jpeg', 'image/jpg', 'image/png'];
          const isImage = types.includes(files.type);
          if (this.materialType == 2 || this.materialType == 3) {
            const isLtSize = files.size / 1024 / 1024 < 2;
            if (!isLtSize) {
              this.$q.notify({
                type: 'negative',
                message: `上传图片大小不能超过 2MB!`,
                position: 'top'
              })
              return false;
            }
          } else {
            const isLtSize = files.size / 1024 / 1024 < 1;
            if (!isLtSize) {
              this.$q.notify({
                type: 'negative',
                message: `上传图片大小不能超过 1MB!`,
                position: 'top'
              })
              return false;
            }
          }

          if (!isImage) {
            this.$q.notify({
              type: 'negative',
              message: `上传图片只能是 JPG、JPEG、PNG 格式!`,
              position: 'top'
            })
          } else {
            wechatUploadSelfFile('wechatcatalogue', files, res => {
              if (res.Code == 1) {
                if (this.materialType == 2) {
                  this.localMsg.ImageModel.ImageName = res.FileName;
                  this.localMsg.ImageModel.ImagePath = res.FileUrl;
                } else if (this.materialType == 3) {
                  this.localMsg.ImgTextModel.ImgName = res.FileName;
                  this.localMsg.ImgTextModel.ImgPath = res.FileUrl;
                } else {
                  this.localMsg.AppletModel.ImageName = res.FileName;
                  this.localMsg.AppletModel.ImagePath = res.FileUrl;
                }

                this.$forceUpdate();
              }
            })
          }
        }


      },
      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
              );
          }
      },


    }
  }

</script>