<template>
  <el-dialog
    title="推广链接"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :append-to-body="true"
    :fullscreen="true"
    width="90%"
  >
    <div class="mod-order-orderPromotion">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-form :inline="true" class="search-form" ref="searchForm" :model="searchForm" label-width="auto" size="small">
          <div class="input-row">
            <el-form-item prop="orderNumber" :label="$t('order.number')+':'">
              <el-input v-model="searchForm.orderNumber" type="text" clearable :placeholder="$t('order.number')"></el-input>
            </el-form-item>
            <el-form-item label="粉丝数">
              <template>
                <el-select
                  v-model="searchForm.fansSort"
                  clearable
                  size="small">
                  <el-option key="0" label="正序" value="ASC"></el-option>
                  <el-option key="1" label="倒序" value="DESC"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="点赞数">
              <template>
                <el-select
                  v-model="searchForm.likeSort"
                  clearable
                  size="small">
                  <el-option key="0" label="正序" value="ASC"></el-option>
                  <el-option key="1" label="倒序" value="DESC"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="收藏数">
              <template>
                <el-select
                  v-model="searchForm.collectionSort"
                  clearable
                  size="small">
                  <el-option key="0" label="正序" value="ASC"></el-option>
                  <el-option key="1" label="倒序" value="DESC"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="时间排序">
              <template>
                <el-select
                  v-model="searchForm.timeSort"
                  clearable
                  size="small">
                  <el-option key="0" label="正序" value="ASC"></el-option>
                  <el-option key="1" label="倒序" value="DESC"></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="发布时间">
              <el-date-picker
                size="small"
                :default-time="['00:00:00', '23:59:59']"
                v-model="dateRange"
                type="datetimerange"
                :range-separator="this.$i18n.t('time.tip')"
                value-format="yyyy-MM-dd HH:mm:ss"
                :start-placeholder="this.$i18n.t('time.start')"
                :end-placeholder="this.$i18n.t('time.end')"
              ></el-date-picker
              >
            </el-form-item>
            <el-form-item>
              <div class="default-btn primary-btn" @click="searchChange(true)">{{ $t('crud.searchBtn') }}</div>
              <div class="default-btn" @click="resetForm()">{{ $t('shop.resetMap') }}</div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 列表相关区域 -->
      <div class="main-container">
        <div class="operation-bar">
          <div class="default-btn primary-btn" @click="addOrUpdateHandle()">{{$t("crud.addTitle")}}</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">
            <!-- 订单编号 -->
            <el-table-column label="订单编号" prop="orderNumber" align="center" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.orderNumber}}</span>
              </template>
            </el-table-column>
            <!-- 产品 -->
            <el-table-column label="产品" prop="prodName" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.prodName}}</span>
              </template>
            </el-table-column>
            <!-- 博主名称 -->
            <el-table-column label="博主" prop="upName" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.upName}}</span>
              </template>
            </el-table-column>
            <!-- 链接名称 -->
            <el-table-column label="推广费用" prop="linkName" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.linkName}}</span>
              </template>
            </el-table-column>
            <!-- 点赞数量 -->
            <el-table-column label="粉丝数" prop="fansNums" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.fansNums >= 10000">{{ scope.row.fansNums / 10000.0}}w</span>
                <span v-else>{{ scope.row.fansNums}}</span>
              </template>
            </el-table-column>
            <!-- 点赞数量 -->
            <el-table-column label="点赞数" prop="likeNums" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.likeNums >= 10000">{{ scope.row.likeNums / 10000.0}}w</span>
                <span v-else>{{ scope.row.likeNums}}</span>
              </template>
            </el-table-column>
            <!-- 收藏数量 -->
            <el-table-column label="收藏数" prop="collectionNums" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.collectionNums >= 10000">{{ scope.row.collectionNums / 10000.0}}w</span>
                <span v-else>{{ scope.row.collectionNums}}</span>
              </template>
            </el-table-column>
            <!-- 收藏数量 -->
            <el-table-column label="推广平台" prop="platform" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.platform}}</span>
              </template>
            </el-table-column>
            <!-- 推广风格 -->
            <el-table-column label="推广风格" prop="type" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.type}}</span>
              </template>
            </el-table-column>
            <!-- 推广链接 -->
            <el-table-column label="推广链接" prop="promotionLink" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="openLink(scope.row.promotionLink)">{{ scope.row.promotionLink}}</el-button>
              </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 fixed="right" align="center" :label="$t('publics.operating')" style="width: 200px">
              <template slot-scope="scope">
                <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
                <el-button type="text" @click="deleteHandle(scope.row.id, false)">删除</el-button>
              </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="[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>
    </div>
  </el-dialog>

</template>

<script>
import AddOrUpdate from './orderPromotion-add-or-update'
export default {
  data () {
    return {
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 50 // 每页显示多少条
      },
      dateRange:[],
      visible: false,
      orderNumber: null,
      prodName: null,
      searchForm: {}, // 搜索
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init (params) {
      if(params){
        this.orderNumber = params.orderNumber;
        this.prodName = params.prodName;
      }
      this.visible = true
      this.indexs = 0
      // 修改
      this.$http({
        url: this.$http.adornUrl(`/order/orderPromotion/page`),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: this.page == null ? this.page.currentPage : this.page.currentPage,
              size: this.page == null ? this.page.pageSize : this.page.pageSize,
              orderNumber: this.orderNumber
            },
          )
        )
      }).then(({ data }) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    openLink(link){
      window.open(link, "_blank");
    },
    getDataList (page) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/order/orderPromotion/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,
            startTime: this.dateRange === null ? null : this.dateRange[0], // 开始时间
            endTime: this.dateRange === null ? null : this.dateRange[1], // 结束时间
          },
            this.searchForm
          )
        )
      }).then(({data}) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, this.orderNumber, this.prodName)
      })
    },
    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('/order/orderPromotion/' + id),
          method: 'delete',
          data: this.$http.adornData({})
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.refreshChange()
            }
          })
        })
      }).catch(() => { })
    },
    // 刷新回调
    refreshChange () {
      this.page.currentPage = 1
      this.getDataList(this.page)
    },
    searchChange (params) {
      this.getDataList(this.page)
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getDataList()
    }
  }
}
</script>
<style lang="scss">
.mod-order-orderPromotion {
}
</style>
