<template>
  <div class="container">
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="咬口位置">
            <el-select v-model="holdPlace" @change="changeSave" @focus = focusSelect>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="savaList">保存</el-button>
        </el-col>
      </el-row>
      <table>
        <tr>
          <td></td>
          <td>
            <div class="horizontal">
              <div class="horizontal-left">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][0].voidFlag" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][0].itemTitle" class="item-input" size="mini"></el-input>
                </div>
              </div>
              <div class="horizontal-right">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][1].voidFlag" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][1].itemTitle" class="item-input" size="mini"></el-input>
                </div>
              </div>
            </div>
          </td>
          <td></td>
        </tr>
        <tr>
          <td>
            <div class="column">
              <div class="column-top">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][7].voidFlag" class="item-switch rotate" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][7].itemTitle" class="item-input rotate" size="mini"></el-input>
                </div>
              </div>
              <div class="column-bottom">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][6].voidFlag" class="item-switch rotate" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][6].itemTitle" class="item-input rotate" size="mini"></el-input>
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="centerDescribe">
              <span>[@PrintBillCode] 施工单号</span>
              <span>[@BreedOrderCount] 订单数量</span>
              <span>[@PrintCount] 印量</span>
              <span>[@CreateMan] 制单人</span>
              <span>[@MoQie] 是否模切</span>
              <span>[@FuMo] 是否覆膜</span>
              <span>[@OtherProcess] 是否其他后工</span>
              <span>[@ParperInfo] 版纸张信息</span>
            </div>
          </td>
          <td>
            <div class="column">
              <div class="column-top">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][2].voidFlag" class="item-switch rotate" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][2].itemTitle" class="item-input rotate" size="mini"></el-input>
                </div>
              </div>
              <div class="column-bottom">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][3].voidFlag" class="item-switch rotate" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][3].itemTitle" class="item-input rotate" size="mini"></el-input>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <div class="horizontal">
              <div class="horizontal-left">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][5].voidFlag" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][5].itemTitle" class="item-input" size="mini"></el-input>
                </div>
              </div>
              <div class="horizontal-right">
                <div class="table-item">
                  <el-switch v-model="dataList[holdPlace][4].voidFlag" :active-value="0" :inactive-value="1"></el-switch>
                  <el-input v-model="dataList[holdPlace][4].itemTitle" class="item-input" size="mini"></el-input>
                </div>
              </div>
            </div>
          </td>
          <td></td>
        </tr>
      </table>
    </el-form>

    <input type="text" class="rotate ma" />

  </div>

</template>

<script>
import { getPlateTitleItemList, savePlateTitleItemList } from '@/api/baseInfo/plateTitle'

const itemData = [
  {
    voidFlag: 0,
    itemTitle: ''
  },
  {
    voidFlag: 0,
    itemTitle: ''
  },
  {
    voidFlag: 0,
    itemTitle: ''
  },
  {
    voidFlag: 0,
    itemTitle: ''
  },
  {
    voidFlag: 0,
    itemTitle: ''
  },
  {
    voidFlag: 0,
    itemTitle: ''
  },
  {
    voidFlag: 0,
    itemTitle: ''
  },
  {
    voidFlag: 0,
    itemTitle: ''
  }
]
export default {
  name: 'PlateSizeTitle',
  data() {
    return {
      oldHoldPlace: 0,
      holdPlace: 0,
      options: [
        {
          label: '靠上',
          value: 0
        },
        {
          label: '靠下',
          value: 1
        },
        {
          label: '靠左',
          value: 2
        },
        {
          label: '靠右',
          value: 3
        }
      ],
      itemData: JSON.parse(JSON.stringify(itemData)),
      dataList: []
    }
  },
  created() {
    for (let i = 0; i < 4; i++) {
      this.dataList.push(JSON.parse(JSON.stringify(itemData)))
    }
    this.getList()
  },
  methods: {
    getList() {
      const _that = this
      getPlateTitleItemList({}).then(res => {
        // console.log(res)
        if (res.httpCode == 200) {
          if (res.data.length > 0) {
            var data = res.data
            _that.dataList = []
            var list1 = []
            var list2 = []
            var list3 = []
            var list4 = []
            data.forEach((item, index) => {
              if (index < 8) {
                var dataItem = {
                  'itemTitle': item.itemTitle,
                  'voidFlag': item.voidFlag
                }
                list1.push(dataItem)
              } else if (index >= 8 && index < 16) {
                var dataItem = {
                  'itemTitle': item.itemTitle,
                  'voidFlag': item.voidFlag
                }
                list2.push(dataItem)
              } else if (index >= 16 && index < 24) {
                var dataItem = {
                  'itemTitle': item.itemTitle,
                  'voidFlag': item.voidFlag
                }
                list3.push(dataItem)
              } else {
                var dataItem = {
                  'itemTitle': item.itemTitle,
                  'voidFlag': item.voidFlag
                }
                list4.push(dataItem)
              }
            })
            _that.dataList.push(list1)
            _that.dataList.push(list2)
            _that.dataList.push(list3)
            _that.dataList.push(list4)
          } else {

            _that.dataList = []
            for (let i = 0; i < 4; i++) {
              _that.dataList.push(JSON.parse(JSON.stringify(itemData)))
            }
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    focusSelect(e) {
      const _that = this
      var val = e.target.value
      switch (val) {
        case '靠上':
          _that.oldHoldPlace = 0
          break
        case '靠下':
          _that.oldHoldPlace = 1
          break
        case '靠左':
          _that.oldHoldPlace = 2
          break
        case '靠右':
          _that.oldHoldPlace = 3
          break
      }
    },
    changeSave(val) {
      const _that = this
      // console.log(_that.dataList[val])
      // _that.dataList[_that.oldHoldPlace] = JSON.parse(JSON.stringify(_that.itemData))
      // _that.itemData = JSON.parse(JSON.stringify(itemData))
    },
    createList() {
      const _that = this
      var result = []
      _that.dataList.forEach((item, index) => {
        item.forEach((i, j) => {
          var titleItem = {
            holdPlace: index,
            itemPosition: j,
            itemTitle: i.itemTitle,
            voidFlag: i.voidFlag
          }
          result.push(titleItem)
        })
      })
      return result
    },
    savaList() {
      const _that = this
      // _that.dataList[_that.holdPlace] = JSON.parse(JSON.stringify(_that.itemData))
      console.log(_that.createList())
      var titleItemList = _that.createList()
      var data = {
        titleItemList: JSON.stringify(titleItemList)
      }
      savePlateTitleItemList(data).then(res => {
        console.log(res)
        if (res.httpCode == 200) {

        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  margin: 20px;
}

table {
  border-collapse: collapse;
  border: 0px solid #999;
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}

table td {
  border-top: 0;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  border-left: 0;
}

table tr:last-child td {
  border-bottom: 0;
}

table tr td:last-child {
  border-right: 0;
}

table tr:first-child, table tr:last-child {
  height: 25px;
}

table tr td:nth-child(2) {
  width: 90%;
}
table tr td:first-child, table tr td:last-child{
  width: 5%;
}
table tr:nth-child(2) {
  height: 500px;
}
.centerDescribe {
  width: 30%;
  margin: 0 auto;
}

.centerDescribe span {
  display: block;
  line-height: 20px;
  font-size: 16px;
  text-align: left;
  color: #20a0ff;
}

.el-switch {
  ::v-deep .el-switch__core {
    &::before {
      content: '无';
      color: #fff;
      position: absolute;
      transform: scale(0.85);
      left: 20px;
    }
  }

  &.is-checked {
    ::v-deep .el-switch__core {
      &::before {
        content: '有';
        left: 5px;
        color: white;
        transform: scale(0.85);
      }
    }
  }
}
.horizontal-left{
  float: left;
  margin-left: 10px;
}
.horizontal-right{
  float: right;
  margin-right: 10px;
}
.column{
  height: 500px;
  margin-left: 15px;
  .column-top{
    height: 50%;
  }
  .column-bottom{
    width: 50%;

  }
  .table-item{
    display: flex;
    flex-direction: column;
    .item-switch{
      flex: 1;
    }
    .item-input{
      flex: 1;
      margin-top: 40px;
    }
  }
}
.table-item{
  .item-input{
    display: inline-block;
    width: 140px;
    text-align: center;
  }
}
.ma{
  margin-top:100px;
  border:1px solid #ccc;
}
.rotate {
  transform-origin: left bottom;
  transform: rotate(90deg);
  /* Safari */
  -webkit-transform: rotate(90deg);

  /* Firefox */
  -moz-transform: rotate(90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  position:absolute
}
</style>
