<template>
  <div class="welcomeList page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <!-- <div class="col-3">
          <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name" v-model="msg.Type"
            ref="Id" :options="typeList" label="类型" :dense="false" emit-value map-options />
        </div> -->

      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" title="" :data="data" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">欢迎语列表</div>
          <q-space />
          <q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add" label="新增欢迎语"
            @click="goadd()"></q-btn>
        </template>
        <template v-slot:body-cell-Type="props">
          <q-td :props="props">
            <span v-if="props.row.Type==1">文本</span>
            <span v-if="props.row.Type==2">图片</span>
            <span v-if="props.row.Type==3">图文</span>
            <span v-if="props.row.Type==4">小程序</span>
          </q-td>
        </template>
        <template v-slot:body-cell-Content="props">
          <q-td :props="props">
            <div style="max-width: 700px; overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;">
              {{props.row.Content}}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-UserIdName="props">
          <q-td :props="props">
            <div style="max-width: 300px; overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;">
              {{props.row.UserIdName}}
            </div>
          </q-td>
        </template>



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

            <q-btn flat size="xs" icon="iconfont icon-view" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
              label="详情" @click="viewDetails(props.row)" />
            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
              @click="goedit(props.row)" />
            <q-btn flat size="xs" icon="delete" color="negative" class="q-mr-xs" label="删除"
              @click="goDetailed(props.row)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
    <q-dialog v-model="isDetails">
      <q-card style="width: 560px;">
        <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-card-section v-if='Detailsobj' class="welcomeList">
          <div>使用成员：{{Detailsobj.UserIdName}}</div>
          <div class="box_l">
            <div class="boxl_title">
              <span style="margin-left:24px ;color: rgba(0,0,0,.85); font-weight: 500; font-size: 16px;">客户账号</span>
            </div>
            <div style="padding: 20px;">
              <div style="display: flex;align-items: flex-start;">
                <i class="el-icon-user" style="margin-right:20px;font-size: 40px;color: #1890ff;"></i>
                <div
                  style="width: 1px; flex:1;background: #f3f6fb;word-wrap: break-word;padding: 10px;border-radius: 4px;min-height: 40px;">
                  {{Detailsobj.Content}}
                </div>
              </div>
              <div style="display: flex;align-items: flex-start;margin-top: 15px;" v-for="(item,index) in Detailsobj.MediumList"
                :key="index">
                <i class="el-icon-user" style="margin-right:20px;font-size: 40px;color: #1890ff;"></i>
                <div v-if="item.Type==2" style="width: 1px; flex:1;">
                  <q-img :src="item.ImageModel.ImagePath" style="width: 70%;">
                  </q-img>

                </div>
                <div v-if="item.Type==3"
                  style="width: 1px; flex:1;padding: 10px 15px;  border: 1px solid #eee;  border-radius: 4px;  background: #fff;">
                  <div>{{item.ImgTextModel.Title}}</div>
                  <div style="display: flex;align-items: flex-start;justify-content: space-between;">
                    <div style="width: 1px;flex:1">
                      {{item.ImgTextModel.Description}}
                    </div>
                    <q-img :src="item.ImgTextModel.ImgPath" style="width: 80px;height: 80px;margin-left: 10px;">
                    </q-img>
                  </div>


                </div>
                <div v-if="item.Type==5" style="width: 1px; flex:1">
                  <video width="300" height="200" controls="controls" v-if="item.VideoModel && item.VideoModel.VideoPath">
                      <source :src="item.VideoModel.VideoPath" type="video/ogg" />
                      <source :src="item.VideoModel.VideoPath" type="video/mp4" />
                      <source :src="item.VideoModel.VideoPath" type="video/webm" />
                    </video>
                  
              
              </div>
                <div v-if="item.Type==6"
                  style="width: 70%;padding: 10px 15px;  border: 1px solid #eee;  border-radius: 4px;  background: #fff;">
                  <div>{{item.AppletModel.Title}}</div>
                  <q-img :src="item.AppletModel.ImagePath" style="width: 100%;">
                  </q-img>


                </div>
                <div v-if="item.Type==7" style="width: 1px; flex:1;padding: 10px 15px;  border: 1px solid #eee;  border-radius: 4px;  background: #fff;">
                  <div style="display: flex;align-items: flex-start;justify-content: space-between;" @click="showUpLoadFile(item.FileModel)">
                      <div style="width: 1px;flex:1">
                          {{item.FileModel.FileName}}
                      </div>
                      <div  style="width: 50px;text-align: right;margin-left: 10px;">
                          <i  v-if="item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='PDF'" class="iconfont icon-pdf"></i>
                          <i  v-else-if="item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='TXT'" class="iconfont icon-txt"></i>
                          <i  v-else-if="item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='DOCX' || 
                          item.FileModel.FilePath.substring(item.FileModel.FilePath.lastIndexOf('.')+1,item.FileModel.FilePath.length).toUpperCase()=='DOC'
                          " class="iconfont icon-word"></i>
                          <i  v-else class="iconfont icon-excel"></i>
                      </div>
                  </div>
                  
              
              </div>
                
              </div>

            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>

  </div>
</template>

<script>
  import {
    getWeChatWelcomesPageList,
    delWechatWelcomesInfo
  } from '../../api/system/wechat';
  import {
    queryEmployee
  } from '../../api/users/user'

  export default {
    meta: {
      title: "欢迎语列表"
    },
    name: "welcomeList",
    data() {
      return {
        loading: false,
        ISsystem: false,
        data: [],
        pageCount: 0,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          rowsPerPage: 15,
          Type: 0,
        },
        typeList: [
          { Id: 0, Name: '不限' },
          { Id: 1, Name: '文本' },
          { Id: 2, Name: '图片' },
          { Id: 3, Name: '图文' },
          { Id: 4, Name: '小程序' },
        ],
        //公告column
        columns: [{
          name: 'Id',
          label: 'Id',
          field: 'Id',
          align: 'left'
        },
        {
          name: 'Content',
          field: 'Content',
          label: '欢迎语内容',
          align: 'left',
        },
        {
          name: 'UserIdName',
          field: 'UserIdName',
          label: '使用成员',
          align: 'left'
        },
        {
          name: 'UpdateByName',
          field: 'UpdateByName',
          label: '创建者',
          align: 'left'
        },
        {
          name: 'UpdateTime',
          field: 'UpdateTime',
          label: '创建时间',
          align: 'left'
        },
        {
          name: 'optioned',
          label: '操作',
          field: 'DeptId'
        }
        ],
        memberList: [],
        isDetails: false,
        Detailsobj: null
      }
    },
    created() {
      this.getMember()//获取人员列表
      this.getList()
    },
    methods: {
      getMember() {
        this.outerVisible = true;
        this.dialogTitle = this.$t('fnc.xzrenyuan');
        queryEmployee({}).then(res => {
          if (res.Code == 1) {
            this.memberList = res.Data;
          }
        }).catch(() => {

        })

      },
      changePage(e) {
        this.msg.pageIndex = 1
        this.getList()
      },
      getList() {
        this.loading = true
        getWeChatWelcomesPageList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount
          this.data.forEach(x => {
            x.UserIdName = ''
            x.UserIdList.map((j, i) => {
              if (j == -1) {
                x.UserIdName = '通用'
                return
              } else {

                if (i + 1 != x.UserIdList.length) {
                  this.memberList.map(z => {
                    if (z.Id == j) {
                      x.UserIdName = x.UserIdName + z.EmployeeName + '、'
                    }
                    return
                  })
                } else {
                  this.memberList.map(z => {
                    if (z.Id == j) {
                      x.UserIdName = x.UserIdName + z.EmployeeName
                    }
                    return
                  })

                }
              }
            })
          })
        })
      },
      goadd() {
        this.$router.push({
          path: '/enterprise/addWelcome',
        });
      },
      goedit(row) {//编辑
        this.$router.push({
          path: '/enterprise/addWelcome',
          query: {
              Id: row.Id
            }
        });
      },
      goDetailed(row) {//删除
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除此欢迎语？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          delWechatWelcomesInfo({ WelcomesId: row.Id }).then(res => {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            this.getList()

          })
        }).onCancel(() => {

        });
      },
      viewDetails(row) {
        this.Detailsobj = row
        this.isDetails = true
      },
      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>

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

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

  .welcomeList .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;
  }

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

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

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

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

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

  .welcomeList .box_l {
    width: 400px;
    border-radius: 6px;
    margin-right: 15px;
    background: #fff;
    margin-top:20px;margin-left: 10px;
    box-shadow: 0px 0px 10px rgba(191, 191, 191, 0.7);

  }

  .welcomeList .boxl_title {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
  }
  .welcomeList .icon-excel,
    .welcomeList .icon-pdf,
    .welcomeList .icon-txt,
    .welcomeList .icon-wenjian,
    .welcomeList .icon-yasuobao,
    .welcomeList .icon-shipin,
    .welcomeList .icon-word {
  font-size: 38px;
  color: green;
  line-height: 75px;
}
</style>