<template>
  <a-modal
    v-model="opened"
    :title="title"
    centered
    :maskClosable="false"
    :width="800"
    :footer="null"
    @cancel="cancel"
  >
    <a-spin :spinning="spinning" tip="Loading...">
      <a-form-model
        id="expenseReimbursementAddform"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="申请人" prop="applyPersonSn">
              <employee style="width: 100%;" @change="employeeChange" id="expenseReimbursement-Employee" v-model="form.applyPersonSn"></employee>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="申请部门" prop="applyDepartmentSn">
              <department style="width: 100%;" @change="departementChange" id="expenseReimbursement-Department" v-model="form.applyDepartmentSn"></department>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="费用类型" prop="expenseType">
              <v-select
                code="EXPENSE_TYPE"
                id="expenseReimbursement-expenseType"
                v-model="form.expenseType"
                allowClear
                placeholder="请选择费用类型"
              ></v-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="费用产生月" prop="expenseDate">
              <a-month-picker
                placeholder="请选择月份"
                v-model="form.expenseDate"
                locale="zh-cn"
                @change="expenseDateChange"
                :disabled-date="disabledDate"
                style="width: 100%;"/>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="主题" prop="title">
              <a-textarea
                id="expenseReimbursementAdd-title"
                :maxLength="100"
                :rows="3"
                v-model.trim="form.title"
                placeholder="请输入(最多100个字符)"
                allowClear />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="详细说明" prop="content">
              <a-textarea
                id="expenseReimbursementAdd-content"
                placeholder="请输入详细说明(最多500个字符)"
                v-model.trim="form.content"
                :rows="3"
                :maxLength="500"
                allowClear/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="附件" help="说明：单个文件小于10Mb，最多10个附件。">
              <Upload
                style="height: 100%;"
                id="noticeEdit-attachList"
                v-model="form.expenseAccountFilesList"
                ref="attachList"
                :fileSize="10"
                :maxNums="10"
                fileType="*"
                uploadType="attach"
                :action="attachAction"
                @change="changeAttach"
                upText="上传附件"></Upload>
            </a-form-model-item>
          </a-col>
        </a-row>
        <div style="text-align: center;margin-top: 20px;">
          <a-button type="primary" :loading="spinning" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
          <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
        </div>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { VSelect, Upload, STable } from '@/components'
import moment from 'moment'
import department from './department.js'
import employee from './employee.js'
import { expenseAccountDetail, expenseAccountSave } from '@/api/expenseManagement.js'
export default {
  name: 'BaseDataModal',
  components: { VSelect, Upload, STable, department, employee },
  props: {
    show: [Boolean],
    itemSn: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      opened: this.show,
      expenseAccountSn: this.itemSn,
      spinning: false,
      title: '新增费用报销单',
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      attachList: [],
      attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
      form: {
        applyPersonSn: undefined, // 申请人
        applyDepartmentSn: undefined, //  申请部门
        expenseType: undefined, //  费用类型
        expenseDate: moment().locale('zh-cn').format('YYYY-MM'), //  费用产生月
        title: '', // 主题
        content: '' // 费用说明
      },
      rules: {
        applyPersonSn: [
          { required: true, message: '请选择申请人', trigger: 'change' }
        ],
        applyDepartmentSn: [
          { required: true, message: '请选择申请部门', trigger: 'change' }
        ],
        expenseType: [
          { required: true, message: '请选择费用类型', trigger: 'change' }
        ],
        expenseDate: [
          { required: true, message: '请选择费用产生月', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入主题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入详细说明', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel () {
      this.$emit('close')
    },
    pageInit () {
      this.$nextTick(() => {
        this.$refs.attachList.setFileList('')
        this.$refs.ruleForm.resetFields()
        if (this.expenseAccountSn) { //  编辑页
          this.getDetail()
          this.title = '编辑费用报销单'
        }
      })
    },
    // 申请人员
    employeeChange (v, r) {
      if (r.departmentSn) {
        this.form.applyDepartmentSn = r.departmentSn
      }
      this.$nextTick(() => {
        this.$refs.ruleForm.validateField(['applyPersonSn', 'applyDepartmentSn'])
      })
    },
    departementChange () {
      this.$nextTick(() => {
        this.$refs.ruleForm.validateField('applyDepartmentSn')
      })
    },
    expenseDateChange (v, d) {
      this.form.expenseDate = d
    },
    disabledDate (current) {
      return current && current > moment().endOf('day')
    },
    //  附件上传
    changeAttach (file) {
      this.attachList = JSON.parse(file)
      this.attachList.map(item => {
        item.fileType = item.extName
      })
    },
    //  详情
    getDetail () {
      this.spinning = true
      this.disabled = true
      expenseAccountDetail({ expenseAccountSn: this.expenseAccountSn }).then(res => {
        if (res.status == 200) {
          const data = res.data
          this.form = Object.assign(this.form, data)
          // 获取附件列表
          this.form.expenseAccountFilesList = ''
          this.attachList = res.data.expenseAccountFilesList
          this.$refs.attachList.setFileList(this.attachList)
        } else {
          this.$refs.ruleForm.resetFields()
        }
        this.spinning = false
        this.disabled = false
      })
    },
    // 保存基础信息
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(_this.form))
          form.expenseDate = form.expenseDate + '-01'
          form.expenseAccountFilesList = this.attachList
          _this.spinning = true
          console.log(form)
          expenseAccountSave(form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                if (this.expenseAccountSn) {
                  _this.$emit('refashData')
                } else {
                  _this.$router.push({ name: 'expenseReimbursementEdit', params: { sn: res.data.expenseAccountSn } })
                }
                _this.spinning = false
                _this.cancel()
              }, 200)
            } else {
              _this.spinning = false
            }
          })
        } else {
          return false
        }
      })
    }
  },
  watch: {
    show (newValue, oldValue) {
      this.opened = newValue
      if (newValue) {
        this.pageInit()
      }
    },
    itemSn (a, b) {
      this.expenseAccountSn = a
    }
  }
}
</script>
