<template>
  <view>
    <view class="tit">
      <text v-if="readonly">更新时间: {{update_time}}</text>
      <text>其他庆祝宴</text>
    </view>
    <view class="card">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="breedingForm">
        <u-form-item labelWidth="auto" label="宴席类型" required prop="types" borderBottom>
          <u--input :readonly="readonly" v-model="formData.types" placeholder="请输入宴席类型"></u--input>
        </u-form-item>
        <picker mode="date" @change="changeDate" :disabled="readonly">
          <u-form-item labelWidth="auto" label="时间" required prop="start_date" borderBottom>
            <u--input :readonly="readonly" :value="formData.start_date" style="pointer-events: none;" placeholder="请选择时间" disabled
              disabledColor="#fff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </picker>
        <u-form-item labelWidth="auto" label="地点" required prop="address" borderBottom>
          <u--input :readonly="readonly" v-model="formData.address" placeholder="请输入地点"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="人数" required prop="people_count" borderBottom>
          <u--input :readonly="readonly" v-model="formData.people_count" type="number" placeholder="请输入人数"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="请包办" required prop="serve" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.serve" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:2,label:'酒店'},{value:1,label:'一条龙'},{value:0,label:'只请厨师'}]" :key="index"
              :label="item.label" :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无歌舞表演" required prop="perform" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.perform" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无交通工具" required prop="vehicle" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.vehicle" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无住宿" required prop="in_hotel" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.in_hotel" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
      </u--form>

    </view>
  </view>
</template>

<script>
  export default {
    props: {
      readonly: {
        type: Boolean,
        default: false
      },
      datas: {
        type: Object,
        default: null
      },
      update_time: {
        type: String,
        default: null
      },
    },
    data() {
      return {
        formData: {
          types: "", //宴席类型
          start_date: "", //时间\日期
          address: "", //地点
          people_count: "", //人数
          serve: "", // 包办服务
          perform: "", //演出
          host: "", //主持
          vehicle: "", //交通工具
          in_hotel: "", //住宿
        },
        rules: {

        }
      }
    },
    created() {
      this.initRules();
      if (this.$props.readonly && this.$props.datas) {
        this.formData = this.$props.datas;
        let keys = Object.keys(this.formData);
        keys.forEach(item => {
          if (!isNaN(this.formData[item]) && this.formData[item] != '' && this.formData[item] != null && this
            .formData[item] != undefined) {
            parseFloat(this.formData[item]) != 'NaN' ? this.formData[item] = parseFloat(this.formData[item]) : null;
          }
        })
      }
    },
    watch: {
      datas(newValue, oldValue) {
        if (this.$props.readonly && newValue) {
          this.formData = this.$props.datas;
          let keys = Object.keys(this.formData);
          keys.forEach(item => {
            if (!isNaN(this.formData[item]) && this.formData[item] != '' && this.formData[item] != null && this
              .formData[item] != undefined) {
              parseFloat(this.formData[item]) != 'NaN' ? this.formData[item] = parseFloat(this.formData[item]) :
                null;
            }
          })
        }
      }
    },
    methods: {
      // 初始化校验
      initRules() {
        let arr = Object.keys(this.formData);
        arr.forEach(key => {
          this.rules[key] = {
            validator: (rule, value, callback) => {
              this.$refs.breedingForm.clearValidate(rule.field);
              value.trim() !== '' ? callback() : callback('不能为空');
            },
            trigger: ['change', 'blur']
          }
        })
      },
      // 校验
      async validate() {
        return await this.$refs.breedingForm.validate();;
      },
      // 选择土地规划
      changeLanPlan(e) {
        let index = e.currentTarget.dataset.index;
        this.formData.planning = e.detail.value;
      },
      // 选择时间
      changeDate(e) {
        this.formData.start_date = e.detail.value;
      },
      // 新增开设店铺
      pushBreedingList() {
        this.formData.push({})
      },
      // 删除开设店铺
      removeBreedingList(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.formData.splice(index, 1);
            }
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  .card {

    background-color: #fff;

    margin: 28rpx;

    padding: 28rpx;

    margin-top: 0;

    padding-top: 0;

    border-radius: 0 0 14rpx 14rpx;

  }



  .tit {

    margin: 28rpx 28rpx 0 28rpx;

    padding: 28rpx 28rpx 0 28rpx;

    border-radius: 14rpx 14rpx 0 0;

    background-color: $theme-oa-color;

    color: white;

    height: 100rpx;

    display: flex;

    justify-content: space-between;

  }

  .title {
    font-weight: 500;
    font-size: 34rpx;

    &::before {
      width: 8rpx;
      height: 26rpx;
      border-radius: 4rpx;
      background-color: #0122c7;
      content: "";
      display: inline-block;
      margin-right: 8rpx;
    }
  }

  .delete {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }
</style>