<template>
  <div class="form-box">
    <el-form ref="form" :disabled="!!$route.query.type" :rules="rules" :model="data" size="mini" label-width="150px">
      <div class="form-set-info">
        <div class="sub-title">信息设置</div>
        <el-checkbox-group v-model="checkList" @change="checkboxChange">
          <div class="field-list" v-for="(item, index) in fieldList" :key="index">
            <div class="field-list_title">{{ item.title }}</div>
            <div class="field-list_content">
              <el-checkbox
                style="margin: 0 90px 10px 10px"
                :disabled="cItem.disabled ? cItem.disabled : false"
                :label="cItem.key"
                v-for="cItem in item.fields"
                :key="cItem.key"
              >
                <div class="checkbox">
                  {{ cItem.label }}&nbsp;&nbsp;&nbsp;必填：
                  <el-radio
                    @change="checkboxChange"
                    v-model="cItem.required"
                    :disabled="cItem.disabled ? cItem.disabled : false"
                    label="1"
                    >是</el-radio
                  >
                  <el-radio
                    @change="checkboxChange"
                    v-model="cItem.required"
                    :disabled="cItem.disabled ? cItem.disabled : false"
                    label="2"
                    >否</el-radio
                  >
                </div>
              </el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div class="form-set-pay">
        <div class="sub-title">缴费设置</div>
        <!--导入功能 新增  -->
        <el-form-item label="批量导入功能:">
          <el-radio v-model="data.can_import" :label="1">开启</el-radio>
          <el-radio v-model="data.can_import" :label="0">关闭</el-radio>
        </el-form-item>
        <el-form-item label="缴费功能:">
          <el-radio v-model="data.can_pay" :label="1">开启</el-radio>
          <el-radio v-model="data.can_pay" :label="0">关闭</el-radio>
        </el-form-item>
        <template v-if="!!data.can_pay">
          <el-form-item label="价格：" prop="pay_price">
            <el-input style="width: 20%" v-model="data.pay_price"></el-input>
          </el-form-item>
          <el-form-item label="开票功能:">
            <el-radio v-model="data.can_invoice" :label="1">开启</el-radio>
            <el-radio v-model="data.can_invoice" :label="0">关闭</el-radio>
          </el-form-item>
          <!-- 缴费方式 新增-->
          <el-form-item label="缴费方式:" prop="pay_type">
            <el-select v-model="data.pay_type" multiple>
              <el-option v-for="item in payType" :key="item.key" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线下支付联系方式：" prop="offline_info" v-if="data.pay_type.includes('3')">
            <el-input style="width: 20%" v-model="data.offline_info"></el-input>
          </el-form-item>
          <el-form-item label="线下支付信息：" prop="offline_more_info" v-if="data.pay_type.includes('3')">
            <v-editor style="width: 500px" :maxHeight="200" :disabled="!!$route.query.type" v-model="data.offline_more_info"></v-editor>
          </el-form-item>
          <el-form-item label="单位优惠:">
            <el-radio v-model="data.can_company" :label="1">开启</el-radio>
            <el-radio v-model="data.can_company" :label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item label="单位优惠金额:" prop="company_price" v-if="data.can_company">
            <el-input style="width: 20%" v-model="data.company_price"></el-input>
          </el-form-item>
          <el-form-item label="跳转:">
            <el-radio v-model="data.can_jump" :label="1">开启</el-radio>
            <el-radio v-model="data.can_jump" :label="0">关闭</el-radio>
          </el-form-item>
          <template v-if="!!data.can_jump">
            <el-form-item label="跳转链接:" prop="jump_url">
              <el-input style="width: 20%" v-model="data.jump_url"></el-input>
            </el-form-item>
          </template>
          <el-form-item label="跳过支付:">
            <el-radio v-model="data.can_skip_pay" :label="1">开启</el-radio>
            <el-radio v-model="data.can_skip_pay" :label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item label="跳过文案:" prop="skip_pay_title" v-if="!!data.can_skip_pay">
            <el-input style="width: 20%" v-model="data.skip_pay_title"></el-input>
          </el-form-item>
          <el-form-item label="支付平台:" prop="shop_id">
            <el-select v-model="data.shop_id" placeholder="请选择">
              <el-option v-for="item in shopMap" :key="item.key" :label="item.value" :value="item.key"> </el-option>
            </el-select>
          </el-form-item>
        </template>
      </div>
      <div class="form-set-page">
        <div class="sub-title">页面设置</div>
        <el-form-item label="标题:" prop="title">
          <el-input style="width: 20%" v-model="data.title"></el-input>
        </el-form-item>
        <el-form-item label="页面头部:" prop="desc">
          <v-editor :disabled="!!$route.query.type" v-model="data.desc"></v-editor>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import VEditor from '@/components/tinymce/Index.vue'
export default {
  components: { VEditor },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      payType: [
        { key: '1', value: '微信' },
        { key: '2', value: '支付宝' },
        { key: '3', value: '线下支付' }
      ],
      rules: {
        title: { required: true, message: '请填写标题', trigger: 'blur' },
        pay_price: [
          { required: true, message: '请填写支付金额', trigger: 'blur' },
          {
            trigger: 'blur',
            min: 0,
            validator(rule, value, callback) {
              if (Number(value) > 0) {
                callback()
              } else {
                callback(new Error('支付金额不能小于等于0元'))
              }
            }
          }
        ],
        jump_url: { required: true, message: '请填写跳转链接', trigger: 'blur' },
        shop_id: { required: true, message: '请选择支付平台', trigger: 'change' },
        skip_pay_title: { required: true, message: '请填写跳过支付文案', trigger: 'blur' },
        pay_type: { required: true, message: '请填选择缴费方式', trigger: 'change' },
        company_price: [
          { required: true, message: '请填写单位优惠金额', trigger: 'blur' },
          {
            trigger: 'blur',
            min: 0,
            validator(rule, value, callback) {
              if (Number(value) > 0) {
                callback()
              } else {
                callback(new Error('优惠金额不能小于等于0元'))
              }
            }
          }
        ]
      },
      options: [],
      checkList: [],
      fieldList: [
        {
          title: '个人信息',
          fields: [
            { key: 'name', label: '姓名', required: '1', disabled: true },
            { key: 'mobile', label: '电话', required: '1', disabled: true },
            { key: 'gender', label: '性别', required: '1' },
            { key: 'email', label: '邮箱', required: '1' },
            { key: 'company', label: '公司', required: '1' },
            { key: 'position', label: '职位', required: '1' },
            { key: 'number', label: '编号', required: '1' },
            { key: 'country', label: '国籍', required: '1' },
            { key: 'provinces', label: '省份', required: '1' },
            { key: 'city', label: '城市', required: '1' },
            { key: 'address', label: '地址', required: '1' },
            { key: 'fixed_telephone', label: '固话', required: '1' },
            { key: 'industry', label: '行业', required: '1' },
            { key: 'id_number', label: '身份证号码', required: '1' }
          ]
        },
        {
          title: '社交信息',
          fields: [
            { key: 'wechat', label: '微信', required: '1' },
            { key: 'qq', label: 'QQ', required: '1' },
            { key: 'ding', label: '钉钉', required: '1' },
            { key: 'weibo', label: '微博', required: '1' }
          ]
        },
        {
          title: '入住信息',
          fields: [
            { key: 'check_in_time', label: '入住时间', required: '1' },
            { key: 'check_out_time', label: '离店时间', required: '1' },
            { key: 'room_type', label: '房型', required: '1' },
            { key: 'breakfast', label: '早餐', required: '1' }
          ]
        }
      ]
    }
  },
  computed: {
    shopMap() {
      return this.$store.state.commonMap.details_shop_map
    },
    payTypeMap() {
      return this.data.pay_type
    }
  },
  created() {},
  mounted() {
    this.setInfoFields()
  },
  methods: {
    // 信息设置数据回显
    setInfoFields() {
      this.fieldList = this.fieldList.reduce((a, b) => {
        b.fields.map(item => {
          const findData = this.data.user_fields.find(fData => fData.key === item.key)
          if (findData) {
            this.checkList.push(findData.key)
            item.required = findData.required ? '1' : '2'
          }
          return item
        })
        a.push(b)
        return a
      }, [])
    },
    // 信息设置选择后 吧选择的编程后台需要的数据
    checkboxChange() {
      this.data.user_fields = this.fieldList.reduce((a, b) => {
        b.fields.forEach(item => {
          const findData = this.checkList.find(fData => fData === item.key)
          if (findData) {
            a.push({ key: item.key, required: !!(item.required === '1'), enable_edit: true })
          }
        })
        return a
      }, [])
      this.data.pay_type = this.data.pay_type.toString()
    },
    submitForm() {
      let flag = false
      this.$refs.form.validate(valid => {
        if (valid) {
          this.checkboxChange()
          flag = true
        }
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.sub-title {
  line-height: 100%;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  border-left: 3px solid #1655B2;
  padding-left: 7px;
  margin-bottom: 25px;
}
.form-box {
  padding-top: 15px;
}
::v-deep {
  .form-set-info {
    .el-form-item__content {
      display: flex;
      align-items: center;
    }
    .el-icon-remove-outline {
      font-size: 22px;
      margin-left: 10px;
      color: rgba(214, 214, 214, 1);
      cursor: pointer;
    }
    .required {
      margin-left: 15px;
    }
  }
}
.form-set-pay {
  border-bottom: 1px solid #d6d6d6;
  padding: 25px 0 15px;
}
.form-set-page {
  padding: 25px 0 15px;
  border-bottom: 1px solid #d6d6d6;
}
.form-set-info {
  border-bottom: 1px solid #d6d6d6;
  padding-bottom: 30px;
  .field-list {
    margin-bottom: 30px;
    .field-list_title {
      font-size: 16px;
      font-weight: bold;
      line-height: 100%;
      color: #333333;
    }
    .field-list_content {
      padding-top: 15px;
      .checkbox {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
