<template>
  <div>
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>数据展示布局管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="body">
      <div class="query">
        <div class="layout_item" v-for="(item,index) in layoutList" :key="index" @click="changeRank(index+1)">
          <img src="../../../assets/icons/svg/layout.svg" >
          <div :class="active==index?'active':''">{{item.text}}</div>
        </div>
      </div>
      <div class="table">
        <div class="table_title">
          <span>平台推荐展示</span>
          <div class="table_title_right" v-if="active==2">
            <a-button type="primary" class="query_button" @click="showAdd">添 加</a-button>
            <a-button  class="query_button table_title_right_del" @click="delRank">删 除</a-button>
          </div>

        </div>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false" :row-selection="active==2?{ selectedRowKeys: selectedRowKeys1,onChange: onSelectChange1 }:null">
          <template slot="goods_status" slot-scope="goods_status">
            <span>{{goods_status==1?'已发布':goods_status==2?'已终止':goods_status==3?'已转让':goods_status==4?'委托期满':'暂停中'}}</span>
          </template>
          <template slot="goods_type" slot-scope="goods_type">
            <span>{{goods_type==1?'文化资源数据':'文化数字内容'}}</span>
          </template>
          <template slot="operation" slot-scope="item" v-if="active==2" >
            <a-space :size="24">
              <span class="table_operation" @click="rankingSort(item.goods_islicode,1)">上移</span>
              <span class="table_operation" @click="rankingSort(item.goods_islicode,2)">下移</span>
            </a-space>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 添加排行榜 -->
    <a-modal  v-model="visible2" title="添加" width="1400px" :bodyStyle="modeStyle">
      <div >
        <a-row  justify="space-between" class="modal_select">
          <a-col :span="6" class="query_item">
            <span>委托标的：</span>
            <a-input v-model="query1.goods" placeholder="名称/标志码"/>
          </a-col>
          <!-- <a-col :span="5" class="query_item">
            <span>标的名称：</span>
            <a-input v-model="query1.goods_name"/>
          </a-col> -->
          <a-col :span="6" class="query_item">
            <span>授权方：</span>
            <a-input v-model="query1.entrust_name"/>
          </a-col>
          <a-col :span="6" class="query_item">
            <span>交易品种：</span>
            <a-select default-value=""   v-model="query1.goods_type">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">文化资源数据</a-select-option>
              <a-select-option value="2">文化数字内容</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" class="query_item">
            <span>发布状态：</span>
            <a-select default-value=""   v-model="query1.data_type">
              <a-select-option value="">全部文化数据</a-select-option>
              <a-select-option value="1">已发布文化数据</a-select-option>
              <a-select-option value="5">暂停中文化数据</a-select-option>
              <a-select-option value="2">已终止文化数据</a-select-option>
              <a-select-option value="3">已转让文化数据</a-select-option>
              <a-select-option value="4">委托期满文化数据</a-select-option>
            </a-select>
          </a-col>
          <!-- <a-col :span="5" class="query_item">
            <span>交易方式：</span>
            <a-select default-value=""   v-model="query1.transaction">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">协议</a-select-option>
              <a-select-option value="2">竞价</a-select-option>
            </a-select>
          </a-col> -->
          <a-col :span="6" class="query_item" >
            <span>是否展示：</span>
            <a-select default-value=""   v-model="query1.show">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="2">否</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" class="query_item" >
            <span>排序方式：</span>
            <a-select default-value="1"   v-model="query1.order_status">
              <a-select-option value="1">销售数量从高到低</a-select-option>
              <a-select-option value="2">销售单价从高到低</a-select-option>
              <a-select-option value="3">点击次数从高到低</a-select-option>
              <a-select-option value="4">浏览次数从高到低</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="12" class="query_item query_item1">
            <a-space :size="21">
              <a-button type="primary" class="query_button" @click="showAdd(1)">查 询</a-button>
              <a-button class="query_button" @click="resetQurey">重 置</a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-table :columns="columns1" :data-source="data1" bordered :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeys,onChange: onSelectChange }">
          <template slot="goods_status" slot-scope="goods_status">
            <span>{{goods_status==1?'已发布':goods_status==2?'已终止':goods_status==3?'已转让':goods_status==4?'委托期满':'暂停中'}}</span>
          </template>
          <template slot="goods_type" slot-scope="goods_type">
            <span>{{goods_type==1?'文化资源数据':'文化数字内容'}}</span>
          </template>
          <template slot="is_recommend" slot-scope="is_recommend">
            <span>{{is_recommend==0?'否':'是'}}</span>
          </template>
        </a-table>

        <a-pagination
        class="pagination"
        size="small"
        :total="total"
        v-model="page"
        :page-size="limit"
        :show-total="total => `第 ${startTotal} - ${endTotal} 条 / 总共 ${total} 条`"
        :page-size-options="pageSizeOptions"
        @showSizeChange="onShowSizeChange"
        @change="changePage"
        show-size-changer >
          <template slot="buildOptionText" slot-scope="props">
            <span >{{ props.value }}条/页</span>
          </template>
        </a-pagination>

      </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="visible2=false">返 回</a-button>
          <a-button type="primary" @click="addRank">添 加</a-button>
        </div>
      </template>
    </a-modal>

  </div>
</template>
<script>
import Operation from '../../Operation.vue'
import {rankingList,getAllDate,addRanking,delRanking,rankingSort} from '../../../api/index'
export default {
  data() {
    return{
      selectedRowKeys:[],
      selectedRowKeys1:[],
      visible2:false,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      //一页多少条
      pageSize:10,
      total:500,
      startTotal:1,
      endTotal:10,
      limit:10,
      // 当前页数
      page:1,
      modeStyle:{
        'min-height':'800px'
      },
      active:0,
      layoutList:[
        {text:'点击量排行榜'},
        {text:'销售量排行榜'},
        {text:'推荐排行榜'},
      ],
      query:{
        type:'1'
      },
      query1:{
        islicode:'',
        goods_name:'',
        entrust_name:'',
        goods_entrust:'',
        goods_type:'',
        data_type:'',
        createtime:[],
        transaction:'',
        show:'',
        order_status:'1',
        goods:''
      },
      data:[],
      data1:[],
      columns1:[
        // {
        //   title: '序号',
        //   dataIndex: 'id',
        //   width:'65px',
        //   align:'center'
        // },
        {
          title: '发布时间',
          dataIndex: 'createtime',
          // align:'center'
        },
        {
          title: 'ISLI标识码',
          dataIndex: 'goods_islicode',
          // align:'center'
        },
        {
          title: '标的名称',
          dataIndex: 'goods_name',
          // align:'center'
        },
        {
          title: '委托方/授权方',
          dataIndex: 'username',
          // align:'center'
        },
        {
          title: '标的类型',
          dataIndex: 'goods_type',
          scopedSlots:{customRender:'goods_type'},
          // align:'center'
        },
        {
          title: '发布状态',
          dataIndex: 'goods_status',
          scopedSlots:{customRender:'goods_status'},
          // align:'center'
        },
        {
          title: '是否展示',
          dataIndex: 'is_recommend',
          scopedSlots: { customRender: 'is_recommend' },
          // align:'center'
        },
      ],
      columns:[
        // {
        //   title: '序号',
        //   dataIndex: 'id',
        //   width:'65px',
        //   align:'center'
        // },
        {
          title: '创建时间',
          // width:'90px',
          dataIndex: 'createtime',
          // align:'center'
        },
        {
          title: 'ISLI标识码',
          dataIndex: 'goods_islicode',
          // align:'center'
        },
        {
          title: '标的名称',
          // width:'90px',
          dataIndex: 'goods_name',
          // align:'center'
        },
        {
          title: '委托方/授权方',
          // width:'125px',
          dataIndex: 'username',
          // align:'center'
        },
        {
          title: '标的类型',
          dataIndex: 'goods_type',
          // width:'90px',
          scopedSlots:{customRender:'goods_type'},
          // align:'center'
        },
        {
          title: '发布状态',
          dataIndex: 'goods_status',
          width:'90px',
          scopedSlots:{customRender:'goods_status'},
          align:'center'
        },

      ]
    }
  },
  components:{
    Operation
  },
  created(){
    this.getList()
  },
  methods:{
    rankingSort(goods_isli,type){
      let data={goods_isli:goods_isli,type:type}
      console.info(data)
      rankingSort(data).then(res=>{
        if(res.code==200){
          this.$message.success(type==1?'上移成功！':'下移成功！');
          this.getList()
          this.selectedRowKeys1=[]
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    delRank(){
      if(this.selectedRowKeys1.length==0) {
        this.$message.error('请选择要删除的标的！');
        return
      }
      let data={goods_isli:this.selectedRowKeys1}
      delRanking(data).then(res=>{
        if(res.code==200){
          this.$message.success('删除成功！');
          this.selectedRowKeys1=[]
          this.getList()
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    addRank(){
      let data={goods_isli:this.selectedRowKeys}
      addRanking(data).then(res=>{
        if(res.code==200){
          this.$message.success('添加成功！');
          this.selectedRowKeys=[]
          this.resetQurey()
          this.visible2=false
          this.getList()
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 重置query
    resetQurey(){
      Object.assign(this.query1, this.$options.data().query1)
      this.showAdd()
    },
    onSelectChange(keys){
      this.selectedRowKeys = keys;
    },
    onSelectChange1(keys){
      this.selectedRowKeys1 = keys;
    },
    showAdd(type){
      let data=this.query1
      data.limit=this.limit
      if(type==1){
        this.page=1
      }
      data.page=this.page
      getAllDate(data).then(res=>{
        if(res.code==200){
          this.data1=res.data.data
          this.startTotal=res.data.start
          this.endTotal=res.data.end
          this.total=res.data.total
          if(!this.visible2)this.visible2=true
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    changeRank(val){
      this.query.type=val
      this.active=val-1
      this.selectedRowKeys1=[]
      if(this.active==2){
        if(this.columns[this.columns.length - 1].title!='操作'){
          let data={
            title: '操作',
            scopedSlots: { customRender: 'operation' },
            width:'110px',
            // align:'center'
          }
          this.columns.push(data)
        }
      }else{
        for (let i=0; i<this.columns.length; i++){
          if (this.columns[i].title == '操作'){
            this.columns.splice(i, 1)
          }
        }
      }
      this.getList()
    },
    getList(){
      rankingList(this.query).then(res=>{
        if(res.code==200){
          this.data=res.data
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 切换一页显示多少条
    onShowSizeChange(current, pageSize){
      this.page=1
      this.limit = pageSize;
      this.showAdd()
    },
    // 切换页数
    changePage(page, pageSize){
      this.page=page
      this.showAdd()
    },
  }
}
</script>
<style scoped>
  .query{
    height: 154px;
    display: flex;
    align-items: center;
  }
  .layout_item{
    width: 120px;
    text-align: center;
    margin-right: 40px;
  }
  .layout_item img{
    width: 77px;
    height: 77px;
    margin-bottom: 10px;
  }
  .layout_item >div{
    width: 100%;
    color: #4E5969;
    text-align: center;
  }
  .active{
    color: white !important;
    background-color: #4E5969;
  }
  /deep/ .ant-modal-footer{
    padding: 20px 16px;
  }
  .modal_select{
    margin-bottom: 23px;
  }
</style>
