<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-table size="small" :data="dataListZan" border style="margin-top: 20px;width: 960px">
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column min-width="100" align="center" label="平台" prop="platformName">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="账号" prop="accountName">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="视频系列" prop="videoSeries">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="第几集" prop="episodeNumber">
            </el-table-column>
            <!-- <el-table-column min-width="100" align="center" label="视频名称" prop="videoName">
            </el-table-column> -->
            <el-table-column min-width="100" align="center" label="抖音账号" prop="tiktokAccount">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="状态" prop="uploadStatus">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="驳回原因">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" v-if="scope.row.content"
                  @click="handleClickViewContent(scope.row.content)">查看</el-link>
              </template>
            </el-table-column>
            <el-table-column min-width="100" align="center" 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 fixed="right" align="center" label="操作" width="80px"
              class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button :disabled="scope.row.uploadStatus == '未上传' ? false : true" type="primary" size="small"
                  @click="handleClickViewZan(scope.row.id)">上传</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="myPage">
            <el-pagination @size-change="handleSizeChangeZan" @current-change="handleCurrentChangeZan"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :total="totalZan">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="上传点赞" :visible.sync="dialogVisibleZan" width="40%">
      <el-form :rules="rulesZan" ref="dataFormZan" :model="dataFormZan" label-width="100px">
        <el-form-item label="抖音账号:" prop="tiktokAccount">
          <el-input clearable style="width: 95%;" size="small" v-model="dataFormZan.tiktokAccount"></el-input>
        </el-form-item>
        <el-form-item label="事项" prop="matters">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
            @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="dataFormZan.matters" @change="changeChecked">
            <el-checkbox v-for="item in typeListZan" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="证明附件:" prop="fileIds">
          <el-upload :action="fileUrl" :file-list="dataFormZan.files" :on-success="handleAvatarSuccessZan"
            :before-upload="beforeUploadFileZan" :on-remove="handleRemoveZan">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传说明:">
          <el-card shadow="never" style="width: 95%;padding: 0;min-height: 100px;line-height: normal;">
            <div v-html="remarkHtml"></div>
          </el-card>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitFormZan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script scoped>
import { dictList, remarkHtml } from "@/api/allApi";
import { zanList, uploadZan } from "@/api/zanApi";
export default {
  data() {
    return {
      currentPage: 1,
      remarkHtml: '',
      activeName: 'first',
      fileUrl: this.baseUrl,
      // checkbox全选
      isIndeterminate: false,
      checkAll: false,
      mattersArr: [],
      typeListZan: [],
      dataListZan: [],
      dialogVisibleZan: false,
      rulesZan: {
        tiktokAccount: [{ required: true, message: "请填写抖音账号", trigger: "blur" }],
        matters: [{ required: true, message: "请选择事项", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
      },
      totalZan: 0,
      listQueryZan: {
        page: 1,
        limit: 10,
      },
      dataFormZan: {
        tiktokAccount: '',
        matters: [],
        fileIds: '',
        files: [],
      },
    };
  },
  created() {
    this.getRemarkHtml('interactiveRule');
    this.getTypeListZan();
    this.getDataListZan()
  },
  methods: {
    changeChecked(val) {
      console.log(val, '勾选val')
      let checkedCount = val.length
      this.checkAll = checkedCount === this.mattersArr.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.mattersArr.length
    },
    handleCheckAllChange(val) {
      console.log(val, '全选val')
      this.dataFormZan.matters = val ? this.mattersArr : []
      this.isIndeterminate = false
    },
    getRemarkHtml(val) {
      remarkHtml({ noticeType: val }).then(response => {
        console.log(response.data.data);
        this.remarkHtml = response.data.data.content
      })
    },
    handleClickViewContent(val) {
      this.$alert(val, '驳回原因', {
        // showConfirmButton:false,
        // showClose: false,
      });
    },
    handleClickViewZan(id) {
      this.isIndeterminate = false;
      this.checkAll = false;
      this.dialogVisibleZan = true;
      this.dataFormZan = {
        videoId: id,
        tiktokAccount: '',
        matters: [],
        fileIds: '',
        files: [],
      }
    },
   
    handleClick(tab, event) {
      console.log(tab.name, event);
    },
    getTypeListZan() {
      dictList({ dictType: 'matter' }).then(response => {
        let dataList = response.data.data;
        this.typeListZan = dataList;
        // 勾选的数组绑定的是数组中的item.dictValue
        let dictValueArr = []
        dataList.forEach(item => {
          dictValueArr.push(item.dictValue)
        })
        this.mattersArr = dictValueArr
      })
    },

    handleRemoveZan(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormZan.fileIds = fileIds.join(",");
    },
    beforeUploadFileZan(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      if (size > 10) {
        this.$message.error("文件大小不能超过10MB！");
        return false;
      }
    },
    handleAvatarSuccessZan(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.dataFormZan.fileIds = fileIds.join(",");
    },
    submitFormZan() {
      this.$refs['dataFormZan'].validate((valid) => {
        if (valid) {
          this.dataFormZan.matters = this.dataFormZan.matters.join(",");
          uploadZan(this.dataFormZan)
            .then((response) => {
              this.dialogVisibleZan = false;
              this.$notify({
                title: "成功",
                message: "上传成功",
                type: "success",
                duration: 2000,
              });
              this.dataFormZan.tiktokAccount = '';
              this.dataFormZan.matters = [];
              this.dataFormZan.fileIds = '';
              this.dataFormZan.files = [];
              this.listQueryZan.page = 1;
              this.getDataListZan();
            })
            .catch(() => { });
        } else {
          return false;
        }
      });
    },
    getDataListZan() {
      zanList(this.listQueryZan).then(response => {
        this.dataListZan = response.data.data.items;
        this.totalZan = response.data.data.total;
      })
    },
    handleSizeChangeZan(val) {
      this.listQueryZan.limit = val
      this.getDataListZan()
    },
    handleCurrentChangeZan(val) {
      this.listQueryZan.page = val
      this.getDataListZan()
    },

  },
};
</script>
<style scoped>
.text-overflow {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.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>