<template>
  <div class="component_body">
    <a-modal  v-model="newVisible" title="标的信息" :afterClose="onClose" width="1350px" :bodyStyle="modeStyle">
      <a-tabs default-active-key="1" tab-position="left" :tabBarStyle="tabsStyle">
        <a-tab-pane :key="index" v-for="(item,index) in orderDate">
          <span slot="tab">
            <span class="tab_span">*</span>
            标的信息
            <span v-if="index>0">{{index+1}}</span>
          </span>
          <!-- <p>标的信息</p> -->
          <div class="tab_body">
            <!-- <template v-if="userinfo"> -->
              <div class="tab_body_title">授权方信息</div>
              <div class="tab_body_content" >
                <p class="tab_body_p">机构名称：{{item.userinfo.name}}</p>
                <p class="tab_body_p">认证类型：{{item.userinfo.userType}}</p>
                <p class="tab_body_p">认证状态：{{item.userinfo.state==0?'认证中':item.userinfo.state==1?'认证成功':'认证失败'}}</p>
                <p class="tab_body_p">统一社会信用代码：{{item.userinfo.uscc}}</p>
                <p class="tab_body_p">交易主体唯一标志码：{{item.userinfo.islicode}}</p>
              </div>

              <div class="tab_body_title">
              <!-- <p class="tab_body_title_bg"></p> -->
              <div>{{item.goods.goods_type==1?'文化资源数据':'文化数字内容'}}-基本信息</div>
            </div>
            <!-- <template v-if="entrust_goods.goods.length!=0"> -->
              <div class="tab_content " >
                <!-- <div class="tab_content_infoImg">
                  <img :src="item.goods.goods_image" class="tab_content_img" v-if="item.goods.goods_image!=''">
                  <img src="data:image/png;base64,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" class="tab_content_img" v-else>
                </div> -->
                <div class="tab_content_right">
                  <!-- <div class="tab_content tab_content1"> -->
                    <p class="tab_content_title">标的名称：{{item.goods.goods_name}}</p>
                  <!-- </div> -->
                  <!-- <div class="content_right_title">标的名称：{{item.goods.goods_name}}</div> -->
                  <div class="content_info">
                    <div class="content_info_left content_info_left1">
                      <p>标的ISLI标志码：{{item.goods.goods_islicode}}</p>
                      <p>标的卖方ISLI关联编码：{{item.goods.islicode}}</p>
                      <p>交易ISLI编码：{{item.goods.contract_code}}</p>
                      <p>交易品种：{{item.goods.goods_type==1?'文化资源数据':'文化数字内容'}}</p>
                      <p>交易方式：{{item.goods.goods_entrust==1?'转让':'授权'}}</p>
                      <p>权利类型：{{item.goods.goods_ownership_str}}</p>
                      <p>委托类型：{{item.goods.contractual_period==1?'永久性委托':item.goods.contractual_period==2?'一次性委托':'阶段性委托'}}</p>
                      <p>收费类型：{{item.goods.charges_type==1?'免费':'付费'}}</p>
                      <!-- <p>交易保证金：{{item.earnest_money}}</p> -->
                      <p>自报价：{{item.goods.price}}</p>
                      <p>委托开始时间：{{item.goods.contractual_start_time}}</p>
                      <p>委托终止时间：{{item.goods.contractualtime_end_time}}</p>
                      <p>购买年限：{{item.goods.charges_type==1 || item.goods.goods_entrust==1?'永久':item.goods.transaction_count}}</p>
                      <p>标的价款：¥ {{item.goods.goods_price}}</p>
                      <p>交易佣金：¥ {{item.goods.service_charge}}</p>
                      <p>小计：¥ {{item.goods.money}}</p>
                      <!-- <p>交易流水号：{{order_info.close_serial_number}}</p> -->
                    </div>
                  </div>
                </div>
              </div>
            <!-- </template> -->
            <!-- <p v-else class="none_p">暂无数据</p> -->
            <div class="tab_body_title">
              <!-- <p class="tab_body_title_bg"></p> -->
              <div>{{item.goods.goods_type==1?'文化资源数据':'文化数字内容'}}-关联资源</div>
            </div>
            <template v-if="item.gather_arr.length!=0">
              <div class="tab_content">
                <p class="tab_content_title">{{item.goods.goods_type==1?'文化资源':'文化数字内容'}}数据集</p>
              </div>
              <div class="content_table">
                <a-table :columns="columns1" :data-source="item.gather_arr" bordered :pagination="false">
                  <template slot="operation" slot-scope="item1" >
                    <span @click="selectDetails(item1.identifier,item.goods.batchcode,item.goods.goods_islicode)" class="details_span">详情</span>
                  </template>
                </a-table>
              </div>
            </template>
            <template v-if="item.oneSource.length!=0">
              <div class="tab_content">
                <p class="tab_content_title">{{item.goods.goods_type==1?'文化资源数据':'文化数字内容'}}</p>
              </div>
              <div class="content_table">
                <a-table :columns="columns2" :data-source="item.oneSource" bordered :pagination="false">
                  <template  slot-scope="download_status" slot="download_status">
                    <span>{{download_status==1?'无资源下载':download_status==2?'获取下载地址失败':download_status==3?'获取解密资源地址失败'
                      :download_status==4?'获取解密资源地址成功':download_status==5?'没有解密资源地址':
                      download_status==6?'获取资源下载状态失败':download_status==7?'资源下载成功':download_status==8?'资源下载失败':'获取资源下载状态异常'}}</span>
                  </template>
                </a-table>
              </div>
            </template>

            <!-- </template> -->
            <!-- <span v-else>暂无数据</span> -->
          </div>
        </a-tab-pane>
      </a-tabs>
      <template slot="footer">
        <div>
          <a-button type="white" @click="onClose">返 回</a-button>
        </div>
      </template>
    </a-modal>

    <a-modal  v-model="newVisible1" title="标的信息" width="1172px" :bodyStyle="modeStyle">
        <div class="tab_body">
          <div class="tab_body_title">
            <!-- <p class="tab_body_title_bg"></p> -->
            <div>{{sourceDate.info.collectionType}}-基本信息</div>
          </div>
          <div class="tab_content ">
            <!-- <div class="tab_content_infoImg"> -->
              <!-- <img src="../../assets/img/test.png" class="tab_content_img"> -->
            <!-- </div> -->
            <div class="tab_content_right">
              <div class="content_right_title">数据集名称：{{sourceDate.info.source_name}}</div>
              <div class="content_info">
                <div class="content_info_left">
                  <p>其他标识符：{{sourceDate.info.otherIdentifiers}}</p>
                  <p>ISLI标志码：{{sourceDate.info.identifier}}</p>
                  <p>类型：{{sourceDate.info.collectionType}}</p>
                  <p>服务类型：{{sourceDate.info.serviceType}}</p>
                  <p>分类：{{sourceDate.info.classification}}</p>
                  <p>贡献者：{{sourceDate.info.contributors}}</p>
                  <p>著作权人：{{sourceDate.info.copyrightOwner}}</p>
                  <p>载体：{{sourceDate.info.carrier==1?'纸张':sourceDate.info.carrier==2?'感光材料':sourceDate.info.carrier==3?'磁带':sourceDate.info.carrier==4?'光盘':
                    sourceDate.info.carrier==5?'移动终端':sourceDate.info.carrier==6?'计算机':sourceDate.info.carrier==7?'数字化数据':sourceDate.info.carrier==8?'天然载体':
                    sourceDate.info.carrier==9?'器具载体':'其他载体'
                    }}</p>
                  <p>登记者：{{sourceDate.info.registrant}}</p>
                  <p>登记日期：{{sourceDate.info.registerDate}}</p>
                </div>
                <div>
                  <p>所属/收藏机构：{{sourceDate.info.repositoryName}}</p>
                  <p>尺寸：{{sourceDate.info.dimensions}}</p>
                  <p>组件数量：{{sourceDate.info.quantity}}</p>
                  <p>标签：{{sourceDate.info.label}}</p>
                  <p>描述：{{sourceDate.info.description}}</p>
                  <p>哈希值：{{sourceDate.info.md5Val}}</p>
                  <p>版本：{{sourceDate.info.edition==1?'真迹':sourceDate.info.edition==2?'抄本':sourceDate.info.edition==3?'拓本':sourceDate.info.edition==4?'临摹':
                    sourceDate.info.edition==5?'复制':sourceDate.info.edition==6?'复原':sourceDate.info.edition==7?'重建':sourceDate.info.edition==8?'原始录音':sourceDate.info.edition==9?'原始视频':
                    sourceDate.info.edition==10?'刻录':'原创'}}</p>
                  <p>现况：{{sourceDate.info.collectionCondition==1?'完好':sourceDate.info.collectionCondition==2?'残破':sourceDate.info.collectionCondition==3?'残缺':
                    sourceDate.info.collectionCondition==4?'霉变':
                    sourceDate.info.collectionCondition==5?'皱褶':sourceDate.info.collectionCondition==6?'污渍':sourceDate.info.collectionCondition==7?'脱浆':sourceDate.info.collectionCondition==8?'脱线':
                    sourceDate.info.collectionCondition==9?'生锈':sourceDate.info.collectionCondition==10?'褪色':'焦脆'}}</p>
                  <p>封面：{{sourceDate.info.cover}}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="tab_body_title">
            <!-- <p class="tab_body_title_bg"></p> -->
            <div>{{sourceDate.collectionType}}-关联资源</div>
          </div>
          <div v-for="(item,index) in sourceDate.gather_arr" :key="index">
            <div class="tab_content">
              <p class="tab_content_title">{{item.serviceType}}</p>
            </div>
            <div class="content_table">
              <a-table :columns="columns" :data-source="item.source" bordered :pagination="false">
                <template  slot-scope="download_status" slot="download_status">
                  <span>{{download_status==1?'无资源下载':download_status==2?'获取下载地址失败':download_status==3?'获取解密资源地址失败'
                    :download_status==4?'获取解密资源地址成功':download_status==5?'没有解密资源地址':
                    download_status==6?'获取资源下载状态失败':download_status==7?'资源下载成功':download_status==8?'资源下载失败':'获取资源下载状态异常'}}</span>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="onClose(1)">返 回</a-button>
        </div>
      </template>
    </a-modal>

  </div>
</template>

<script>
  import {goodsDetail,sourceDetail,orderDetail} from '../../api/index'
  export default {
    name:'dataSelect',
    props:{
      visible:{
        type:Boolean,
        require: true
      },
      goods_islicode:{
        type:String,
      },
      batchcode:{
        type:String,
      },
      type:{
        type:Number
      }
    },
    data(){
      return{
        newVisible:true,
        newVisible1:false,
        modeStyle:{
          'height':'530px'
        },
        tabsStyle:{
          'height':'500px'
        },
        entrust_goods:{
          goods:[{goods_type:''}]
        },
        orderDate:[],
        userinfo:[],
        sourceDate:{
          info:{}
        },
        data:[],
        columns:[
          {
            title: '资源名称',
            dataIndex: 'target_name',
            width:'144px',

          },
          {
            title: 'ISLI标志码',
            dataIndex: 'identifier',
            // width:'242px',

          },
          {
            title: 'ISLI关联编码',
            dataIndex: 'linkCode',
            // width:'259px',

          },
          {
            title: '大小',
            dataIndex: 'filesize',
            width:'70px',

          },
          {
            title: '格式',
            dataIndex: 'metadataFileFormat',
            width:'70px',

          },
          {
            title: '时间',
            dataIndex: 'registerDate',
            width:'148px',

          },
          {
            title: '下载状态',
            dataIndex: 'download_status',
            scopedSlots: { customRender: 'download_status' },
            width:'90px',
          },
        ],
        columns1:[
          {
            title: '数据集名称',
            dataIndex: 'name',
            width:'166px',

          },
          // {
          //   title: '分类',
          //   dataIndex: 'class',
          //   width:'82px',
          // },
          {
            title: '生成时间',
            dataIndex: 'registerDate',
            width:'177px',

          },
          {
            title: 'ISLI标志码',
            dataIndex: 'identifier',
            width:'310px',

          },
          {
            title: '关联目标数量',
            dataIndex: 'count',
            width:'120px',

          },
          {
            title: '查看',
            scopedSlots: { customRender: 'operation' },
            align:'center',
            width:'138px',
          },

        ],
        columns2:[
          {
            title: '资源名称',
            dataIndex: 'name',
            width:'166px',

          },
          // {
          //   title: '分类',
          //   dataIndex: 'class',
          //   width:'82px',
          // },
          {
            title: '生成时间',
            dataIndex: 'registerDate',
            width:'177px',

          },
          {
            title: 'ISLI标志码',
            dataIndex: 'identifier',
            width:'310px',

          },
          {
            title: '大小',
            dataIndex: 'filesize',
            // width:'110px',

          },
          {
            title: '格式',
            dataIndex: 'metadataFileFormat',
            // width:'110px',

          },
          {
            title: '下载状态',
            dataIndex: 'download_status',
            scopedSlots: { customRender: 'download_status' },
            width:'90px',
          },
        ]
      }
    },
    created(){
      if(this.type==0){
        this.goodsDetail()
      }else{
        this.orderDetail()
      }
    },
    methods:{
      //订单数据查看
      orderDetail(){
        let data={batchcode:this.batchcode}
        orderDetail(data).then(res=>{
          console.info(res)
          if(res.code==200){
            if(res.data.length!=0){
              this.orderDate=res.data
              let state=res.data[0].goods.status
              if(state==1 || state==5){
                this.columns2.pop()
                this.columns.pop()
              }
              // this.userinfo=res.data.userinfo
              // console.info(this.userinfo)
              // this=res.data
              // this.columns1[0].title=this.goods[0].goods_type==1?'文化资源数据集名称': '文化数字内容集名称'
            }
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      selectDetails(val,batchcode,islicode){
        let data={isli:val,batchcode:batchcode,islicode:islicode}
        sourceDetail(data).then(res=>{
          console.info(res)
          if(res.code==200){
            this.sourceDate=res.data
            this.newVisible1=true
            // let state=res.data[0].goods.status
            // if(state==1 || state==5){
            //     this.columns.pop()
            // }
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      // goodsDetail(){
      //   let data={islicode:this.goods_islicode}
      //   goodsDetail(data).then(res=>{
      //     console.info(res)
      //     if(res.code==200){
      //       // this.userinfo.push(res.data.userinfo)
      //       this.userinfo=res.data.userinfo
      //       console.info(this.userinfo)
      //       let goods=[res.data.goods]
      //       this=res.data
      //       this.goods=goods
      //       this.columns1[0].title=this.goods[0].goods_type==1?'文化资源数据集名称': '文化数字内容集名称'
      //     }else{
      //       this.$message.error(res.msg);
      //     }
      //   })
      // },
      onClose(type) {
        if(type==1){
          this.newVisible1=false
        }else{
          this.newVisible=false
          this.$emit('update:visible', false)
        }
      }
    },
  }


</script>

<style scoped>
  .tab_span{
    color: red;
  }
  /deep/ .ant-modal-header{
    border-bottom: none;
  }
  /deep/ .ant-modal-footer{
    border-top: none;
    padding: 20px 16px;
  }
  .tab_body{
    width: 100%;
    height: 476px;
    overflow-y: auto;
    border: 1px solid #9A9A9A;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-color: #EEEEEE;
    border-bottom-color: #EEEEEE;
    padding:20px 15px;
    box-sizing: border-box;
  }
  .tab_body_p{
    margin-bottom: 5px;
  }
  .tab_body_title{
    font-size: 19px;
    position: relative;
    margin-bottom: 28px;
  }
  .tab_body_title div{
    /* display: inline-block; */
    position: relative;
    z-index: 100;
  }
  .tab_body_title_bg{
    width: 198px;
    background: #AAAAAA;
    margin-bottom: 0;
    height: 10px;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    z-index: 99;
  }
  .tab_content{
    padding-left: 40px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
  }
  .tab_content_infoImg{
    width: 254px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(215, 215, 215, 1);
    box-shadow: 2px 2px 5px rgb(0 0 0 / 35%);
    margin-right: 15px;
  }
  .tab_content_img{
    width: 242px;
    height: 194px;
  }
  .content_right_title{
    font-size: 16px;
    margin-bottom: 30px;
  }
  .content_info{
    display: flex;
    font-size: 14px;
  }
  .content_info>div{
    width: 50%;
  }
  .content_info p{
    margin-bottom: 0px;
  }
  .content_info_left{
    margin-right: 36px;
  }
  .content_info_left1{
    width: 100% !important;
  }
  .tab_content_title{
    position: relative;
    padding-left: 20px;

  }
  .tab_content_title::before{
    content: '';
    width: 7px;
    height: 25px;
    background-color: #374AA5;
    border: 1px solid #9AA4D1;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12.5px;

  }
  .content_table{
    padding-left: 90px;
    margin-bottom: 30px;
  }
  /deep/ .ant-table-tbody > tr > td {
    padding: 5px 16px;
  }
  /deep/ .ant-table-thead > tr > th {
    padding: 5px 16px;
  }
  .details_span{
    cursor: pointer;
    color: #1890FF;
    text-decoration: underline;
  }
  .tab_body_content{
    margin-bottom: 20px;
  }
  .tab_body_content:last-child{
    margin-bottom: 0;
  }
  .none_p{
    text-align: center;
  }
</style>
