<template>
  <div class="shuju">
    <div class="shuju_con">
      <div v-show="showa == false" class="left">
        <div class="left1">
          <div class="xiala">
            <el-select v-model="value" placeholder="平台类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-input v-model="type_b" placeholder="" />
          <el-button
            class="sousuo"
            type="primary"
            icon="el-icon-search"
          />
          <el-button
            class="caidan"
            type="default"
            icon="el-icon-s-operation"
            @click="openList(0,'列表')"
          />
        </div>
        <div class="left2">
          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" @close="handleClose(tag)" @click="tosearch(tag.name)">
            {{ tag.name }}
          </el-tag>
        </div>
        <div class="left3">
          <p>搜索结果</p>
          <div class="left3_1">
            <el-radio-group v-model="radio">
              <el-radio :label="3">数据样品</el-radio>
              <el-radio :label="6">航次</el-radio>
            </el-radio-group>
          </div>
          <div class="left3_2">
            <span>排序:</span>
            <el-select v-model="value1" placeholder="航次名称">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="left4">
          <div v-for="(item,index) in detail" :key="index" class="left4_1" @click="turnDeatilPage(item)">
            <div class="left4_top">
              <p>{{ item.title }}</p>
              <span>{{ item.year }}</span>
            </div>
            <div class="left4_list">
              <div class="list1">
                <p>航次：</p>
                <span>{{ item.hangci }}</span>
              </div>
              <div class="list1">
                <p>平台：</p>
                <span>{{ item.pingtai }}</span>
              </div>

              <div class="list1">
                <p>设备：</p>
                <span>{{ item.shebei }}</span>
              </div>

              <div class="list1">
                <p>数据样品：</p>
                <span>{{ item.shuju }}</span>
              </div>

              <div class="list1">
                <p>航次首席：</p>
                <span>{{ item.shouxi }}</span>
              </div>

            </div>
          </div>
        </div>
        <div class="arrow">
          <img src="../../static/images/arrow_nav.png" alt="" @click="shousuo">
        </div>
      </div>
      <div v-show="showa" class="arrow_r" @click="toshow">
        <img src="../../static/images/arrow_nav1.png" alt="">
      </div>
      <div class="right">
        <GMRT :is-line="line" />
        <!-- <baidu-map
          :center="center"
          :zoom="zoom"
          map-type="BMAP_SATELLITE_MAP"
          style="width: 100%; height: 100%"
          @ready="handler"
        >
          <bm-marker
            v-for="(item, index) in list"
            :key="index"
            :position="item.dingwei"
            :dragging="true"
            :icon="item.pic"
            @click="totap(item)"
          >
            <bm-label
              :content="item.content"
              :offset="{ width: -35, height: 30 }"
            />
          </bm-marker>
        </baidu-map> -->
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showListDialog"
      :close-on-click-modal="false"
      :height="300"
      :append-to-body="true"
      width="800px"
    >
      <list-dialog v-if="showListDialog" :choose-data="chooseData" @handleClose="closeListForm" @handleConfirm="confirmListForm" />
    </el-dialog>
  </div>
</template>

<script>
import ListDialog from './listDialog.vue'
import GMRT from './GMRT.vue'
export default {
  name: 'Shuju',
  components: {
    ListDialog,
    GMRT
  },
  data() {
    return {
      line: true,
      showListDialog: false,
      chooseData: '',
      dialogTitle: '',
      type_b: '',
      showa: false,
      center: { lng: 118.962643, lat: 35.618913 },
      zoom: 3,
      list: [
        {
          dingwei: {
            lng: 119.054629,
            lat: 36.373917
          },
          content: 'DY31-II-W1306-BC',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 119.919302,
            lat: 34.226755
          },
          content: 'DY31-II-W1306-BC',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 119.560555,
            lat: 34.421374
          },
          content: 'DY31-II-W1306-BC',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        },
        {
          dingwei: {
            lng: 116.442213,
            lat: 35.556921
          },
          content: 'DY31-II-W1306-BC',
          pic: {
            url: 'http://shipin.hey17.com/dingwei1.png',
            size: { width: 16, height: 21 }
          }
        }
      ],
      radio: 3,
      options: [
        {
          value: '选项1',
          label: '类型1'
        },
        {
          value: '选项2',
          label: '类型2'
        },
        {
          value: '选项3',
          label: '类型3'
        },
        {
          value: '选项4',
          label: '类型4'
        },
        {
          value: '选项5',
          label: '类型5'
        }
      ],
      value: '',
      options1: [
        {
          value: '选项1',
          label: '航次1'
        },
        {
          value: '选项2',
          label: '航次2'
        },
        {
          value: '选项3',
          label: '航次3'
        },
        {
          value: '选项4',
          label: '航次4'
        },
        {
          value: '选项5',
          label: '航次5'
        }
      ],
      value1: '',
      tags: [
        { name: '探索一号', type: 'info' },
        { name: '船载CTD', type: 'info' }
      ],
      detail: [
        {
          title: '岩石SY510-TXS-YS-01',
          year: '2012',
          hangci: 'TS-14',
          pingtai: '着陆器',
          shebei: '机械手',
          shuju: '岩石',
          shouxi: 'MERY'
        },
        {
          title: '岩石SY510-TXS-YS-01',
          year: '2012',
          hangci: 'TS-14',
          pingtai: '着陆器',
          shebei: '机械手',
          shuju: '岩石',
          shouxi: 'MERY'
        },
        {
          title: '岩石SY510-TXS-YS-01',
          year: '2012',
          hangci: 'TS-14',
          pingtai: '着陆器',
          shebei: '机械手',
          shuju: '岩石',
          shouxi: 'MERY'
        }
      ]
    }
  },
  methods: {
    turnDeatilPage() {
      this.$router.push({ name: 'dataDetail' })
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
    },
    tosearch(e) {
      this.input = e
    },
    openList(value, title) {
      this.dialogTitle = title
      this.showListDialog = true
    },
    // 关闭列表
    closeListForm() {
      this.showListDialog = false
      // this.init()
    },
    // 保存列表
    confirmListForm(val) {
      this.showListDialog = false
      if (val) {
        this.type_b = val
      }
      // this.init()
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 6
    },
    totap(e) {
      console.log(e)
      e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
      e.pic.size.width = 22
      e.pic.size.height = 28
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i] != e) {
          this.list[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
          this.list[i].pic.size.width = 16
          this.list[i].pic.size.height = 21
        }
      }
    },

    shousuo() {
      this.showa = true
    },
    toshow() {
      this.showa = false
    }
  }
}
</script>

<style scoped lang="scss">
.shuju {
  width: 100%;
  height: 100%;
  .shuju_con {
    width: 100%;
    height: 995px;
    display: flex;
    align-items: center;
    justify-content: center;
    .left {
      position: relative;
      width: 30%;
      height: 100%;
      background: #fff;
      box-sizing: border-box;
      padding: 50px;
      display: flex;
      flex-direction: column;
      .left1 {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        .xiala {
          width: 25%;
          height: 40px;
        }

        .el-input {
          width: 50%;
          height: 40px;
        }
        .el-button {
          width: 12%;
          font-size: 20px;
          height: 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .sousuo {
          margin-right: 1%;
        }
        .caidan {
          color: #999;
        }
      }
      .left2 {
        margin-top: 20px;
        .el-tag {
          margin-right: 10px;
        }
      }
      .left3 {
        padding-bottom: 10px;
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e5e5e5;
        p {
          font-size: 16px;
          color: #333;
        }
        .left3_1 {
          width: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
          .el-radio-group{
            display: flex;
            align-items: center;
          }
        }
        .left3_2 {
          width: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            font-size: 15px;
            white-space: nowrap;
          }
          .el-select {
            margin-left: 5px;
            width: 100px;
            .el-input {
              .el-input__inner {
                border: none;
              }
            }
          }
        }
      }
      .left4{
        width: 100%;
        height: auto;
        .left4_1{
          padding:20px 0;
          width: 100%;
          height: auto;
          border-bottom: 1px solid #e5e5e5;
          cursor: pointer;
          &:hover{
            .left4_top{
              p{
                color: #409eff;
              }
            }
          }
          .left4_top{
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 10px;
            p{
              font-size: 16px;
              color: #212121;
              font-weight: bold;
            }
            span{
              font-size: 16px;
              color: #666;
            }
          }
          .left4_list{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .list1{
              width: 50%;
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              p{
                font-size: 16px;
                color: #999;
              }
              span{
                font-size: 16px;
                color: #212121;
              }
            }
          }
        }
      }
      .arrow{
        position: absolute;
        right: 0;
        top: 40%;
        z-index: 888;
        cursor: pointer;
      }
    }
    .arrow_r{
      position: absolute;
      top: 40%;
      left: 0;
      z-index: 888;
      cursor: pointer;
    }
    .right {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style>
.left3_1 .el-radio {
  margin-right: 15px;
}
.left3_1 .el-radio__label {
  font-size: 15px;
}
.el-input__inner::-webkit-input-placeholder {
  color: #333;
}
.left3_2 .el-input__inner {
  padding-left: 0;
  border: none;
  font-size: 15px;
}
.BMapLabel{
  border: none !important;
  color: #fff;
  background: none !important;
}
</style>
