<!--
 * @Description: 查看/编辑/新增广告位 弹框
 * @Author: dijia
 * @Date: 2021/7/21 15:00
-->
<template>
  <div>
    <!-- 新增的dialog -->
    <el-dialog
      :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="advertisingName" />
            </td>
            <td>
              <el-input v-model.trim="formData.advertisingName" placeholder="请输入广告位名称" :disabled="advertType==='view'" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="广告位尺寸" prop="measurement" />
            </td>
            <td>
              <el-input v-if="advertType==='view'" v-model="formData.measurement" disabled />
              <el-input v-if="advertType!=='view'" v-model="width" style="width:130px;" placeholder="宽度 单位:px" @input="proving" />
              <span v-if="advertType!=='view'" style="padding:0 6px;">*</span>
              <el-input v-if="advertType!=='view'" v-model="height" style="width:130px;" placeholder="高度 单位:px" @input="proving" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="广告位数量" prop="advertisementCount" />
            </td>
            <td>
              <el-input v-model="formData.advertisementCount" placeholder="请输入广告位数量" :disabled="advertType==='view'" @input="proving" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="是否使用" prop="useStatus" />
            </td>
            <td>
              <el-radio-group v-model="formData.useStatus" :disabled="advertType==='view'">
                <el-radio label="01">
                  启用
                </el-radio>
                <el-radio label="02">
                  停用
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
        </table>
      </el-form>
      <span v-if="advertType!=='view'" 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 {
  doAddOrUpdateAdvertisement
} from '@/api/shoppingmall/products'
/* 常用方法 */
import { characters1_auto } from '@/assets/js/validate'
export default {
  name: 'AdvertManageDialog',
  components: {
  },
  props: {
  },
  data() {
    return {
      dialogTitle: '新增广告位',
      dialogVisible: false,
      // 表单对象
      formData: {},
      width: '', // 广告位宽度
      height: '', // 广告位高度
      // 检验规则
      rules: {
        advertisingName: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ],
        advertisementCount: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ],
        useStatus: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ],
        measurement: [
          { required: true, validator: characters1_auto }
        ]
      },
      advertType: '' // 类型 add 新增/view 查看/edit 编辑
    }
  },
  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 = '新增广告位'
        this.formData = {
          advertisingName: '', // 广告位名称
          measurement: '', // 广告位尺寸
          advertisementCount: '', // 广告数
          useStatus: '01' // 是否使用 01启用,02禁用
        }
      } else if (this.advertType === 'view') { // 查看
        this.dialogTitle = '查看广告位'
        this.formData = JSON.parse(JSON.stringify(dialogData.advertData))
      } else { // 编辑
        this.dialogTitle = '编辑广告位'
        this.formData = JSON.parse(JSON.stringify(dialogData.advertData))
        const arr = this.formData.measurement.split('*')
        this.width = arr[0]
        this.height = arr[1]
      }
    },
    // 重置dialog
    resetDialog() {
      this.width = ''
      this.height = ''
      this.$refs.formDataRef.resetFields()
      this.$refs.formDataRef.clearValidate()
    },
    // 新增/编辑
    saveAdvert() {
      // 判断 宽/高 是否都填写
      if (this.width === '' || this.height === '') {
        this.formData.measurement = ''
      } else {
        this.formData.measurement = this.width + '*' + this.height
      }
      this.$refs.formDataRef.validate(valid => {
        if (!valid) return
        const message = this.advertType === 'add' ? '新增成功！' : '编辑成功！'
        doAddOrUpdateAdvertisement(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.width = this.width.replace(/[^\d]/g, '')
      // 不能是0开头
      this.width = this.width.replace(/^(0)/g, '')
      // 先把非数字的都替换掉，除了数字
      this.height = this.height.replace(/[^\d]/g, '')
      // 不能是0开头
      this.height = this.height.replace(/^(0)/g, '')
      // 先把非数字的都替换掉，除了数字
      this.formData.advertisementCount = this.formData.advertisementCount.replace(/[^\d]/g, '')
      // 不能是0开头
      this.formData.advertisementCount = this.formData.advertisementCount.replace(/^(0)/g, '')
    }
  }
}
</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>
