<template>
  <div class="app-container">
    <div class="filter-container">
      <el-tabs type="card" @tab-click="tab_cliek">
        <el-tab-pane v-for="(item) in IncidentalTypes" :key="item.Value" :label="item.Name" />
        <el-form :inline="true" class="demo-form-inline" style="margin-bottom:10px;">
          <el-button icon="el-icon-plus" size="small" plain type="primary" @click="addTemplate">添加模板</el-button>
        </el-form>

        <el-table :data="s1Data" border height="700">
          <el-table-column
            label="模板名称"
            prop="TemplateName"
          />

          <el-table-column
            label="创建人"
            prop="CreateUserName"
          />

          <el-table-column
            label="创建时间"
            prop="CreateTime"
          />

          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button size="mini" @click="editTemplate(scope.row)">
                修改
              </el-button>
              <el-button size="mini" type="success" @click="removeTemplate(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          :current-page="pagerDto.PageIndex"
          :page-size="pagerDto.PageSize"
          background
          layout="prev, pager, next ,total ,jumper,sizes,slot "
          :total="pagerDto.total"
          @current-change="getData()"
        />

        <el-dialog :title=" (isEdit?'编辑':'添加')+'模板'" :visible.sync="dialogStartVisible">
          <el-form :model="row" label-width="120px">
            <el-form-item label="模板名称">
              <el-input v-model="row.TemplateName" autocomplete="off" />
            </el-form-item>

            <el-form-item
              v-for="(domain, index) in rowIncidentalFees"
              :key="domain.IncidentalType"
              :label="'计费' + (index+1)"
              :prop="'createDtoInfo.' + index + '.Node'"
            >
              <el-input v-model="domain.IncidentalFee" class="input-with-select">
                <el-select
                  slot="prepend"
                  v-model="domain.IncidentalType"
                  placeholder="计费类型"
                  filterable
                >
                  <el-option
                    v-for="item in canFeeTypes"
                    :key="item.Id"
                    :label="item.Name"
                    :value="item.Id"
                  />
                </el-select>
              </el-input>
              <el-button icon="el-icon-delete" style="margin-left:10px;" @click.prevent="removeIncidentalFee(domain)" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogStartVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
            <el-button @click="addIncidentalFee">新增计费项</el-button>
          </div>
        </el-dialog>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  _addTemplate,
  _updateTemplate,
  _getTemplateDto,
  _remoreTemplate,
  _queryPager
} from '@/api/firstTemplate'
import { _getFinanceIncidentalFeeType, _getFinanceIncidentalType } from '@/api/baseInfo'
export default {
  name: 'FeeTemplate',
  data() {
    return {
      pagerDto: {
        _Eq_FeeType: 1,
        PageIndex: 1,
        PageSize: 100,
        total: 0
      },
      s1Data: [],
      dialogStartVisible: false,
      rowIncidentalFees: [],
      canFeeTypes: [],
      FeeTypes: [],
      row: { TemplateName: '' },
      isEdit: false,
      status: 1,
      Status: [],
      IncidentalTypes: []
    }
  },
  created() {
    _getFinanceIncidentalType().then(response => {
      this.IncidentalTypes = response
    })
    _getFinanceIncidentalFeeType().then(response => {
      this.FeeTypes = response
      this.setCanFees()
      this.getData()
    })
  },
  methods:
    {
      save() {
        this.row.Details = this.rowIncidentalFees
        if (this.isEdit) {
          this.row.FeeType = this.status
          _updateTemplate(this.row).then(response => {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getData()
            this.dialogStartVisible = false
          })
        } else {
          this.row.FeeType = this.status
          _addTemplate(this.row).then(response => {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.getData()
            this.dialogStartVisible = false
          })
        }
      },
      addTemplate() {
        this.row.Id = 0
        this.row.TemplateName = ''
        this.row.rowIncidentalFees = []
        this.dialogStartVisible = true
        this.isEdit = false
      },
      editTemplate(row) {
        this.dialogStartVisible = true
        this.isEdit = true
        this.row = row
        this.rowIncidentalFees = []
        _getTemplateDto(this.row.Id).then(res => {
          this.rowIncidentalFees = res
        })
      },
      setCanFees() {
        this.canFeeTypes = []
        for (var i = 0; i < this.FeeTypes.length; i++) {
          if (this.FeeTypes[i].FeeType == this.status) { this.canFeeTypes.push(this.FeeTypes[i]) }
        }
      },

      getData(pageIndex) {
        this.pagerDto._Eq_FeeType = this.status
        if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex } else { this.pagerDto.PageIndex = 1 }
        _queryPager(this.pagerDto).then(res => {
          this.s1Data = res.Result
          this.pagerDto.total = res.TotalCount
        })
      },
      tab_cliek(t) {
        for (var i = 0; i < this.IncidentalTypes.length; i++) {
          if (this.IncidentalTypes[i].Name == t.label) {
            this.status = this.IncidentalTypes[i].Value
          }
        }
        this.getData()
        this.setCanFees()
      },
      removeTemplate(row) {
        this.$confirm('是否删除?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _remoreTemplate(row).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getData()
          })
        })
      },
      removeIncidentalFee(item) {
        var index = this.rowIncidentalFees.indexOf(item)
        if (index !== -1) {
          this.rowIncidentalFees.splice(index, 1)
        }
      },
      addIncidentalFee() {
        this.rowIncidentalFees.push({
          IncidentalType: '',
          IncidentalFee: ''
        })
      }

    }
}
</script>
<style scoped>
    .el-pagination
    {
         margin-top:10px;
    }
    .el-dialog .el-form .el-input, .el-dialog .el-form .el-select{
        width:300px;
    }
    .el-select--medium{
      width:150px!important;
    }
    .el-select--medium .el-input--medium{
      width:150px!important;
    }

    .el-table tbody tr:hover>td {
      background-color:#fdfad8!important
    }
    .el-tag {
      margin-right: 5px!important;
      clear: both;
      display: block;
      width:100px;
    }
    .el-tabs__content{
      margin-bottom: 10px;margin-left: 10px;border-left: 1px solid rgb(223, 228, 237);border-right: 1px solid rgb(223, 228, 237);width: 200px;
    }
</style>
