<!--
 * @Description: 编辑/新增广告 弹框
 * @Author: dijia
 * @Date: 2021/7/27
-->
<template>
  <div>
    <!-- 新增的dialog -->
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="600px"
      custom-class="shop_mall_dialog"
    >
      <el-form
        ref="formDataRef"
        :rules="rules"
        :model="formData"
        :inline-message="true"
        style="padding-bottom: 10px"
      >
        <table class="advert_table">
          <tr>
            <td>
              <el-form-item label="图片名称" prop="pictureName" />
            </td>
            <td>
              <el-input v-model.trim="formData.pictureName" placeholder="请输入图片名称" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="mainFile" label="图片" prop="picture" />
            </td>
            <td>
              <upload
                list-type="picture"
                :on-change="mainFileChange"
                :data="mainFileType"
                :auto-delete="true"
                :auto-upload="true"
                :limit="1"
                file-ref="fileRefs"
                but-text="图片上传"
                title=""
                accept="image/jpg,image/jpeg,image/png"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="排序" prop="sort" />
            </td>
            <td>
              <el-input v-model="formData.sort" placeholder="请输入序号" @input="proving" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="是否使用" prop="useStatus" />
            </td>
            <td>
              <el-radio-group v-model="formData.useStatus">
                <el-radio label="01">
                  启用
                </el-radio>
                <el-radio label="02">
                  停用
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="purple" style="margin-right:50px" @click="saveAdvert()">确定</el-button>
        <el-button @click="cancelSave">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// api
import {
  doAddOrUpdateAdvertisementPicture
} from '@/api/shoppingmall/products'
/* 常用方法 */
import { characters1_auto } from '@/assets/js/validate'
import { randomData } from '@assets/js/utils'// 随机ID
/* 公共组件*/
import upload from '@comp/common/updownload/upload'// 文件上传组件
export default {
  name: 'AdvertisementDialog',
  components: {
    upload
  },
  props: {
  },
  data() {
    return {
      dialogTitle: '新增广告位',
      dialogVisible: false,
      // 表单对象
      formData: {},
      // 检验规则
      rules: {
        pictureName: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ],
        picture: [
          { required: true, message: '请上传', trigger: 'blur' }
        ],
        useStatus: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ],
        sort: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ]
      },
      advertType: '', // 类型 add 新增/edit 编辑
      // 图片
      mainFileType: {
        bizId: '', // 业务主键Id
        fileType: 'ds_ad_picture' // 文件类型
      }
    }
  },
  computed: {
  },
  watch: {
    // 判断dialog关闭，resetField
    'dialogVisible'(val) {
      if (!val) { // 关闭dialog
        this.resetDialog()
      }
    }
  },
  methods: {
    // 打开弹框时
    open(dialogData) {
      this.dialogVisible = dialogData.visible
      this.advertType = dialogData.type
      if (this.advertType === 'add') { // 新增
        this.dialogTitle = '新增广告'
        const randId = randomData()// 主键id
        this.mainFileType.bizId = randId // 图片
        this.formData = {
          pictureName: '', // 广告名称
          picture: '', // 广告图片
          sort: '',
          id: randId,
          useStatus: '01' // 是否使用 01启用,02禁用
        }
      } else { // 编辑
        this.dialogTitle = '编辑广告'
        this.formData = JSON.parse(JSON.stringify(dialogData.advertData))
        this.mainFileType.bizId = this.formData.id
      }
    },
    // 重置dialog
    resetDialog() {
      this.mainFileType.bizId = ''
      this.$refs.formDataRef.resetFields()
      this.$refs.formDataRef.clearValidate()
    },

    // 新增/编辑
    saveAdvert() {
      this.$refs.formDataRef.validate(valid => {
        if (!valid) return
        this.formData.bizId = this.mainFileType.bizId
        this.formData.fileType = this.mainFileType.fileType
        const message = this.advertType === 'add' ? '新增成功！' : '编辑成功！'
        doAddOrUpdateAdvertisementPicture(this.formData).then(res => {
          if (res.header.ret === '0') {
            this.$emit('repload')
            this.$message.success(message)
            // 关闭dialog
            this.dialogVisible = false
          }
        })
      })
    },
    // 取消
    cancelSave() {
      this.dialogVisible = false
    },
    // input过滤只能输入自然数
    proving() {
      // 先把非数字的都替换掉，除了数字
      this.formData.sort = this.formData.sort.replace(/[^\d]/g, '')
      // 前两位不能是0加数字
      this.formData.sort = this.formData.sort.replace(/^(0)*(\d[0-9]*)/g, '$2')
    },
    //  主图
    mainFileChange(file, fileList) {
      if (fileList.length > 0) {
        setTimeout(() => {
          this.$set(this.formData, 'picture', true)// 上传了
          this.$set(this.formData, 'fileId', fileList[0].fileData.fileId)// 上传了
        }, 1000)
      } else {
        this.$set(this.formData, 'picture', '')// 未上传
      }
    }
  }
}
</script>

<style lang="less" scoped>

.advert_table {
  width: 100%;

  td {
    border: 1px solid #E0E0E0;
    line-height: 20px;
    padding: 6px;

    .el-form-item--small.el-form-item {
      margin: 0;
    }

    .el-input {
      width: 90%;
    }
  }

  >tr td:nth-child(odd) {
    background-color: #F5F7F9;
    width: 20%;
  }

  >tr td:nth-child(even) {
    width: 30%;
  }
}
</style>
