<template>
  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="900px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-form-item label="活动标题" prop="activityTitle">
          <el-input v-model="form.activityTitle" disabled placeholder="请输入活动标题" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="女生上限" prop="womenMaxNum">
            <el-input-number :min="0" v-model="form.womenMaxNum" placeholder="请输入女生人数上限"  disabled style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="男生上限" prop="manMaxNum">
            <el-input-number :min="0" v-model="form.manMaxNum" placeholder="请输入男生人数上限" disabled style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="女生已报名" prop="joinWomenNum">
            <el-input-number :min="0" v-model="form.joinWomenNum" placeholder="请输入女生人数上限" disabled  style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="男生已报名" prop="joinManNum">
            <el-input-number :min="0" v-model="form.joinManNum" placeholder="请输入男生人数上限" disabled style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="女生调整" prop="handWomenNum">
            <el-input-number :min="0" v-model="form.handWomenNum" placeholder="请输入女生人数调整"  style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="男生调整" prop="handManNum">
            <el-input-number :min="0" v-model="form.handManNum" placeholder="请输入男生人数调整" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { enableStatusList } from '@/constant/statusMap'
import { getTreeAreaCode } from '@/api/xq/areaCode'
import { addActivityShop, getActivityShop, updateActivityShop, updateActivityShopUser } from '@/api/xq/activityShop'
import { addBanner, getBanner } from '@/api/xq/banner'

export default {
  components: {
  },
  data () {
    return {
      enableStatusList,
      open: false,
      title: '调整相亲会报名人数',
      form:{
        id: undefined,
        activityCode: undefined,
        activityTitle: undefined,
        activityBanner: undefined,
        startTime: undefined,
        endTime: undefined,
        cityName: undefined,
        cityCode: undefined,
        address: undefined,
        activityText: undefined,
        womenMaxNum: undefined,
        manMaxNum: undefined,
        joinWomenNum: undefined,
        joinManNum: undefined,
        handManNum: undefined,
        handWomenNum: undefined,
        joinWomenPrice: undefined,
        joinManPrice: undefined,
        mustVip: undefined,
        mustAuth: undefined,
        priceText: undefined,
        createTime: undefined,
        updateTime: undefined
      },
      // 表单校验
      rules: {
        handManNum: [
          { required: true, message: "手动调整男生人数不能为空", trigger: "blur" }
        ],
        handWomenNum: [
          { required: true, message: "手动调整女生人数不能为空", trigger: "blur" }
        ],
      },
      buttonLoading: false,
      areaOption: [],
    }
  },
  created() {
    this.options();
  },
  methods: {
    init (id) {
      this.form.id = id || undefined;
      this.open = true;
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        if(this.form.id){
          getActivityShop(id).then(response => {
            this.form = response.data;
          });
        }
      })
    },
    options(){
      getTreeAreaCode().then(response => {
        response.data.forEach(city => {
          let cityList = city.children;
          cityList.forEach(no => {
            no.children = undefined
          })
        })
        this.areaOption = response.data
      })
    },
    // 表单提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
          updateActivityShopUser({
            ...this.form,
            cityCode: this.getCode(this.form.cityCode),
          }).then(data => {
            this.$modal.msgSuccess("修改成功");
            this.buttonLoading = false;
            this.open = false
            this.$emit('refreshDataList')
          }).finally(() => {
            this.buttonLoading = false;
          });
      })
    },
    getCode(code){
      if(!code){
        return code;
      }
      if(Array.isArray(code)){
        return code[code.length-1]
      }
      return code;
    }
  }
}
</script>
