<template>
  <div id="schedulingManagement">
    <div class="main_box">
      <div class="left">
        <div class="btn_bar">
          <div class="left_btn">
            <div class="top">
              <el-button icon="el-icon-add" type="primary">新增</el-button>
              <el-button icon="el-icon-search" type="primary" plain
                >修改</el-button
              >
              <el-button icon="el-icon-search" type="danger" plain
                >删除</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >确认</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >下发</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >同步</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >齐套</el-button
              >
            </div>
            <div class="bottom">
              <el-button icon="el-icon-search" type="primary" plain
                >查库</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >撤回</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >延期</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >终止</el-button
              >
              <el-button icon="el-icon-search" type="primary" plain
                >变更</el-button
              >
              <el-button
                icon="el-icon-search"
                class="merge"
                type="primary"
                plain
                >暂停/启用</el-button
              >
            </div>
          </div>
          <div class="right_btn">
            <el-button type="primary" @click="gotoManualScheduling"
              >手动排程</el-button
            >
            <el-button type="primary">自动排程</el-button>
          </div>
        </div>
        <div class="tabs">
          <el-radio-group v-model="tabPosition">
            <el-radio-button label="1">待排产</el-radio-button>
            <el-radio-button label="2">已排产</el-radio-button>
            <el-radio-button label="3">已完成</el-radio-button>
          </el-radio-group>
        </div>
        <div class="content">
          <el-input placeholder="请输入内容" v-model="input3" class="search">
            <el-button slot="append" icon="el-icon-search">搜索</el-button>
          </el-input>
          <div class="table">
            <el-table
              height="99%"
              style="height: 100%"
              :data="tableData"
              border
            >
              <el-table-column align="center" type="selection" width="55">
              </el-table-column>
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column label="批次号" prop="batchNum">
              </el-table-column>
              <el-table-column label="计划编号" prop="planCode">
              </el-table-column>
              <el-table-column label="销售订单号" prop="saleOrder">
              </el-table-column>
              <el-table-column label="编码" prop="code"> </el-table-column>
              <el-table-column label="名称" prop="name"> </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div class="box" v-for="(item, index) in list" :key="index">
            <div class="item">
              <div class="img"><img src="" alt="" /></div>
              <div class="box">
                <div class="title">{{ item.title }}</div>
                <div class="content">
                  <div>产能{{ item.capacity }}</div>
                  <div>已排产{{ item.scheduling }}</div>
                </div>
                <div class="content">
                  <div>班组数{{ item.team }}</div>
                  <div>工作中心{{ item.workCenter }}</div>
                </div>
                <div class="setting">设置产能</div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div
            class="box"
            v-for="(item, index) in capacityList"
            :key="index"
            :class="[(index + 1) % 6 == 0 ? 'margin_0' : '']"
            @click="checkedChange(index)"
          >
            <div class="item" :class="[item.checked ? 'item active' : 'item']">
              <div class="date">{{ item.title }}</div>
              <div class="capacity">{{ item.capacity }}</div>
              <div v-if="item.checked" class="checked">
                <img :src="checkImg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabPosition: '1',
        checkImg: require('@/assets/checked.png'),
        capacityList: [
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: false
          },
          {
            title: '1月1日',
            capacity: '2单/1000pcs',
            checked: true
          }
        ],
        list: [
          {
            title: '机加一厂',
            capacity: '34.5吨',
            scheduling: '20吨',
            team: '5个',
            workCenter: '10个'
          },
          {
            title: '机加一厂',
            capacity: '34.5吨',
            scheduling: '20吨',
            team: '5个',
            workCenter: '10个'
          },
          {
            title: '机加一厂',
            capacity: '34.5吨',
            scheduling: '20吨',
            team: '5个',
            workCenter: '10个'
          },
          {
            title: '机加一厂',
            capacity: '34.5吨',
            scheduling: '20吨',
            team: '5个',
            workCenter: '10个'
          }
        ],
        tableData: [
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          },
          {
            saleOrder: 'XSDH41654646',
            planCode: 'XSDH41654646',
            batchNum: '888',
            code: '040004',
            name: '电机'
          }
        ]
      };
    },
    methods: {
      checkedChange(index) {
        this.capacityList[index].checked = !this.capacityList[index].checked;
      },
      gotoManualScheduling() {
        this.$router.push('/manualScheduling');
      }
    }
  };
</script>

<style lang="scss" scoped>
  #schedulingManagement {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .main_box {
      height: 100%;
      width: 100%;
      background-color: #fff;
      padding: 20px;
      display: flex;
      .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        .btn_bar {
          height: 72px;
          display: flex;
          margin-bottom: 20px;
          .left_btn {
            display: flex;
            flex-direction: column;
            .top {
              display: flex;
              flex: 1;
              margin-bottom: 10px;
              > button {
                width: 72px;
                height: 32px;
              }
            }
            .bottom {
              flex: 1;
              display: flex;
              > button {
                width: 72px;
                height: 32px;
              }
              .merge {
                width: 155px;
                height: 32px;
              }
            }
          }
          .right_btn {
            flex: 1;
            display: flex;
            justify-content: flex-end;
          }
        }
        .tabs {
          margin-bottom: 20px;
        }
        .content {
          flex: 1;
          display: flex;
          flex-direction: column;
          .search {
            margin-bottom: 20px;
          }
          .table {
            flex: 1 0 auto;
            height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            .el-table {
              flex: 1;
            }
          }
        }
      }
      .right {
        flex: 1;
        height: 100%;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .top {
          height: 305px;
          display: flex;
          overflow: auto;
          .box {
            height: 285px;
            width: 263px;
            margin-right: 10px;
            .item {
              height: 100%;
              width: 100%;
              display: flex;
              flex-direction: column;
              border: 1.5px solid #d9d9d9;
              border-radius: 4px;
              .img {
                height: 140px;
                width: 100%;
                > img {
                  height: 100%;
                  width: 100%;
                }
              }
              .box {
                flex: 1;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                .title {
                  font-size: 20px;
                  color: #303437;
                  font-weight: bold;
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;
                }
                .content {
                  display: flex;
                  padding: 2.5px 0;
                  box-sizing: border-box;
                  > div {
                    flex: 1;
                  }
                }
                .setting {
                  flex: 1;
                  color: #2d80ee;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
        .bottom {
          flex: 1;
          width: 100%;
          .box {
            width: 15%;
            height: 69px;
            margin-right: 2%;
            margin-bottom: 10px;
            display: inline-block;
            cursor: pointer;
            .item {
              width: 100%;
              height: 100%;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              border-radius: 2px;
              border: 1px solid #d9d9d9;
              .date {
                color: #202325;
              }
              .checked {
                position: absolute;
                top: 0;
                right: 0;
                width: 46px;
                height: 46px;
                > img {
                  height: 100%;
                  width: 100%;
                }
              }
            }
            .active {
              border-color: #2d80ee;
            }
          }
          .margin_0 {
            margin-right: 0;
          }
        }
      }
    }
  }
</style>
