<template>
  <PageFullContent>
    <div class="key">
      <div>
        <div class="key-main">
          <div class="header"></div>
         <div style="display: flex;">
          <div>
            <div style="display: flex">
              <div class="main">
                <div class="left-key">
                  <div class="edit-box">
                    <div style="margin-bottom: 100px">
                      <div
                        style="
                          display: flex;
                          height: 30px;
                          align-items: center;
                          justify-content: space-around;
                          margin-bottom: 10px;
                        "
                      >
                        <span
                          style="
                            color: #4d4d4d;
                            font-size: 28px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            margin-left: -18px;
                          "
                          >{{ cabinetInfo['key.title'] }}</span
                        >
                        <img
                          style="width: 10px; height: 10px; display: inline-block; cursor: pointer"
                          src="../../../assets/vehicle/xg.png"
                          alt=""
                          @click="editInfo(1)"
                        />
                        <span style="margin-right: 30px">字数限制7个字</span>
                      </div>
                      <div class="text-edit">
                        <span class="text-en">{{ cabinetInfo['key.text1'] }}</span>
                        <img src="../../../assets/vehicle/xg.png" alt="" @click="editInfo(2)" />
                        <span>字数限制7个字</span>
                      </div>
                      <div class="text-edit" style="margin: 10px 0">
                        <span class="text-en">{{ cabinetInfo['key.text2'] }}</span>
                        <img src="../../../assets/vehicle/xg.png" alt="" @click="editInfo(3)" />
                        <span>字数限制7个字</span>
                      </div>
                      <div class="text-edit">
                        <span class="text-en">{{ cabinetInfo['key.text3']?cabinetInfo['key.text3']:'请输入' }}</span>
                        <img src="../../../assets/vehicle/xg.png" alt="" @click="editInfo(4)" />
                        <span>字数限制7个字</span>
                      </div>
                    </div>
                  </div>
                  <div></div>
                </div>
                <div class="right-key"></div>
              </div>
            </div>
            <TableInfo />
          </div>
          <div><KeyBox /></div>
         </div>
        </div>
      </div>
      <CabinetForm ref="subTable"
        :list="list"
        :formType="formType"
        @add="addCabinText"
/>
    </div>
  </PageFullContent>
</template>

<script>
import TableInfo from './modules/TableInfo'
import { PageFullContent } from '@/components'
import KeyBox from './modules/KeyBox'
import {getBasicInfo,putKeyCase} from '@/api/keys.js'
import CabinetForm from './modules/CabinetForm.vue'
export default {
  components: { TableInfo, PageFullContent, KeyBox,CabinetForm },
  data(){
    return{
      cabinetInfo:{},
      formType:1,
      list:{}
    }
  },
  methods:{
    FunCarKey(){
      getBasicInfo().then(res=>{
        this.cabinetInfo=res.data
        this.list=JSON.parse(JSON.stringify(this.cabinetInfo))
      }) 
    },
    editInfo(val){
      this.formType=val
      this.$refs.subTable.show(this.list)

    },
    addCabinText(node){
      putKeyCase(node).then(res=>{
        if(res.code==200){
          this.$message.success('修改成功')
          this.FunCarKey()
        }
      })
    },
  },
  mounted(){},
  created(){
    this.FunCarKey()
  }
}
</script>

<style lang="less" scoped>
.key {
  background: #f7f7f7;
  margin: 10px 10px;
  height: 830px;
  .key-main {
    display: flex;
    flex-direction: column;
    .header {
      width: 100%;
      height: 161px;
      background: url('../../../assets/vehicle/zkey61.png') no-repeat;
      background-size: 100% 100%;
    }
    .main {
      display: flex;
      // height: 772px;
      .left-key {
        width: 442px;
        .edit-box {
          width: 100%;
          height: 270px;
          background: url('../../../assets/vehicle/left-bg1.png') no-repeat;
          display: flex;
          flex-direction: column;
          padding-left: 55px;
          padding-top: 33px;
          .text-edit {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 30px;
            width: 300px;
            img {
              width: 10px;
              height: 10px;
              display: inline-block;
              cursor: pointer;
              margin-right: 20px;
            }
            span {
              display: inline-block;
              width: 140px;
              text-align: left;
            }
            .text-en {
              font-size: 20px;
              color: #4d4d4d;
              font-weight: bold;
            }
          }
        }
      }
      .right-key {
        flex: 1;
        height: 100%;
        background: seagreen;
      }
    }
  }
}
</style>
