<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">字段提交页面</div>
      <div class="app-container__item-body">
        <xd-base-dynamic-field
          is-cascader-save
          label-width="160px"
          ref="testForm"
          v-model="XdBaseFieldValue"
          :list="formList"
          size="medium"
        >
        </xd-base-dynamic-field>
        <div class="app-container__item-body-value">
          <xd-json-view :data="XdBaseFieldValue" show level="1"></xd-json-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import XdJsonView from "@/components/XdJsonView";
  import XdBaseDynamicField from "@/components/XdBaseDynamicField";

  

  export default {
    name: 'AppForm',
    components: {
      XdBaseDynamicField,
      XdJsonView
    },
    data() {
      return {
        XdBaseFieldValue: {},
        
        formList: [ ],
        formListKey: 'formListKey',
        
      }
    },
    
    computed:{
      fromData(){
        try{
          return JSON.parse(JSON.stringify(this.XdBaseFieldValue))
        }catch (e) {
          return this.XdBaseFieldValue
        }
       
      }
    },
    
    watch: {
      fromData:{
        deep: true,
        immediate: false,
        handler(n, o) {
          if(JSON.stringify(n) !== JSON.stringify(o)) {
            this.getFrom(n);
          }
          
        }
      }
    },
    
    created(){
      this.getFrom({})
    },


    methods: {
      getFrom(value){
        this.formList = [
          {
            label: '测试选择联动:',
            ele: 'xd-select-list',
            valueKey: 'project_name11',
            value: value['project_name11'] || 1,
            placeholder: '请选择测试选择联动',
            multiple: true,
            list: [
              {"label": "配置域名", "value": 1},
              {"label": "配置名字", "value": 2},
              {"label": "配置店铺", "value": 3},
            ]
          },
          {
            label: '测试选择联动:',
            ele: 'xd-select-list',
            valueKey: 'project_name',
            value: value['project_name'] || 1,
            placeholder: '请选择测试选择联动',
            list: [
              {"label": "配置域名", "value": 1},
              {"label": "配置名字", "value": 2},
              {"label": "配置店铺", "value": 3},
            ]
          },
          value['project_name'] === 1 &&{
            label: '配置域名:',
            ele: 'el-input',
            type: 'text',
            valueKey: 'domain_name',
            value: value['domain_name'] || '',
            placeholder: '输入配置域名',
            className: 'input40',
            rules: [
              {required: true, message: '输入配置域名', trigger: 'blur'},
            ]
          },
          value['project_name'] === 2 && {
            label: '配置名字:',
            ele: 'xd-radio-custom',
            valueKey: 'radio-custom',
            value: value['radio-custom'] || 1,
            setting: {
              list: [
                {value: 1, label: '实物商品', desc: '通过物流或<span class="red">自提方式</span>发货'},
                {value: 2, label: '电子票券', desc: '自动生成券码，到店核销'},
                {value: 3, label: '生活服务', desc: '自动生成券码，到店核销'},
                {value: 4, label: '线上显示', desc: '自动生成券码，到店核销'},
              ]
            },
            disabled: true,
            inline: false,
            notice: '如：设置16:00前下单，最早可提前2小时；16:00后下单，最早可提前1天。<br />若：用户在16点前下单，最早可选择当前下单时间往后2小时的时间；16点后下单，最早只能选择第2天。',
            rules: [
              {required: true, message: '请添加内容', trigger: 'change'},
            ],
          },
          value['project_name'] === 3 && {
            label: '配置店铺:',
            ele: 'xd-radio-custom',
            valueKey: 'radio-custom_1',
            value: value['radio-custom_1']|| 2,
            setting: {
              list: [
                {value: 1, label: '实物商品', desc: '通过物流或<span class="red">自提方式</span>发货'},
                {value: 2, label: '电子票券', desc: '自动生成券码，到店核销'},
                {value: 3, label: '生活服务', desc: '自动生成券码，到店核销'},
                {value: 4, label: '线上显示', desc: '自动生成券码，到店核销'},
              ]
            },
            disabled: true,
            inline: false,
            notice: '如：设置16:00前下单，最早可提前2小时；16:00后下单，最早可提前1天。<br />若：用户在16点前下单，最早可选择当前下单时间往后2小时的时间；16点后下单，最早只能选择第2天。',
            rules: [
              {required: true, message: '请添加内容', trigger: 'change'},
            ],
          },
          {
            label: '输入有单位:', //label
            ele: 'xd-input-unit', //package 名称
            valueKey: 'input-unit', //form[valueKey]
    
            /**单位设置默认值**/
            value: value['input-unit'] || {},
            disabled: false,
            setting: {
              select: [
                {"label": "小时", "value": 1},
                {"label": "分钟", "value": 2},
              ],
              pos: 'append',
              tips: '深圳万利达移动通信设备有限公司',
              type: 'number',
              width: '200px',
              selectWidth: "80px",
              before: '',
      
            },
            rules: [
              {required: true, message: '请输入运费满减规则金额，并且订单金额大于运费减金额。', trigger: 'blur'},
              // {
              //   required: true, validator(a, b) {
              //     console.log('validator', b)
              //   }
              // },
            ],
            maps: {
              input: 'inputA',
              unit: 'unitA'
            },
          },
          {
            label: '商品参数:', //label
            ele: 'xd-product-params', //package 名称
            valueKey: 'product-params', //form[valueKey]
            value: [
              {
                "attr_id": "xI-1p0qSY1roS2Z5LxA-S",
                "name": "用户选择",
                "value": 'sed',
              },
              {
                "attr_id": "xI-1p0qSY1roS2Z5LxA-C",
                "name": "复选框",
                "value": ['Excepteur','nostru' ],
              },
              {
                "attr_id": "xI-1p0qSY1roS2Z5LxA-R",
                "name": "单选",
                "value": "女",
              },
              {
                "attr_id": "xI-1p0qSY1roS2Z5LxA-I",
                "name": "输入框",
                "value": "大师兄",
              },
              {
                "attr_id": "",
                "name": "key1",
                "value": "value1",
              },
              {
                "attr_id": "",
                "name": "key2",
                "value": "value2",
              },
            ],
            setting: {
              can_add_param: true,
              parameters: [
                {
                  "attr_id": "xI-1p0qSY1roS2Z5LxA-S",
                  "name": "用户选择",
                  "input_type": "SELECT",
                  "is_required": false,
                  "options": [
                    {
                      "label": "sed",
                      "value": "sed"
                    },
                    {
                      "label": "Excepteur",
                      "value": "Excepteur"
                    },
                    {
                      "label": "nostru",
                      "value": "nostru"
                    },
                    {
                      "label": "proident",
                      "value": "proident"
                    }
                  ],
                },
                {
                  "attr_id": "xI-1p0qSY1roS2Z5LxA-C",
                  "name": "复选框",
                  "input_type": "CHECKBOX",
                  "is_required": true,
                  "options": [
                    {
                      "label": "sed",
                      "value": "sed"
                    },
                    {
                      "label": "Excepteur",
                      "value": "Excepteur"
                    },
                    {
                      "label": "nostru",
                      "value": "nostru"
                    },
                    {
                      "label": "proident",
                      "value": "proident"
                    }
                  ],
                },
                {
                  "attr_id": "xI-1p0qSY1roS2Z5LxA-R",
                  "name": "单选",
                  "input_type": "RADIO",
                  "is_required": false,
                  "options": [
                    {
                      "label": "男",
                      "value": "男"
                    },
                    {
                      "label": "女",
                      "value": "女"
                    }
                  ],
                },
                {
                  "attr_id": "xI-1p0qSY1roS2Z5LxA-I",
                  "name": "输入框",
                  "input_type": "INPUT",
                  "is_required": false,
                },
              ]
            },
            inline: false,
            notice: '如：设置16:00前下单，最早可提前2小时；16:00后下单，最早可提前1天。<br />若：用户在16点前下单，最早可选择当前下单时间往后2小时的时间；16点后下单，最早只能选择第2天。',
            rules: [
              {required: true, message: '请添加内容', trigger: 'change'},
            ],
          },
        ].filter(i=>i);
      },
    }
  }

</script>

<style lang="scss" scoped>
  .app-container {
    padding: 20px;

    &__item {
      margin-bottom: 20px;

      &-h1 {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        font-weight: bold;
        background: #efefef;
        font-size: 16px;
        text-align: left;
        margin-bottom: 30px;
      }

      &-body {
        padding: 0 20px;

        &-value {
          padding-bottom: 10px;
        }
      }
    }

  }

  @media screen and (max-width: 768px) {
    .app-container {
      padding: 10px 0;

      &__item {
        &-body {
          padding: 0 0px;
        }
      }
    }
  }
</style>
