<template>
  <el-form
    ref="form"
    :model="giftForm"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm"
    label-position="right"
    style="margin-top: 20px"
  >
    <el-form-item label="上架时间" prop="releaseType">
      <el-radio-group v-model="giftForm.releaseType">
        <el-radio :label="1">
          立即上架
        </el-radio>
        <el-radio :label="2">
          自定义上架时间段
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="form-item-mt" v-if="giftForm.releaseType === 2" prop="limitTimeBegin">
      <el-date-picker
        v-model="giftForm.limitTimeBegin"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
    </el-form-item>
    <el-form-item label="显示状态" prop="proShowStatus">
      <el-radio-group v-model="giftForm.proShowStatus">
        <el-radio :label="1">
          上架状态就显示
        </el-radio>
        <el-radio :label="2">
          兑换状态下显示
        </el-radio>
      </el-radio-group>
      <div v-if="giftForm.proShowStatus == 1" style="margin-left:20px;">
        <el-checkbox v-model="giftForm.isNewGuestVisible" :true-label="1" :false-label="0">
          非会员可见
        </el-checkbox>
        <span class="tips">开启后，未开卡客户在积分商城也可见该礼品（前提是该礼品的“适用会员”包含最低会员卡等级）</span>
      </div>
    </el-form-item>
    <el-form-item label="上架规则" prop="ruleTitle" v-if="isNew">
      <span class="ruleTitle" v-show="giftForm.ruleTitle">{{ giftForm.ruleTitle }}</span>
      <el-button small type="text" @click="openRelating">
        修改上架规则
      </el-button>
    </el-form-item>
    <!-- 老数据兼容 -->
    <el-form-item
      label="展现门店"
      style="position:relative"
      v-if="!isNew"
    >
      <el-tooltip
        class="tips-content"
        effect="dark"
        popper-class="store-tips"
        placement="top-start"
      >
        <div slot="content" style="line-height:18px">
          会员的门店(常规设置)满足展示门店设置，则在礼品/优惠券列表可见
        </div>
        <i class="iconfont icon-xinxixianshi" style="color:#1890ff" />
      </el-tooltip>
      <vue-gic-store-linkage
        v-if="giftForm.useNewStoreWidget === 0 &&giftForm.creatorId"
        style="margin-left:10px"
        :creatorId="giftForm.creatorId"
        :disabled="true"
        :openFlag="giftForm.openFlag"
        @getDisGroupList="getDisGroupList"
        :msg="giftForm.sendChildData"
        ref="selectTree"
      />
      <span v-if="giftForm.useNewStoreWidget === 0&&giftForm.sendChildData.storeType === 1" class="store-tip">若选中的父分组下有新增的门店分组，系统不会默认选中此新增门店分组，请重新确认选择并保存礼品</span>
      <vue-gic-store-card
        v-show="giftForm.useNewStoreWidget === 1"
        style="margin-left:10px"
        class="pt10"
        ref="storeCard"
        :readonly="true"
        :uuid.sync="giftForm.uuid"
        scenes
      />
    </el-form-item>
    <relate-pop ref="relatePop" :integralMallProRuleId="giftForm.integralMallProRuleId" @finish="onPopFinish" />
  </el-form>
</template>

<script>
// import request from '@/service/request.js';
import getInputVal from '@/utils/common.js';
import relatePop from '@/components/relatePop';
export default {
  components: {
    relatePop,
  },
  props: {
    form: Object,
    isNew: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      giftForm: {
        useNewStoreWidget: 1,
        openFlag: false,
        creatorId: '',
        sendChildData: { // 公共组件的值
          storeType: 1,
          storeGroupIds: '',
          storeIds: [],
        },
        uuid: '',
      }, // 表单的值
      groupIdDisableList: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 24 * 3600 * 1000;
        },
      },
      rules: {
        ruleTitle: [{ required: true, message: '请选择上架规则' }],
        proShowStatus: [{ required: true, message: '请选择显示状态', trigger: 'change' }],
        releaseType: [{ required: true, message: '请选择上架时间', trigger: 'change' }],
        limitTimeBegin: [{ required: true, message: '请选择时间', trigger: 'change' }],
      },
      getTimeAll: getInputVal.formatDate,
    };
  },
  computed: {
    showComponent () {
      return this.isAdd === true;
    },
  },
  watch: {
    form: {
      handler (val) {
        console.log(val);
        this.giftForm = JSON.parse(JSON.stringify(val));
        if (this.giftForm.useNewStoreWidget == 1) {
          this.$nextTick(_ => {
            this.$refs.storeCard && this.$refs.storeCard.init();
          });
        } else {
          if (this.giftForm.sendChildData.storeType === 1) {
            console.log('groupIdDisableList====>');
            console.log(this.groupIdDisableList);
            if (this.groupIdDisableList.length) {
            //   const arr = this.sendChildData.storeGroupIds;
            //   for (let i = 0; i < arr.length; i++) {
            //     if (this.groupIdDisableList.indexOf(arr[i]) !== -1) {
            //       arr.splice(i, 1);
            //       i--;
            //     }
            //   }
            //   this.sendChildData.storeGroupIds = arr.join(',');
            }
          }
        }
      },
      immediate: true,
    },
  },
  mounted () {
  },
  methods: {
    getDisGroupList (arr) {
      console.log('methods---groupIdDisableList====>');
      console.log(arr);
      this.groupIdDisableList = arr;
    },
    openRelating () {
      this.$refs.relatePop.showPop();
    },
    onPopFinish (row) {
      const { ruleTitle, integralMallProRuleId } = row;
      this.giftForm.ruleTitle = ruleTitle;
      this.giftForm.integralMallProRuleId = integralMallProRuleId;
      this.$refs.relatePop.closePop();
      this.giftForm = Object.assign({}, this.giftForm);
      this.$refs.form.clearValidate('ruleTitle');
    },
    vaidataDataPicker () {
      const endTime = this.giftForm.limitTimeBegin[1];
      const startTime = this.giftForm.limitTimeBegin[0];
      const currentTime = new Date().getTime();
      return endTime > currentTime && endTime > startTime;
    },
    submit () {
      return new Promise((resolve) => {
        this.$refs.form.validate(val => {
          if (val) {
            const { releaseType, proShowStatus, isNewGuestVisible, ruleTitle, integralMallProRuleId, sendChildData: { storeType, storeGroupIds, storeIds }, useNewStoreWidget, uuid } = this.giftForm;
            const params = {
              proShowStatus: proShowStatus, // 显示状态
              releaseType: releaseType, // 上架状态
              limitTimeBegin: releaseType === 2 ? this.getTimeAll(this.giftForm.limitTimeBegin[0]) : '', // 定时上架开始时间
              limitTimeEnd: releaseType === 2 ? this.getTimeAll(this.giftForm.limitTimeBegin[1]) : '', // 定时上架结束时间
              isNewGuestVisible: proShowStatus == 1 ? isNewGuestVisible : 0, // 新客是否可见 0：新客不可见、1：新客可见'
              showStore: storeType, // 显示门店 0所有 1部分分类 2部分门店
            };
            // 校验定时上架时间
            if (this.giftForm.releaseType == 2 && !this.vaidataDataPicker()) return this.$message.error('定时上架结束时间必须大于当前时间和开始时间');
            params.useNewStoreWidget = useNewStoreWidget;
            if (useNewStoreWidget === 0) {
              if (storeType === 1) {
                if (storeGroupIds) {
                  params.storeGroupIds = storeGroupIds || '';
                }
              } else if (storeType === 2) {
                if (storeIds.length) {
                  params.storeIds = storeIds.map(v => v.storeId).join(',');
                } else {
                  params.storeIds = '';
                }
              }
            } else if (useNewStoreWidget === 1) {
              params.storeWidgetId = uuid;
            }
            if (this.isNew) {
              params.ruleTitle = ruleTitle;
              params.integralMallProRuleId = integralMallProRuleId;
              params.newRuleFlag = 1;
            } else {
              params.newRuleFlag = 0;
            }
            console.log(params);
            resolve(params);
          } else {
            resolve(false);
          }
        });
      });
    },
  },
};
</script>

<style scoped>
.ruleTitle{
width: fit-content;
height: 32px;
background: #F7F8FA;
border-radius: 2px;
border: 1px solid #DCDFE6;
margin-right: 10px;
padding: 6px 12px;
font-size: 14px;
}
.el-form-item  {
    margin-left: 32px;
}
</style>
