<template>
  <div class="workorder">
    <div class="workorder__h">
      <p class="workorder__h--p">{{ $t("addworkorder1") }}</p>
    </div>
    <div class="workorder__form">
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="120"
        class="workorder__form__box"
      >
        <FormItem :label="$t('addworkorder2')" prop="title" style="width: 60%">
          <Input v-model="formValidate.title" placeholder=""></Input>
        </FormItem>
        <FormItem
          :label="$t('addworkorder3')"
          prop="module_id"
          style="width: 60%"
        >
          <Select
            v-model="formValidate.module_id"
            placeholder=""
            @on-change="changeModule"
          >
            <Option
              v-for="item in moduleList"
              :value="item.key"
              :key="item.key"
              >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
        <FormItem
          :label="$t('addworkorder4')"
          prop="problem_desc"
          style="width: 60%"
        >
          <Input
            v-model="formValidate.problem_desc"
            placeholder=""
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 12 }"
          ></Input>
        </FormItem>
        <FormItem :label="$t('addworkorder5')" prop="phone" style="width: 60%">
          <!-- <div style="display: flex;align-items: center;">
            +
            <Input v-model="formValidate.phone_pre" :placeholder=" $t('addworkorder19')" style="width: 160px;"></Input>
            <Input v-model="formValidate.phone" placeholder=""></Input>
          </div> -->
          <Input v-model="formValidate.phone" placeholder=""></Input>
          <p style="color: #989898">{{ $t("addworkorder16") }}</p>
        </FormItem>
        <FormItem
          :label="$t('addworkorder6')"
          prop="file_ids"
          style="width: 60%"
        >
          <Upload
            action="/api/platform.php?s=Platform.File.Upload"
            :multiple="true"
            :data="{ access_token: token }"
            :on-success="handleUploadLogo"
            :max-size="2048"
            :format="['jpg', 'jpeg', 'png']"
            show-upload-list
            :before-upload="uploadList"
            :on-remove="removeUploadItem"
            :on-format-error="handleFormatError"
            :default-file-list="uploadImgList"
            :on-exceeded-size="handleMaxSize"
          >
            <Button icon="ios-cloud-upload-outline">{{
              $t("addworkorder18")
            }}</Button>
            <span style="color: #989898">{{ $t("addworkorder17") }}</span>
          </Upload>
        </FormItem>
        <FormItem style="padding-bottom: 30px">
          <Button type="primary" @click="handleSubmit('formValidate')">{{
            $t("addworkorder7")
          }}</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import { AddWorkOrder, GetModuleLst, UploadImg } from '@/api/workorder'
import { getToken } from '@/libs/util'
export default {
  name: '',

  data () {
    // const validataPhone = (rule, value, callback) => {
    //   if (value === '') {
    //     console.log(val, '-----')
    //     callback(new Error('请填写区号'))
    //   } else if (this.formValidate.phone === '') {
    //     callback(new Error('请填写手机号'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      id: 0,
      token: getToken(),
      moduleList: [],
      uploadImgList: [],
      file_img: '',
      formValidate: {
        title: '',
        module_id: 1,
        problem_desc: '',
        phone_pre: '',
        phone: '',
        file_ids: ''
      },
      ruleValidate: {
        title: [
          { required: true, message: this.$t('addworkorder8'), trigger: 'blur' }
        ],
        module_id: [
          { required: true, message: this.$t('addworkorder12'), trigger: 'blur', type: 'number' }
        ],
        problem_desc: [
          { required: true, message: this.$t('addworkorder9'), trigger: 'blur' }
        ],
        phone: [
          { required: true, message: this.$t('addworkorder10'), trigger: 'blur' },
          { pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: this.$t('addworkorder11'), trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.id = this.$route.query.id
    // console.log(this.id, '------')
    this.getGetModuleLst()
  },
  methods: {
    handleSubmit (name) {
      let _this = this
      // _this.uploadimg()
      // new Promise((resolve, reject) => {
      //   _this.uploadimg()
      //   console.log('-1-1-1-1-1-')
      //   resolve()
      // }).then(function () {
      //   console.log('--------')
      // })
      _this.$refs[name].validate((valid) => {
        if (valid) {
          const data = new FormData()
          // const dataimg = new FormData()
          // dataimg.append('access_token', _this.token)
          // for (var i = 0; i < _this.uploadImgList.length; i++) {
          //   dataimg.append('file', _this.uploadImgList[i])
          //   UploadImg(dataimg).then(res => {
          //     console.log(res, '========')
          //     _this.file_img = _this.file_img + res.data.id + ','
          //     console.log(_this.file_img, 'file_imgfile_img')
          //   })
          // }
          data.append('access_token', _this.token)
          data.append('title', _this.formValidate.title)
          data.append('module_id', _this.formValidate.module_id)
          data.append('problem_desc', _this.formValidate.problem_desc)
          data.append('phone', _this.formValidate.phone)
          if (_this.file_img !== '') {
            data.append('file_ids', _this.file_img)
          }
          // if (_this.formValidate.phone_pre === '') {
          //   data.append('phone_pre', 86)
          // } else {
          //   const numReg = new RegExp(/^[0-9]*$/)
          //   let isTrue = numReg.test(_this.formValidate.phone_pre)
          //   if (!isTrue) {
          //     _this.$Message.error(_this.$t('addworkorder20'))
          //     return !!isTrue
          //   } else {
          //     data.append('phone_pre', _this.formValidate.phone_pre)
          //   }
          //   // console.log(isTrue)
          // }
          AddWorkOrder(data).then(res => {
            if (res.ret === 200) {
              _this.$Message.success(_this.$t('addworkorder13'))
              _this.$router.push({
                name: 'apiUsbWorkOrderList'
              })
            }
          })
        } else {
          _this.$Message.error(_this.$t('addworkorder14'))
        }
      })
    },
    getGetModuleLst () {
      let _this = this
      const data = new FormData()
      data.append('access_token', _this.token)
      GetModuleLst(data).then(res => {
        _this.moduleList = res.data.filter(item => item.key !== 0)
      })
    },
    changeModule (val) {
      this.formValidate.module_id = val
    },
    uploadList (val) {
      let _this = this
      if (_this.uploadImgList.length >= 5) {
        _this.$Message.error(_this.$t('addworkorder15'))
        // return false
      } else {
        _this.uploadImgList.push(val)
        _this.uploadimg(val)
      }
      // console.log(_this.file_img, '_this.file_img_this.file_img')
      return false
    },
    removeUploadItem (file, fileList) {
      // console.log(file, fileList, '删除')
      this.uploadImgList = fileList
    },
    handleUploadLogo (response, file, fileList) {
      // let url = response.data.url
      // this.$set(this.formValidate, 'app_icon', url)
      // console.log(response, file, fileList, 'response,file,fileList')
    },
    uploadimg (val) {
      let _this = this
      const data = new FormData()
      // const file_img = ''
      data.append('access_token', _this.token)
      data.append('file', val)
      UploadImg(data).then(res => {
        // console.log(res, '========')
        _this.file_img = _this.file_img + res.data.id + ','
        // console.log(_this.file_img, 'file_imgfile_img')
      })
      // return file_img
    },
    // uploadimg () {
    //   let _this = this
    //   const data = new FormData()
    //   // const file_img = ''
    //   data.append('access_token', _this.token)
    //   for (var i = 0; i < _this.uploadImgList.length; i++) {
    //     data.append('file', _this.uploadImgList[i])
    //     UploadImg(data).then(res => {
    //       console.log(res, '========')
    //       _this.file_img = _this.file_img + res.data.id + ','
    //       console.log(_this.file_img, 'file_imgfile_img')
    //     })
    //   }
    //   // return file_img
    // },
    handleFormatError (file) {
      this.$Notice.warning({
        title: this.$t('document_format_error'),
        desc: this.$t('document_format_error_content')
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: this.$t('file_too_large'),
        desc: this.$t('file_too_large_error_content')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.workorder {
  background-color: #ffffff;
  border-radius: 10px;
  &__h {
    height: 72px;
    background: rgba(255, 255, 255, 1);
    /* box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05); */
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
    padding: 0 30px;
    &--p {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      // margin-left: 30px;
      color: rgba(35, 35, 42, 1);
    }
  }
}
</style>
