<template>
  <view class="container">
    <Navbar title="创建拜访/收费" canBack></Navbar>
    <u-form labelPosition="left" :model="model" :rules="rules" ref="uForm">
      <view class="usuallyCard padding margin-sm">
        <view class="text-lg padding-tb">
          基本信息
        </view>
        <view class="padding-lr-sm">
          <!-- 日期选择 -->
          <view class="" v-for="(item,index) in basisData" :key="index">
            <u-form-item :required="item.required" :label="item.label" labelWidth="100" borderBottom
              v-if="item.type === 'date'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabled
                disabledColor="#fff" border="none"></u-input>
              <u-icon slot="right" name="calendar" size="20" @click="calendarShow = true"></u-icon>
            </u-form-item>
            <!-- 输入类型 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="100" borderBottom
              v-if="item.type === 'input'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabledColor="#fff"
                border="none"></u-input>
              <view class="" style="width: 40rpx;height: 40rpx;"></view>
            </u-form-item>
            <!-- 选择类型 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="100" borderBottom
              v-if="item.type === 'select'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabled
                disabledColor="#fff" border="none"></u-input>
              <u-icon slot="right" name="arrow-down" size="20"></u-icon>
            </u-form-item>
          </view>
        </view>
      </view>

      <view class="usuallyCard padding margin-sm">
        <view class="text-lg padding-tb">
          拜访信息
        </view>
        <view class="padding-lr-sm">
          <view class="" v-for="(item,index) in visitData" :key="index">
            <!-- 单选 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="70%" borderBottom
              v-if="item.type === 'radio'">
              <u-radio-group activeColor="#EA5504" placement="row" v-model="model.bf">
                <u-radio class="margin-right" name="是">是</u-radio>
                <u-radio name="否">否</u-radio>
              </u-radio-group>
            </u-form-item>
            <!-- 日期 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="100" borderBottom
              v-if="item.type === 'date'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabled
                disabledColor="#fff" border="none"></u-input>
              <u-icon slot="right" name="calendar" size="20" @click="calendarShow = true"></u-icon>
            </u-form-item>
            <!-- 输入 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="100" borderBottom
              v-if="item.type === 'input'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabledColor="#fff"
                border="none"></u-input>
              <view class="" style="width: 40rpx;height: 40rpx;"></view>
            </u-form-item>
            <!-- 选择 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="100" borderBottom
              v-if="item.type === 'select'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabled
                disabledColor="#fff" border="none"></u-input>
              <u-icon slot="right" name="arrow-down" size="20"></u-icon>
            </u-form-item>
            <!-- 文件 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="75%" borderBottom
              v-if="item.type === 'file'">
              <u-upload width="100rpx" height="100rpx"></u-upload>
            </u-form-item>
          </view>
        </view>
      </view>

      <view class="usuallyCard padding margin-sm">
        <view class="text-lg  padding-tb">
          决策人信息
        </view>
        <view class="padding-lr-sm">
          <view class="" v-for="(item,index) in decisionMakersData" :key="index">
            <!-- 单选 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="70%" borderBottom
              v-if="item.type === 'radio'">
              <u-radio-group activeColor="#EA5504" placement="row" v-model="model.bf">
                <u-radio class="margin-right" name="是">是</u-radio>
                <u-radio name="否">否</u-radio>
              </u-radio-group>
            </u-form-item>
            <!-- 输入 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="120" borderBottom
              v-if="item.type === 'input'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabledColor="#fff"
                border="none"></u-input>
              <view class="" style="width: 40rpx;height: 40rpx;"></view>
            </u-form-item>
            <!-- 选择 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="120" borderBottom
              v-if="item.type === 'select'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabled
                disabledColor="#fff" border="none"></u-input>
              <u-icon slot="right" name="arrow-down" size="20"></u-icon>
            </u-form-item>
          </view>
        </view>
      </view>

      <view class="usuallyCard padding margin-sm">
        <view class="text-lg  padding-tb">
          收费信息
        </view>
        <view class="padding-lr-sm">
          <view class="" v-for="(item,index) in chargeData" :key="index">
            <!-- 单选 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="70%" borderBottom
              v-if="item.type === 'radio'">
              <u-radio-group activeColor="#EA5504" placement="row" v-model="model.bf">
                <u-radio class="margin-right" name="是">是</u-radio>
                <u-radio name="否">否</u-radio>
              </u-radio-group>
            </u-form-item>
            <!-- 输入 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="120" borderBottom
              v-if="item.type === 'input'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabledColor="#fff"
                border="none"></u-input>
              <view class="" style="width: 40rpx;height: 40rpx;"></view>
            </u-form-item>
            <!-- 选择 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="120" borderBottom
              v-if="item.type === 'select'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabled
                disabledColor="#fff" border="none"></u-input>
              <u-icon slot="right" name="arrow-down" size="20"></u-icon>
            </u-form-item>
          </view>
        </view>
      </view>

      <view class="usuallyCard padding margin-sm">
        <view class="text-lg  padding-tb">
          其他信息
        </view>
        <view class="padding-lr-sm">
          <view class="" v-for="(item,index) in otherData" :key="index">
            <!-- 输入 -->
            <u-form-item :required="item.required" :label="item.label" labelWidth="120" borderBottom
              v-if="item.type === 'input'">
              <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabledColor="#fff"
                border="none"></u-input>
              <view class="" style="width: 40rpx;height: 40rpx;"></view>
            </u-form-item>
            <!-- 附件 -->
            <view class="" v-if="item.type === 'attachment'">
              <u-form-item :required="item.required" :label="item.label" labelWidth="120" borderBottom
                v-if="item.type === 'attachment'">
                <u-input v-model="model.time" inputAlign="right" :placeholder="item.placeholder" disabled
                  disabledColor="#fff" border="none"></u-input>
                <view slot="right" class="text-blue">上传附件</view>
              </u-form-item>
              <view class="bg-gray">
                上传内容
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-form>
    <view class="fixedBtnCss" @click="handleConfirm">
      <u-button shape="circle" color="#CF000D">立即发起</u-button>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {

    },
    data() {
      return {
        model: {},
        rules: {},
        // 基本信息
        basisData: [{
          label: '财年',
          placeholder: "请选择财年",
          type: "date",
          required: true
        }, {
          label: '收费人员',
          placeholder: "请输入",
          type: "input",
          required: true
        }, {
          label: '兼职/全职',
          placeholder: "请选择",
          type: "select",
          required: true
        }, {
          label: '入户时间',
          placeholder: "请选择",
          type: "date",
          required: true
        }, {
          label: '项目公司/部门',
          placeholder: "请选择",
          type: "select",
          required: true
        }, {
          label: '村(小区)',
          placeholder: "请选择",
          type: "select",
          required: true
        }, {
          label: '户名',
          placeholder: "请选择",
          type: "select",
          required: true
        }, {
          label: '联系电话',
          placeholder: "请输入",
          type: "input",
          required: true
        }, {
          label: '省/市/区/街道',
          placeholder: "请选择",
          type: "select",
          required: true
        }, {
          label: '详细地址',
          placeholder: "请输入",
          type: "input",
          required: true
        }],
        // 拜访信息
        visitData: [{
          label: '本次是否拜访',
          type: "radio",
          required: true
        }, {
          label: '是否有意向',
          placeholder: "请选择",
          required: true,
          type: "select"
        }, {
          label: '房屋情况',
          placeholder: "请选择",
          required: true,
          type: "select"
        }, {
          label: '现用做饭能源',
          placeholder: "请选择",
          required: true,
          type: "select"
        }, {
          label: '现用取暖能源',
          placeholder: "请选择",
          type: "select"
        }, {
          label: '家庭人口情况',
          placeholder: "请选择",
          type: "select"
        }, {
          label: '电冰箱',
          placeholder: "请选择",
          type: "select"
        }, {
          label: '空调',
          placeholder: "请输入",
          type: "input"
        }, {
          label: '电视',
          placeholder: "请选择",
          type: "select"
        }, {
          label: '洗衣机',
          placeholder: "请选择",
          type: "select"
        }, {
          label: '热水器',
          placeholder: "请选择",
          type: "select"
        }, {
          label: '光伏',
          placeholder: "请选择",
          type: "select"
        }, {
          label: '当前地址',
          placeholder: "请输入",
          type: "input"
        }, {
          label: '上传图片',
          placeholder: "请选择",
          type: "file"
        }],
        // 决策人信息
        decisionMakersData: [{
          label: '是否获取决策人信息',
          type: "radio",
          required: true
        }, {
          label: '决策人年龄',
          placeholder: "请输入",
          required: true,
          type: "input"
        }, {
          label: '决策人收入来源',
          placeholder: "请选择",
          required: true,
          type: "select"
        }, {
          label: '决策人联系方式',
          placeholder: "请输入",
          required: true,
          type: "input"
        }],
        // 收费信息
        chargeData: [{
          label: '本次是否收费',
          type: "radio",
          required: true
        }, {
          label: '用户编号',
          placeholder: "请输入",
          required: true,
          type: "input"
        }, {
          label: '身份证号',
          placeholder: "请输入",
          required: true,
          type: "input"
        }, {
          label: '票据单号',
          placeholder: "请输入",
          required: true,
          type: "input"
        }, {
          label: '收费金额',
          placeholder: "请输入",
          required: true,
          type: "input"
        }, {
          label: '缴费方式',
          placeholder: "请选择",
          required: true,
          type: "select"
        }, {
          label: '收费类型',
          placeholder: "请选择",
          required: true,
          type: "select"
        }],
        // 其他信息
        otherData: [{
          label: '备注',
          placeholder: "请输入",
          type: "input",
        }, {
          label: '附件',
          type: "attachment",
        }, ]
      }
    },
    computed: {

    },
    onLoad() {

    },
    methods: {
      handleConfirm() {
        this.$modal.confirm('确认发起当前这条记录?', '温馨提示').then(() => {
          console.log('确定');
        }).catch(() => {
          console.log("取消");
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: 100rpx;
    background: #F2F4F3;
  }

  /deep/.u-input__content__field-wrapper__field {
    margin-right: 20rpx;
  }

  /deep/.u-upload__button {
    margin: 0;
  }

  .fixedBtnCss {
    position: fixed;
    bottom: 0;
    height: 100rpx;
    width: 100%;
    padding: 10rpx;
    background: #fff;
  }
</style>