<template>
  <div>
    <data-table ref="pagingTable" :options="options" :list-query="listQuery" @multi-actions="handleMultiAction">
      <template slot="filter-content">
        <el-input v-model="listQuery.params.userName" style="width: 200px" placeholder="搜索登录名" class="filter-item"/>
        <el-input v-model="listQuery.params.applyTimeParam" style="width: 200px" placeholder="搜索日期格式yyyyMM"
                  class="filter-item"/>
        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">
          添加
        </el-button>
      </template>
      <template slot="data-columns">
        <el-table-column type="selection" width="55"/>
        <el-table-column align="center" label="用户名">
          <template slot-scope="scope">
            <a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.userName }}</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型" prop="applyFlag" class-name="APPLY_TYPE" :formatter="dataFormatter"/>
        <el-table-column align="center" label="打车或地铁金额(元)" prop="applyMoney"/>
        <el-table-column align="center" label="日期" prop="applyTime" :formatter="formatDate"/>
      </template>
    </data-table>

    <el-dialog :visible.sync="dialogVisible" title="添加申请" width="500px">
      <el-form :model="formData" label-position="left" label-width="100px">
        <el-form-item label="用户">
          <el-select v-model="formData.userId" placeholder="请选择用户" :disabled="flag">
            <el-option
              v-for="item in userIdOptions"
              :key="item.id"
              :label="item.realName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报销类型">
          <el-select v-model="formData.applyFlag" placeholder="请选择报销类型">
            <el-option
              v-for="item in applyFlagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额(元)">
          <el-input type="number" v-model="formData.applyMoney"/>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="formData.applyTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import DataTable from '@/components/DataTable'
  import {userList} from '@/api/sys/user/user'
  import {saveData} from '@/api/apply/apply'
  import {mapGetters} from "vuex";
  import {formatDate} from '@/utils/index'
  import {dataFormatter} from '@/utils'
  import {getSelectOptions} from '@/api/sys/dict/dict'

  export default {
    name: 'XmApply',
    components: {DataTable},

    computed: {
      ...mapGetters([
        'userId'
      ])
    },
    data() {
      return {
        userIdOptions: [],
        applyFlagOptions: [],
        flag: true,
        defaultProps: {
          value: 'id',
          label: 'deptName',
          children: 'children'
        },
        dialogVisible: false,

        listQuery: {
          current: 1,
          size: 10,
          params: {
            userName: '',
            applyTimeParam: ''
          }
        },

        formData: {
          userId: '',
          avatar: '',
          applyFlag: '',
          applyMoney: 0,
          applyTime: null
        },

        options: {
          // 列表请求URL
          listUrl: '/apply/api/input/paging',
          // 启用禁用
          stateUrl: '/apply/api/input/state',
          deleteUrl: '/apply/api/input/delete',
          // 批量操作列表
          multiActions: [
            {
              value: 'delete',
              label: '删除'
            }
          ]
        }
      }
    },

    created() {
      userList().then(response => {
        this.userIdOptions = response.data
      });
      getSelectOptions('APPLY_TYPE').then(response => {
        this.applyFlagOptions = response.data
      });
    },

    methods: {
      dataFormatter,
      formatDate,
      handleUploadSuccess(response) {
        // 上传图片赋值
        this.formData.avatar = response.data.url
      },

      handleAdd() {
        this.formData = {}
        if (this.userId === '10001') {
          this.flag = false
        } else {
          this.formData.userId = this.userId
          this.flag = true
        }
        this.dialogVisible = true
      },

      handleUpdate(row) {
        if (this.userId === '10001') {
          this.flag = false
        }
        this.dialogVisible = true
        this.formData = row
        console.log(JSON.stringify(this.formData))
      },

      departSelected(data) {
        this.formData.departId = data.id
      },

      handleSave() {
        saveData(this.formData).then(() => {
          this.$message({
            type: 'success',
            message: '用户修改成功!'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      },

      // 批量操作监听
      handleMultiAction(obj) {
        if (obj.opt === 'cancel') {
          this.handleCancelOrder(obj.ids)
        }
      }
    }
  }
</script>
