<template>
  <div class="right-wrap">
    <div class="myTabs" style="background: #fff;min-height: 500px;">
      <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="表彰列表" name="first">
          <el-button size="small" type="primary" @click="dialogVisibleCite = true">上传表彰</el-button>
          <el-table size="small" :data="dataListCite" border style="margin-top: 20px;width: 960px">
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" min-width="200" label="附件">
              <template slot-scope="props">
                <div v-for="(item, index) in props.row.files" :key="index">
                  <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
                </div>

              </template>
            </el-table-column>
            <el-table-column align="center" prop="typeName" min-width="100" label="表彰类型"></el-table-column>
            <el-table-column align="center" min-width="100" label="表彰人员">
              <template slot-scope="props">
                <div v-for="(item, index) in props.row.groupUsers" :key="index">
                    {{ item.userName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="customerName" min-width="100" label="客户名称"></el-table-column>
            <el-table-column align="center" prop="title" min-width="100" label="表彰名称"></el-table-column>
            <el-table-column min-width="150" align="center" prop="content" label="表彰描述"></el-table-column>
            <el-table-column min-width="120" align="center" label="状态">
              <template slot-scope="props">
                <el-popover trigger="hover">
                  <el-table :data="props.row.logs" border size="mini">
                    <el-table-column min-width="80" align="center" prop="auditor" label="处理人"></el-table-column>
                    <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
                    <!-- <el-table-column min-width="120" align="center" prop="statusName" label="状态"></el-table-column> -->
                    <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
                  </el-table>
                  <span style="color: #1e80ff;cursor: pointer;" slot="reference">{{ props.row.statusName }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center" prop="createTime" label="上传时间"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="myPage">
            <el-pagination @size-change="handleSizeChangeCite" @current-change="handleCurrentChangeCite"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :totalCite="totalCite">
            </el-pagination>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>
    <el-dialog title="上传表彰" :visible.sync="dialogVisibleCite" width="40%">
      <el-form :rulesCite="rulesCite" ref="dataFormCite" :model="dataFormCite" label-width="100px">
        <el-form-item label="表彰类型:" prop="type">
          <el-select clearable size="small" style="width: 95%;" v-model="dataFormCite.type" placeholder="请选择表彰类型">
            <el-option v-for="item in typeListCite" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dataFormCite.type=='1'" label="集体人员:" prop="groupIds">
          <el-select size="small" v-model="dataFormCite.groupIds" multiple filterable placeholder="请选择" style="width: 95%;">
            <el-option :key="item.loginId" v-for="item in recipientsList" :label="item.deptName+'_'+item.userName+'_'+item.employeNo" :value="item.loginId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称:" prop="customerName">
          <el-input clearable style="width: 95%;" size="small" v-model="dataFormCite.customerName"></el-input>
        </el-form-item>
        <el-form-item label="表彰名称:" prop="title">
          <el-input clearable style="width: 95%;" size="small" v-model="dataFormCite.title"></el-input>
        </el-form-item>
        <el-form-item label="表彰描述:" prop="title">
          <el-input  type="textarea" :rows="2" clearable style="width: 95%;" size="small" v-model="dataFormCite.content"></el-input>
        </el-form-item>
        <el-form-item label="表彰附件:" prop="fileIds">
          <el-upload :action="fileUrl" :file-list="dataFormCite.files" :on-success="handleAvatarSuccessCite"
            :before-upload="beforeUploadFileCite" :on-remove="handleRemoveCite">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
       
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitFormCite">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script scoped>
import { dictList, allUserList, citeList, uploadCite } from "@/api/allApi";
export default {
  data() {
    return {
      typeListCite: [],
      recipientsList:[],
      activeName: 'first',
      fileUrl: this.baseUrl,
      dataListCite: [],
      dialogVisibleCite: false,
      rulesCite: {
        type: [{ required: true, message: "请选择表彰类型", trigger: "blur" }],
        groupIds: [{ required: true, message: "请选择集体人员", trigger: "blur" }],
        customerName: [{ required: true, message: "请填写客户名称", trigger: "blur" }],
        title: [{ required: true, message: "请填写表彰名称", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
        content: [{ required: true, message: "请填写表彰描述", trigger: "blur" }],
      },
      totalCite: 0,
      listQueryCite: {
        page: 1,
        limit: 10,
      },
      dataFormCite: {
        type: '',
        groupIds:[],
        customerName:'',
        title:'',
        fileIds: '',
        files:[],
        content:''
      }
    };
  },
  created() {
    this.getTypeListCite();
    this.getAllUserList();
    this.getDataListCite();
  },
  methods: {
    getTypeListCite(){
      dictList({dictType:'customer_treward_type'}).then(response=>{
                this.typeListCite = response.data.data; 
            })
    },
    getAllUserList() {
            allUserList().then(response => {
                this.recipientsList = response.data.data;
            }).catch(() => {});
        },
    handleClick(tab, event) {
      console.log(tab.name, event);
    },
    handleRemoveCite(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormCite.fileIds = fileIds.join(",");
    },
    beforeUploadFileCite(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
        if(size > 10 ){
          this.$message.error("文件大小不能超过10MB！");
            return false;
        }
    },
    handleAvatarSuccessCite(res, file, fileList) {
      console.log(file, fileList);
      console.log("------", "==========");
      console.log("res = ", res);

      let fileIds = [];
      for (let i in fileList) {
        let response = fileList[i].response;
        if (response.errno && response.errno != "0") {
          this.$message.error("该文件上传失败,已被移除,请重新上传!");
          // 上传失败移除该 file 对象
          fileList.splice(i, 1);
        } else {
          let id = fileList[i].response.data.id;
          fileIds.push(id);
        }
      }
      this.dataFormCite.fileIds = fileIds.join(",");
    },
    submitFormCite() {
      this.$refs['dataFormCite'].validate((valid) => {
        if (valid) {
          uploadCite(this.dataFormCite)
            .then((response) => {
              this.dialogVisibleCite = false;
              this.$notify({
                title: "成功",
                message: "表彰上传成功",
                type: "success",
                duration: 2000,
              });
              this.dataFormCite.type = [],
              this.dataFormCite.fileIds = '',
              this.dataFormCite.files = [],
              this.getDataListCite();
            })
            .catch(() => { });
        } else {
          return false;
        }
      });
    },
    getDataListCite() {
      citeList(this.listQueryCite).then(response => {
        this.dataListCite = response.data.data.items;
        this.totalCite = response.data.data.totalCite;
      })
    },
    handleSizeChangeCite(val) {
      this.listQueryCite.limit = val
      this.getDataListCite()
    },
    handleCurrentChangeCite(val) {
      this.listQueryCite.page = val
      this.getDataListCite()
    },

  },
};
</script>
<style scoped>
.right-wrap {
  width: 100%;
}

.myPage {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gainList_container {
  min-height: 560px;
}

.gainList_container .gains_wrapper {
  position: relative;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 20px;
}

.gainList_container .gains_wrapper .list {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}

.item.isVirtual {
  background: #f7f8fa;
  border: 1px solid #e5e6eb;
}

.item {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: calc(50% - 30px);
  min-width: 410px;
  height: 116px;
  padding-right: 6px;
  background: #fff;
  border: 1px solid #e5e6eb;
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 20px;
  margin-top: 20px;
}

.item .img-wapper {
  width: 114px;
  height: 114px;
  margin-right: 16px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .img-wapper .item-icon {
  max-width: 72px;
  max-height: 72px;
}

.item .main {
  flex: auto;
}

.item .date,
.item .goods_name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.item .goods_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 16px;
  line-height: 24px;
  color: #252933;
  padding-bottom: 4px;
}

.item p {
  margin: 0;
}

.item .date {
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
  color: #8a919f;
}

.item .buttons {
  margin-top: 8px;
  margin-left: -8px;
  display: flex;
  align-items: center;
}

.item .button-item.actived {
  background: #f2f3f5;
  color: #8a919f;
}

.item .button-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 0 8px;
  height: 26px;
  margin-left: 8px;
  font-weight: 500;
  background: #f2f3f5;
  border-radius: 50px;
  color: #8a919f;
  white-space: nowrap;
  border: none;
}

.item .arrow {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  transform: rotate(-90deg);
}

svg:not(:root) {
  overflow: hidden;
}

.item .button-item svg path {
  fill: currentColor;
}

.status {
  margin-right: 30px;
  font-size: 13px;
}

.status.bottom {
  margin-top: 55px;
}

.status .use-btn {
  color: #1e80ff;
}

.timeline-container {
  margin: 0 auto;
}

.timeline-entry-list {
  margin-right: 17.5rem;
  border-radius: 2px;
  width: 720px;
  position: relative;
}

.entry-list-container {
  background-color: #fff;
  border-radius: 4px;
  min-height: 500px;
}

.entry-list-container .tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e5e6eb;
  overflow: hidden;
}

.tab-header .tab-title {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
}

.content-body {
  padding: 10px 20px 16px;
}

.serie {
  margin: 0 0 40px;
}

.serie .serie-title {
  height: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.serie .serie-title .title {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #1d2129;
  margin: 0 16px;
}

.serie .serie-title .series-left,
.serie .serie-title .series-right {
  width: 16px;
  height: 2px;
}

img {
  border-style: none;
}

.serie .badge-icon-list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 10px 20px;
  flex-wrap: wrap;
}

.serie .badge-icon-list .badge-icon-item {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 150px;
  font-style: normal;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon {
  width: 65px;
  height: 65px;
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon .not-obtain {
  filter: grayscale(100%);
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon img {
  width: 100%;
  height: 100%;
}

.serie .badge-icon-list .badge-icon-item .badge-desc {
  /* margin-top: -10px; */
  text-align: center;
  color: #1d2129;
  font-size: 16px;
  line-height: 28px;
}

.serie .badge-icon-list .badge-icon-item .obtain-date {
  font-size: 14px;
  text-align: center;
  color: #86909c;
  height: 24px;
  line-height: 24px;
}
</style>