<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions">
    <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="150px">
      <el-form-item label="商家ID" prop="shopId">
        <el-input
          v-model="formData.shopId" maxlength="20" placeholder="商家ID" disabled
        />
      </el-form-item>
      <el-form-item label="入驻处理" prop="checkHandle">
        <el-radio-group
          v-model="formData.checkHandle"
          @input="(e) => e === 0 ? (formData.effectiveDate = formData.dateType = formData.effectiveYear = '') : ''"
        >
          <el-radio :label="1">同意入驻</el-radio>
          <el-radio :label="0">拒绝入驻</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.checkHandle === 0" label="拒绝原因" prop="reason">
        <el-input v-model="formData.reason" type="textarea" placeholder="请输入拒绝原因" maxlength="520" :rows="3" show-word-limit />
      </el-form-item>
      <el-form-item v-if="formData.checkHandle === 1" label="日期类型" prop="dateType">
        <el-radio-group v-model="formData.dateType">
          <el-radio :label="1">即时生效</el-radio>
          <el-radio :label="2">指定日期</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="(formData.checkHandle === 1) && (formData.dateType === 2)" label="选择日期" prop="effectiveDate">
        <el-date-picker
          v-model="formData.effectiveDate"
          size="medium"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        v-if="(formData.checkHandle === 1) && (formData.dateType === 2)"
        label="生效时间" prop="effectiveYear"
      >
        <el-input v-model="formData.effectiveYear" placeholder="请输入生效时间" style="width: 200px;">
          <template #append>
            <div>年</div>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { settlementHandle } from '@/api/business'

export default {
  name: 'ApplicationProcessing',
  components: {
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '820px',
        title: ''
      },
      visible: false,
      activityList: [],
      formData: {
        shopId: '', // 店铺id
        checkHandle: '', // 1-同意入驻 0-拒绝入驻
        dateType: '', // 非后端参数
        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
        effectiveYear: '', // 生效时限（年）
        reason: '' // 处理原因
      },
      formRules: {
        shopId: [
          { required: true, message: '缺少商家ID' }
        ],
        checkHandle: [
          { required: true, message: '请选择入驻处理' }
        ],
        dateType: [],
        effectiveDate: [],
        effectiveYear: []
      }
    }
  },
  watch: {
    'formData.checkHandle': {
      deep: true,
      handler(val) {
        if (val === 1) {
          this.formRules.dateType = [
            { required: true, message: '请选择日期类型' }
          ]
        } else {
          this.formRules.dateType = []
        }
      }
    },
    'formData.dateType': {
      deep: true,
      handler(val) {
        if (val === 2) {
          this.formRules.effectiveDate = [
            { required: true, message: '请选择生效日期' }
          ]
          this.formRules.effectiveYear = [
            { required: true, message: '请输入生效时间' },
            { pattern: /^(0|[1-9][0-9]*)$/, message: '请输入正整数' }
          ]
        } else {
          this.formRules.effectiveDate = []
          this.formRules.effectiveYear = []
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    initList() {
    },
    handleOpen(params = {}) {
      this.modalOptions.title = '申请处理'
      this.$refs.formData && this.$refs.formData.resetFields()
      // this.formData = Object.assign(this.$options.data().formData, params)
      this.formData.shopId = params.shopId
      this.visible = true
      this.initList()
    },
    handleSubmit() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          const loading = this.$loading({ text: '提交中，请稍候……' })
          try {
            const { dateType, effectiveDate, ...otps } = this.formData
            const params = {
              ...otps,
              effectiveDate: dateType === 1 ? 'null' : dateType === 2 ? effectiveDate : ''
            }
            await settlementHandle(params)
            loading.close()
            this.$message({ message: `操作成功!`, type: 'success' })
            this.$emit('success')
            this.visible = false
          } catch (e) {
            loading.close()
          } finally {
            loading.close()
          }
        } else {
          this.$message({ message: '请输入相关信息', type: 'warning' })
          return false
        }
      })
    }
  }
}
</script>
