/* eslint-disable standard/object-curly-even-spacing */
/* eslint-disable camelcase */
<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">我要投诉</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
    </van-nav-bar>

    <van-form @submit="save">
      <van-field
        v-model="hname"
        name="门牌房号"
        label="门牌房号"

        input-align="right"
        readonly
        required
         :rules="[{ required: true, message: '请输入门牌房号' }]"
      />
      <van-field
        v-model="ownername"
        name="业主"
        label="业主"
        placeholder="请输入"
        input-align="right"
        type="tel"
        readonly
        required
        :rules="[{ required: true, message: '请输入业主' }]"
      ></van-field>
      <van-field
        v-model="tel"
        name="投诉人电话"
        label="投诉人电话"
        placeholder="请输入"
        input-align="right"
        type="tel"
        readonly
        required
        :rules="[{ required: true, message: '请输入投诉人电话' }]"
      ></van-field>
      <van-field
        v-model="place"
        name="投诉位置"
        label="投诉位置"
        placeholder="请输入投诉位置"
        input-align="right"
        type="tel"
        required
        :rules="[{ required: true, message: '请输入投诉位置' }]"
      ></van-field>

      <van-cell
        title="完成时间"
        v-model="txtdrequiredate"
         class="title1"
        required
        @click="showFinishDate = true"
      ></van-cell>
      <van-popup v-model="showFinishDate" round position="bottom">
          <van-datetime-picker
          v-model="txtdrequiredateSel"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showFinishDate = false"
          @confirm="onConfirm"
        />

      </van-popup>
      <van-field
        v-model="content"
        rows="5"
        autosize
        label="投诉内容"
        type="textarea"
        placeholder="请输入"
        class="remarkBottom"
        input-align="right"
      />
      <van-row>
        <van-col span="6" class="title1">图片上传</van-col>
        <van-col span="18" >
          <van-uploader accept="image/*"  v-model="fileList" multiple :max-count="3" :after-read="afterRead" @delete="deleteImg"   />
        </van-col>

      </van-row>

      <van-row class="bottom">
        <van-col span="12" class="bgGrey" @click="cancel">
          <van-icon name="close" />取消
        </van-col>
        <van-col span="12" class="bgRed">
          <van-button square icon="success" style="margin-bottom:5px;" type="danger" native-type="submit">保存</van-button>
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>

<script>

// eslint-disable-next-line camelcase
import { Insertfdc_pm_repairByTousu } from '@/common/api/loginApi.js'
import '../assets/css/resetvant.css'
export default {
  name: 'login',
  data () {
    return {
      hname: '',
      ownername: '',
      tel: '',
      place: '',
      txtdrequiredate: '',
      txtdrequiredateSel: new Date(),
      content: '',
      fileList: [],
      showFinishDate: false,
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(2025, 10, 1)

    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)

    this.getDefault()
  },
  computed: {
    // 计算属性
    // eslint-disable-next-line vue/return-in-computed-property
    completion: function () {}
  },
  methods: {
    getDefault: function () {
      this.hname = this.$store.state.data.hname
      this.ownername = this.$store.state.data.ownername
      this.tel = this.$store.state.data.tel
      this.txtdrequiredate = this.$util.getCurrentDate()
    },
    onConfirm: function (date, index) {
      console.info('onConfirm', date)
      this.showFinishDate = false

      this.txtdrequiredate = this.$util.getDate(date)
    },

    cancel: function () {
      this.$router.go(-1)
    },
    // 保存
    save: function () {
      let that = this

      if (this.$util.isEmpty(this.content)) {
        this.$toast('投诉内容不能为空')
        return
      }
      if (this.place.length > 20) {
        this.$toast('投诉内容不能为超过100字')
        return
      }
      let files = []
      that.fileList.filter(function (item, i) {
        console.info('item', item)
        let file = {}
        file.name = item.file.name
        file.type = item.file.type
        file.size = item.file.size
        file.content = item.content
        files.push(file)
        // console.info('item.file', item.file);
      })
      console.info(files)
      // return;
      let data = {
        dfdapplydate: new Date(),
        txtdrequiredate: that.txtdrequiredate,
        hcode: that.$store.state.data.hcode,
        ownerid: that.$store.state.data.ownerid,
        content: that.content,
        place: that.place,
        tel: that.$store.state.data.tel,
        fileList: files
      }

      console.info('save', data)
      // return;
      Insertfdc_pm_repairByTousu(data).then((res) => {
        console.info('Insertfdc_pm_repairByTousu', res)
        if (res.isSuccess) {
          // eslint-disable-next-line eqeqeq
          if (res.data == 'success') {
            that.$dialog
              .alert({
                message: '投诉提交成功'
              })
          } else {
            that.$dialog
              .alert({
                message: res.errMsg
              })
          }
        } else {
          that.$dialog.alert({
            message: res.msg
          })
        }
      })
    },
    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    },
    afterRead: function (file) { // 文件上传
      // 此时可以自行将文件上传至服务器
      console.log('file add', file)
      // this.fileList.push(file);
      console.info('fileList', this.fileList)
    },
    deleteImg: function (file) { // 上传组件删除文件时触发
      console.log('file delete', file)
      // this.fileList.pop(file);
      console.info('fileList', this.fileList)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.title1 {
  color: #aaa;
  font-size: 15px;
   padding-left:15px;
  text-align: left;

}
.title2 {
  color: #ff0000;
  text-align: left;
  font-size: 13px;
}
.infoTitle {
  color: #aaa;
  text-align: left;
}
.value1 {
  color: #000;
  font-size: 13px;
}
.infoValue {
  color: #0606af;
}
.size {
  font-size: 16px;
}
.header {
  margin-top: 10px;
  height: 70px;
  border-bottom: #cfcfcf solid 3px;
}
.titleClass {
  border-bottom: #000 solid 1px;
}
.van-tab {
  color: #ff0000;
}
.redColor {
  color: #ff0000;
}
.bgBlue {
  background: #a0a0f7;
  height: 30px;
  margin-top: 5px;
  padding-top: 5px;
}
.bgBill {
  height: 30px;
  border-bottom: #aaa solid 1px;
  padding-top: 5px;
}
.bottom {
  /* left:0; */
  bottom: 0px;
  position: fixed;
  width: 100%;
}
.bgGrey {
  background: #999999;
  height: 35px;
  justify-content: center;
  padding-top: 5px;
}
.bgRed {
  background: #ff0000;
  height: 35px;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  padding-top: 5px;
}
.remarkBottom {
  margin-bottom: 40px;
}
</style>
