<template>
  <div class="xd-base-field">
<!--    <xd-json-view :data="form"></xd-json-view>-->
    <el-form
      v-if="formStatus"
      class="xd-base-field-warpper"
      :ref="refID"
      :model="form"
      :rules="rules"
      :label-width="labelWidth"
    >
      <template v-for="(item) in uiList">
        <slot v-if="item.ele === 'slot'" :name="item.slot" :form="form" :width="labelWidth"></slot>
        <el-form-item
          v-else
          :label="item.label"
          :key="item.key"
          :prop="getProp(item)"
          :class="{unit: item.unit}"
        >
          <template v-if="item.ele === 'el-input'">
            <div
              :class="{
                'el-input-tips': item['tips'],
                inline: isPC && item['inline'] === true,
                inBlock: item['inline'] === false || !isPC
              }"
              v-if="item['tips']"
            >
              <el-input
                v-model="form[item.valueKey]"
                :type="item['type']"
                :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input40'"
                :placeholder="item['placeholder']"
                :disabled="item['disabled'] === undefined ? false: item['disabled']"
                :autosize="item['type'] === 'textarea' ? textareaSize: false"
                clearable
              ></el-input>
              <div class="tips">{{item['tips']}}</div>
            </div>
            <el-input
              v-else
              v-model="form[item.valueKey]"
              :type="item['type']"
              :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input40'"
              :placeholder="item['placeholder']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
              :autosize="item['type'] === 'textarea' ? textareaSize: false"
              clearable
            ></el-input>
          </template>
          <template v-if="item.ele === 'el-html'">
            <div v-html="item.value"></div>
          </template>
          <template v-else-if="item.ele === 'xd-select-list'">
            <xd-select-list
              :clearable="true"
              v-model="form[item['valueKey']]"
              :placeholder="item['placeholder']"
              :default-value="item['value']"
              :size="size"
              :list="item['list']"
              :multiple="item['multiple']"
              :collapse-tags="item['collapseTags'] !== undefined ? item['collapseTags']: true"
              :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input20'"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-select-list>
          </template>
          <template v-else-if="item.ele === 'xd-select-status'">
            <xd-select-status
              :default-value="item['value']"
              v-model="form[item['valueKey']]"
              :placeholder="item['placeholder']"
              :type="item['list']"
              :is-all="item['isall']"
              :size="size"
              :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input20'"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-select-status>
          </template>
          <template v-else-if="item.ele === 'xd-radio-status'">
            <xd-radio-status
              :default-value="item['value']"
              v-model="form[item['valueKey']]"
              :placeholder="item['placeholder']"
              :type="item['list']"
              :type-value="item['backValueType']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-radio-status>
          </template>
          <template v-else-if="item.ele === 'xd-radio'">
            <xd-radio-list
              :default-value="item['value']"
              v-model="form[item['valueKey']]"
              :placeholder="item['placeholder']"
              :list="item['list']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-radio-list>
          </template>
          <template v-else-if="item.ele === 'xd-switch'">
            <xd-switch
              :default-value="item['value']"
              v-model="form[item['valueKey']]"
              :showTips="item['showTips']"
              :list="item['list']"
              :type-value="item['backValueType']"
              :color="item['color']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-switch>
          </template>
          <template v-else-if="item.ele === 'xd-check'">
            <xd-check-list
              :default-value="item['value']"
              v-model="form[item['valueKey']]"
              :list="item['list']"
              :size="size"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-check-list>
          </template>
          <template v-else-if="item.ele === 'xd-range'">
            <xd-range
              v-model="form[`xdRange__${item['valueKey'].join('__')}`]"
              :placeholder="item['placeholder']"
              :size="size"
              :width="item['width']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-range>
          </template>
          <template v-else-if="item.ele === 'xd-time-picker'">
            <el-time-picker
              is-range
              v-model="form[item['valueKey']]"
              range-separator="至"
              :start-placeholder="item['placeholder'][0]"
              :end-placeholder="item['placeholder'][1]"
              :value-format="item['formatValue']"
              :format="item['format']"
              :selectableRange="item['selectableRange'] ? item['selectableRange']: []"
            ></el-time-picker>
          </template>
          <template v-else-if="item.ele === 'xd-date-range'">
            <el-date-picker
              v-model="form[`xdDate__${item['valueKey'].join('__')}`]"
              type="datetimerange"
              class="xd-search__datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              :start-placeholder="item['placeholder'][0]"
              :end-placeholder="item['placeholder'][1]"
              :value-format="item['formatValue']"
              :format="item['format']"
              align="right"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            >
            </el-date-picker>
          </template>
          <template v-else-if="item.ele === 'xd-date'">
            <el-date-picker
              v-model="form[item['valueKey']]"
              type="datetime"
              :placeholder="item['placeholder']"
              :value-format="item['formatValue']"
              :format="item['format']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            >
            </el-date-picker>
          </template>
          <template v-else-if="item.ele === 'xd-transfer'">
            <xd-transfer
              :default-value="item['value']"
              :left-default-value="item['left']"
              :right-default-value="item['right']"
              v-model="form[item['valueKey']]"
              :title="item['title']"
              :placeholder="item['placeholder']"
              :list="item['list']"
            ></xd-transfer>
          </template>
          <template v-else-if="item.ele === 'xd-upload'">
            <el-input
              v-if="item['styleType'] === 'one' && !item['slot'] && (!item['showType']||item['showType']==='url')"
              class="xd-base-field__upload-input"
              disabled
              :class="item['elinputClassName']"
              v-model="form[item['valueKey']]['url']"
            ></el-input>
            <el-input
              v-if="item['styleType'] === 'one' && !item['slot'] && item['showType']==='name'"
              class="xd-base-field__upload-input"
              disabled
              :class="item['elinputClassName']"
              v-model="form[item['valueKey']]['name']"
            ></el-input>
            <xd-upload
              v-if="item.styleType === 'one'"
              style-type="one"
              v-model="form[item['valueKey']]"
              :default-value="item['defaultValue']"
              :action="item['action']"
              :qiniu-cdn="item['qiniuCdn']"
              :size="item['size']"
              :type="item['type']"
              :radius="0.5"
              :upload-type="item['uploadType']"
              :tips="item['tipsformet']"
              :showtype="true"
              @success="handleSuccess"
              @onApiSuccessUrl="handleApiSuccessUrl"
              @onGetParamsAndHeader="handleGetParamsAndHeader"
            >
              <template v-if="item['slot']" slot-scope="scope">
                <slot :name="`upload_${item['valueKey']}`">
                  <div
                    class="xd-base-field__upload"
                    :class="{has:scope.image.url}"
                    :style="{
                      width: item['oneWidth'] ? item['oneWidth'] + 'px' : '100px',
                      height: item['oneHeight'] ? item['oneHeight'] + 'px' : '100px',
                    }"
                  >
                    <xd-font-icon
                      class="xd-base-field__upload-icon"
                      icon="iconjia"
                      size="50"
                      :color="!scope.image.url?'#999': 'rgba(0,0,0,0)'"
                    ></xd-font-icon>
                    <img :src="scope.image.url"/>
                  </div>
                </slot>
              </template>
            </xd-upload>
            <xd-upload
              v-if="item.styleType === 'auth'"
              style-type="auth"
              v-model="form[item['valueKey']]"
              :default-value="item['defaultValue']"
              :action="item['action']"
              :qiniu-cdn="item['qiniuCdn']"
              :size="item['size']"
              :type="item['type']"
              :radius="5"
              :upload-type="item['uploadType']"
              :showtype="true"
              :tips="item['tipsformet']"
              @success="handleSuccess"
              @onApiSuccessUrl="handleApiSuccessUrl"
              @onGetParamsAndHeader="handleGetParamsAndHeader"
            >
            </xd-upload>
            <xd-upload
              v-if="item.styleType === 'list'"
              style-type="list"
              v-model="form[item['valueKey']]"
              :default-value="item['defaultValue']"
              :action="item['action']"
              :qiniu-cdn="item['qiniuCdn']"
              :size="item['size']"
              :type="item['type']"
              :radius="5"
              :upload-type="item['uploadType']"
              :showtype="true"
              :tips="item['tipsformet']"
              @success="handleSuccess"
              @onApiSuccessUrl="handleApiSuccessUrl"
              @onGetParamsAndHeader="handleGetParamsAndHeader"
            >
            </xd-upload>
          </template>
          <template v-else-if="item.ele === 'xd-over-add-price'">
            <xd-over-add-price
              :size="size"
              :default-value="item['defaultValue']"
              :keys="item['valueKey']"
              :list="item['list']"
              :unit="item['unit']"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
              v-model="form[getItemToFormKey(item, 'xdOverAddPrice')]"
            ></xd-over-add-price>
          </template>
          <template v-else-if="item.ele === 'xd-select-week-time'">
            <xd-select-week-time
              :size="size"
              :default-value="item['defaultValue']"
              :keys="item['valueKey']"
              :list="item['list']"
              :collapse="true"
              :time-type="timeType"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
              v-model="form[getItemToFormKey(item, 'xdSelectWeekTime')]"
            ></xd-select-week-time>
          </template>
          <template v-else-if="item.ele === 'xd-range-group'">
            <xd-range-group
              :size="size"
              :keys="item.keys"
              :placeholder="item['placeholder']"
              :default-value="item['defaultValue']"
              :tip="item['tips']"
              v-model="form[item['valueKey']]"
              :disabled="item['disabled'] === undefined ? false: item['disabled']"
            ></xd-range-group>
          </template>
          <template v-if="item['unit']">
            <span style="margin-left: 10px">{{item['unit']}}</span>
          </template>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
  import XdSelectList from "@/components/XdSelectList";
  import XdSelectStatus from "@/components/XdSelectStatus";
  import XdRange from "@/components/XdRange";
  import XdRadioStatus from "@/components/XdRadioStatus";
  import XdRadioList from "@/components/XdRadioList";
  import XdSwitch from "@/components/XdSwitch";
  import XdTransfer from "@/components/XdTransfer";
  import XdUpload from "@/components/XdUpload";
  import XdFontIcon from "@/components/XdFontIcon";
  import XdCheckList from "@/components/XdCheckList";
  import XdOverAddPrice from "@/components/XdOverAddPrice";
  import XdSelectWeekTime from "@/components/XdSelectWeekTime";
  import XdJsonView from "@/components/XdJsonView";
  import XdRangeGroup from "@/components/XdRangeGroup";


  export default {
    name: "XdBaseField",
    components: {
      XdRangeGroup,
      XdJsonView,
      XdCheckList,
      XdSwitch,
      XdRadioStatus,
      XdSelectList,
      XdSelectStatus,
      XdRange,
      XdRadioList,
      XdTransfer,
      XdUpload,
      XdFontIcon,
      XdOverAddPrice,
      XdSelectWeekTime
    },
    props:{
      labelWidth: {type: String, default: '100px'},
      size: {type: String, default: 'medium'}, //medium / small / mini
      list: {type: Array | null, default: null},
      pickerOptions: {
        type: Object,
        default() {
          return {
            shortcuts: [
              {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近六个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一年',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                  picker.$emit('pick', [start, end]);
                }
              }
            ],
          }
        }
      },
      timeType: {
        type: Boolean,
        default: false //false=> 毫秒 true=>秒
      },
      textareaSize: {
        type: Object,
        default(){
          return {minRows: 4, maxRows: 6}
        }
      }
    },


    watch: {
      form: {
        handler(val) {
          this.$emit('input', this.getParams())
        },
        deep: true
      },
    },

    data(){
      return {
        refID: null,
        isPC: false,
        formStatus: false, //初始化完成
        form: {}, //绑定数据字段
        rules: {}, //验证规则
        uiList: [], //ui列表

        //测试数据 备注；valueKey必须唯一
        testList: [

          //区间输入组
          {
            label: '卡号组:', //label
            tips: '注意:开始和结束卡号段必须填写，并且开始卡号必须小于结束开号.',
            ele: 'xd-range-group', //package 名称
            keys: ['start_number', 'end_number'], //返回数组字段名称
            defaultValue: [ //默认组值
              // {"start_number": 20, "end_number": 23},
              // {"start_number": 451202, "end_number": 4512300},
              // {"start_number": 1545512121, "end_number": 1545512123}
            ],
            valueKey: 'xd_range_group', //form[valueKey]
            placeholder: ['开始卡号', '结束卡号'],
            disabled: true,
            rules: [
              {
                required: true,
                validator(rule, value, callback) {
                  let flag = true, index=null, message= '';
                  value.map((item,idx)=>{
                    if(index === null) {

                      //检查卡号填写为空
                      Object.keys(item).map(k => {
                        if (item[k] === null) {
                          index = idx;
                          flag = false;
                          message = '卡号输入不能为空！'
                        }
                      });

                      //检查开始卡号不能大于等于结束卡号
                      if(index === null) {
                        if (item['start_number'] >= item['end_number']) {
                          index = idx;
                          flag = false;
                          message = '输入开始卡号不能大于等于结束卡号'
                        }
                      }
                    }
                  });

                  if(flag) callback();
                  else callback(`第【${index + 1}】条数据有误，错误：${message}`);

                  // let temp = false;
                  // if (!value['week_day'] || value['week_day'].length === 0) temp = true;
                  // if (!value['week_start'] || !value['week_end']) temp = true;
                  // if (temp) callback('请设置规则')
                  // else callback();
                },
                trigger: ['blur', 'change']
              },
            ]
          },

          //选择礼拜日与时间插件
          {
            label: '选择礼拜:', //label
            ele: 'xd-select-week-time', //package 名称
            valueKey: {list: 'week_day', start: 'week_start', end: 'week_end'}, //form[valueKey]
            defaultValue: {list: [0, 1, 2], start: 1636128000000, end: 1638720000000}, //默认图片对象
            disabled: true,
            list: [
              {label: '日', value: 0},
              {label: "一", value: 1},
              {label: "二", value: 2},
              {label: "三", value: 3},
              {label: "四", value: 4},
              {label: "五", value: 5},
              {label: "六", value: 6}
            ],
            rules: [
              {
                required: true,
                message: '请选择日期',
                validator(rule, value, callback) {
                  let temp = false;
                  if(!value['week_day'] || value['week_day'].length ===0) temp = true;
                  if(!value['week_start'] || !value['week_end']) temp = true;
                  if (temp) callback('请设置规则')
                  else callback();
                },
                trigger: ['blur', 'change']
              },
            ]
          },

          //区间输入
          {
            label: '卡号区间:', //label
            ele: 'xd-range', //package 名称
            valueKey: ['start_card', 'end_card'], //form[valueKey]
            value: [200, 300], //v-model
            placeholder: ['开始卡号', '结束卡号'],
            width: 450,
            disabled: true,
          },

          //时间区间插件
          {
            label: '活动时间:', //label
            ele: 'xd-date-range', //package 名称
            valueKey: ['start_range_time', 'end_range_time'], //form[valueKey]
            value: [1636128000000, 1638720000000], //v-model timestamp=>必须时间戳 毫秒
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: ['活动开始时间', '活动结束时间'],
            disabled: true,
            rules: [
              {required: true, message: '请选择日期', trigger: ['blur', 'change']},
            ]
          },

          //XdOverAddPrice
          {
            label: '超过:', //label
            ele: 'xd-over-add-price', //package 名称
            valueKey: {min: 'price_min', list: 'price_type', value: 'price'}, //form[valueKey]
            defaultValue: {min: '', list: '', value: ''}, //默认图片对象
            unit: '元',
            list: [
              {label: "加价", value: "raise"},
              {label: "下调", value: "reduce"},
              {label: "固定值", value: "fixed"}
            ],
            disabled: true,
            rules: [
              {
                required: true,
                validator(rule, value, callback) {
                  let temp = false;
                  Object.keys(value).map(key =>{
                    if(!value[key]) temp = true;
                  });
                  if(temp) callback('请设置规则')
                  else callback();
                },
                message: '请选择日期',
                trigger: 'change'
              }
            ]
          },

          //input
          {
            label: '域名名称:', //label
            ele: 'el-input', //package 名称
            //text，textarea 和其他 原生 input 的 type 值
            //https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types
            type: 'text',
            valueKey: 'domain_name', //form[valueKey]
            value: '', //v-model
            placeholder: '输入域名名称',
            classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
            disabled: true,
            rules: [
              {
                required: true,
                type:'url',
                message:'请输入域名地址',
                trigger: 'blur'
              },
            ]
          },

          //多选选择
          {
            label: '选择模式:', //label
            ele: 'xd-check', //package 名称
            valueKey: 'check_name', //form[valueKey]
            value: [4, 5], //v-model
            disabled: true,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ],
            rules: [
              {required: true, message: '请选择模式', trigger: ['blur', 'change']},
            ]
          },

          //upload-one
          {
            label: '图片上传:', //label
            ele: 'xd-upload', //package 名称
            valueKey: 'upload', //form[valueKey]
            value: {}, //v-model
            defaultValue: null, //默认图片对象
            slot: true, //按钮是否使用slot
            oneWidth: 100,//单个图片显示宽度
            oneHeight: 100, //单个图片显示高度
            elinputClassName: 'input40',
            tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
            type: ['jpg', 'png', 'jpeg'],
            styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
            uploadType: 'qiniu', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
            size: 5, //5M
            action: 'https://up-z1.qiniup.com',
            qiniuCdn: 'http://static.e56buy.com', //七牛访问资源域名
            sort: true, //当上传图片列表时候，是否启用排序
            maxlen: 100, //当上传图片列表时候，最大数量数量
            rules: [
              {required: true, message: '请上传图片', trigger: ['blur', 'change']},
            ]
          },

          //upload-auth
          {
            label: '证件上传:', //label
            ele: 'xd-upload', //package 名称
            valueKey: 'upload_auth', //form[valueKey]
            value: '', //v-model
            defaultValue: [], //默认图片对象
            slot: true, //按钮是否使用slot
            elinputClassName: 'input40',
            tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
            type: ['jpg', 'png', 'jpeg'],
            styleType: 'auth', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
            uploadType: 'qiniu', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
            size: 5, //5M
            action: 'https://up-z1.qiniup.com',
            qiniuCdn: 'http://static.e56buy.com', //七牛访问资源域名
            sort: true, //当上传图片列表时候，是否启用排序
            maxlen: 100, //当上传图片列表时候，最大数量数量
            rules: [
              {required: true, message: '请上传图片', trigger: ['blur', 'change']},
            ]
          },

          //upload-auth
          {
            label: '图片列表:', //label
            ele: 'xd-upload', //package 名称
            valueKey: 'upload_list', //form[valueKey]
            value: '', //v-model
            defaultValue: [
              {
                url: "http://static.e56buy.com/XdimdSPQr7QhSVoKJ4N9FuOTCumEbXdN",
                name: "1_1529482049654c8715a20-aafa-4a86-919e-9ec37af1eb3c.jpeg",
                uid: 1639020778679,
                hashKey: "XdimdSPQr7QhSVoKJ4N9FuOTCumEbXdN",
              }
            ], //默认图片对象
            slot: true, //按钮是否使用slot
            elinputClassName: 'input40',
            tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
            type: ['jpg', 'png', 'jpeg'],
            styleType: 'list', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
            uploadType: 'qiniu', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
            size: 5, //5M
            action: 'https://up-z1.qiniup.com',
            qiniuCdn: 'http://static.e56buy.com', //七牛访问资源域名
            sort: true, //当上传图片列表时候，是否启用排序
            maxlen: 100, //当上传图片列表时候，最大数量数量
            rules: [
              {required: true, message: '请上传图片', trigger: ['blur', 'change']},
            ]
          },

          //多选选择
          {
            label: '项目分类:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'project_name', //form[valueKey]
            value: [4,5], //v-model
            placeholder: '请选择加盟商',
            multiple: true, //多选
            //disabled: true,
            collapseTags: false,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //单选选择
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type', //form[valueKey]
            value: 5, //v-model
            placeholder: '请选择加盟商',
            multiple: false,
            disabled: true,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //状态选择
          {
            label: '状态:', //label
            ele: 'xd-select-status', //package 名称
            valueKey: 'status', //form[valueKey]
            value: 'Y', //v-model
            isall: true,
            disabled: true,
            backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
            placeholder: '请选择',
            list: 'status', //status=>状态  best=>推荐  associate=>关联 yes=>是否 open=> 是否开启  check=>审核
          },

          {
            label: '状态(二选一):', //label
            ele: 'xd-radio-status', //package 名称
            valueKey: 'radio_status', //form[valueKey]
            value: 'Y', //v-model
            isall: true,
            disabled: true,
            backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
            placeholder: '请选择',
            list: 'status', //status=>状态  best=>推荐  associate=>关联 yes=>是否 open=> 是否开启  check=>审核
          },

          {
            label: '单选列表:', //label
            ele: 'xd-radio', //package 名称
            valueKey: 'radio_status_list', //form[valueKey]
            value: 6, //v-model
            disabled: true,
            rules: [
              {required: true, message: '请选择', trigger: ['blur', 'change']}
            ],
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //Switch
          {
            label: 'Switch:', //label
            ele: 'xd-switch', //package 名称
            valueKey: 'switch_status_tips', //form[valueKey]
            value: 'Y', //v-model
            list: ['否', '是'], //左右文本
            color: ['green', '#999'], //文本颜色
            showTips: true, //是否显示文本
            disabled: true,
            backValueType: 1, //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
          },

          //Switch
          {
            label: 'Switch:', //label
            ele: 'xd-switch', //package 名称
            valueKey: 'switch_status', //form[valueKey]
            value: 'Y', //v-model
            list: ['否', '是'], //左右文本
            disabled: true,
            //color: ['green', '#999'], //文本颜色
            showTips: false, //是否显示文本
            backValueType: 1, //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
          },

          //插槽
          {
            label: '', //label
            ele: 'slot', //package 名称
            slot: 'time',
          },

          //时间插件
          {
            label: '开启时间:', //label
            ele: 'xd-date', //package 名称
            valueKey: 'open_time', //form[valueKey]
            value: 1636128000000, //v-model timestamp=>必须时间戳 毫秒
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: '开启时间',
            disabled: true,
            rules: [
              {required: true, message: '请输入时间', trigger: ['blur', 'change']}
            ]
          },

          //Transfer
          {
            label: 'Transfer:', //label
            ele: 'xd-transfer', //package 名称
            valueKey: 'transfer', //form[valueKey]
            value: [1,2,3], //v-model
            placeholder: '输入城市名称',
            title: ['Source', 'Target'],
            left: [], //左侧选中值
            right: [], //右边选中值
            list: null, //[] => 数组列表 null=>使用测试数据
            rules: [
              {required: true, message: '请选择穿越的值', trigger: ['blur', 'change']},
            ]
          },
        ]

      }
    },

    created() {
      this.isPC = this.$xdHelper.isPC();
      this.refID = `Xd-${this.$xdHelper.randomChar(20)}`;
      this.init();

    },

    methods: {
      /**
       * @description 上传成功
       */
      handleSuccess(res){
        this.$emit('success', res)
      },

      /**
       * @description 上传到本地服务器成功返回值时刻触发，设置url字段
       * @param result
       * @param resolve
       */
      handleApiSuccessUrl(result, resolve) {
        this.$emit('onApiSuccessUrl', result, (url)=>{
          resolve(url);
        })
      },

      /**
       * @description 单文件上传参数设置
       * @param file
       * @param resolve
       */
      handleGetParamsAndHeader(file, resolve){
        this.$emit('onGetParamsAndHeader', file, (params) => {
          resolve(params);
        })
      },

      /**
       * @description 对象获取form键值
       * @param item  插件对象
       * @param prefix 前缀
       */
      getItemToFormKey(item, prefix){
        let key = [];
        if(this.$xdHelper.checkVarType(item.valueKey) === 'array') {
          key = [...item['valueKey']];
        }
        if (this.$xdHelper.checkVarType(item.valueKey) === 'object') {
          Object.keys(item.valueKey).map((k) => {
            key.push(`${k}$${item.valueKey[k]}`)
          });
        }
        return `${prefix}__${key.join('__')}`
      },

      /**
       * @description 设置form item prop属性
       * @param item 插件对象
       */
      getProp(item){
        if (item.ele === 'xd-range') {
          return  this.getItemToFormKey(item, 'xdRange');
        }
        else if (item.ele === 'xd-date-range') {
          return this.getItemToFormKey(item, 'xdDate');
        }
        else if(item.ele === 'xd-over-add-price'){
          return  this.getItemToFormKey(item, 'xdOverAddPrice')
        }
        else if (item.ele === 'xd-select-week-time') {
          return this.getItemToFormKey(item, 'xdSelectWeekTime')
        }
        else {
          return item['valueKey']
        }
      },

      /**
       * @description 获取表单数据
       */
      getParams() {
        let form = this.$xdHelper.cloneDeep(this.form);
        let temp = {};
        Object.keys(form).map(key => {
          //区间输入值
          if (/^(xdRange__|xdDate__)(.*)$/.test(key)) {
            let range = key.split('__');
            if(form[key] && form[key].length > 0) {
              range.splice(0, 1);
              temp[range[0]] = form[key][0];
              temp[range[1]] = form[key][1];

              //时间毫秒转秒处理
              if (/^(xdDate__)(.*)$/.test(key) && this.timeType) {
                temp[range[0]] = form[key][0] ? Math.floor(form[key][0] / 1000) : form[key][0];
                temp[range[1]] = form[key][1] ? Math.floor(form[key][1] / 1000) : form[key][1];
              }
            }
            else{
              range.splice(0, 1);
              temp[range[0]] = null;
              temp[range[1]] = null;
            }


          }
          else if(/^(xdOverAddPrice__|xdSelectWeekTime__)(.*)$/.test(key)){
            temp = {...temp, ...form[key]}
          }
          else {
            if (this.$xdHelper.checkVarType(form[key]) === 'array' && this.dateFilter) {
              if (form[key].length > 0) {
                temp[key] = form[key];
              }
            }
            else {
              let ele = this.$xdHelper.isKeyInLists(this.uiList, key, 'valueKey');
              if(ele.ele === 'xd-date' && this.timeType) {
                temp[key] =  form[key] ? Math.floor(form[key] / 1000) : form[key];
              }
              else {
                temp[key] = form[key];
              }

            }

          }
        });
        if (this.dateFilter) return this.$xdHelper.deleteParamEmptyKey(temp);
        else return temp
      },

      /**
       * @description 初始化表单
       */
      init() {
        if (this.list === null) {
          this.uiList = this.testList;
        } else this.uiList = this.list;

        let temp = [];
        this.uiList.map((item)=>{
          temp.push({...item, key: this.$xdHelper.randomChar(20)});
        })
        this.uiList = temp;

        //初始化form表单
        this.uiList.map(item => {
          //xd-range
          if (item.ele === 'xd-range') {
            if(item['rules']) {
              this.$set(this.rules, this.getItemToFormKey(item, 'xdRange'), item['rules'])
            }
            this.$set(this.form, this.getItemToFormKey(item, 'xdRange'), item['value'])
          }

          //xd-date-range
          else if (item.ele === 'xd-date-range') {
            if (item['rules']) {
              this.$set(this.rules, this.getItemToFormKey(item, 'xdDate'), item['rules'])
            }
            this.$set(this.form, this.getItemToFormKey(item, 'xdDate'), item['value']);
          }

          //xd-over-add-price
          else if (item.ele === 'xd-over-add-price') {
            if (item['rules']) {
              this.$set(this.rules, this.getItemToFormKey(item, 'xdOverAddPrice'), item['rules'])
            }
            this.$set(this.form, this.getItemToFormKey(item, 'xdOverAddPrice'), '');
          }

          //xd-select-week-time
          else if (item.ele === 'xd-select-week-time') {
            if (item['rules']) {
              this.$set(this.rules, this.getItemToFormKey(item, 'xdSelectWeekTime'), item['rules'])
            }
            this.$set(this.form, this.getItemToFormKey(item, 'xdSelectWeekTime'), '');
          }

          //插槽
          else if(item.ele === 'slot') {
            //todo
          }

          //默认
          else {
            if (item['rules']) {
              this.$set(this.rules, item['valueKey'], item['rules'])
            }
            this.$set(this.form, item['valueKey'], item['value']);
          }
        });
        this.formStatus = true;
      },

      /**
       * @description 提交前验证数据
       */
      submit(){
        return new Promise((resolve, reject)=>{
          this.$refs[this.refID].validate((valid, error) => {
            if(valid) resolve(valid);
            else reject(valid, error);
          })
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .xd-base-field {
    .tips {
      line-height: 22px;
      font-size: 12px;
      color: #999;
      padding-top: 10px;
    }
  
    .el-input-tips.inline {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    
      .tips {
        line-height: 22px;
        font-size: 12px;
        color: #999;
        padding-left: 20px;
        padding-top: 0;
      }
    }
    
    .input100 {width: 100%;}
    .input80 {width: 80%;}
    .input70 {width: 70%;}
    .input60 {width: 60%;}
    .input50 {width: 50%;}
    .input40 {width: 40%;}
    .input30 {width: 30%;}
    .input20 {width: 20%;}

    &__upload {
      border: #999 dashed 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      border-radius: 6px;

      &-input {
        margin-bottom: 10px;
      }

      &-icon {
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
      }

      & > img {
        max-width: 100%;
        max-height: 100%;
      }

      &:hover, &:hover.has {
        border: #42B983 dashed 2px;
      }

      &:hover.has &-icon {
        color: rgba(255, 255, 255, .7) !important;
        background: rgba(0, 0, 0, .05);
      }
    }

    & ::v-deep .el-form-item.unit .el-form-item__content {
      display: flex;
      justify-content: flex-start;
      align-items: center;

    }
  }

  @media screen and (max-width: 768px) {
    .xd-base-field {
      .input100, .input20, .input30, .input40, .input50, .input60, .input80, .input70 {width: 100%;}

      .el-form-item {
        margin-bottom: 20px;

        & .el-date-editor {
          width: 100% !important;
        }
      }
    }
  }
</style>
