<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column label="类型名称">
          <template slot-scope="scope">
            {{scope.row.TYPE_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="是否系统预置" width="110">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.IS_PRESET=='1'?'success':'danger')">{{(scope.row.IS_PRESET==='1'?'Yes':'No')}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" width="110">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.IS_ENABLE=='1'?'success':'danger')">{{(scope.row.IS_ENABLE==='1'?'Yes':'No')}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="110">
          <template slot-scope="scope">
            {{scope.row.CREATE_ADMIN_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="修改人" width="110">
          <template slot-scope="scope">
            {{scope.row.UPDATE_ADMIN_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="Update time" width="180">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="Note" width="150">
          <template slot-scope="scope">
            {{scope.row.CREATE_REMARK}}
          </template>
        </el-table-column>
        <el-table-column label="排序" width="110">
          <template slot-scope="scope">
            {{scope.row.SORT_ORDER}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="Operation" width="180">
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click" v-if="permission.hasPermission(`finance/deal-type-edit`)">
              <el-button type="primary" size="small" @click.stop="">
                Operate on this data<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit" @click.native="handleEditShow(scope.row)">Edit
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-button type="primary" size="small" @click="handleAdd" icon="el-icon-plus"
                   v-if="permission.hasPermission(`finance/deal-type-add`)">新增交易类型
        </el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
    <el-dialog title="修改交易类型" :visible.sync="dialogEditFormVisible">
      <el-form :model="form" label-width="250px" class="form-dialog" v-loading="dialogEditLoading">
        <el-form-item label="类型名称">
          <el-input v-model="form.typeName"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" v-if="!form.isPreset">
          <el-switch v-model="form.isEnable" @change="chkEnable"></el-switch>
        </el-form-item>
        <el-form-item label="备注" v-if="!form.isPreset">
          <el-input v-model="form.createRemark"></el-input>
        </el-form-item>
        <el-form-item label="排序" v-if="!form.isPreset">
          <el-input v-model="form.sort" type="number" min="1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click.native="handleEdit">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import store from '@/utils/vuexStore'
  import permission from '@/utils/permission'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'finance_deal-type',
    components: {Pagination},
    mounted() {
      store.state.socket.onMessageCallback = this.onMessageCallback
      this.getData()
    },
    data() {
      return {
        allData: null,
        tableData: null,
        loading: true,
        dialogEditLoading: false,
        multipleSelection: [],
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        tool: tool,
        permission: permission,
        dialogEditFormVisible: false,
        auditId: null,
        loadingInstance: null,
        form: {
          id: null,
          typeName: null,
          isPreset: null,
          isEnable: null,
          createRemark: null,
          sort: 0,
        },
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleCurrentChange(page) {
        this.getData(page, this.pageSize)
      },
      handleSizeChange(pageSize) {
        this.getData(this.currentPage, pageSize)
      },
      handleAdd() {
        this.$router.push({path: `/finance/deal-type-add`})
      },
      handleEditShow(row) {
        this.dialogEditLoading = true
        this.auditId = row.ID
        this.dialogEditFormVisible = true
        let vueObj = this
        network.getData('finance/deal-type-get', {id: this.auditId}).then(response => {
          vueObj.dialogEditLoading = false
          vueObj.form = response
        })
      },
      handleEdit() {
        this.dialogEditFormVisible = false
        this.$message({
          message: '正在修改数据',
          type: 'info'
        })
        let path = 'finance/deal-type-edit'
        network.postData(path, this.form).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.getData(this.currentPage, this.pageSize)
        }).catch(response => {
        })
      },
      handleDel(id = null) {
        let obj = this
        this.$confirm('确定删除选定的数据？', 'Hint', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          let selectedIds = []
          if (id === null) {
            for (let val of obj.multipleSelection) {
              selectedIds.push(val.ID)
            }
          } else {
            selectedIds.push(id)
          }
          return network.postData(`finance/deal-type-delete`, {
            selected: selectedIds
          })
        }).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          obj.getData(obj.currentPage, obj.pageSize)
        }).catch(response => {

        })
      },
      getData(page, pageSize) {
        let vueObj = this
        network.getPageData(this, 'finance/deal-type', page, pageSize, null, function (response) {
          vueObj.allData = response
        })
      },
      onMessageCallback() {
        this.getData(this.currentPage, this.pageSize)
      },
      chkEnable(val) {
        if (!val) {
          this.$confirm('确定要关闭该交易类型？', 'Hint', {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
            this.form.isEnable = true
          })
        }
      }
    }
  }

</script>

<style scoped>
  .el-icon-lock, .el-icon-unlock {
    font-size: 20px;
    cursor: pointer;
  }
</style>
