<template>
  <div class="rates-container">
    <div class="title">
      <p>Rank-Based Rates</p>
      <el-button
        type="primary"
        class="addBtn"
        size="small"
        @click="handleAdd"
      >New</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      size="small"
      :data="list"
      max-height="300"
      stripe
      class="table"
    >
      <el-table-column type="index" width="40" />
      <el-table-column prop="RankName" label="Rank" show-overflow-tooltip min-width="100" />
      <el-table-column prop="Training" label="Training ($)" min-width="90" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.Training | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="RefresherTraining" label="Refresher Training ($)" min-width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.RefresherTraining | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Timepoint" align="center">
        <el-table-column
          prop="Timepoint"
          label="Regular ($)"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.Timepoint | rounding }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="TimepointIn48H"
          label="48-hour ($)"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.TimepointIn48H | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="TimepointIn24H"
          label="24-hour ($)"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.TimepointIn24H | rounding }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="Adjudication" align="center">
        <el-table-column
          prop="Adjudication"
          label="Regular ($)"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.Adjudication | rounding }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="AdjudicationIn48H"
          label="48-hour ($)"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.AdjudicationIn48H | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="AdjudicationIn24H"
          label="24-hour ($)"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.AdjudicationIn24H | rounding }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="Global" label="Global ($)" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.Global | rounding }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="Downtime" label="Downtime ($)" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.Downtime | rounding }}</span>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="Action"
        min-width="100"
      >
        <template slot-scope="scope" min-width="130">
          <el-button
            size="small"
            type="text"
            @click="handleEdit(scope.row)"
          >Edit</el-button>
          <el-button
            size="small"
            type="text"
            @click="handleDelete(scope.row)"
          >Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination style="text-align:right;margin-top:5px;" :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />

    <el-dialog
      :key="timer"
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="baseRateForm" label-width="190px" :rules="rules" :model="baseRateForm" size="small">
        <el-form-item label="Rank: " prop="RankName">
          <el-input v-model="baseRateForm.RankName" />
        </el-form-item>
        <el-form-item label="Training ($): " prop="Training">
          <!-- <el-input v-model="baseRateForm.Training" type="number" /> -->
          <el-input-number v-model="baseRateForm.Training" style="width:100%;" :min="0" />
        </el-form-item>
        <el-form-item label="Refresher Training ($): " prop="RefresherTraining">
          <el-input-number v-model="baseRateForm.RefresherTraining" style="width:100%;" :min="0" />
        </el-form-item>
        <el-form-item label="Timepoint ($): " prop="Timepoint">
          <!-- <el-input v-model="baseRateForm.Timepoint" type="number"  /> -->
          <el-input-number v-model="baseRateForm.Timepoint" style="width:100%;" :min="0" @input="timepointChange" />
        </el-form-item>

        <el-form-item label="Timepoint 48H ($): " prop="TimepointIn48H">
          <!-- <el-input v-model="baseRateForm.TimepointIn48H" type="number" /> -->
          <el-input-number v-model="baseRateForm.TimepointIn48H" style="width:100%;" :min="0" />
        </el-form-item>
        <el-form-item label="Timepoint 24H ($): " prop="TimepointIn24H">
          <!-- <el-input v-model="baseRateForm.TimepointIn24H" type="number" /> -->
          <el-input-number v-model="baseRateForm.TimepointIn24H" style="width:100%;" :min="0" />
        </el-form-item>
        <el-form-item label="Adjudication ($): " prop="Adjudication">
          <!-- <el-input v-model="baseRateForm.Adjudication" type="number" /> -->
          <el-input-number v-model="baseRateForm.Adjudication" style="width:100%;" :min="0" />
        </el-form-item>

        <el-form-item label="Adjudication 48H ($): " prop="AdjudicationIn48H">
          <!-- <el-input v-model="baseRateForm.AdjudicationIn48H" type="number" /> -->
          <el-input-number v-model="baseRateForm.AdjudicationIn48H" style="width:100%;" :min="0" />
        </el-form-item>
        <el-form-item label="Adjudication 24H ($): " prop="AdjudicationIn24H">
          <!-- <el-input v-model="baseRateForm.AdjudicationIn24H" type="number" /> -->
          <el-input-number v-model="baseRateForm.AdjudicationIn24H" style="width:100%;" :min="0" />
        </el-form-item>
        <el-form-item label="Global ($): " prop="Global">
          <el-input v-model="baseRateForm.Global" disabled type="number" />
        </el-form-item>

        <el-form-item label="Downtime ($): " prop="Downtime">
          <el-input-number v-model="baseRateForm.Downtime" style="width:100%;" :min="0" />
          <!-- <el-input v-model="baseRateForm.Downtime" type="number" /> -->
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" :disabled="btnDisabled" size="small" @click="handleSave">Ok</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getRankPriceList, addOrUpdateRankPrice, deleteRankPrice } from '@/api/financials'
const getListQueryDefault = () => {
  return {
    PageSize: 20,
    PageIndex: 1,
    Asc: false,
    SortField: ''
  }
}
export default {
  name: 'RankBasedRates',
  components: { Pagination },
  filters: {
    rounding(value) {
      return value ? Number(value).toFixed(2) : value
    }
  },
  data() {
    return {
      listQuery: getListQueryDefault(),
      list: [],
      listLoading: false,
      total: 0,
      baseRateForm: {},
      dialogVisible: false,
      btnDisabled: false,
      title: '',
      timer: '',
      rules: {
        RankName: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          { max: 50, message: 'The maximum length is 50' }
        ],
        Training: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        Timepoint: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        TimepointIn24H: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        TimepointIn48H: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        Adjudication: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        AdjudicationIn24H: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        AdjudicationIn48H: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        Global: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        Downtime: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        RefresherTraining: [{ required: true, message: 'Please specify', trigger: 'blur' }]
      }
    }
  },
  mounted() { this.getList() },
  methods: {
    getList() {
      this.listLoading = true
      getRankPriceList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => { this.listLoading = false })
    },
    handleAdd() {
      this.baseRateForm = {}
      this.timer = new Date().getTime()
      this.title = 'Add'
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.title = 'Edit'
      this.timer = new Date().getTime()
      this.baseRateForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('Confirm to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      })
        .then(() => {
          deleteRankPrice(row.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.list.splice(this.list.findIndex(item => item.Id === row.Id), 1)
                this.$message.success('Deleted successfully!')
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
    },
    handleSave() {
      this.$refs.baseRateForm.validate(valid => {
        if (valid) {
          this.btnDisabled = true
          addOrUpdateRankPrice(this.baseRateForm).then(res => {
            this.getList()
            this.btnDisabled = false
            this.$message.success('Saved successfully!')
            this.dialogVisible = false
          }).catch(() => { this.btnDisabled = false })
        }
      })
    },
    timepointChange() {
      this.baseRateForm.Global = this.baseRateForm.Timepoint / 2
    }
  }
}
</script>
<style lang="scss" scoped>
.rates-container {
  .title {
    position: relative;
    height: 35px;
    line-height: 35px;
    background: #e4ebf1;
    border-left: 3px solid #0fc8e0;
    padding-left: 5px;
    margin-bottom:10px;
    font-size: 13px;
    p{
      margin: 0;
    }
    .addBtn {
      position: absolute;
      right: 0px;
      top: 50%;
      height: 30px;
      margin-top: -15px;
    }
  }
}
</style>
