<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="$t('trials:reading:label:wlTplName')"
            prop="TemplateName"
          />
          <!-- 窗宽 -->
          <el-table-column
            :label="$t('trials:reading:label:wlTplWW')"
            prop="WW"
          />
          <!-- 窗位 -->
          <el-table-column
            :label="$t('trials:reading:label:wlTplWL')"
            prop="WL"
          />
          <el-table-column
            align="right"
            width="200"
          >
            <template slot="header">
              <!-- 新增 -->
              <el-button
                size="mini"
                @click="handleAdd"
              >{{ $t('common:button:new') }}</el-button>
            </template>
            <template slot-scope="scope">
              <!-- 编辑 -->
              <el-button
                type="text"
                size="mini"
                @click="handleEdit(scope.row)"
              >{{ $t('common:button:edit') }}</el-button>
              <!-- 删除 -->
              <el-button
                type="text"
                size="mini"
                @click="handleDelete(scope.row)"
              >{{ $t('common:button: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: {
    async getWL() {
      this.loading = true
      try {
        const res = await getUserWLTemplateList()
        this.tableData = res.Result
        this.loading = false
        this.$emit('getWwcTpl')
      } catch (e) {
        this.loading = false
      }
    },
    handleAdd() {
      this.customWwc.title = this.$t('common:button:new')
      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
    },
    async handleDelete(row) {
      // '是否确认删除？'
      var msg = this.$t('trials:reading:wlTemplate:delete')
      const confirm = await this.$confirm(
        msg,
        {
          type: 'warning',
          distinguishCancelAndClose: true
        }
      )
      if (confirm !== 'confirm') return
      this.loading = true
      try {
        await deleteUserWLTemplate(row.Id)
        this.loading = false
        // 删除成功
        this.$message.success(this.$t('common:message:deletedSuccessfully'))
        this.getWL()
      } catch (e) {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
.wl-container {
  width: 100%;
  // ::v-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;
    }
  }
  // ::v-deep .el-table th,.el-table tr{
  //   background-color:  #1e1e1e !important;
  // }

}
</style>
