<template>
  <d2-container>
    <div class="form-upload-demo">
      <article>
        <header>
          <ai-link
            :underline="false"
            :href="`${aiVueUrl}form`"
            target="_blank"
          >
            <h3>Form 表单</h3>
          </ai-link>
        </header>

        <ai-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="ruleForm-demo"
        >
          <ai-form-item
            label="活动名称"
            prop="name"
          >
            <ai-input v-model="ruleForm.name"></ai-input>
          </ai-form-item>
          <ai-form-item
            label="活动区域"
            prop="region"
          >
            <ai-select
              v-model="ruleForm.region"
              placeholder="请选择活动区域"
            >
              <ai-option
                label="区域一"
                value="shanghai"
              ></ai-option>
              <ai-option
                label="区域二"
                value="beijing"
              ></ai-option>
            </ai-select>
          </ai-form-item>
          <ai-row>
            <ai-col :span="12">
              <ai-form-item label="级联选择">
                <ai-cascader :options="optionsWithDisabled"></ai-cascader>
              </ai-form-item>
            </ai-col>
            <ai-col :span="6">
              <ai-form-item label="计数器">
                <ai-input-number
                  v-model="num"
                  @change="handleChange"
                  :min="1"
                  :max="10"
                  label="描述文字"
                ></ai-input-number>
              </ai-form-item>
            </ai-col>
          </ai-row>
          <ai-form-item
            label="活动时间"
            required
          >
            <ai-col :span="11">
              <ai-form-item prop="date1">
                <ai-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%;"
                ></ai-date-picker>
              </ai-form-item>
            </ai-col>
            <ai-col
              class="line"
              :span="2"
            >-</ai-col>
            <ai-col :span="11">
              <ai-form-item prop="date2">
                <ai-time-picker
                  placeholder="选择时间"
                  v-model="ruleForm.date2"
                  style="width: 100%;"
                ></ai-time-picker>
              </ai-form-item>
            </ai-col>
          </ai-form-item>
          <ai-row>
            <ai-col :span="6">
              <ai-form-item
                label="即时配送"
                prop="delivery"
              >
                <ai-switch v-model="ruleForm.delivery"></ai-switch>
              </ai-form-item>
            </ai-col>
            <ai-col :span="18">
              <ai-form-item
                label="滑块"
                prop="delivery"
              >
                <ai-slider v-model="sliderValue"></ai-slider>
              </ai-form-item>
            </ai-col>
          </ai-row>
          <ai-form-item
            label="活动性质"
            prop="type"
          >
            <ai-checkbox-group v-model="ruleForm.type">
              <ai-checkbox
                label="美食/餐厅线上活动"
                name="type"
              ></ai-checkbox>
              <ai-checkbox
                label="地推活动"
                name="type"
              ></ai-checkbox>
              <ai-checkbox
                label="线下主题活动"
                name="type"
              ></ai-checkbox>
              <ai-checkbox
                label="单纯品牌曝光"
                name="type"
              ></ai-checkbox>
            </ai-checkbox-group>
          </ai-form-item>
          <ai-form-item
            label="特殊资源"
            prop="resource"
          >
            <ai-radio-group v-model="ruleForm.resource">
              <ai-radio label="线上品牌商赞助"></ai-radio>
              <ai-radio label="线下场地免费"></ai-radio>
              <ai-radio
                disabled
                label="禁用"
              >禁用备选项</ai-radio>
            </ai-radio-group>
          </ai-form-item>
          <ai-form-item
            label="活动形式"
            prop="desc"
          >
            <ai-input
              type="textarea"
              v-model="ruleForm.desc"
            ></ai-input>
          </ai-form-item>
          <ai-form-item>
            <ai-button
              type="primary"
              @click="submitForm('ruleForm')"
            >立即创建</ai-button>
            <ai-button @click="resetForm('ruleForm')">重置</ai-button>
          </ai-form-item>
        </ai-form>
      </article>
      <div>
        <article>
          <header>
            <ai-link
              :underline="false"
              :href="`${aiVueUrl}upload`"
              target="_blank"
            >
              <h3>Upload 上传</h3>
            </ai-link>
          </header>
          <ai-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <ai-button
              size="small"
              type="primary"
            >点击上传</ai-button>
            <div
              slot="tip"
              class="ai-upload__tip"
            >
              只能上传jpg/png文件，且不超过500kb
            </div>
          </ai-upload>
        </article>

        <br /><br /><br /><br />

        <article>
          <ai-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            list-type="picture"
          >
            <ai-button
              size="small"
              type="primary"
            >点击上传</ai-button>
            <div
              slot="tip"
              class="ai-upload__tip"
            >
              只能上传jpg/png文件，且不超过500kb
            </div>
          </ai-upload>
        </article>
      </div>
    </div>

    <article class="rate-demo">
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}rate`"
          target="_blank"
        >
          <h3>Rate 评分</h3>
        </ai-link>
      </header>

      <div class="block">
        <span class="demonstration">默认不区分颜色</span>
        <ai-rate v-model="rateValue1"></ai-rate>
      </div>
      <div class="block">
        <span class="demonstration">区分颜色</span>
        <ai-rate
          v-model="ratevalue2"
          :colors="rateColors"
        > </ai-rate>
      </div>
      <div class="block">
        <span class="demonstration">辅助文字</span>
        <ai-rate
          v-model="ratevalue3"
          show-text
        ></ai-rate>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}color-picker`"
          target="_blank"
        >
          <h3>ColorPicker 颜色选择器</h3>
        </ai-link>
      </header>

      <div class="block">
        <span class="demonstration">有默认值</span>
        <ai-color-picker v-model="pickerColor1"></ai-color-picker>
      </div>
      <div class="block">
        <span class="demonstration">无默认值</span>
        <ai-color-picker v-model="pickerColor2"></ai-color-picker>
      </div>
      <div class="block">
        <span class="demonstration">选择透明度</span>
        <ai-color-picker
          v-model="pickerColor3"
          show-alpha
        ></ai-color-picker>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}transfer`"
          target="_blank"
        >
          <h3>Transfer 穿梭框</h3>
        </ai-link>
      </header>

      <ai-transfer
        v-model="transferValue"
        :data="transferData"
      ></ai-transfer>
    </article>
  </d2-container>
</template>

<script>
export default {
  name: "Form",
  components: {},
  data() {
    const generateData = () => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      aiVueUrl:
        process.env.VUE_APP_AIVUE_URL + process.env.VUE_APP_AIVUE_PATH,
      // 表单数据对象
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      // 计数器绑定值
      num: 1,
      // 级联选择器可选项数据源
      optionsWithDisabled: [
        {
          value: "zhinan",
          label: "指南",
          disabled: true,
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components"
            },
            {
              value: "sketch",
              label: "Sketch Templates"
            },
            {
              value: "jiaohu",
              label: "组件交互文档"
            }
          ]
        }
      ],
      // 滑块绑定值
      sliderValue: 66,
      // upload上传的文件列表
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
        }
      ],
      fileList1: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
        }
      ],
      // rate绑定值
      rateValue1: null,
      ratevalue2: null,
      ratevalue3: null,
      rateColors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' },
      pickerColor1: "#409EFF",
      pickerColor2: null,
      pickerColor3: "rgba(19, 206, 102, 0.8)",
      // Transfer穿梭框的数据源
      transferData: generateData(),
      // Transfer穿梭框绑定值
      transferValue: [1, 4]
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(value) {
      console.log(value);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview1(file) {
      console.log(file);
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.form-upload-demo {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .ruleForm-demo {
    width: 460px;
    margin-left: -20px;
    .ai-select .ai-input {
      width: 360px;
    }
  }
  .upload-demo {
    width: 460px;
  }
}
.block {
  padding: 30px 0;
  text-align: center;
  border-right: 1px solid #eff2f6;
  display: inline-block;
  width: 33%;
  box-sizing: border-box;
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>
