<template>
  <view :style="{'background-color':forms.marginColor,'padding-top':forms.marginTop+'rpx'}" class="checkform">
    &nbsp;
    <view :style="bgStyle">
      <view
        :class="{'s1':forms.style==1}"
        v-for="(item, index) in lists"
        :key="index"
        :style="{'margin-bottom':forms.marginBottom+'rpx'}"
      >
        <view
          class="text-label"
          :style="{'color':forms.inputLabel}"
          v-if="!(forms.style==2 && (item.key=='text' || item.key=='textarea' || item.key=='date' || item.key=='time'))"
        >{{item.name}}</view>
        <view class="content-label">
          <input
            type="text"
            v-if="item.key=='text'"
            :placeholder-style="placeholderStyle"
            :style="inputStyle"
            :placeholder="item.hint"
            :v-model="item.val"
          />
          <textarea
            type="text"
            v-else-if="item.key=='textarea'"
            :placeholder-style="placeholderStyle"
            :style="inputStyle"
            :placeholder="item.hint"
            :v-model="item.val"
          ></textarea>
          <picker
            mode="date"
            :value="item.val"
            v-else-if="item.key=='date'"
            @change="changeDateHandler"
            :data-index="index"
          >
            <input
              v-model="item.val"
              :placeholder="item.hint"
              :placeholder-style="placeholderStyle"
              :style="inputStyle"
            />
          </picker>
          <picker
            mode="time"
            :value="item.val"
            v-else-if="item.key=='time'"
            @change="changeDateHandler"
            :data-index="index"
          >
            <input
              v-model="item.val"
              :placeholder="item.hint"
              :placeholder-style="placeholderStyle"
              :style="inputStyle"
            />
          </picker>

          <u-checkbox-group
            v-else-if="item.key=='checkbox'"
            size="36"
            v-model="item.val"
          >
            <u-checkbox v-for="(x, i) in item.list" :key="i" :name="x.label" v-model="x.value" shape>{{x.label}}</u-checkbox>
          </u-checkbox-group>

          <u-radio-group
            v-else-if="item.key=='radio'"
            size="36"
            v-model="item.val">
            <u-radio v-for="(x, i) in item.list" :key="i" :name="x.label" shape="circle" @change="radioChange(x.label,index)">{{x.label}}</u-radio>
          </u-radio-group>

          <u-upload
            v-else-if="item.key=='img_upload'"
            :file-list="item.val"
            :max-count="item.num"
          />
        </view>
      </view>
      <button :style="buttonStyle" @click="submitForm">{{forms.borderContent}}</button>
    </view>
  </view>
</template>

<script>
export default {
  props: ["forms"],
  data() {
    return {
      bgStyle: "",
      inputStyle: "",
      placeholderStyle: "",
      lists: [],
      buttonStyle: ""
    };
  },
  created() {
    this.lists = this.forms.formDialog;
    this.lists.forEach(x => {
      x.val = x.default ? x.default : "";
      if (this.forms.style == 2) {
        x.hint = x.name;
      }
    });
    let s = this.forms;
    this.bgStyle = `background-color:${
      s.backgroundColor
    };background-image:url(${s.backgroundPicUrl});background-size:${
      s.backgroundWidth
    }% ${s.backgroundHeight}%;margin-top:${s.marginTop}rpx;padding:${
      s.padding
    }rpx ${s.inputPadding}rpx;`;

    this.inputStyle = `border-radius:${s.radius}px;background-color:${
      s.inputBackground
    };border:1px solid ${s.inputBorder};color:${s.inputText};height:${
      s.height
    }rpx;outline:none;padding:0 12px;font-size:12px`;

    this.placeholderStyle = `color:${s.inputTip};font-size:12px`;

    this.buttonStyle = `display:block;margin:${s.buttonMargin}rpx ${
      s.buttonPadding
    }rpx 0 ${s.buttonPadding}rpx;height:${s.buttonHeight}rpx;border-raduis:${
      s.buttonRadius
    }px;color:${s.borderText};background-color:${
      s.borderBackground
    };border:none;`;
    if (s.borderBorder) {
      this.buttonStyle += "border:1px solid " + s.borderBorder + ";";
    }
  },
  methods: {
    changeDateHandler(e) {
      this.lists.forEach((x, i) => {
        if (i == e.mp.currentTarget.dataset.index) {
          this.$set(x, "val", e.mp.detail.value);
        }
        if (x.key == "img_upload" && x.img_type == "2") {
          x.num = 2;
        }
      });
      this.$forceUpdate();
    },
    radioChange(v,i){
        this.lists[i].val=v
        this.$forceUpdate();
    },
    // checkChangeHandler(detail) {
    //     console.log(detail)
    //   this.lists.forEach((x, i) => {
    //     if (i == e.mp.currentTarget.dataset.index) {
    //       let temp = x.val;
    //       if (e.mp.currentTarget.dataset.isCheck == "1") {
    //         temp = e.mp.detail;
    //       } else {
    //         temp = e.mp.detail;
    //       }
    //       this.$set(x, "val", temp);
    //     }
    //   });
    //   this.$forceUpdate();
    // },
    checkChangeItemHandler(e){
        console.log(e)
    },
    afterRead(e) {
      //   const { file } = event.detail;
      //   // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      //   wx.uploadFile({
      //     url: "https://example.weixin.qq.com/upload", // 仅为示例，非真实的接口地址
      //     filePath: file.path,
      //     name: "file",
      //     formData: { user: "test" },
      //     success(res) {
      //       // 上传完成需要更新 fileList
      //       const { fileList = [] } = this.data;
      //       fileList.push({ ...file, url: res.data });
      //       this.setData({ fileList });
      //     }
      //   });
      console.log(e);
      //todo 文件上传
    },
    submitForm(e) {
      let msg = "";
      this.lists.forEach(x => {
        x.val = x.default ? x.default : "";
        if ((!x.val || x.val.length==0) && x.is_required==1) {
          msg=`${x.name}为必填项，请填写后提交`
          return false
        }
      });
      if(msg==''){
          msg='提交成功'
      }
      wx.showModal({
        content: msg,
        showCancel: false
      });
    }
  }
};
</script>

<style>
.checkform .s1,
.checkform .s2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.checkform .s3 {
  display: flex;
  flex-direction: column;
}
.checkform .s1 .text-label,
.checkform .s2 .text-label {
  width: 48px;
  text-align: left;
  font-size: 12px;
  margin-right: 12px;
}
.checkform .s3 .text-label {
  width: 100%;
  font-size: 12px;
}
.checkform .s1 .content-label,
.checkform .s2 .content-label {
  flex: 1;
  width: 1px;
}
.checkform .s3 .content-label {
  width: 100%;
}
.checkform textarea {
  height: 100px !important;
  width: unset !important;
  padding: 12px !important;
}
.checkform .van-checkbox__label {
  font-size: 12px !important;
}
.u-list-item{
    background:#eaeaea;
}
</style>