<template>
  <div class="news dataDetail">
    <div class="banner">
      <img src="../../static/images/bannerny.jpg" alt="">
    </div>
    <div class="con">
      <div class="wp">
        <div class="mbx">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ name: 'dataSearch' }"
            >数据检索</el-breadcrumb-item>
            <el-breadcrumb-item>数据样品信息详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <div class="detail_a">
            <div class="">
              <div class="detail_b">
                <h3>{{ obj.name }}</h3>
                <p class="tit_a">
                  数据样品信息简述：数据样品SY510-TXS-YS-01为2021年第23个航次，第1次载人潜器下潜中采集到的若干珊瑚礁石样品，样品数据包含原始数据、后处理数据、成果数据。
                  数据样品SY510-TXS-YS-01为2021年第23个航次，第1次载人潜器下潜中采集到的若干珊瑚礁石样品，样品数据包含原始数据、后处理数据、成果数据。

                </p>
                <h4>
                  数据样品元数据信息：
                </h4>
                <div>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <label>航次：</label><span>TS-14 </span>
                    </el-col>
                    <el-col :span="5">
                      <label>平台：</label><span>着陆器</span>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <label>设备：</label><span>机械手</span>
                    </el-col>
                    <el-col :span="5">
                      <label>机械手：</label><span>岩石</span>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <label>航次首席：</label><span>MERY</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="zhuti">
                <div class="left">
                  <div class="left1" :class="show ? 'active' : ''">
                    <img v-if="!show" src="../../static/images/arrow.png" alt="">
                    <img v-else src="../../static/images/arrow_a.png" alt="">
                    <p>数据文件</p>
                  </div>
                  <div class="left1" :class="show1 ? 'active' : ''">
                    <img v-if="!show1" src="../../static/images/arrow.png" alt="">
                    <img v-else src="../../static/images/arrow_a.png" alt="">
                    <p>文档报告</p>
                  </div>
                  <div class="left1" :class="show2 ? 'active' : ''">
                    <img v-if="!show2" src="../../static/images/arrow.png" alt="">
                    <img v-else src="../../static/images/arrow_a.png" alt="">
                    <p>数据来源信息</p>
                  </div>
                  <div class="left1" :class="show2 ? 'active' : ''">
                    <img v-if="!show2" src="../../static/images/arrow.png" alt="">
                    <img v-else src="../../static/images/arrow_a.png" alt="">
                    <p>数据引用信息</p>
                  </div>
                  <div class="left1" :class="show2 ? 'active' : ''">
                    <img v-if="!show2" src="../../static/images/arrow.png" alt="">
                    <img v-else src="../../static/images/arrow_a.png" alt="">
                    <p>XML元数据文件</p>
                  </div>
                </div>
                <div class="list">
                  <el-row type="flex" justify="space-between">
                    <el-col :span="20">
                      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>

                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" @click="download">下载所选文件</el-button>

                    </el-col>
                  </el-row>
                  <div style="margin: 15px 0;" />
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">

                    <el-checkbox v-for="item in cities" :key="item.name" :label="item.name">
                      <div>
                        <span>{{ item.name }}</span>
                        <div class="data_s">
                          <label for="">Size:</label><span>{{ item.size }}</span>
                          <label for="">Format:</label><span>{{ item.format }}</span>
                          
                          <a href="http://120.48.105.88:8081/dataDetails/296c1ff351224b3d8a4b856592c0fb67" target="_blank">详情</a>
                        </div>
                      </div>

                    </el-checkbox>

                  </el-checkbox-group>
                </div>
              </div>

            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- <div>

  </div> -->
</template>

<script>
export default {
  name: 'DataDetail',
  components: {

  },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: [
        {
          name: 'SY510-TXS-YS-01_clip1.grd',
          size: '12',
          format: 'NetCDF'
        },
        {
          name: 'SY510-TXS-YS-01_clip2.grd',
          size: '12',
          format: 'NetCDF'
        },
        {
          name: 'SY510-TXS-YS-01_clip3.grd',
          size: '12',
          format: 'NetCDF'
        },
        {
          name: 'SY510-TXS-YS-01_clip4.grd',
          size: '12',
          format: 'NetCDF'
        }
      ],
      isIndeterminate: true,
      obj: {
        name: '数据样品SY510-TXS-YS-01'
      },
      show: false,
      show1: true,
      show2: false

    }
  },
  methods: {
    download() {
      //
    },
    handleCheckAllChange(val) {
      debugger
      const data = this.cities.map(item => item.name)
      this.checkedCities = val ? data : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    }
  }

}
</script>
<style>
.dataDetail .el-checkbox{
    display: block;
}
.dataDetail .el-checkbox-group .el-checkbox__input{
    margin-top:-57px;
}
.dataDetail .el-checkbox-group>label{
    margin:10px 0px 20px 0;
}
</style>

<style scoped lang="scss">
.data_s{
    padding:10px 0 10px 0;
    span{
        padding:0 100px 0 10px;
    }
}
.detail_a{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}
.detail_b{
    // width: 100%;
    background: #fff;
    padding:30px;
    border-radius: 10px;
    p{
        margin:20px 0;
    }
    h4{
        margin:20px 0;

    }

}
.news {
  width: 100%;
  height: 100%;
  .banner {
    width: 100%;
    height: 300px;
    img{
        width: 100%;
        height: 100%;
    }
  }
  .con{
    width: 100%;
    height: auto;
    padding-bottom: 80px;
    background: url(../../static/images/news/bg.png) center no-repeat;
    background-size: 100% 100%;
    .wp{
       max-width: 1600px;
       margin:-150px auto 0 auto;
       width:96%;
       height: auto;
       .mbx{
        width: 100%;
        height: auto;
        margin-bottom: 55px;
       }
       .zhuti{
        margin-top:20px;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        // background: #ebf1f7;
        .left{
            width: 290px;
            height: 420px;
            box-sizing: border-box;
            padding: 25px;
            background: #fff;
            border-radius: 10px;
            .left1{
                width: 100%;
                height: 60px;
                background: #f0f4fa;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 0 20px;
                margin-bottom: 15px;
                border-radius: 10px;
                cursor: pointer;
                &.active{
                    background: #13a1f0;
                    p{
                        color: #fff;
                    }
                }
                &:hover{
                    background: #13a1f0;
                    p{
                        color: #fff;
                    }
                }

                &:last-child{
                    margin-bottom: 0;
                }
                img{
                    width: 13px;
                    height: 20px;
                    margin-right: 20px;
                }
                p{
                    font-size: 18px;
                    color: #212121;
                }
            }
        }
        .list{
            width: 80%;
            height: auto;
            background: #fff;
            box-sizing: border-box;
            padding: 25px;
            border-radius: 10px;
            a{
              color: #277ace;
            }
            .fenye{
              margin-top: 40px;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
          }
        }
       }
    }
  }
}
</style>
<style>
    .news .el-breadcrumb__item{
        font-size: 18px;
        color: #fff;
        float: none;
    }
    .news .el-breadcrumb__inner{
        font-size: 18px;
        color: #fff !important;
    }
</style>
