<template>
  <div v-loading="loading">
    <div class="base-dialog-body">
      <div class="wl-container">
        <el-table
          :data="tableData"
          style="width: 100%"
          class="wl-table"
        >
          <el-table-column
            label="名称"
            prop="TemplateName"
          />
          <el-table-column
            label="窗宽"
            prop="WW"
          />
          <el-table-column
            label="窗位"
            prop="WL"
          />
          <el-table-column
            align="right"
            width="200"
          >
            <template slot="header">
              <el-button
                size="mini"
                @click="handleAdd"
              >Add</el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleEdit(scope.row)"
              >Edit</el-button>
              <el-button
                type="text"
                size="mini"
                @click="handleDelete(scope.row)"
              >Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      v-if="customWwc.visible"
      :visible.sync="customWwc.visible"
      :close-on-click-modal="false"
      :title="customWwc.title"
      append-to-body
      width="400px"
      custom-class="base-dialog-wrapper"
    >
      <WLForm :row="row" @close="customWwc.visible = false" @getWL="getWL" />
    </el-dialog>

  </div>
</template>
<script>
import { getUserWLTemplateList, deleteUserWLTemplate } from '@/api/user'
import WLForm from './WLForm'
export default {
  name: 'WL',
  components: { WLForm },
  data() {
    return {
      tableData: [],
      loading: false,
      row: {},
      customWwc: { visible: false, title: '' } // 自定义调窗
    }
  },
  mounted() {
    this.getWL()
  },
  methods: {
    getWL() {
      this.loading = true
      getUserWLTemplateList().then(res => {
        this.tableData = res.Result
        this.loading = false
        this.$emit('getWwcTpl')
      }).catch(() => { this.loading = false })
    },
    handleAdd() {
      this.customWwc.title = this.$t('common:button:add')
      this.row = {}
      this.customWwc.visible = true
    },
    handleEdit(row) {
      this.customWwc.title = this.$t('common:button:edit')
      this.row = Object.assign({}, row)
      this.customWwc.visible = true
    },
    handleDelete(row) {
      var msg = this.$t('trials:staffResearch:message:confirmDel')
      this.$confirm(msg, {
        type: 'warning',
        distinguishCancelAndClose: true
      }).then(() => {
        this.loading = true
        deleteUserWLTemplate(row.Id).then(res => {
          this.loading = false
          // 删除成功
          this.$message.success(this.$t('common:message:deletedSuccessfully'))
          this.getWL()
        }).catch(() => { this.loading = false })
      })
    }
  }
}
</script>

<style lang="scss">
.wl-container {
  width: 100%;
  // /deep/ .el-table{
  //   background-color: #1e1e1e !important;
  // }

  .wl-table{
    .el-table__header-wrapper{
      th{
        background-color:  #1e1e1e !important;
        color: #dfdfdf;
      }
    }
    .el-table__body-wrapper{
      tr{
        background-color:  #1e1e1e !important;
        color: #dfdfdf;
      }
      tr:hover > td{
        background-color:  #1e1e1e !important;
      }
    }
    .el-table__empty-block{
      background-color:  #1e1e1e !important;
    }
  }
  // /deep/ .el-table th,.el-table tr{
  //   background-color:  #1e1e1e !important;
  // }

}
</style>
