<template>
  <div class="circuit">
    <div class="circuitTitle">
      <p>&nbsp;<img src="../../static/img/cilcro.png">&nbsp;電路列表</p>
    </div>
    <div class="rightData">
      <div class="addCircuit">
        <button class="add">新增</button>
        <div class="seleDate">
          <span>時間</span>
          <div class="el-date">
            <el-date-picker
              v-model="value6"
              type="daterange"
              range-separator="至"
              start-placeholder="開始日期"
              end-placeholder="結束日期" size="small">
            </el-date-picker>
          </div>
        </div>
        <div class="circuitName">
          <span>電路名稱</span>
          <div class="selecName">
            <el-select v-model="circuitName" filterable clearable placeholder="請選擇" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="circuitID">
          <span>電路ID</span>
          <div class="selectID">
            <el-select v-model="circuitID" filterable clearable placeholder="請選擇" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>

      </div>
      <div class="tableList">
        <el-table :data="achieveCricuit" style="width:100%" border height="600"
                  :header-cell-style="{background:'rgba(19,28,69,1)',textAlign:'center',color:'#15C2E7',fontSize:'16px',height:'60px'}"
                  :row-style="{background:'rgba(19,28,69,1)'}"
                  :highlight-current-row="true"
                  size="mini"
                  :header-row-class-name="'row-cent'" >
          <el-table-column fixed type="index" width="100" label="序號">
          </el-table-column>
           <el-table-column :label="head[1]" v-for="(head, key) in header" :key="head[1]" width="120">
              <template slot-scope="scope">
                {{achieveCricuit[scope.$index][head[0]]}} 
              </template>
            </el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="handleEdit(scope.$index, achieveCricuit)"
                type="text"
                size="small">
                <img src="./../../static/img/edit.png">&nbsp;&nbsp;編輯
              </el-button>
              <el-button
                @click.native.prevent="handleDelete(scope.$index, achieveCricuit)"
                type="text"
                size="small">
                <img src="./../../static/img/delte.png">&nbsp;&nbsp;移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import store from "../store/store.js"

  export default {
    data() {
      return {
        options: [{
          value: '選項1',
          label: ''
        }, {
          value: '選項2',
          label: ''
        }, {
          value: '選項3',
          label: ''
        }, {
          value: '選項4',
          label: ''
        }, {
          value: '選項5',
          label: ''
        }],
        header: [['Id','電路編號'], ['Sta1','地球站I'],['Sta2','地球站II'],['RF1','射頻頻率I'],['RF2','射頻頻率II'],
    ['Rate1','速率I'],['Rate1','速率II'],['RF1','頻寬I'],['RF2','頻寬II'],['ModType1','調製方式I'],['ModType1','調製方式II'],['Rs1','所羅門編位元速率I'],['Rs2','所羅門編位元速率II'],['Task','任務名稱'],['Type','電路型別'],['IF1','中頻頻率I'],
    ['IF2','中頻頻率II'],['IsSingleCarr','雙向/單向'],['TransId','轉發器ID'],['SatelliteId','衛星ID']],
        circuitName: '',
        circuitID: '',
        value6: '',
        circuitData: [{id: '01', name: 'XA-EH-01（西安/二活）', delet: '刪除'}, {
          id: '02',
          name: 'XA-EH-01（西安/二活）',
          delet: '刪除'
        }, {id: '03', name: 'XA-EH-01（西安/二活）', delet: '刪除'}]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        row.splice(index, 1);
        console.log(index, row);
      }
    },
    computed: {
      achieveCricuit() {
        if (this.$store.state.circuitData) {
          return this.$store.state.circuitData.data;
        }
      }
    }
  }
</script>
<style scoped="scoped">
  @import "./../../static/css/leftSideBounced.css";

  .row-cent {
    text-align: left;
  }
</style>