<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="145px">
        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus" />
            <span>基本信息</span>
          </div>
          <!-- 卡片内容 -->
          <div>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="资产编号" prop="propNo">
                  <el-input disabled v-model="formData.property.propNo" placeholder="请输入资产编号"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资产名称" prop="propName">
                  <el-input disabled v-model="formData.property.propName" placeholder="请输入资产名称"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="资产状态" prop="propStatus">
                  <el-select disabled v-model="formData.property.propStatus" placeholder="请选择资产状态" class="customerSelectWidth">
                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMPANY_PROP_STATUS)" :key="dict.value"
                               :label="dict.label" :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上次维修/保养日期" prop="lastKeepDate">
                  <el-date-picker disabled clearable v-model="formData.property.lastKeepDate" type="date" value-format="yyyy-MM-dd"
                                  placeholder="选择上次维修/保养日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="维修/保养周期单位" prop="keepCycleType">
                  <el-select disabled v-model="formData.property.keepCycleType" placeholder="请选择维修/保养周期单位" clearable class="customerSelectWidth">
                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CYCLE_DICT)" :key="dict.value"
                               :label="dict.label" :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维修/保养周期" prop="keepCycle">
                  <el-input disabled v-model="formData.property.keepCycle" placeholder="请输入维修/保养周期"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus" />
            <span>维修\保养信息</span>
          </div>
          <!-- 卡片内容 -->
          <div>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="维修/保养日期" prop="keepDate">
                  <el-date-picker @blur="getNextKeepDate" clearable v-model="formData.keepDate" type="date" value-format="yyyy-MM-dd"
                                  placeholder="选择维修/保养日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下次维修/保养日期" prop="nextKeepDate">
                  <el-date-picker disabled clearable v-model="formData.property.nextKeepDate" type="date" value-format="yyyy-MM-dd"
                                  placeholder="选择下次维修/保养日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus" />
            <span>附件\备注信息</span>
          </div>
          <!-- 卡片内容 -->
          <div>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" v-model="formData.remark"/>
            </el-form-item>
            <el-form-item label="附件上传" prop="fileUrls">
              <FileUpload v-model="formData.fileUrls"/>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createPropertyKeep} from '@/api/company/property/propertykeep'
import FileUpload from '@/components/FileUpload'

export default {
  name: 'PropertyKeepCreate',
  components: {
    FileUpload,
  },
  data(){
    return{
      // 弹出层标题
      dialogTitle: '登记维修\\保养记录',
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        property:{
          id: undefined,
          propNo: undefined,
          propName: undefined,
          propStatus: undefined,
          lastKeepDate: undefined,
          nextKeepDate: undefined,
          keepCycleType: undefined,
          keepCycle: undefined,
        },
        fileUrls: undefined,
        remark: undefined,
        keepDate: undefined,
      },
      // 表单校验
      formRules: {
        keepDate: [{required: true, message: '维修\\保养日期不能为空', trigger: 'blur'}],
      },
    }
  },
  methods: {
    /** 打开弹窗 */
    async open(row){
      this.dialogVisible = true
      this.reset()
      this.formData.property = row
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        property:{
          id: undefined,
          propNo: undefined,
          propName: undefined,
          propStatus: undefined,
          lastKeepDate: undefined,
          nextKeepDate: undefined,
          keepCycleType: undefined,
          keepCycle: undefined,
        },
        fileUrls: undefined,
        remark: undefined,
        keepDate: undefined,
      }
      this.resetForm('formRef')
    },
    // 计算下次维修、保养时间
    getNextKeepDate(){
      if (this.formData.keepDate){
        const tempDate = new Date(this.formData.keepDate)
        const chooseType = this.formData.property.keepCycleType;
        const num = parseInt(this.formData.property.keepCycle)
        switch (chooseType) {
          case '01':
            tempDate.setFullYear(tempDate.getFullYear() + num);
            break;
          case '02':
            tempDate.setMonth(tempDate.getMonth() + num);
            break;
          case '03':
            tempDate.setDate(tempDate.getDate() + num);
            break;
          default:
            throw new Error('超出预期了，只能是年、月、天');
        }
        this.formData.property.nextKeepDate = tempDate
      }
    },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs['formRef'].validate()
      this.formLoading = true
      try {
        const data = this.formData
        // 提交
        await createPropertyKeep(data)
        this.$modal.msgSuccess('新增成功')
        this.dialogVisible = false
        this.$emit('success')
      } finally {
        this.formLoading = false
      }
    },
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 10px;
}
</style>
