<template>
  <div>
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>文化数据入场管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="body">
      <div class="query">
        <a-row  justify="space-between" >
          <a-col :lg="8" :xl="8" :xxl="6" class="query_item">
            <span>ISLI标识码：</span>
            <a-input v-model="query.islicode"/>
          </a-col>
          <a-col :lg="8" :xl="8" :xxl="6" class="query_item">
            <span>标的名称:</span>
            <a-input v-model="query.goods_name"/>
          </a-col>
          <a-col :lg="8" :xl="8" :xxl="6" class="query_item">
            <span>委托方/授权方：</span>
            <a-input v-model="query.entrust_name" placeholder="身份ISLI认证码/名称"/>
          </a-col>
          <a-col :lg="8" :xl="8" :xxl="6" class="query_item" >
            <span>交易品种：</span>
            <a-select default-value=""   v-model="query.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 :lg="8" :xl="8" :xxl="6" class="query_item" >
            <span>发布状态：</span>
            <a-select default-value=""   v-model="query.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 :lg="8" :xl="8" :xxl="6" class="query_item">
            <span>交易方式：</span>
            <a-select default-value=""   v-model="query.goods_entrust">
              <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 :lg="12" :xl="12" :xxl="6" class="query_item query_item2">
            <span>创建时间：</span>
            <a-range-picker  v-model="query.createtime"  valueFormat="YYYY-MM-DD"/>
          </a-col>
          <a-col :lg="12" :xl="12" :xxl="6" class="query_item query_item1">
            <a-space :size="21">
              <a-button type="primary" class="query_button" @click="getAllDate(1)">查 询</a-button>
              <a-button class="query_button" @click="resetQurey">重 置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <div class="table">
        <div class="table_title">
          <span>查询结果</span>
          <a-button type="primary" class="query_button" @click="OffShelf">下 架</a-button>
        </div>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio' }">
          <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">
            <a-space :size="24" >
              <span class="table_operation" @click="SelectDate(item.goods_islicode)">标的信息</span>
              <span class="table_operation" @click="selectRecords(item.id)">操作记录</span>
              <span class="table_operation" @click="associatedOrder(item.goods_islicode)">关联订单</span>
            </a-space>
          </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>
    </div>
    <dataSelect :visible.sync="visible" v-if="visible" :goods_islicode="goods_islicode" :type="0"></dataSelect>
    <operationRecords :visible.sync="visible1" :logDate="logDate" ></operationRecords>
    <!-- 下架原因 -->
    <a-modal  v-model="visible2" title="下架原因" width="500px" :bodyStyle="modeStyle">
      <div>
        <a-textarea v-model="reason" placeholder="请输入下架原因" :autoSize="{ minRows: 5, maxRows: 10 }"/>
      </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="visible2=false">取 消</a-button>
          <a-button type="primary" @click="getGoods">下 架</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
import dataSelect from '../../dateSelect/index.vue'
import operationRecords from '../../operationRecords/index.vue'
import Operation from '../../Operation.vue'
import {getAllDate,getLog,offGoods} from '../../../api/index'
export default {
  data() {
    return{
      query:{
        islicode:'',
        goods_name:'',
        entrust_name:'',
        goods_entrust:'',
        goods_type:'',
        data_type:'',
        createtime:[],
      },
      selectedRowKeys:[],
      logDate:[],
      visible:false,
      visible1:false,
      visible2:false,
      reason:'',
      modeStyle:{
        'min-height':'200px'
      },
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      total:500,
      // 当前页数
      startTotal:1,
      endTotal:10,
      limit:10,
      page:1,
      data:[],
      columns:[
        // {
        //   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: '操作',
          scopedSlots: { customRender: 'operation' },
          width:'250px',
          align:'center'
        },
      ]
    }
  },
  components:{
    Operation,
    dataSelect,
    operationRecords
  },
  created(){
    this.getAllDate()
  },
  methods:{
    OffShelf(){
      // console.info(this.selectedRowKeys)
      if(this.selectedRowKeys.length==0){
        this.$message.error('请选择要下架的标~');
      }else{
        this.visible2=true
      }
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    getGoods(){

      let data={goods_isli:this.selectedRowKeys[0],reason:this.reason}
      offGoods(data).then(res=>{
        if(res.code==200){
          this.getAllDate()
          this.visible2=false
          this.$message.success('下架成功');
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    //关联订单
    associatedOrder(val){
      this.$router.push({path:'/allOrder',query:{goods_islicode:val}})
    },
    // 重置query
    resetQurey(){
      Object.assign(this.query, this.$options.data().query)
      this.getAllDate()
    },
    getAllDate(type){
      let data=this.query
      data.limit=this.limit
      if(type==1){
        data.page=1
        this.page=1
      }else{
        data.page=this.page
      }
      getAllDate(data).then(res=>{
        // console.info(res)
        if(res.code==200){
          this.data=res.data.data
          this.startTotal=res.data.start
          this.endTotal=res.data.end
          this.total=res.data.total
          this.selectedRowKeys=[]
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    selectRecords(id){
      let data={log_id:id,type:'goods'}
      getLog(data).then(res=>{
        if(res.code==200){
          this.logDate=res.data
          this.visible1=true
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    SelectDate(val){
      this.goods_islicode=val
      this.visible=true
    },
    // 切换一页显示多少条
    onShowSizeChange(current, pageSize){
      this.limit = pageSize;
      this.getAllDate()
    },
    // 切换页数
    changePage(page, pageSize){
      this.page=page
      this.getAllDate()
    },
  }
}
</script>
<style scoped>

</style>
