<style>
  .versionList {
    padding: 20px;
  }

  .versionList li {
    float: left;
    margin: 0 30px 30px 0;
    color: #fff;
    min-width: 250px;
    padding: 0 24px;
    height: 329px;
    background: #1BC594;
    border-radius: 4px;
    position: relative;
  }

  .versionListLayer {
    position: absolute;
    z-index: 50;
    width: 260px;
    height: 329px;
    left: 0;
    top: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, .6);
  }

  .versionList li p.title {
    text-align: center;
    font-size: 14px;
    line-height: 60px;
    border-bottom: 1px solid #06B381;
  }

  .versionList li pre {
    text-align: center;
    height: 200px;
    line-height: 28px;
    padding: 10px 0;
  }

  .versionList li p.btm {
    text-align: center;
  }

  .versionList li.addli {
    background: #F0EFEF;
    color: #666;
    text-align: center;
    line-height: 300px;
    font-size: 20px;
    cursor: pointer;
  }

  .versionList li.addli:hover {
    background: #fff;
  }

  .versionBtn {
    display: inline-block;
    cursor: pointer;
    width: 66px;
    height: 30px;
    border: none;
    background: #30CFA1;
    border-radius: 15px;
    color: #fff;
  }

  .versionBtn:hover {
    background: #fff;
    color: #333;
  }

  .addVersion {
    width: 800px;
  }

  .insideDialog {
    width: 300px;
  }

  .remarkVersion {
    width: 350px;
    height: 60px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    line-height: 18px;
    padding: 10px 22px;
  }

  .ql-editor {
    height: 200px !important;
  }

</style>
<template>
  <div class="flexOne">
    <div class="versionList">
      <ul>
        <template v-for="(item,index) in dataList">
          <li :key="`vl_`+index">
            <div v-if='item.Status==1' class="versionListLayer">
              <div @click="outerVisible = true;dialogTitle=$t('objFill.xiugaixtbb'),updateDate(item.Id)"
                style="width: 90px; height: 30px;margin: 260px 0 0 85px; cursor: pointer; text-align: center; line-height: 30px;font-size: 14px; border-radius: 15px; border: 1px solid #fff;">
                <i class="iconfont icon-img_bianji_small" style="font-size: 14px;"></i>
                {{$t('pub.edit')}}
              </div>
            </div>
            <p class="title">{{item.VersionsName}}({{item.EmployeeNum=='0'?$t('pub.unlimitedSel'):item.EmployeeNum}})</p>
            <pre v-html="item.Description"></pre>
            <p class="btm">
              <input class="versionBtn" @click="outerVisible = true;dialogTitle=$t('objFill.xiugaixtbb'),updateDate(item.Id)"
                type="button" :value="$t('pub.updateMsg')" />
              <input class="versionBtn" @click="goUrl('versionspermissionList',item.Id)" type="button" :value="'ERP '+$t('objFill.caidan')" />
              <input class="versionBtn" @click="goUrlApp('appversionsPermissionList',item.Id)" type="button"
                :value="'APP '+$t('objFill.caidan')" />
            </p>
          </li>
        </template>
        <li class="addli" @click="outerVisible = true;dialogTitle=$t('objFill.tianjiaxtbb'),clearMessage()">
          <i class="iconfont icon-plus" style="font-size: 80px;color:#E1E1E1"></i>
        </li>
      </ul>
    </div>

    <el-dialog custom-class='addVersion' :title="dialogTitle" :visible.sync="outerVisible" center>
      <el-form :model="form">
        <table class="layerTable">
          <tr>
            <td><span>{{$t('objFill.banbenmc')}}：</span></td>
            <td><el-input maxlength="14" class="w150" v-model="addMsg.VersionsName" type="text" /></td>
          </tr>
          <tr>
            <td><span class="fl">{{$t('objFill.banbenms')}}：</span></td>
            <td>
              <quill-editor v-model="addMsg.Description">
              </quill-editor>
            </td>
          </tr>
          <tr>
            <td><span>{{$t('objFill.zhanghusl')}}：</span></td>
            <td><el-input @keyup.native="checkInteger(addMsg,'EmployeeNum')" class="w150" v-model="addMsg.EmployeeNum"
                type="text" /></td>
          </tr>
          <tr>
            <td><span>{{$t('objFill.shifoukq')}}：</span></td>
            <td>
              <el-switch v-model="addMsg.Status" active-value="0" inactive-value="1"></el-switch>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false,getList()">{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" type="primary" @click="innerVisible=true,addData()" >{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogTitle: '',
        insideDialogTxt: this.$t('tips.saveYes'),
        outerVisible: false,
        innerVisible: false,
        isRight: true,
        dataList: {},
        form: {},
        msg: {
          pageIndex: 1,
          pageSize: 99,
          "Status": -1,
          "VersionsName": '',
        },
        addMsg: {
          EmployeeNum: '',
          id: '',
          Status: '0',
          VersionsName: '',
          Description: ''
        }
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList() {
        this.apipost("admin_get_SysVersionsGetPageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      addData() {
        if (this.addMsg.EmployeeNum == '') {
          this.$message.warning(this.$t('objFill.qingsrzhsl'))
          return
        }
        if (this.addMsg.VersionsName == '') {
          this.$message.warning(this.$t('objFill.qingsrbbmc'))
          return
        }
        this.apipost("admin_post_SysVersionsSet", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message)
            this.outerVisible = false;
            this.getList()
          } else {
            this.$message.error(res.data.message)

          }
        }, err => {})
      },
      updateDate(id) {
        this.addMsg.id = id;
        this.apipost('admin_get_SysVersionsGet', {
          VersionsId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg.Status = res.data.data.Status.toString()
            this.addMsg.VersionsName = res.data.data.VersionsName;
            this.addMsg.Description = res.data.data.Description;
            this.addMsg.EmployeeNum = res.data.data.EmployeeNum
          } else {}
        }, err => {})

      },
      clearMessage() {
        this.addMsg = {
          Status: 0,
          VersionsName: '',
          Description: ''
        }
      },
      goUrl(path, id) {
        this.$router.push({
          name: path,
          query: {
            "id": id,
            blank: 'y',
            tab: 'ERP菜单'
          }
        })
      },
      goUrlApp(path, id) {
        this.$router.push({
          name: path,
          query: {
            "id": id,
            blank: 'y',
            tab: 'APP菜单'
          }
        })
      }



    },
  }

</script>
