<template>
  <div class="mod-print-promotionVideo">
    <!-- 搜索相关区域 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" @keyup.enter.native="getDataList(this.page)" size="small">
        <el-form-item label="视频ID" prop="id">
          <el-input v-model="searchForm.id" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="推广人" prop="tgUserName">
          <el-input v-model="searchForm.tgUserName" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="推广店铺" prop="shopId">
          <el-select v-model="searchForm.shopId" placeholder="推广店铺"
                     controls-position="right" :clearable="true">
            <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="博主ID" prop="upId">
          <el-input v-model="searchForm.upId" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="博主名称" prop="upName">
          <el-input v-model="searchForm.upName" :clearable="true"></el-input>
        </el-form-item>
        <!--<el-form-item label="t+1点赞数" prop="likeNumT1">
          <el-input v-model="searchForm.likeNumT1"></el-input>
        </el-form-item>
        <el-form-item label="t+1播放数" prop="playNumT1">
          <el-input v-model="searchForm.playNumT1"></el-input>
        </el-form-item>
        <el-form-item label="评论数" prop="commNum">
          <el-input v-model="searchForm.commNum"></el-input>
        </el-form-item>
        <el-form-item label="t+7点赞数" prop="likeNumT7">
          <el-input v-model="searchForm.likeNumT7"></el-input>
        </el-form-item>
        <el-form-item label="t+7播放数" prop="playNumT7">
          <el-input v-model="searchForm.playNumT7"></el-input>
        </el-form-item>
        <el-form-item label="总点赞数" prop="likeNum">
          <el-input v-model="searchForm.likeNum"></el-input>
        </el-form-item>
        <el-form-item label="总播放数" prop="playNum">
          <el-input v-model="searchForm.playNum"></el-input>
        </el-form-item>-->
        <el-form-item label="发布平台" prop="publishPlatform">
          <el-autocomplete
            class="inline-input"
            v-model="searchForm.publishPlatform"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容">
            <template slot-scope="{ item }">
              <div class="name">{{ item.label }}</div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="寄拍/付费" prop="payType">
          <el-select v-model="searchForm.payType" placeholder="请选择" size="small" :clearable="true">
            <el-option :key="0" label="寄拍" value="寄拍"></el-option>
            <el-option :key="1" label="付费 " value="付费"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="发布状态" size="small" :clearable="true">
            <el-option :key="1" label="待发布" value="待发布"></el-option>
            <el-option :key="2" label="已发布 " value="已发布"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="结算状态" prop="settleStatus">
          <el-select v-model="searchForm.settleStatus" placeholder="请选择" size="small" :clearable="true">
            <el-option :key="1" label="未结算" value="未结算"></el-option>
            <el-option :key="2" label="已结算 " value="已结算"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="粉丝数：" label-width="85px">
          <InputNumberRange v-model="fansNumRange"></InputNumberRange>
        </el-form-item>
        <el-form-item label="点赞数量：" label-width="85px">
          <InputNumberRange v-model="likeNumRange"></InputNumberRange>
        </el-form-item>
        <el-form-item label="评论数量：" label-width="85px">
          <InputNumberRange v-model="commNumRange"></InputNumberRange>
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker
            :clearable="true"
            v-model="publishTimeDateRange"
            type="datetimerange"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="default-btn" @click="setDateRange(1)">{{
              $t("date.t")
            }}</div>
          <div class="default-btn" @click="setDateRange(2)">{{
              $t("date.y")
            }}</div>
          <div class="default-btn" @click="setDateRange(3)">近3天</div>
          <div class="default-btn" @click="setDateRange(4)">近5天</div>
          <div class="default-btn primary-btn" @click="searchChange()">{{$t("crud.searchBtn")}}</div>
<!--          <div class="default-btn" @click="getSoldExcel()">{{ $t("order.export") }}</div>-->
          <div class="default-btn" @click="clear()">{{ $t("product.reset") }}</div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表相关区域 -->
    <div class="main-container">
      <div class="operation-bar">
<!--        <div class="default-btn primary-btn" @click="addOrUpdateHandle()"-->
<!--             v-if="isAuth('print:promotionVideo:save')">{{$t("crud.addTitle")}}</div>-->
<!--        <div class="default-btn primary-btn" @click="addOrUpdateHandle()">{{$t("crud.addTitle")}}</div>-->
<!--        <div class="default-btn primary-btn" @click="openUploadDialog()">导入数据</div>-->
      </div>
      <div class="table-con spec-table">
        <el-table
          ref="specListTable"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row"
          style="width: 100%">
          <!-- 视频ID -->
          <el-table-column label="视频ID" prop="id" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.id}}</span>
            </template>
          </el-table-column>
          <!-- 推广人名称 -->
          <el-table-column :label="$t('promotionVideo.tgUserName')" prop="tgUserName" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.tgUserName}}</span>
            </template>
          </el-table-column>
          <!-- 店铺名称 -->
          <el-table-column label="店铺" prop="shopName" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.shopName}}</span>
            </template>
          </el-table-column>
          <!-- 博主ID -->
          <el-table-column label="博主" prop="upId" align="center" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.upId}}</span>
              <br/>
              <span>{{ scope.row.upName}}</span>
            </template>
          </el-table-column>
          <!-- 粉丝数 -->
          <el-table-column label="粉丝数" prop="fansNum" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.fansNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="点赞数" prop="likeNum" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.likeNum}}</span>
            </template>
          </el-table-column>
          <!--&lt;!&ndash; t+1点赞数 &ndash;&gt;
          <el-table-column :label="$t('promotionVideo.likeNumT1')" prop="likeNumT1" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.likeNumT1}}</span>
            </template>
          </el-table-column>
          &lt;!&ndash; t+1播放数 &ndash;&gt;
          <el-table-column :label="$t('promotionVideo.playNumT1')" prop="playNumT1" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.playNumT1}}</span>
            </template>
          </el-table-column>-->
          <!-- 评论数 -->
          <el-table-column label="评论数" prop="commNum" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.commNum}}</span>
            </template>
          </el-table-column>
          <!--&lt;!&ndash; t+7点赞数 &ndash;&gt;
          <el-table-column :label="$t('promotionVideo.likeNumT7')" prop="likeNumT7" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.likeNumT7}}</span>
            </template>
          </el-table-column>
          &lt;!&ndash; t+7播放数 &ndash;&gt;
          <el-table-column :label="$t('promotionVideo.playNumT7')" prop="playNumT7" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.playNumT7}}</span>
            </template>
          </el-table-column>-->
          <!-- 总点赞数 -->

          <!-- 总播放数 -->
          <el-table-column label="播放数" prop="playNum" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.playNum}}</span>
            </template>
          </el-table-column>
          <!-- 发布平台 -->
          <el-table-column :label="$t('promotionVideo.publishPlatform')" prop="publishPlatform" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.publishPlatform}}</span>
            </template>
          </el-table-column>
          <!-- 视频链接 -->
          <el-table-column :label="$t('promotionVideo.videoUrl')" prop="videoUrl" align="center" width="200px">
            <template slot-scope="scope">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">{{scope.row.videoUrl}}</div>
                <span style="overflow: hidden;width: 50px;white-space: nowrap;">{{scope.row.videoUrl}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <!-- 是否付费，0寄拍，1付费 -->
          <el-table-column label="寄拍/付费" prop="payType" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.payType === '付费'" type="danger">付费：{{scope.row.payAmt}}元</el-tag>
              <el-tag v-if="scope.row.payType === '寄拍'" type="primary">寄拍</el-tag>
            </template>
          </el-table-column>
          <!-- 结算状态 -->
          <el-table-column :label="$t('promotionVideo.settleStatus')" prop="settleStatus" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.settleStatus === '未结算'" type="danger">未结算</el-tag>
              <el-tag v-if="scope.row.settleStatus === '已结算'" type="success">已结算</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布状态" prop="status" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === '待发布'" type="warning">待发布</el-tag>
              <el-tag v-if="scope.row.status === '已发布'" type="success">已发布</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" prop="publishTime" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.publishTime}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" :label="$t('publics.operating')" width="auto">
            <template slot-scope="scope">
              <div class="text-btn-con">
                <div class="default-btn text-btn" @click="addOrUpdateHandle(scope.row.id)"
                     >{{$t("crud.updateBtn")}}</div>
                <div class="default-btn text-btn" @click.stop="deleteHandle(scope.row.id)"
                     >{{$t("text.delBtn")}}</div>
                </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <el-pagination
          v-if="dataList.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="refreshChange"></add-or-update>
    <promotion-video-upload
      v-if="uploadVisible"
      ref="promotionVideoUpload"
      @refreshDataList="getDataList(page)">
    </promotion-video-upload>
  </div>
</template>

<script>
import AddOrUpdate from './promotionVideo-add-or-update'
import PromotionVideoUpload from './promotion-video-upload'
import InputNumberRange from '@/components/input-number-range'
import moment from "moment";
export default {
  data () {
    return {
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      searchForm: {}, // 搜索
      dataListLoading: false,
      addOrUpdateVisible: false,
      shopList: [],
      videoPlatformList: [
        {value: '抖音', label: '抖音'},
        {value: '小红书', label: '小红书'},
        {value: '视频号', label: '视频号'},
        {value: '快手', label: '快手'},
        {value: 'B站', label: 'B站'},
      ],
      publishTimeDateRange:[],
      uploadVisible: false,
      fansNumRange: [],
      likeNumRange: [],
      commNumRange: [],
    }
  },
  components: {
    AddOrUpdate,
    PromotionVideoUpload,
    InputNumberRange
  },
  created () {
    this.getDataList(this.page);
  },
  mounted () {
    this.getShopList()
  },
  methods: {
    openUploadDialog(){
      this.uploadVisible = true
      this.$nextTick(() => {
        this.$refs.promotionVideoUpload.init()
      })
    },
    clear(){
      this.searchForm = {}
      this.publishTimeDateRange = []
    },
    getShopList() {
      this.$http({
        url: this.$http.adornUrl('/shop/shopAuditing/list'),
        method: 'get',
      }).then(({ data }) => {
        if (data) {
          this.shopList = data
        }
      })
    },
    getDataList (page) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/promotion/promotionVideo/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
            current: page == null ? this.page.currentPage : page.currentPage,
            size: page == null ? this.page.pageSize : page.pageSize,
            startLikeNum: this.likeNumRange === null ? null : this.likeNumRange[0] ? this.likeNumRange[0]:0,
            endLikeNum: this.likeNumRange === null ? null : this.likeNumRange[1] ? this.likeNumRange[1]:0,
            startCommNum: this.commNumRange === null ? null : this.commNumRange[0] ? this.commNumRange[0]:0,
            endCommNum: this.commNumRange === null ? null : this.commNumRange[1] ? this.commNumRange[1]:0,
            startFansNum: this.fansNumRange === null ? null : this.fansNumRange[0] ? this.fansNumRange[0]:0,
            endFansNum: this.fansNumRange === null ? null : this.fansNumRange[1] ? this.fansNumRange[1]:0,
            startPublishTime: this.publishTimeDateRange === null ? null : this.publishTimeDateRange[0] ? this.publishTimeDateRange[0]:null,
            endPublishTime: this.publishTimeDateRange === null ? null : this.publishTimeDateRange[1] ? this.publishTimeDateRange[1]:null,
          },
            this.searchForm
          )
        )
      }).then(({data}) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    querySearch (queryString, cb) {
      var restaurants = this.videoPlatformList
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    setDateRange(val) {
      var startDay = null
      var endDay = null
      if (val === 1) {
        startDay = 0
        endDay = 0
      } else if (val === 2) {
        startDay = -1
        endDay = -1
      } else if (val === 3) {
        startDay = -3
        endDay = -1
      } else if (val === 4) {
        startDay = -5
        endDay = -1
      } else {
        return
      }
      // 开始时间
      let startTime = moment().add(startDay, 'days').startOf('days').format('LL')
      // 结束时间
      let endTime = moment().add(endDay, 'days').endOf('days').format('LL')
      this.publishTimeDateRange = [startTime, endTime]
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    deleteHandle (id) {
      this.$confirm(this.$i18n.t('admin.isDeleOper') + '?', this.$i18n.t('text.tips'), {
        confirmButtonText: this.$i18n.t('crud.filter.submitBtn'),
        cancelButtonText: this.$i18n.t('crud.filter.cancelBtn'),
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/promotion/promotionVideo/' + id),
          method: 'delete',
          data: this.$http.adornData({})
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
          })
          this.refreshChange()
        })
      }).catch(() => { })
    },
    // 刷新回调
    refreshChange () {
      this.page.currentPage = 1
      this.getDataList(this.page)
    },
    searchChange (params) {
      this.page.currentPage = 1
      this.getDataList(null)
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getDataList()
    }
  }
}
</script>
<style lang="scss">
.mod-print-promotionVideo {
}
</style>
