<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed :title="operation == 'add' ? '新增设备' : '编辑设备'"></uni-nav-bar>
    <view class="form">
      <view class="flex-col group_9">
        <view class="flex-row group_10">
          <text class="text_18">*</text>
          <text class="text_19">产品图片</text>
          <text class="tip">(图片单张大小不超过2M，数量最多5张)</text>
        </view>
        <view class="flex-row">
          <view v-for="(item, index) in form.imgItemList" :key="item.url" class="image-area">
            <image class="image__close-icon" @click="clearImage(index)" src="/static/imgs/general/close-icon.png"></image>
            <image :src="item.url" class="upload_image" @click="preview(item.url)"></image>
          </view>
          <view v-show="form.imgItemList.length < 5" class="flex-col items-center section_4" @click="selectImg">
            <image src="/static/imgs/general/camera-icon.png" class="image_6" />
            <text class="text_20">点击上传</text>
          </view>
        </view>
      </view>
      <view class="divider"></view>
      <view class="justify-between group">
        <view class="flex-row">
          <text class="text_1">*</text>
          <text class="text_2">产品名称</text>
        </view>
        <qn-easyinput
          :maxlength="10"
          v-model="form.name"
          :inputBorder="false"
          text="right"
          placeholderStyle="fontSize: 28rpx"
          placeholder="请输入产品名称"
        ></qn-easyinput>
      </view>
      <view class="divider"></view>
      <view class="group">
        <view class="flex-row">
          <text class="text_1">*</text>
          <text class="text_2">产品描述</text>
        </view>
        <qn-easyinput
          :maxlength="100"
          v-model="form.produceDescribe"
          type="textarea"
          placeholderStyle="fontSize: 28rpx "
          placeholder="请输入产品介绍"
          style="background-color: rgb(247, 248, 250); margin-top: 16rpx"
        ></qn-easyinput>
      </view>
    </view>
    <qn-footer fixed>
      <view class="flex-col items-center text-wrapper_1" @click="save">
        <text>保存</text>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { go2, back, uploadImage } from '@/utils/hook.js'
import { validateField } from '@/utils/index.js'
import { fileType } from '@/enums/index.js'
import { changeProduction, getProductionInfo } from '@/apis/productionApi.js'

const validateFields = [
  {
    name: 'imgItemList',
    rules: [{ required: true, message: '请上传设备图片' }]
  },
  {
    name: 'name',
    rules: [{ required: true, message: '请输入设备名称' }]
  },
  {
    name: 'produceDescribe',
    rules: [{ required: true, message: '请输入设备描述' }]
  }
]

export default {
  data() {
    return {
      operation: 'add', // add:新增, edit:编辑
      deviceId: null,
      form: {
        id: null,
        imgItemList: [],
        produceDescribe: '',
        name: ''
      },
      placeholderStyle: 'font-size: 28rpx;font-weight:400;'
    }
  },
  onLoad(options) {
    if (options.operation) {
      this.operation = options.operation
      if (options.operation == 'edit') {
        this.init(options.id)
      }
    } else {
      uni.showToast({
        title: '参数错误，即将返回',
        icon: 'error',
        duration: 2000,
        mask: true,
        success: () => {
          setTimeout(() => {
            back()
          }, 2000)
        }
      })
    }
  },
  methods: {
    go2,
    back,
    clearImage(index) {
      this.form.imgItemList.splice(index, 1)
    },
    // 编辑初始化
    init(id) {
      getProductionInfo({ id }).then((res) => {
        if (res) {
          Object.keys(this.form).forEach((key) => {
            this.form[key] = res[key]
          })
        }
      })
    },
    preview(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    },
    selectImg() {
      uploadImage()
        .then((urls) => {
          if (urls) {
            this.form.imgItemList.push({
              url: urls[0],
              type: fileType.IMG
            })
          }
        })
        .catch((e) => {
          uni.showToast({
            title: '上传失败:' + (e.message || e),
            icon: 'fail',
            duration: 1500
          })
        })
    },
    save() {
      for (let field of validateFields) {
        const { name, rules } = field
        const value = this.form[name]
        const { isValid, msg } = validateField(value, rules)
        if (!isValid) {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
          return false
        }
      }
      changeProduction({ ...this.form }).then((res) => {
        if (res) {
          uni.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 1500
          })
          setTimeout(() => {
            back()
          }, 1500)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  width: 750rpx;
  background-color: #fff;
}
.group {
  padding: 24rpx 28rpx 24rpx 32rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
  .text_3 {
    color: rgb(0, 122, 255);
  }
  .text_1 {
    color: rgb(245, 34, 45);
  }
  .text_2 {
    margin-left: 4rpx;
    color: rgb(0, 0, 0);
  }
}
.divider {
  margin: 0 28rpx;
  background-color: rgb(216, 216, 216);
  height: 2rpx;
}
.group_9 {
  padding: 22rpx 32rpx 32rpx;
  .group_10 {
    padding-bottom: 16rpx;
    .text_18 {
      color: rgb(245, 34, 45);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
    .text_19 {
      margin-left: 4rpx;
      color: rgb(0, 0, 0);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
    .tip {
      margin-left: 16rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      color: #858585;
    }
  }
  .section_4 {
    margin-left: 19rpx;
    padding: 23rpx 0 13rpx;
    color: rgb(76, 74, 88);
    font-size: 26rpx;
    line-height: 37rpx;
    white-space: nowrap;
    background-color: rgba(220, 222, 224, 0.5);
    border-radius: 10rpx;
    width: 120rpx;
    .image_6 {
      width: 42rpx;
      height: 36rpx;
    }
    .text_20 {
      margin-top: 12rpx;
    }
  }
}
.upload_image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
}
.video-area {
  position: relative;
  width: 686rpx;
  .video__close-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 32rpx;
    height: 32rpx;
    z-index: 100;
  }
  .video {
    width: 686rpx;
    height: 450rpx;
  }
}
.image-area {
  position: relative;
  margin-left: 19rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;

  .image__close-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 32rpx;
    height: 32rpx;
    z-index: 1;
  }
}
.text-wrapper_1 {
  margin: 0 32rpx;
  padding: 23rpx 0;
  background-color: rgb(0, 122, 255);
  border-radius: 10rpx;
  color: rgb(255, 255, 255);
}
</style>
