<template>
  <!-- 站别功能页面 跟工位功能页面功能相同 取消不做 -->
  <div>
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 生产线 -->
      <div class="filter">
        <label>{{ $t("1025") }}：</label>
        <Select
          label-in-value
          class="searchSelect"
          v-model="lineId"
          @on-change="lineChange(lineId)"
        >
          <Option v-for="item in lineList" :value="item.id" :key="item.id">
            {{ item.title }}</Option
          >
        </Select>
      </div>
      <!-- 工站 -->
      <div class="filter">
        <label>{{ $t("900881") }}：</label>
        <Select
          clearable
          filterable
          label-in-value
          class="searchSelect"
          v-model="station"
        >
          <Option v-for="item in stationList" :value="item.id" :key="item.id">{{
            item.title
          }}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-checkmark-circle-outline"
          @click="confirmsave()"
          >{{ $t("900306") }}</Button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="divborder newTableDiv">
      <div class="tableDiv">
        <Table
          class="tableClass"
          @on-current-change="handleRowChange1"
          highlight-row
          :data="tableData1"
          :columns="tableColumns1"
      ></Table>
      </div>
      <div class="actionDiv">
        <div class="actionbutton active">
          <Icon type="ios-arrow-back" />
        </div>
        <div class="actionbutton">
          <Icon type="ios-arrow-forward" />
        </div>
      </div>
      <div class="tableDiv">
        <Table
          class="tableClass"
          @on-current-change="handleRowChange2"
          highlight-row
          :data="tableData2"
          :columns="tableColumns2"
      ></Table>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .actionDiv{
    width:100px;
    height:60vh;
    float:left;
    padding:30px 30px;
    .actionbutton{
      width:35px;
      height:35px;
      border:1px solid #ddd;
      text-align: center;
      line-height: 32px;
      font-size: 15px;
      margin-bottom:10px;
      border-radius:3px;
    }
    .active{
      color: #fff;
      background-color: #2d8cf0;
      border-color: #2d8cf0;
      cursor:pointer;
    }
  }
  .tableDiv{
    width:calc(~"(100% - 100px)/2");
    height:60vh;
    border:0.5px solid #ddd;
    float:left;
  }
</style>
<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      lineId: 0, // 生产线
      station: 0, //  工站
      lineList: [], // 生产线数据
      stationList: [], // 工站数据

      tableData1:[],
      tableColumns1:[
        {
          title:'功能分组',
          key:''
        },
        {
          title:'项',
          key:''
        },
        {
          title:'项目名称',
          key:''
        },
        {
          title:'项目描述',
          key:''
        },
        {
          title:'是否手动输入',
          key:''
        }
      ],
      tableData2:[],
      tableColumns2:[
        {
          title:'功能分组',
          key:''
        },
        {
          title:'项',
          key:''
        },
        {
          title:'项目名称',
          key:''
        },
        {
          title:'项目描述',
          key:''
        },
        {
          title:'项目值',
          key:''
        }
      ],
    };
  },
  created() {
    this.getLine();
  },
  methods: {
    //  生产线数据
    getLine() {
      axios
        .request({
          url: "/acc/Position/GetLine",
          method: "get"
        })
        .then(res => {
          this.lineList = [];
          if (res.data.ret === 1) {
            this.lineList = res.data.data;
          }
        });
    },
    // 生产线切换事件
    lineChange(lineId) {
      console.log(lineId);
      let params = { line: lineId };
      axios
        .request({
          url: "/acc/Position/getstation",
          params,
          method: "get"
        })
        .then(res => {
          this.stationList = [];
          if (res.data.ret === 1) {
            this.stationList = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 确认保存事件
    confirmsave() {
    },
    handleRowChange1(){

    },
    handleRowChange2(){

    }
  }
};
</script>

