<template>
  <el-dialog :title="type === 'add' ? '新增' : '修改'" :visible.sync="visible" width="800px">
    <el-form ref="form" inline :model="info" :rules="rules">
      <el-form-item prop="下单人手机号" label="下单人手机号" label-width="120px">
        <el-input v-model="info['下单人手机号']" maxlength="11" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="下单人昵称" label="下单人昵称" label-width="120px">
        <el-input v-model="info['下单人昵称']" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="T恤总量" label="T恤总量" label-width="120px">
        <el-input-number v-model="info['T恤总量']" :min="0" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="尺码：L" label="尺码：L" label-width="120px">
        <el-input-number v-model="info['尺码：L']" :min="0" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="尺码：XL" label="尺码：XL" label-width="120px">
        <el-input-number v-model="info['尺码：XL']" :min="0" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="尺码：3XL" label="尺码：3XL" label-width="120px">
        <el-input-number v-model="info['尺码：3XL']" :min="0" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="收货人昵称" label="收货人昵称" label-width="120px">
        <el-input v-model="info['收货人昵称']" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="收货人手机号" label="收货人手机号" label-width="120px">
        <el-input v-model="info['收货人手机号']" maxlength="11" style="width: 240px" />
      </el-form-item>
      <el-form-item prop="收货人所在地区" label="收货人所在地区" label-width="120px">
        <VDistpicker
          style="width: 100%"
          :province="info['收货人省份']"
          :city="info['收货人城市']"
          :area="info['收货人地区']"
          @province="({ value }) => info['收货人省份'] = value"
          @city="({ value }) => info['收货人城市'] = value"
          @area="({ value }) => info['收货人地区'] = value"
        />
      </el-form-item>
      <el-form-item prop="收货人地址" label="收货人地址" label-width="120px" style="width: 100%">
        <el-input v-model="info['收货人地址']" type="textarea" style="width: 621px" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="comfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import VDistpicker from 'v-distpicker'
import { addT, updT } from '@/api/data/tshsirt'
const interfaceInfo = {
  'T恤总量': '',
  '下单人手机号': '',
  '下单人昵称': '',
  '尺码：3XL': '',
  '尺码：L': '',
  '尺码：XL': '',
  '已统计T恤': '',
  '序号': '',
  '收货人地区': '',
  '收货人地址': '',
  '收货人城市': '',
  '收货人手机号': '',
  '收货人昵称': '',
  '收货人省份': ''
}
export default {
  components: { VDistpicker },
  props: {
    visible: { type: Boolean, default: false }
  },
  data() {
    return {
      info: {},
      type: '',
      rules: {
        '下单人手机号': [
          { required: true, message: '手机号格式错误', min: 11, max: 11, trigger: 'blur' }
        ],
        '下单人昵称': [
          { required: true, message: '昵称不能为空', min: 1, trigger: 'blur' }
        ],
        'T恤总量': [
          { required: true, type: 'number', min: 0 }
        ],
        '尺码：L': [
          { required: true, type: 'number', min: 0 }
        ],
        '尺码：XL': [
          { required: true, type: 'number', min: 0 }
        ],
        '尺码：3XL': [
          { required: true, type: 'number', min: 0 }
        ],
        '收货人手机号': [
          { required: true, message: '手机号格式错误', min: 11, max: 11, trigger: 'blur' }
        ],
        '收货人昵称': [
          { required: true, message: '昵称不能为空', min: 1, trigger: 'blur' }
        ],
        '收货人省份': [
          { required: true, message: '收货人省份不能为空', min: 1 }
        ],
        '收货人城市': [
          { required: true, message: '收货人城市不能为空', min: 1 }
        ],
        '收货人地区': [
          { required: true, message: '收货人地区不能为空', min: 1 }
        ],
        '收货人地址': [
          { required: true, message: '收货人地址不能为空', min: 1 }
        ]
      }
    }
  },
  methods: {
    show(info) { // 显示 dialog
      console.log(info)
      if (info) { // 修改
        this.info = info
        this.$emit('open')
        this.type = 'upata'
      } else { // 新增
        this.info = interfaceInfo
        this.$emit('open')
        this.type = 'add'
      }
    },
    comfirm() {
      // thsi.$emit('close')
      this.$refs.form.validate().then((valid) => {
        if (this.info['收货人省份'] && this.info['收货人城市'] && this.info['收货人地区']) {
          if (valid) {
            console.log(this.info)
            if (this.type === 'add') {
              this.$request(addT(this.info), data => {
                this.$emit('close')
                this.$emit('reget')
                this.$message.success('新增成功!')
              })
            } else {
              this.$request(updT(this.info), data => {
                this.$emit('close')
                this.$emit('reget')
                this.$message.success('修改成功!')
              })
            }
          }
        } else {
          this.$message.info('请选择地区')
        }
      }).catch(e => console.log(e))
    }
  }
}
</script>
