<template>
  <div class="page-body">
    <div class="page-header">
      <h1 class="page-title">航次详情</h1>
      <el-breadcrumb>
        <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name: 'dataSearch'}">数据检索</el-breadcrumb-item>
        <el-breadcrumb-item>航次详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tit_box">
      <div class="title">
        航次样品关联图谱
      </div>
    </div>
    <div class="formBox">
      <div id="chart" />
    </div>
    <div class="tit_box">
      <div class="title">
        航次信息
      </div>
    </div>
    <div class="filter-container">
      <div class="filter-item">
        <span class="label">航次名称</span>
        <el-select v-model="search.voyageName" size="medium" placeholder="请选择" @change="dimensionChange">
          <el-option v-for="item in namelist" :key="item.name" :label="item.name" :value="item.name" />
        </el-select>
      </div>
      <div class="checkBtn">
        <el-button type="primary" size="medium" @click="init">检索</el-button>
      </div>
    </div>
    <el-table v-loading="loading" stripe border :data="tableData" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="600px" @selection-change="handleSelectionChange" @row-click="confirmModal">
      <el-table-column
        type="index"
        width="50"
        label="序号"
      />
      <el-table-column prop="voyageName" label="航次名称" />
      <el-table-column prop="ship" label="科考船舶" />
      <!-- <el-table-column prop="status" label="计划状态" /> -->
      <el-table-column prop="isSecret" label="是否涉密">
        <template slot-scope="scope">
          <span v-if="scope.row.isSecret==1">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="航次起止时间">
        <template slot-scope="scope">
          <span v-if="scope.row.startTime">{{ scope.row.startTime }} ~ {{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checked" />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :current-page="currentPage"
      :page-sizes="[15, 30, 50]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div class="tit_box">
      <div class="title">
        相关样品
      </div>
    </div>
    <div class="relative">
      <ul>
        <li
          v-for="(item, index) in chooseList"
          :key="index"
          :class="choose == index ? 'active' : ''"
          @click="chooseBtn(index)"
        >
          <p>{{ item.name }}({{ item.num }})</p>
        </li>
      </ul>
    </div>
    <div class="filter-container">
      <div class="filter-item">
        <span class="label">数据样品编号</span>
        <el-input v-model="search_b.ino" placeholder="" />
      </div>
      <div class="checkBtn">
        <el-button type="primary" size="medium" @click="init_b">检索</el-button>
      </div>
    </div>
    <el-table v-loading="loading1" stripe border :data="tableData2" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" height="600px">
      <el-table-column
        type="index"
        width="50"
        label="序号"
      />
      <el-table-column prop="ino" label="数据样品编号">
        <template slot-scope="scope">
          <a class="cursor" href="http://120.48.105.88:8081/dataDetails/296c1ff351224b3d8a4b856592c0fb67" target="_blank">{{ scope.row.ino }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="docType" label="设备类型" />
      <el-table-column prop="type" label="样品类型" />
    </el-table>

    <el-pagination
      background
      :current-page="currentPage"
      :page-sizes="[15, 30, 50]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>
<script>
import { getVoyageList, deleteVoyageList
} from '@/api/remit'
import {
  validateSpecialChart
} from '@/utils/validate' // get token from cookie
// 初始化 echarts 实例

// 定义节点数据
var nodes = [
  { name: 'TS2-17', symbolSize: 30, itemStyle: { color: '#009688' }},
  { name: 'TS2-18', symbolSize: 30, itemStyle: { color: '#009688' }},
  { name: 'TS2-19', symbolSize: 30, itemStyle: { color: '#009688' }},
  { name: 'TS2-20', symbolSize: 30, itemStyle: { color: '#009688' }},
  { name: 'TS2-21', symbolSize: 30, itemStyle: { color: '#009688' }},
  { name: 'TS2-22', symbolSize: 30, itemStyle: { color: '#009688' }},
  { name: 'TS2-23', symbolSize: 30, itemStyle: { color: '#009688' }},

  { name: 'XQ01', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ02', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ03', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ04', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ05', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ06', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ07', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ08', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ09', symbolSize: 20, itemStyle: { color: '#2196F3' }},
  { name: 'XQ010', symbolSize: 20, itemStyle: { color: '#2196F3' }},

  { name: '潜龙1号', symbolSize: 20, itemStyle: { color: '#3F51B5' }},
  { name: '深海勇士号', symbolSize: 20, itemStyle: { color: '#3F51B5' }},
  { name: '奋斗者号', symbolSize: 20, itemStyle: { color: '#3F51B5' }},

  { name: 'ROV01', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'ROV02', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'ROV03', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'ROV04', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'ROV05', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'AUV01', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'AUV02', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'AUV03', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'AUV04', symbolSize: 20, itemStyle: { color: '#673AB7' }},
  { name: 'AUV05', symbolSize: 20, itemStyle: { color: '#673AB7' }},

  { name: 'TS217-SCTP-WYS-02', symbolSize: 20, itemStyle: { color: '#4CAF50' }},
  { name: 'TS218-SCTP-WYS-03', symbolSize: 20, itemStyle: { color: '#4CAF50' }},

  { name: 'TS217-SCTP-WYS-02-001', symbolSize: 20, itemStyle: { color: '#FFC107' }},
  { name: 'TS217-SCTP-WYS-02-002', symbolSize: 20, itemStyle: { color: '#FFC107' }},
  { name: 'TS217-SCTP-WYS-03-001', symbolSize: 20, itemStyle: { color: '#FFC107' }},

  { name: 'BIO-DS01', symbolSize: 20, itemStyle: { color: '#FF5722' }},
  { name: 'BIO-DS02', symbolSize: 20, itemStyle: { color: '#FF5722' }},
  { name: 'BIO-DS03', symbolSize: 20, itemStyle: { color: '#FF5722' }},
  { name: 'BIO-DS04', symbolSize: 20, itemStyle: { color: '#FF5722' }},
  { name: 'BIO-DS05', symbolSize: 20, itemStyle: { color: '#FF5722' }},
  { name: 'BIO-DS06', symbolSize: 20, itemStyle: { color: '#FF5722' }},

  { name: 'EAR-DS01', symbolSize: 20, itemStyle: { color: '#795548' }},
  { name: 'EAR-DS02', symbolSize: 20, itemStyle: { color: '#795548' }},
  { name: 'EAR-DS03', symbolSize: 20, itemStyle: { color: '#795548' }},
  { name: 'EAR-DS04', symbolSize: 20, itemStyle: { color: '#795548' }},
  { name: 'EAR-DS05', symbolSize: 20, itemStyle: { color: '#795548' }},
  { name: 'EAR-DS06', symbolSize: 20, itemStyle: { color: '#795548' }},

  { name: 'VIE-DS01', symbolSize: 20, itemStyle: { color: '#607D8B' }},
  { name: 'VIE-DS02', symbolSize: 20, itemStyle: { color: '#607D8B' }},
  { name: 'VIE-DS03', symbolSize: 20, itemStyle: { color: '#607D8B' }},
  { name: 'VIE-DS04', symbolSize: 20, itemStyle: { color: '#607D8B' }},
  { name: 'VIE-DS05', symbolSize: 20, itemStyle: { color: '#607D8B' }},
  { name: 'VIE-DS06', symbolSize: 20, itemStyle: { color: '#607D8B' }}
]

// 定义边数据
var links = [
  { source: 'TS2-17', target: 'XQ01' },
  { source: 'TS2-18', target: 'XQ02' },
  { source: 'TS2-19', target: 'XQ03' },
  { source: 'TS2-20', target: 'XQ04' },
  { source: 'TS2-21', target: 'XQ05' },
  { source: 'TS2-22', target: 'XQ06' },
  { source: 'TS2-23', target: 'XQ07' },
  { source: 'TS2-22', target: 'XQ08' },
  { source: 'TS2-21', target: 'XQ09' },
  { source: 'TS2-20', target: 'XQ010' },

  { source: 'XQ01', target: '潜龙1号' },
  { source: 'XQ02', target: '潜龙1号' },
  { source: 'XQ03', target: '潜龙1号' },
  { source: 'XQ04', target: '潜龙1号' },
  { source: 'XQ05', target: '深海勇士号' },
  { source: 'XQ06', target: '深海勇士号' },
  { source: 'XQ07', target: '深海勇士号' },
  { source: 'XQ08', target: '深海勇士号' },
  { source: 'XQ09', target: '奋斗者号' },
  { source: 'XQ010', target: '奋斗者号' },
  { source: 'XQ01', target: '奋斗者号' },
  { source: 'XQ06', target: '奋斗者号' },
  { source: 'XQ08', target: '奋斗者号' },

  { source: 'XQ01', target: 'ROV01' },
  { source: 'XQ02', target: 'ROV02' },
  { source: 'XQ03', target: 'ROV03' },
  { source: 'XQ04', target: 'ROV04' },
  { source: 'XQ05', target: 'ROV05' },
  { source: 'XQ06', target: 'AUV01' },
  { source: 'XQ07', target: 'AUV02' },
  { source: 'XQ08', target: 'AUV03' },
  { source: 'XQ09', target: 'AUV04' },
  { source: 'XQ010', target: 'AUV05' },
  { source: 'XQ01', target: 'ROV03' },
  { source: 'XQ06', target: 'ROV05' },
  { source: 'XQ08', target: 'AUV04' },

  { source: 'XQ01', target: 'TS217-SCTP-WYS-02' },
  { source: 'XQ02', target: 'TS217-SCTP-WYS-02' },
  { source: 'XQ03', target: 'TS217-SCTP-WYS-02' },
  { source: 'XQ04', target: 'TS217-SCTP-WYS-02' },
  { source: 'XQ05', target: 'TS217-SCTP-WYS-02' },
  { source: 'XQ06', target: 'TS218-SCTP-WYS-03' },
  { source: 'XQ07', target: 'TS218-SCTP-WYS-03' },
  { source: 'XQ08', target: 'TS218-SCTP-WYS-03' },
  { source: 'XQ09', target: 'TS218-SCTP-WYS-03' },
  { source: 'XQ010', target: 'TS218-SCTP-WYS-03' },

  { source: 'TS217-SCTP-WYS-02', target: 'TS217-SCTP-WYS-02-001' },
  { source: 'TS217-SCTP-WYS-02', target: 'TS217-SCTP-WYS-02-002' },
  { source: 'TS218-SCTP-WYS-03', target: 'TS217-SCTP-WYS-03-001' },

  { source: 'TS217-SCTP-WYS-02-001', target: 'BIO-DS01' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'BIO-DS02' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'BIO-DS03' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'BIO-DS04' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'BIO-DS05' },

  { source: 'TS217-SCTP-WYS-02-001', target: 'EAR-DS01' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'EAR-DS02' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'EAR-DS03' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'EAR-DS04' },

  { source: 'TS217-SCTP-WYS-02-001', target: 'VIE-DS01' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'VIE-DS02' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'VIE-DS03' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'VIE-DS04' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'VIE-DS05' },
  { source: 'TS217-SCTP-WYS-02-001', target: 'VIE-DS06' },

  { source: 'TS217-SCTP-WYS-02-002', target: 'BIO-DS02' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'BIO-DS03' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'BIO-DS04' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'BIO-DS05' },

  { source: 'TS217-SCTP-WYS-02-002', target: 'EAR-DS02' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'EAR-DS03' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'EAR-DS04' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'EAR-DS05' },

  { source: 'TS217-SCTP-WYS-02-002', target: 'VIE-DS02' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'VIE-DS03' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'VIE-DS04' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'VIE-DS05' },
  { source: 'TS217-SCTP-WYS-02-002', target: 'VIE-DS06' },

  { source: 'TS217-SCTP-WYS-03-001', target: 'BIO-DS02' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'BIO-DS03' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'BIO-DS04' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'BIO-DS05' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'BIO-DS06' },

  { source: 'TS217-SCTP-WYS-03-001', target: 'EAR-DS03' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'EAR-DS04' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'EAR-DS05' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'EAR-DS06' },

  { source: 'TS217-SCTP-WYS-03-001', target: 'VIE-DS03' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'VIE-DS04' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'VIE-DS05' },
  { source: 'TS217-SCTP-WYS-03-001', target: 'VIE-DS06' }

]

export default {
  name: 'VoyageDelivery',
  components: {},
  props: {
  },
  data() {
    return {
      loading: false,
      loading1: false,
      namelist: [
        {
          name: 'TS-14'
        },
        {
          name: 'TS2-18'
        }
      ],
      search: {
        voyageName: ''
      },
      search_b: {
        ino: ''
      },
      multipleSelection: [],
      tableData2: [
        {
          ino: 'SS-DY31-Ⅱ-W1306-BC-1',
          docType: '机械手',
          type: '硅质软泥'
        },
        {
          ino: 'SS-DY31-Ⅱ-W1306-BC-2',
          docType: '机械手',
          type: '硅质软泥'
        },
        {
          ino: 'SS-DY31-Ⅱ-W1306-BC-3',
          docType: '机械手',
          type: '硅质软泥'
        }
      ],
      tableData: [
        // {
        //   name: 'TS-14',
        //   chuanbo: '探索一号',
        //   shemi: '否',
        //   time: '2022.12.1-2022.12.3'
        // },
        // {
        //   name: 'TS-14',
        //   chuanbo: '探索一号',
        //   shemi: '否',
        //   time: '2022.12.1-2022.12.3'
        // },
        // {
        //   name: 'TS-14',
        //   chuanbo: '探索一号',
        //   shemi: '否',
        //   time: '2022.12.1-2022.12.3'
        // },
        // {
        //   name: 'TS-14',
        //   chuanbo: '探索一号',
        //   shemi: '否',
        //   time: '2022.12.1-2022.12.3'
        // }
      ],
      choose: 0,
      chooseList: [{ name: '生物样品', num: 2 }, { name: '地球物理数据', num: 109 }, { name: '视频音像', num: 2093 }],
      currentPage: 1,
      pagesize: 20,
      count: 0
    }
  },
  mounted() {
    this.init()
    this.echartInit()
  },
  methods: {
    dimensionChange() {

    },
    echartInit() {
      var chart = this.$echarts.init(document.getElementById('chart'))
      // 配置关系图的选项
      var option = {
        series: {
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 100,
            edgeLength: 100
          },
          data: nodes,
          links: links,
          roam: true,
          label: {
            show: true,
            position: 'top',
            color: 'rgba(0,0,0,0.7)'
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            show: false,
            fontSize: 12,
            fontWeight: 'bold',
            formatter: function(params) {
              return params.data.name
            }
          },
          tooltip: {
            show: true,
            formatter: function(params) {
              return params
                .dataType === 'node' ? '节点名称：' + params.data.name : '关系：' + params.data.name
            }
          }
        }
      }
      chart.setOption(option)
    },
    init() {
      this.currentPage = 1
      this.getData()
    },
    async getData() {
      if (this.search.voyageName.length && !validateSpecialChart(this.search.voyageName)) {
        this.$message({
          message: '输入不合规',
          type: 'warning'
        })
        this.tableData = []
        this.count = 0
        return
      }
      this.loading = true
      const data = {
        page: this.currentPage,
        size: this.pagesize,
        voyageName: this.search.voyageName.trim()
      }
      try {
        const res = await getVoyageList(data)
        if (res.code == 200) {
          if (res.data.content) {
            res.data.content = res.data.content.map(item => {
              item.checked = false
              return item
            })
            this.tableData = res.data.content
            this.count = Number(res.data.count)
          }
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    batchImport() {

    },
    batchExport() {

    },
    chooseBtn(index) {
      this.choose = index
    },
    voyageEntry() {
      this.$router.push({ name: 'voyageEntry' })
    },
    confirmModal(row, event, column) {
      var opType = column.target.id
      if (opType == 'view') {
      } else if (opType == 'edit') {

      } else if (opType == 'delete') {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.requestDelete(row.voyageName)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    init_b() {

    },
    async requestDelete(voyageName) {
      const _this = this
      this.loading = true
      const data = { voyageName }
      try {
        const res = await deleteVoyageList(data)
        if (res.code == 200) {
          _this.$message({
            message: '删除成功！',
            type: 'success'
          })

          _this.init()
        }
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange: function(size) {
      this.pagesize = size
      this.getData()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getData()
    }

  }
}
</script>
<style scoped lang="scss">

  #chart {
    height: 600px;
    width:100%;
    margin: 0;
    overflow: hidden;
  }
</style>

