<template>
  <div class="flexOne">
    <div class="query-box">
      <ul>
        <li>
          <span><em>{{$t('adm.adm_title')}}：</em>
            <el-input v-model='msg.Title' class="permiss-input"></el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('adm.adm_Publisher')}}：</em>
            <el-select filterable clearable v-model='msg.UpdateBy' :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
              <el-option v-for='item in Employee' :label='item.EmName' :value='item.EmployeeId' :key='item.EmployeeId'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{$t('adm.adm_ublicationstatus')}}：</em>
            <el-select v-model="msg.Status" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
              <el-option :label="$t('adm.adm_tobepublish')" value='0'></el-option>
              <el-option :label="$t('adm.adm_published')" value='1'></el-option>
              <el-option :label="$t('adm.adm_Withdrawn')" value='2'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{$t('adm.adm_Ceilingsituation')}}：</em>
            <el-select v-model="msg.Is_top" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
              <el-option :label="$t('adm.adm_Noroofset')" value='0'></el-option>
              <el-option :label="$t('adm.adm_roofset')" value='1'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button"
            @click="outerVisible = true,dialogTitle=$t('objFill.v101.administrative.tianjiagogao'),layerType=2,clearMessage()"
            class="normalBtn" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th>{{$t('adm.adm_theme')}}</th>
        <!-- <th>{{$t('adm.adm_Ceilingsituation')}}</th> -->
        <th>{{$t('adm.adm_ublicationstatus')}}</th>
        <th>{{$t('admin.admin_czPerson')}}</th>
        <th>{{$t('fnc.caozuoriqi')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList" v-loading='loading'>
        <td>{{item.Title}}</td>
        <!-- <td>{{item.Is_top==0?'':$t('adm.adm_roofset')}}</td> -->
        <td>{{noticeFormat(item.Status)}}</td>
        <td>{{item.UpdateName}}</td>
        <td>{{item.UpdateTime|dateFormat(item.UpdateTime)}}</td>
        <td>
          <el-button-group>
            <el-tooltip v-if="item.Status!='0'" class="item" effect="dark" :content="$t('fnc.xiangqing')"
              placement="top-start">
              <el-button @click='getDetails(item.Id, item.Title)' type="primary" icon="el-icon-tickets"></el-button>
            </el-tooltip>
            <el-tooltip v-if="item.Status=='0'" class="item" effect="dark" :content="$t('pub.updateMsg')"
              placement="top-start">
              <el-button @click='updateNotice(item.Id)' type="primary" icon="el-icon-edit"></el-button>
            </el-tooltip>
            <!-- <el-tooltip v-if="item.Is_top==0&&item.Status=='1'" class="item" effect="dark" :content="$t('adm.adm_roof')" placement="top-start">
						    <el-button @click="setTop(item.Id)" type="primary"  icon="iconfont icon-control-top" ></el-button>
						</el-tooltip> -->
            <!-- <el-tooltip v-if="item.Is_top==1&&item.Status=='1'" class="item" effect="dark" :content="$t('adm.adm_exitroof')" placement="top-start">
						    <el-button @click="setTop(item.Id)" type="primary"  icon="iconfont icon-control-bottom" ></el-button>
						</el-tooltip> -->
            <el-tooltip v-if="item.Status=='1'" class="item" effect="dark" :content="$t('adm.adm_chehui')"
              placement="top-start">
              <el-button @click='reCallNotice(item.Id)' type="warning" icon="el-icon-delete"></el-button>
            </el-tooltip>
            <el-tooltip v-if="item.Status=='0'" class="item" effect="dark" :content="$t('system.table_delete')"
              placement="top-start">
              <el-button @click='deleteNotice(item.Id)' type="danger" icon="el-icon-delete"></el-button>
            </el-tooltip>
          </el-button-group>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
    </el-pagination>
    <el-dialog custom-class='w800' :title="dialogTitle" :visible.sync="outerVisible" center
      :before-close="closeChangeMachie">
      <div v-if='layerType==1'>
        <p style="text-align: right; padding: 5px 0;">
          {{detailMessage.EmName}}&nbsp;&nbsp;&nbsp;&nbsp;{{detailMessage.UpdateTime}}</p>
        <div v-html="detailMessage.Content">

        </div>
        <!-- <pre style="letter-spacing: 1px; font-size: 14px; color: #333;">
											{{detailMessage.Content}}
										</pre> -->
        <p style="padding:0 10px; margin: 10px 0; background: #f1f1f1;">{{$t('adm.adm_fujian')}}：</p>
        <p style="height: 28px; padding: 0 10px; line-height: 28px;" v-for="item in downLoadList"
          class="AnnFileListPMeta">
          <i class="iconfont icon-xiazai"></i>--<span @click="downloadSingle(item)">{{item.Name}}</span>
        </p>
      </div>

      <el-form v-if='layerType==2' :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <table class="layerNoIcon">
          <tr>
            <td>
              <el-form-item :label="$t('adm.adm_title')" prop="Title">
                <el-input class='w600' type="text" v-model="addMsg.Title" :placeholder="$t('pub.pleaseImport')">
                </el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <quill-editor :options="editorOption" v-model="addMsg.Content"></quill-editor>

            </td>
          </tr>
          <tr>
            <td>
              <el-form-item :label="$t('adm.adm_fujian')">
                <el-upload :http-request="UploadAttachment" :multiple="true" :show-file-list="false" action="">
                  <el-button size="small" type="danger" icon="el-icon-upload2">{{$t('adm.adm_content')}}</el-button>
                </el-upload>
              </el-form-item>
            </td>
          </tr>
          <tr v-if='uploadList.length>0'>
            <td>
              <el-form-item :label="$t('adm.adm_fjlist')">
                <div class="AnnfileList">
                  <li v-for="item in uploadList">
                    <span @click="downloadOne(item)">{{item.name}}--{{$t('adm.adm_download')}}</span>
                    <i class="el-icon-circle-close-outline" @click="deleteFile(item)"></i>
                  </li>
                </div>
              </el-form-item>
            </td>
          </tr>
        </table>
      </el-form>


      <div v-if='layerType!=1' slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn"
          @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
        &nbsp;
        <button class="normalBtn" type="primary" @click="submitForm('addMsg',0)">{{$t('fnc.zancun')}}</button>
        &nbsp;
        <button class="normalBtn" type="primary" @click="submitForm('addMsg',1)">{{$t('adm.adm_publish')}}</button>
      </div>
      <div v-if='layerType==1' slot="footer" class="dialog-footer">
        <button class="normalBtn" @click="outerVisible = false">{{$t('pub.closeSel')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        editorOption: {
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike', 'image'], // toggled buttons
              [{
                'header': [1, 2, 3, 4, 5, 6, false]
              }],
              [{
                'color': []
              }, {
                'background': []
              }],
              [{
                'font': []
              }],
              [{
                'align': []
              }],
              [{
                'size': ['small', false, 'large', 'huge']
              }],
              [{
                'list': 'ordered'
              }, {
                'list': 'bullet'
              }]
            ]
          }
        },
        uploadList: [],
        layerType: '',
        loading: true,
        //分页
        total: 0,
        pageSize: '',
        currentPage: 1,
        //弹窗
        outerVisible: false,
        isRight: true,
        dialogTitle: '',
        //请求参数
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Status: '-1',
          Is_top: '-1',
          Title: '',
          UpdateBy: '-1'
        },
        addMsg: {
          Id: '-1',
          Title: '',
          Content: '',
          Status: '',
          FileList: [],
          RB_Group_Id: '-1',
        },
        rules: {
          Title: [{
            required: true,
            message: this.$t('adm.adm_qsrgbbiaoti'),
            trigger: 'blur'
          }],
          Content: [{
            required: true,
            message: this.$t('adm.adm_qsrgbneirong'),
            trigger: 'blur'
          }],
        },
        employeeMsg: {
          GroupId: '',
          BranchId: 0,
          DepartmentId: 0,
          PostId: 0,
          IsLeave: 0,
        },
        //返回结果
        DataList: [],
        Employee: [],
        detailMessage: [],
        downLoadList: [],
        fabuStatus: {
          t1: this.$t('objFill.fabuzts')[0],
          t2: this.$t('objFill.fabuzts')[1],
          t3: this.$t('objFill.fabuzts')[2],
        }
      }
    },
    filters: {
      
      dateFormat(date) {
        return date.replace('T', ' ')
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.addMsg.RB_Group_Id = userInfo.RB_Group_id
      this.getList();
      this.getEmployee();
    },
    methods: {
      noticeFormat(status) {
        if (status == "0")
          return this.fabuStatus.t1
        if (status == "1")
          return this.fabuStatus.t2
        if (status == "2")
          return this.fabuStatus.t3
      },
      UploadAttachment(file) { //上传
        if (file.file.size > 1024 * 1024 * 100) {
          this.$message.warning(this.$t('adm.adm_filenotmoreM'))
          return
        }
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/Temporary/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
          this.saveMsg = []
          this.saveMsg.push({
            Path: x.data.FilePath,
            FileName: file.file.name,
            MD5Sign: file.file.uid,
            FileSize: fileSize,
            FolderId: this.msg.ParentId
          })
          this.uploadList.push({
            url: x.data.FilePath,
            name: file.file.name
          })
        });
      },
      downloadSingle(obj) {
        const link = document.createElement('a');
        let _loadUrl = this.domainManager().UploadUrl;
        link.href = obj.Url;
        document.body.appendChild(link);
        window.open(obj.Url)
      },
      downloadOne(obj) {
        this.downloadFileRename(obj.url, obj.name);
      },
      deleteFile(obj) {
        if (this.uploadList.findIndex(item => item.url === obj.url) != -1) {
          this.uploadList.splice(this.uploadList.findIndex(item => item.url === obj.url), 1)
        }
      },
      reCallNotice(id) {
        this.$confirm(this.$t('adm.adm_sfchehui'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost("User_post_NoticeSetRevocation", {
            noticeId: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.$message.success(this.$t('adm.adm_chsuccess'))
              this.getList();
            }
          }, err => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('adm.adm_chexit')
          });
        });

      },
      deleteNotice(id) {
        this.$confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost("User_post_NoticeRemove", {
            noticeId: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.$message.success(this.$t('tips.shanchuchenggong'))
              this.getList();
            }
          }, err => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('tips.cancleDelete')
          });
        });
      },
      getList() { //公告列表
        this.loading = true;
        this.apipost('User_get_NoticeGetPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.loading = false;
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
          }
        }, err => {})
      },
      getEmployee() { //员工
        this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
          if (res.data.resultCode == 1) {
            this.Employee = res.data.data;
          }
        }, err => {})
      },
      addNotice(_status) {
        this.addMsg.FileList = this.uploadList;
        this.layerType = 2;
        this.addMsg.Status = _status;
        this.apipost('User_post_NoticeSet', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message)
            this.outerVisible = false;
            this.getList()
            this.resetForm('addMsg');
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      updateNotice(id) {
        this.addMsg.Id = id;
        this.dialogTitle = this.$t('tips.adm_xgnotice');
        this.outerVisible = true;
        this.layerType = 2;
        this.apipost('User_get_NoticeGet', {
          noticeId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg.Title = res.data.data.Title
            this.addMsg.Content = res.data.data.Content
            this.uploadList = []
            if (res.data.data.File_url) {
              let _arr = JSON.parse(res.data.data.File_url);
              if (_arr.length > 0) {
                _arr.forEach(item => {
                  this.uploadList.push({
                    name: item.Name,
                    url: item.Url
                  })
                })
              }
            }
          }
        }, err => {})
      },
      getDetails(id, tit) {
        this.outerVisible = true;
        this.layerType = 1;
        this.dialogTitle = tit;
        this.apipost('User_get_NoticeGet', {
          noticeId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.detailMessage = res.data.data
            if (res.data.data.File_url) {
              this.downLoadList = JSON.parse(res.data.data.File_url)
              this.downLoadList.forEach(item => {
                item.Url = this.domainManager().ViittoFileUrl + item.Url
              })
            }
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      setTop(id) { //置顶
        this.$confirm(this.$t('adm.adm_shifouroof'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('User_post_NoticeSetTop', {
            noticeId: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.Employee = res.data.data;
              this.getList();
            } else {
              this.$message.warning(res.data.message)
            }
          }, err => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('adm.adm_exitroof')
          });
        });

      },
      clearMessage() {
        this.uploadList.length = 0;
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      submitForm(addMsg, _type) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addNotice(_type)
          } else {
            return false;
          }
        });
      },
      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
        done();
        this.resetForm('addMsg');
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        if (formName) {
          this.$refs[formName].resetFields();
        }

        this.addMsg.Id = '-1'
      }
    }
  }

</script>

<style>
  .ann_detail_title {
    line-height: 24px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
  }

  .ann_textarea textarea {
    height: 400px !important;
  }

  .AnnfileList {
    padding: 5px 0;
  }

  .AnnfileList li {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }

  .AnnfileList li:hover {
    background: #f1f1f1;
  }

  .AnnfileList li>i {
    float: right;
    margin-top: 8px;
  }

  .AnnfileList li:hover,
  .AnnFileListPMeta:hover {
    text-decoration: underline;
    color: #E95252;
    cursor: pointer;
  }

  .AnnFileListPMeta {
    color: blue
  }

  .AnnFileListPMeta .iconfon {
    font-size: 12px;
  }

</style>
